Drupal SCSS Theming
Storybook addon to show themes and use ecosystem for global theme value.
Storybook Addon Drupal SCSS Theming
Storybook addon to show themes and use cohesive ecosystem for global theme value. Addon will place other theme stylesheets on head of story book and remove on switch component or change theme.
Installation
From the root of your repo:
yarn add -D @square360/drupal-scss-addon
Getting started
First enable the addon. Add it to the addons
in the .storybook/main.js
.
// .storybook/main.js
module.exports = {
// ...
addons: [
// ...
'@square360/drupal-scss-addon',
],
// ...
};
Then, configure the supportedThemes
and selectedTheme
parameters in .storybook/preview.js
.
supportedThemes
is an object where the keys are the IDs of the dropdown, and the values are the theme names that will show in the dropdown of the storybook preview toolbar.
// .storybook/preview.js
export const parameters = {
// ...
selectedTheme: "primary",
supportedThemes: {
primary: "Primary",
secondary: "Secondary"
},
// ...
};
Start Storybook
yarn storybook
Usage in Stories
The currently selected theme is available in selectedTheme
globally, you can access it in MyComponent.stories.js
. eg:
const Template = (args, { globals: { selectedTheme } }) => {
console.log("Template selectedTheme:", selectedTheme);
return <Button {...args} selectedTheme={selectedTheme} />;
};
Usage with CSS
There is another way to use this addon. You just enable ../dist/
staticDir in .storybook/main.js
globally.
module.exports = {
stories: [
'../src/**/*.stories.@(js|ts)',
],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@square360/drupal-scss-addon',
],
staticDirs: [
'../dist/', // this one
'./fontawesome'
],
};
Now your directory structure should be like this:
/{component-name}
{component-name}.stories.js
{component-name}.js
{component-name}.scss
{component-name}.twig
{component-name}.yml
/{theme-name}
{component-name}.{theme-name}.js
{component-name}.{theme-name}.scss
{component-name}.{theme-name}.yml (optional)
{component-name}.{theme-name}.twig (optional)
The above should create the following files inside the dist
folder on root:
{component-name}/{component-name}.css
{component-name}/{component-name}.js
{component-name}/{theme-name}/{component-name}.{theme-name}.css
{component-name}/{theme-name}/{component-name}.{theme-name}.js
By following the above instruction addon will call css files according the story component loaded and theme changes from dropdown.