New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Drupal SCSS Theming
Storybook addon to show themes and use ecosystem for global theme value.
npm install @square360/drupal-scss-addon
Last updated 4 months ago
5
Downloads per week
Readme View on GitHub

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.

Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI