National Pizza Magistrate

    storybook-addon-root-attribute

    1.0.2 • Public • Published

    Storybook Addon Root Attribute Build Status

    Storybook Addon Root Attribute to switch html, body or some element attribute at runtime for your story Storybook

    Demo

    Installation

    yarn add -D storybook-addon-root-attribute

    Configuration

    Then create a file called addons.js in your storybook config and add following content to it:

    import "storybook-addon-root-attribute/register";

    or create a file called main.js and add addon in addons section:

    module.exports = {
      ...
      addons: [
        ...
        'storybook-addon-root-attribute/register'
      ]
    };

    Usage

    You need add the all the attribute values at compile time using the withRootAttribute decorator. They can be added globally or per story. You can then choose which ones root attribute activate on addon ui:

    // Import from @storybook/X where X is your framework
    import {
      configure,
      addDecorator,
      addParameters,
      storiesOf
    } from "@storybook/react";
    import { withRootAttribute } from "storybook-addon-root-attribute";
    
    // global
    addDecorator(withRootAttribute);
    addParameters({
      rootAttribute: {
        defaultState: {
          name: "Default",
          value: null
        },
        states: [
          {
            name: "Dark",
            value: "dark"
          }
        ]
      }
    });

    You can use the rootAttribute parameter to override resources on each story individually:

    // per story
    storiesOf("Addons|RootAttribute", module).add(
      "Camera Icon",
      () => <i className="fa fa-camera-retro"> Camera Icon</i>,
      {
        rootAttribute: {
          defaultState: {
            name: "Default",
            value: null
          },
          states: [
            {
              name: "Dark",
              value: "dark"
            }
          ]
        }
      }
    );

    If you want to use a tooltip (panel will not dissapear), you need to set tooltip in parameters with true value:

    addParameters({
      rootAttribute: {
        tooltip: true,
        defaultState: {
          name: "Default",
          value: null
        },
        states: [
          {
            name: "Dark",
            value: "dark"
          }
        ]
      }
    });

    Tooltip and panel will not sync about change attribute.

    Configuration

    Configuration params for rootAttribute parameter:

    Name Default Variants Description
    root 'html' 'html', 'body', or first element returned by 'document.querySelector(), or if none found -- 'html'' Root node, which attribute will changed by addon
    attribute 'class' any valid attribute name Attribute name
    defaultState {} should contain name and value Default state for attribute. Value nil will remove attribute from root
    states [] array with objects, which contain unique name and value for attribute All needed states for attribute values. Each object should contain unique name (for button) and value for attribute
    tooltip false boolean value Add tooltip button for storybook

    Configuration example:

    addDecorator(withRootAttribute);
    addParameters({
      rootAttribute: {
        root: "html",
        attribute: "class",
        defaultState: {
          name: "Default",
          value: null
        },
        states: [
          {
            name: "Dark",
            value: "dark"
          },
          {
            name: "A11Y",
            value: "accessibility"
          }
        ]
      }
    });

    Install

    npm i storybook-addon-root-attribute

    DownloadsWeekly Downloads

    3,724

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    621 kB

    Total Files

    8

    Last publish

    Collaborators

    • leopard_me