Never Publish Malarkey

    @ergosign/storybook-addon-pseudo-states-angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1-alpha.59 • Public • Published

    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.

    example

    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-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):

    main.js;
    
    module.exports = {
      presets: ['@ergosign/storybook-addon-pseudo-states-angular/preset-postcss'],
    };

    This creates for each css pseudo class an equivalent as normal css class (for instance :hover to \:hover), so that you can use it in element's class attribute (<div class=":hover">Element in hover state</div>).

    You can modify post css loader options (see type definition of PseudoStatesPresetOptions):

    module.exports = {
       presets: [
           {
                name:"@ergosign/storybook-addon-pseudo-states-angular/preset-postcss",
                options: {
                    rules: [/\.scss$|\.sass$/, ".sass", ...],
                    cssLoaderOptions: CssLoaderOptions,
                    postCssLoaderPseudoClassesPluginOptions: {
                        prefix: 'pseudo-sates--', // default for angular
                        blacklist: [':nth-child', ':nth-of-type']
                    }
                }
            }     
        ] 
    }

    It's not recommended to alter the prefix option. But if you need to be change the prefix then it must not start with : because Angular's scoping put scope's context before each colon and breaks styling.

    If you set another prefix you have to set the same for the addon, too. Therefore, add the following to your .storybook/preview.js:

    addParameters({
        withPseudo: {
            prefix: "still-pseudo-states--",
        },
    });

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

    Usage

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

    Component Story Format (CSF, recommended)

    The component field is required because it is used by the addon to register the component to an internal used module (Module Metadata declarations).

    import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-angular';
    
    const section = {
      component: ButtonComponent,
      title: 'Button',
      moduleMetadata: {
        declarations: [ButtonComponent],
        imports: [CommonModule],
      },
      decorators: [withPseudo()],
      parameters: {
        // <button> is a ViewChild of ButtonComponent
        withPseudo: { selector: 'button' },
      },
    };
    export default section;
    
    export const Story = () => {
      return {
        component: ButtonComponent,
        moduleMetadata: {
          declarations: [ButtonComponent],
          imports: [CommonModule],
        },
        // ButtonComponent has same properties as props' keys
        props: {
          label: 'Test Label',
          anotherProperty: true,
        },
      };
    };
    
    export 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

    import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-angular';
    
    storiesOf('Button', module)
      .addDecorator(withPseudo)
      .addParameters({
        withPseudo: {
          selector: 'button', // css selector of pseudo state's host element
          pseudos: ['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.

    Attributes & Permutations

    You can display the component in an attribute/@Inputs state by adding the attribute name (and value) to attributes option.

    The permutations option displays the component in each pseudo (from pseudos) and attribute (from attributes) state mixed with the applied attribute added to permutations option.

    import { withPseudo } from '@ergosign/storybook-addon-pseudo-states-angular';
    
    const section = {
      component: ButtonComponent,
      title: 'Button',
      moduleMetadata: {
        declarations: [ButtonComponent],
        imports: [CommonModule],
      },
      decorators: [withPseudo()],
      parameters: {
        withPseudo: { selector: 'button' },
        pseudos: ['focus', 'hover', 'hover & focus', 'active'],
        attributes: ['disabled', 'readonly'],
        permutations: [
            'error', // applied default value is true
            {
                label: "Light theme",
                name: "theme", // @Input name
                value: "dark"
            }
        ]
      },
    };
    export default section;
    
    export const Story = () => {
      return {
        component: ButtonComponent,
        moduleMetadata: {
          declarations: [ButtonComponent],
          imports: [CommonModule],
        },
        // ButtonComponent has same properties as props' keys
        props: {
          label: 'Test Label',
          anotherProperty: true,
        },
      };
    };

    Parameters & Types

    See Types

    Install

    npm i @ergosign/storybook-addon-pseudo-states-angular

    DownloadsWeekly Downloads

    47

    Version

    0.0.1-alpha.59

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    53

    Last publish

    Collaborators

    • ergosign-dev
    • philippone
    • grouchal
    • bjoern.bg