Storybook 插件 Drupal SCSS 主题

Storybook 插件，用于显示主题并使用统一的生态系统进行全局主题值。插件将其他主题样式表放置在 story book 的头部，并在切换组件或更改主题时将其移除。

安装

从仓库根目录

yarn add -D @square360/drupal-scss-addon

入门

首先启用插件。将其添加到 .storybook/main.js 中的 addons 中。

// .storybook/main.js
module.exports = {
  // ...
  addons: [
    // ...
    '@square360/drupal-scss-addon',
  ],
  // ...
};

然后，在 .storybook/preview.js 中配置 supportedThemes 和 selectedTheme 参数。

supportedThemes 是一个对象，其中键是下拉菜单的 ID，值是在 storybook 预览工具栏下拉菜单中显示的主题名称。

// .storybook/preview.js
export const parameters = {
  // ...
  selectedTheme: "primary",
  supportedThemes: {
    primary: "Primary",
    secondary: "Secondary"
  },
  // ...
};

启动 Storybook

yarn storybook

在故事中使用

当前选定的主题在全局范围内可用，您可以在 MyComponent.stories.js 中访问它。例如

const Template = (args, { globals: { selectedTheme } }) => {
  console.log("Template selectedTheme:", selectedTheme);

  return <Button {...args} selectedTheme={selectedTheme} />;
};

与 CSS 结合使用

还有另一种使用此插件的方法。您只需全局启用 .storybook/main.js 中的 ../dist/ staticDir。

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'
  ],
};

现在您的目录结构应该是这样的

/{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)

以上操作应该在根目录下的 dist 文件夹中创建以下文件

{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

按照上述说明，插件将根据加载的 story 组件和从下拉菜单中更改的主题调用 css 文件。