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-lit --save-dev
Then, configure it as an addon by adding it to your main.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)
Preset-Postcss adds postcss-loader to Storybook's custom webpack config.
You must also install postcss-pseudo-classes. Unfortunately, latest version is only tagged and not released. Please use at least tagged version 0.3.0
npm install postcss-pseudo-classes@0.3.0 --save-dev
Then add the preset preset-postcss
to your configuration in main.js
(located in the Storybook config directory):
mainjs; moduleexports = presets: name: 'storybook-addon-pseudo-states-lit/preset-postcss' // set rules for which postcss-loader will be attached to // if not set, it tries to add postcss-loader to all scss|sass rules options: postCssLoaderOptions: rules: /\.comp\.scss$/ ;
If postCssLoaderOptions
are not set, the preset tries to add postcss-loader
to all available scss|sass
rules.
Show/Hide Toolbar-Button
You can enable a toolbar button that toggles the Pseudo States in the Preview area.
Enable the button by adding it to your main.js
file (located in the Storybook config directory):
// main.js moduleexports = addons: name: 'storybook-addon-pseudo-states-lit' options: visibleByDefault: true ;
visibleByDefault
option defaults to false
Usage
WARNING:
withPseudo
should always the first element in yourdecorators
array because it alters the template of the story.
Component Story Format (CSF, recommended)
; //not tested yet
storyOf Format
; ;
There is a default configuration for StateComposition
. Thus, you can leave it empty.
Parameters
;; ;;;