storybook-storygrid v1.0.0

Storybook Storygrid

This Storygrid is an addition to the storybook tool, which allows you to use grids. These Storygrids help structure elements in the preview.

Getting Started

Install package:

npm i storybook-storygrid

Simple example story:

import React from 'react';
import { StyleGrid } from 'storybook-storygrid';

export const Overview = () => (
  <StyleGrid>
    Default
    <Button text="Button Text" />
    <Button text="Button Text" disabled />
  </StyleGrid>
);

Nesting of Storygrids:

import React from 'react';
import { StyleGrid } from 'storybook-storygrid';
import { MyComponent } from 'pathto/MyComponent';

export const Overview = () => (
  <StyleGrid>
    <StyleGrid>
      Not expanded
      <MyComponent expanded={false} />
      Expanded
      <MyComponent expanded={true} />
    </StyleGrid>
    <StyleGrid>
      Styled
      <MyComponent
        expanded={true}
        style={{
          background: 'red',
        }}
      />
    </StyleGrid>
  </StyleGrid>
);

Crop Marks

By default the Crop Marks are being displayed.

Disable Crop Marks

You can disable them by deleting following line in the StyleGrid/index.tsx file:

<CropMarks forceShowSizes={showSizes}>{child}</CropMarks>