Skip to content
Storybook Vertical Rhythm Decorator
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.rts2_cache_esm/rpt2_6563b784681919c44c1b4afa34cc1b24977eb641
src
test
.gitignore
.npmignore
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
package.json
storybook-vrhythm.jpg
tsconfig.json
yarn.lock

README.md

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-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

Inspiration

Baseliner extension

You can’t perform that action at this time.