https://github.com/huntermacd/storybook-stylesheet-disable

A Storybook add-on that makes it easy to disable stylesheets.
https://github.com/huntermacd/storybook-stylesheet-disable

Last synced: 15 days ago
JSON representation

A Storybook add-on that makes it easy to disable stylesheets.

• Host: GitHub
• URL: https://github.com/huntermacd/storybook-stylesheet-disable
• Owner: huntermacd
• License: mit
• Created: 2022-08-04T16:28:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-09T22:03:12.000Z (over 2 years ago)
• Last Synced: 2024-12-13T11:52:59.537Z (about 1 month ago)
• Language: JavaScript
• Size: 66.1 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storybook Stylesheet Disable

A Storybook add-on that makes it easy to disable stylesheets.

## Getting Started

1. `yarn add --dev storybook-stylesheet-disable`

2. Add to your `main.js` config file:

```

module.exports = {

  ...,

  addons: [

    ...,

    "storybook-stylesheet-disable"

  ],

  ...,

};

```

3. Configure `stylesheetId` in `preview.js` within your `.storybook` directory:

```

export const globals = {

  ...,

  stylesheetId: 'your-unique-id-here',

  ...,

};

```

4. Create a `preview-head.html` file within your `.storybook` directory if you don't already have one.

5. Add the stylesheets you wish to be disabled/enabled via `` tags, giving each one _the same unique identifier_ as a `title` attribute:

```

```

(This tool can operate in reverse, too, if you wish. Simply add the `disabled` attribute to the `` tags.)

6. Spin up Storybook and you should see a new toolbar button with the `< >` icon, which will disable/enable the specified stylesheets.