https://github.com/faebeee/storybook-badges

https://github.com/faebeee/storybook-badges

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/faebeee/storybook-badges
• Owner: faebeee
• Created: 2020-05-28T19:42:50.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T07:17:53.000Z (over 3 years ago)
• Last Synced: 2025-03-14T07:12:59.981Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@faebeee/storybook-badges
• Size: 392 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# @faebeee/storybook-badges

Storybook addon to add a new Tab which can show a 

status of the shown component. So you can easily keep

track of the state of a component. For example you can visualize

if it's already release. Or if its a draft or needs a redesign or if it's

still in development

![Example](./doc/example.png)

## install

    npm i @faebeee/storybook-badges

    

add the addon

    import '@faebeee/storybook-badges';

configure default config

.storybook/config.js

    import { addDecorator, addParameters } from '@storybook/react';

    addParameters({

        badges: {

            icon_size: 50,

            icons: {

                'utility': {

                    icon: '/assets/img/utility-comp.png',

                    text: "Utility Component"

                },

            }

        },

    });

and in your story

    const stories = storiesOf('Component', module)

       

    stories.add(

        'Default',

        () => (),

        {

            badges: {

                badges: ['utility'],

            },

        }

    );