New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
Drupal SCSS Theming
Storybook addon to show themes and use ecosystem for global theme value.
npm install @square360/drupal-scss-addon
Last updated about 1 month ago
9
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.

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} />;
};
Join the community
5,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI