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

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

jmlweb/storybook-vrhythm