# @gridscale/storybook-addon-root-attribute

> Modified version of Storybook Addon Root Attribute to switch html or body attribute at runtime for your story

Latest version **0.2.7** (published 2020-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gridscale/storybook-addon-root-attribute
pnpm add @gridscale/storybook-addon-root-attribute
yarn add @gridscale/storybook-addon-root-attribute
bun add @gridscale/storybook-addon-root-attribute
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.7 |
| Published | 2020-05-18 |
| First published | 2020-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 483.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexey Vasiliev |
| Maintainers | janstuhlmann, marcd, tbrandenberg |
| Keywords | storybook, addon, root, attribute |

## Links

- npm: https://www.npmjs.com/package/@gridscale/storybook-addon-root-attribute
- Repository: https://github.com/JanST123/storybook-addon-root-attribute
- Homepage: https://github.com/le0pard/storybook-addon-root-attribute#readme
- Issues: https://github.com/le0pard/storybook-addon-root-attribute/issues
- npm.io page: https://npm.io/package/@gridscale/storybook-addon-root-attribute

## Dependencies (4)

- [@storybook/addons](https://npm.io/package/@storybook/addons.md) >=5.0.0
- [@storybook/theming](https://npm.io/package/@storybook/theming.md) >=5.0.0
- [@storybook/components](https://npm.io/package/@storybook/components.md) >=5.0.0
- [@storybook/core-events](https://npm.io/package/@storybook/core-events.md) >=5.0.0

## Recent versions

- 0.2.7 (latest) — 2020-05-18
- 0.2.6 — 2020-05-18
- 0.2.5 — 2020-05-18
- 0.2.4 — 2020-05-18
- 0.2.3 — 2020-02-17

## README

# Storybook Addon Root Attribute [![Build Status](https://travis-ci.com/le0pard/storybook-addon-root-attribute.svg?branch=master)](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)

## This fork
This fork renamed the Tab to "Skins" and also allows a `root2` attribute and a `value2` attribute in the state to change more than one node

## Installation

```sh
yarn add -D storybook-addon-root-attribute
```

## Configuration

Then create a file called `addons.js` in your storybook config.

Add following content to it:

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

If you want to use a toolbar instead of a panel, you need to add this instead previous import:

```js
import 'storybook-addon-root-attribute/registerToolbar';
```

## 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",
  () => <i className="fa fa-camera-retro"> Camera Icon</i>,
  {
    rootAttribute: {
      defaultState: {
        name: "Default",
        value: null
      },
      states: [
        {
          name: "Dark",
          value: "dark"
        }
      ]
    }
  }
);
```

## 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                                                                        |
| root2         | null    | 'html', 'body', or first element returned by 'document.querySelector(), or if none found -- 'html'' | A second 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 |

Configuration example:

```js
addDecorator(withRootAttribute);
addParameters({
  rootAttribute: {
    root: "html",
    root2: "#cssprops",
    attribute: "class",
    defaultState: {
      name: "Default",
      value: null,
      value2: null
    },
    states: [
      {
        name: "Dark",
        value: "dark"
        value2: "dark.props.css"
      },
      {
        name: "A11Y",
        value: "accessibility",
        value2: "dark.props.css"
      }
    ]
  }
});
```

---
_Source: https://npm.io/package/@gridscale/storybook-addon-root-attribute · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._