Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

storybook-addon-root-attribute

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-root-attribute

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

  • 1.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.1K
decreased by-21.21%
Maintainers
1
Weekly downloads
 
Created
Source

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:

NameDefaultVariantsDescription
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 nameAttribute name
defaultState{}should contain name and valueDefault state for attribute. Value nil will remove attribute from root
states[]array with objects, which contain unique name and value for attributeAll needed states for attribute values. Each object should contain unique name (for button) and value for attribute
tooltipfalseboolean valueAdd 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"
      }
    ]
  }
});

Keywords

FAQs

Package last updated on 23 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc