/storybook-vrhythm

Storybook Vertical Rhythm Decorator

Primary LanguageTypeScriptMIT LicenseMIT

Last Commit Travis npm package

Storybook Vertical Rhythm Decorator

Take an eye over the vertical rhythm of your stories with this decorator.

It should work with any framework/library, however it's only tested in a React environment for the moment.

Installation

npm install storybook-vrhythm --development

or

yarn add -D storybook-vrhythm

Using the decorator globally

import { addDecorator, addParameters } from '@storybook/react'; // or Vue, Angular...
import StorybookVRhythm from 'storybook-vrhythm';

addDecorator(StorybookVRhythm);

addParameters({
  vrhythm: {
    color: 'rgba(178,86,18,0.5)',
    lineHeight: '16px',
    offset: 0,
  },
});

Using the decorator in your stories

const stories = storiesOf('components|MyComponent', module);

stories.addParameters({ vrhythm: { hide: true } });

Available options

color

Any valid color for the lines (examples: #ff0000, rgba(0,0,0,0.3))

default: 'rgb(204, 204, 204)'

lineHeight

Any valid value for the lineHeight of your system (examples: 16px, 1rem...)

default: 16px

offset

The offset from the top, in case your component is wrapped or whatever.

default: 0

hide

Useful to hide the decorator in some stories

default: false

Inspiration

Baseliner extension