Tom
August 21, 2020
Storybook is a fantastic tool for building your UI components in an isolated environment ensuring that you build your components in a robust and reusable fashion as you should for the various UI frameworks it supports. If you’re like us, your application has multiple themes,and you’d like to represent this and ensure you’re building components that look correct in all your themes.
You might notice that out of the box, storybook doesn’t have anything to help you with this, that’s where addons come in, we’ll be using one to get our themes in storybook.
We would like a selector in storybook that is going to apply our theme class to the body tag, and thus, theming all our components.
We use storybook with angular, so that is how this guide is going to be targeted today however the information used here should be applicable to any of the supported frameworks.
Themes in our angular application are defined by adding a class to the <body> </body>tag, then in our styles.scss we are importing and including our different theme files and colours depending on the class applied, see below how one of our components works with the different body classes:
The first thing we need to do is get the storybook-addon-themes add on for storybook.
npmi -D storybook-addon-themes
Once installed, we need to add the add on to our storybook instance by adding it to our addons in our main.js as seen below (line 9):
Now we have added the add on, we can add our themes to the preview.js file, in it’s most simple form, a theme consists of three properties:
So, lets add our themes:
Now you should see the selector in your storybook environment, and, when you switch to a new theme you should see the body class within the preview change and add the class(es) you specified.
And with that, you should see that any colours you applied to that class should now be seen too.
So all is good! Though, you might notice your background is always white, how can we deal with that?
We found the best way, was to wrap all the stories with their own div, so that we can add padding and mock the background of our application without having to add anything to our body in styles.scss that could affect the actual app.
To do this we need to go to our stories file, and in our export default add a new property in the decorators array.
In our instance here, any stories within this stories file (we have 5) will be wrapped in a div with the classes nv-storybook-story and mat-drawer-container, we did this so we can add the padding and any storybook preview specific styling via the nv-storybook-story class. And we use the mat-drawer-container to replicate how the backgrounds will be in our actual app as we have the background colour of the mat-drawer-container set the the primary background of the theme.
This means when we add this to a story file all the stories will have a background that changes dynamically with the theme, and have padding allowing the component some room to breathe. All you need to remember is when you make a new component, add the above snippet to the export default.
That should get you up and running with using themes in storybook! Happy Coding!
If you have any feedback, improvements, corrections or would like to ask me about this blog post, feel free to email me at tom_bickle@intergral.com.
A Web, Tech, Football and Video Game enthusiast. Anything can be settled in smash! I’m a Software Engineer on the nerd.vision team with various front-end and back-end skills.
