Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/le0pard/storybook-addon-root-attribute
Storybook addon, which provide ability to change html, body or some element attribute
https://github.com/le0pard/storybook-addon-root-attribute
addon addons attribute html root storybook
Last synced: 10 days ago
JSON representation
Storybook addon, which provide ability to change html, body or some element attribute
- Host: GitHub
- URL: https://github.com/le0pard/storybook-addon-root-attribute
- Owner: le0pard
- License: mit
- Created: 2019-04-07T19:06:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-15T17:58:09.000Z (about 1 month ago)
- Last Synced: 2024-10-25T09:50:18.149Z (22 days ago)
- Topics: addon, addons, attribute, html, root, storybook
- Language: JavaScript
- Homepage: https://storybook-addon-root-attribute.leopard.in.ua
- Size: 2.03 MB
- Stars: 18
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon Root Attribute [](https://travis-ci.com/le0pard/storybook-addon-root-attribute)
Storybook Addon Root Attribute to switch html, body or some element attribute at runtime for your story [Storybook](https://storybook.js.org)
## [Demo](https://storybook-addon-root-attribute.leopard.in.ua)
## Installation
```sh
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:
```js
import "storybook-addon-root-attribute/register";
```
or create a file called `main.js` and add addon in `addons` section:
```js
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:
```js
// 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:
```js
// per story
storiesOf("Addons|RootAttribute", module).add(
"Camera Icon",
() => Camera Icon,
{
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:
```js
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:
```js
addDecorator(withRootAttribute);
addParameters({
rootAttribute: {
root: "html",
attribute: "class",
defaultState: {
name: "Default",
value: null
},
states: [
{
name: "Dark",
value: "dark"
},
{
name: "A11Y",
value: "accessibility"
}
]
}
});
```