Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@button-inc/storybook-progressive-enhancement-addon

Package Overview
Dependencies
3
Maintainers
3
Versions
10
Issues
File Explorer

Advanced tools

@button-inc/storybook-progressive-enhancement-addon

Toggle between progressivly enhanced states

    0.0.9latest

Version published
Maintainers
3
Yearly downloads
4,622

Weekly downloads

Readme

Source

Storybook Progressive Enhancement Addon

An addon to allow users to toggle between HTML only, css + html, and css + html + javascript views for each of their components to see how they progressively enhance.

Getting Started

Install the addon:

npm i @button-inc/storybook-progressive-enhancement-addon

Add the addon to your storybook, in .storybook/main.js:

module.exports = { stories: ['../stories/*.stories.mdx', '../stories/*[email protected](js|jsx|ts|tsx)'], addons: ['@button-inc/storybook-progressive-enhancement-addon'], // <- Include this part in your addons array };

The components will render with a template displaying the provided information. Pass in parameters to your story, following the example below:

parameters: { details: { title: "Button", description: "The base description that always shows up", allEnabledDescription: 'Description to show with all fields enabled', cssEnabledDescription: 'Description to show with CSS enabled', htmlOnlyDescription: 'Description to show with just html enabled', usageCode: ` import component from @button-inc/component <Component x={true}/> `, props: [ { name: 'size', type: 'string', description: 'size of the element' }, { name: 'variant', type: 'string', description: 'variant of the element' } ] }, },

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc