storybook-addon-root-attribute
v1.0.2
Published
Storybook Addon Root Attribute to switch html or body attribute at runtime for your story
Downloads
36,452
Maintainers
Readme
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"
}
]
}
});