New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@ergosign/storybook-addon-pseudo-states-html
Storybook decorator to enable automatic generation and displaying of CSS pseudo states for components.
npm install @ergosign/storybook-addon-pseudo-states-html
Last updated 9 months ago
37
Downloads per week
Readme View on GitHub

Storybook Addon Pseudo States

Storybook Addon Pseudo States allows you to automatically display pseudo states (and attribute states) of a component in Storybook's preview area.

Framework Support

Framework Display States Tool-Button to show/hide
Angular + +
React + +
Lit + +
HTML + +
Vue + +

Getting started

First of all, you need to install Pseudo States into your project as a dev dependency.

npm install @ergosign/storybook-addon-pseudo-states-html --save-dev

Then, configure it as an addon by adding it to your addons.js file (located in the Storybook config directory).

To display the pseudo states, you have to add specific css classes to your styling, see Styling

Then, you can set the decorator locally, see Usage.

Styling

Automatically generated with PostCss Webpack config (recommended)

Add postcss-loader to a Storybook custom webpack config

module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              // ATTENTION when using css modules
              modules: {
                // !!! must not use [hash]'
                localIdentName: '[path][name]__[local]',
              },
            },
          },
          // Add loader here
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};

Add postcss-pseudo-classes.

npm install postcss-pseudo-classes --save-dev

And enable it in postcss.config.js

module.exports = {
  plugins: {
    'postcss-pseudo-classes': {
      // prefix: 'pseudoclass--',
      // blacklist: ':not'
    },
  },
};
When using a custom `prefix` parameter, use the same for postcss-pseudo-classes
module.exports = {
  plugins: {
    'postcss-pseudo-classes': {
      prefix: 'pseudoclass-example-prefix',
    },
  },
};

Manually

In addition to the standard pseudo state styling, you have to add fake classes consisting of prefix + pseudostate (\:hover, \:focus, \:active, \:yourOwnState) by yourself. Be aware that default prefix is \:. When using your own prefix, update your styling accordingly.

.element {
  //element styling

  &:hover,
  &\:hover {
    // hover styling
  }
}
With a custom prefix

custom prefix: .pseudoclass--

// in your story
parameters: {
    withPseudo: {
        selector: "element",
        prefix: "pseudoclass--"
    }
}
.element {
  //element styling

  &:hover,
  &.pseudoclass--hover {
    // hover styling
  }
}

Show/Hide Toolbar-Button

You can enable a toolbar button that toggles the Pseudo States in the Preview area.

See Framework Support which Frameworks support this feature.

Enable the button by adding it to your main.js file (located in the Storybook config directory):

// main.js

module.exports = {
  addons: ['@ergosign/storybook-addon-pseudo-states-html/register'],
};

Usage

WARNING: withPseudo should always the first element in your decorators array because it alters the template of the story.

General

Component Story Format (CSF, recommended)
import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-html';

const section = {
  title: 'Button',
  decorators: [withPseudo],
  parameters: {
    withPseudo: { selector: 'button' },
  },
};
export default section;

export const Story = () => {
  return {
    component: ButtonComponent,
  };
};
storyOf Format
import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-html';

storiesOf('Button', module)
  .addDecorator(withPseudo)
  .addParameters({
    withPseudo: {
      selector: 'button', // css selector of pseudo state's host element
      pseudo: ['focus', 'hover', 'hover & focus', 'active'],
      attributes: ['disabled', 'readonly', 'error'],
    },
  })
  .add('Icon Button', () => <Button />);

There is a default configuration for selector, pseudos and attributes. Thus, you can leave withPseudo options empty.

With html

TODO

Parameters & Types

See Types

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI