storybook-vrhythm
v0.0.4
Published
Storybook Vertical Rhythm Decorator
Downloads
14
Readme
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-rhythm
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