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 | + | +* |
* Could lead to sync problems with other addons, like knobs
Getting started
First of all, you need to install Pseudo States into your project as a dev dependency.
npm install 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
moduleexports = module: rules: test: /\.$/ 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' ;
npm install postcss-pseudo-classes --save-dev
And enable it in postcss.config.js
moduleexports = plugins: 'postcss-pseudo-classes': // prefix: 'pseudoclass--', // blacklist: ':not' ;
When using a custom `prefix` parameter, use the same for postcss-pseudo-classes
moduleexports = 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
With a custom prefix
custom prefix: .pseudoclass--
// in your storyparameters: withPseudo: selector: "element" prefix: "pseudoclass--"
.element
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 moduleexports = addons: 'storybook-addon-pseudo-states-angular/register';
Usage
WARNING:
withPseudo
should always the first element in yourdecorators
array because it alters the template of the story.
General
Component Story Format (CSF, recommended)
; const section = title: 'Button' decorators: withPseudo parameters: withPseudo: selector: 'button' ;; const Story = { return component: ButtonComponent ;};
storyOf Format
; ;
There is a default configuration for StateComposition
.
With html
TODO
Parameters
;; ;; ;;;