Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Instructor: [00:00] Start by adding the info addon to your storybook project. The info addon doesn't require additional configuration on top of what you already have. You just have a function called withInfo, which you can wrap around your existing elements.

[00:23] Inside withInfo, you can type in some descriptive texts. Now, when you run storybook, it will show the text. If you click show info on the top right, you will see a description of the component, as also source and types if you use prop types.

[00:47] WithInfo does this markdown, so you can do things like escaping and putting code blocks within your markdown for further descriptive ability. If you save it over here, you should be able to see that additional markdown up in your info box.

[01:08] You can optionally style your info box by passing in an object, and declaring the component styles, like so. Here, I am putting a red color on the H1s, and passing in the same text that I used to have -- description, button.

[01:45] If I reload over here, I can see that the H1 has been styled. I don't necessarily recommend defining your own styles inline every single time. I do like setting up utilities folder, utilities.js, and then defining the styles that I like, particularly the inline display, and then using this as a high-order component from my other stories.

[02:12] Over in my stories, I can just replace withInfo with my new utility, wInfo from utilities. Wherever I used to say withInfo, I can just say wInfo and skip the styling. That seems a lot more reasonable to use.

[02:38] Now, when I refresh, this is how it looks by default, with everything inline and no additional click needed on the top right.