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

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/*.stories.@(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'
        }
      ]
    },
  },