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-angular --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: 'storybook-addon-pseudo-states-angular/preset-postcss';
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.
Component Story Format (CSF, recommended)
; const section = component: ButtonComponent title: 'Button' moduleMetadata: declarations: ButtonComponent imports: CommonModule decorators: parameters: // <button> is a ViewChild of ButtonComponent withPseudo: selector: 'button' ;; const Story = { return component: ButtonComponent moduleMetadata: declarations: ButtonComponent imports: CommonModule // ButtonComponent has same properties as props' keys props: label: 'Test Label' anotherProperty: true ;}; const StoryWithTemplate = { return // always provide component! component: ButtonComponent moduleMetadata: entryComponents: ButtonComponent // required to support other addons, like knobs addon declarations: ButtonComponent imports: CommonModule template: `<test-button [label]="label" [anotherProperty]="anotherProperty"></test-button>` props: label: 'Test Label' anotherProperty: true ;};
storyOf Format
; ;
There is a default configuration for StateComposition
.
Parameters
;; ;; ;;;