storybook-vrhythm
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i storybook-vrhythm

Weekly Downloads

4

Version

0.0.4

License

none

Unpacked Size

22.2 kB

Total Files

15

Last publish

Collaborators

  • jmlweb