This Storygrid is an addition to the storybook tool, which allows you to use grids. These Storygrids help structure elements in the preview.
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>
);
By default the Crop Marks are being displayed.
You can disable them by deleting following line in the StyleGrid/index.tsx file:
<CropMarks forceShowSizes={showSizes}>{child}</CropMarks>