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>