1/15

• Added updates to tests

Overview of PR:

1. Have included multiple configurable CSS properties for sidebar listed below:

• color
• background-color
• height
• --story-page-vh
• top
• max-height
• max-width
• min-width
• outline
• z-index
• width
• padding
• border

2. In amp mode these can be directly controlled by user supplied CSS

         amp-sidebar {
              color: ${foregroundColor};
              background-color: ${backgroundColor};
          }
          amp-sidebar::part(backdrop) {
              background-color: ${maskBackgroundColor};
          }

3. In preact mode pass in a style object as the style and backdropStyle props. To have the style included inline in the rendered element.

      <Sidebar 
        style={{color: foregroundColor, backgroundColor: someColor}}
        backdropStyle={{backgroundColor: someColor}}
      />

12/18

• Added additional styles that user can configure
• Updated amp storybook

To do:

1. Update Preact storybook
2. Add tests

Add feature to customize colors in amp-sidebar

1. sidebar color - customize the color of text in the sidebar
2. sidebar background - customize the color of the background in the sidebar
3. mask color - customize the mask color

To change these in amp mode include the following css:

         amp-sidebar {
              color: ${foregroundColor};
              background-color: ${backgroundColor};
          }
          amp-sidebar::part(mask) {
              background-color: ${maskBackgroundColor};
          }

To change these in preact mode include the following props:

      <Sidebar 
        style={{color: foregroundColor, backgroundColor: someColor}}
        maskStyle={{backgroundColor: someColor}}
      />

Open Questions:

1. Should we make the customizing the mask and sidebar symmetric in amp mode? (same syntax) (i.e. to change sidebar color use a CSS selector like amp-sidebar::part(sidebar))

Answer: no, the current is an existing pattern, see: https://jsbin.com/nawecap/edit?html,css,output