Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Storybook Vertical Rhythm Decorator

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •