le0pard / storybook-addon-root-attribute

Storybook addon, which provide ability to change html, body or some element attribute

Storybook Addon Root Attribute

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"
      }
    ]
  }
});

storybook-addon-root-attribute's Issues

Access current value within the template

Hi,

Is there a way to get the currently selected value of root attribute from within a template?

Something like:

...
  rootAttribute: {
    defaultState: {
      name: "Dark",
      value: "dark"
    },
    states: [
      {
        name: "Light",
        value: null
      }
    ]
  },
...

const Template: Story = (state, context) => (
  context.rootAttribute // returns "dark"
);

Overwrite default state on stories

Hi
First of all thanks for the addon.
I tried to overwrite the default state on my story but unless I select a whole new state i get the error 'ERROR: Found non unique name values'. Would be cool if it was possible to select one of the already defined states on my stories.
I can try to do a PR if you like.

Best Esben

Feature Request: (optional) Toolbar Access

First of all -- thank for contributing this addon.

I think this could be improved by providing a dropdown select in the toolbar to select the option, rather than a tab within the addon trays.

This is something I could potentially create a pull request for if you believe this functionality should be in the addon.

Can we set title to the Root Attribute tab in Storybook panel?

Thanks for creating this beautiful addon.

One use case, Root attribute tab gets added to the Storybook panel but there is no way I could set the title for it. As per the code in function.js the title seems to be hard coded.

Can we add functionality to pass title to rootAttribute param in addParameters api as below?

// config.js

addParameters({
  rootAttribute: {
    title: 'My Specific title', /* Like this */
    defaultState: {
      name: "Disabled",
      value: null
    },
    states: [
      {
        name: "Enabled",
        value: "custom-class"
      }
    ]
  }
});

Or is there any other way where I can set title to the tab in storybook?

Version I am using: "storybook-addon-root-attribute": "^1.0.2"

Doesn't work when landing on "Docs" view on first page load

Hey there! So, if I'm on the "Docs" tab and do a hard page refresh, the attribute doesn't get added until navigating away (via client-side nav). If I'm on the "Canvas" tab first and hit refresh, this doesn't happen - it successfully gets added on first page load.

You can see the behavior in the GIF below - here I'm trying to add data-theme="light" to the body. It doesn't get added until I navigate to the "Canvas" tab.

Any way around this? I don't think "Docs" tab gets served by default, but it's a little jarring if I'm already on "Docs" and my browser window refreshes e.g. if Storybook gets rebuilt.