Enhance Stories to Use Storybook Theming Functionality

The ability to view Storybook stories with different themes was added in https://github.com/grommet/grommet/pull/5674.

We need to make adjustments to the stories component by component to take advantage of the theming ability. The Button stories are currently using this enhancement and can be viewed on storybook. While on a Button story you can change the theme by selecting the ‘Theme’ button in the top bar above the story and then selecting a theme from the drop down. Notice the stories changes style when you switch themes. We want to add this feature to all the stories.

For each story within a component if the story…

1. Is wrapped with <Grommet theme={grommet}>...</Grommet> – remove <Grommet theme={grommet}> and replace with the following comment: // Uncomment <Grommet> lines when using outside of storybook // <Grommet theme={...}> – comment out </Grommet> – remove import { Grommet } and import { grommet }
2. Uses a custom theme – create a CustomThemed folder directly under the component/stories folder – move the story into the CustomThemed folder – change the story export so that it shows up in a ‘Custom Themed’ folder within storybook. (Example: export default { title: 'Controls/Button/Custom Themed/Active' };)

For examples take a look at https://github.com/grommet/grommet/pull/5674. The Button/stories/Basic.js file shows an example of a story wrapped with <Grommet theme={grommet}>. The Button/stories/CustomThemed/Active.js shows an example of a story that uses a custom theme.

• Accordion #5843
• Anchor #5737
• Avatar #5840
• Box #5962
• Button https://github.com/grommet/grommet/pull/5674
• Calendar #5843
• Card #5843
• Carousel #5843
• CheckBoxGroup #5740
• Chart #5764
• CheckBox #5740
• Clock #5767
• Collapsible #5870
• DataChart #5765
• DataTable #5870
• DateInput #5740
• Diagram #5962
• Distribution #5962
• Drop #5769
• DropButton #5737
• FileInput #5740
• Footer #5962
• Form #5962
• FormField #5962
• Grid #5919
• Header #5772
• Heading #5768
• Image #5962
• InfiniteScroll #5962
• Keyboard #5962
• Layer #5970
• List #5752
• Main #5962
• Markdown #5962
• MaskedInput #5962
• Menu #5737
• Meter #5766
• NameValueList #5962
• Nav #5770
• Notification #5755
• Pagination #5962
• Paragraph #5750
• RadioButton #5740
• RadioButtonGroup #5740
• RangeInput #5962
• RangeSelector #5962
• Select #5955
• Sidebar #5955
• SkipLinks #5955
• Spinner #5754
• Stack #5747
• Table #5955
• Tabs #5771
• Text #5745
• TextArea #5909
• TextInput #5909
• Tip #5945
• Video #5744
• WorldMap #5742

[jcfilben]

All applicable stories have been enhanced to allow theme switching. Thank you to everyone that helped with this issue!

[jcfilben]

Yes as I expected. But which prop name should we use to pass the options?

I think we can just call the prop options