Skip to content

Commit

Permalink
chore: update stoybook
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonjoseph
alisonjoseph committed Dec 16, 2024
1 parent b42fc4d commit 7877fe7
Showing 1 changed file with 91 additions and 95 deletions.
186 changes: 91 additions & 95 deletions packages/react/src/components/Grid/Grid.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,58 +36,6 @@ export default {
],
};

export const ATestSubgrid = () => {
return (
<>
<h5>Wide</h5>
<Grid>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
<h5>Narrow</h5>
<Grid narrow>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid narrow>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
<h5>Condensed</h5>
<Grid condensed>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid condensed>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
</>
);
};

export const Default = () => {
return (
<Grid>
Expand Down Expand Up @@ -162,49 +110,97 @@ export const Responsive = () => (

export const Subgrid = () => {
return (
<Grid>
<Column sm={2} md={4} lg={3}>
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 3 of 16</p>
</Column>
<Column sm={2} md={4} lg={10}>
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 10 of 16</p>
<Grid className="example">
<Column sm={1} md={1} lg={2}>
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
</Column>
<Column sm={1} md={1} lg={2}>
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
</Column>
<Column sm={0} md={1} lg={1}>
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={1} lg={1}>
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
</Grid>
</Column>
<Column sm={0} md={0} lg={3}>
<p>Small: Span 0 of 4</p>
<p>Medium: Span 0 of 8</p>
<p>Large: Span 3 of 16</p>
</Column>
</Grid>
<>
<Grid>
<Column sm={2} md={4} lg={3}>
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 3 of 16</p>
</Column>
<Column sm={2} md={4} lg={10}>
<p>Small: Span 2 of 4</p>
<p>Medium: Span 4 of 8</p>
<p>Large: Span 10 of 16</p>
<Grid className="example">
<Column sm={1} md={1} lg={2}>
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
</Column>
<Column sm={1} md={1} lg={2}>
<p>sm={1}</p> <p>md={1}</p> <p>lg={2}</p>
</Column>
<Column sm={0} md={1} lg={1}>
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={1} lg={1}>
<p>sm={0}</p> <p>md={1}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
<Column sm={0} md={0} lg={1}>
<p>sm={0}</p> <p>md={0}</p> <p>lg={1}</p>
</Column>
</Grid>
</Column>
<Column sm={0} md={0} lg={3}>
<p>Small: Span 0 of 4</p>
<p>Medium: Span 0 of 8</p>
<p>Large: Span 3 of 16</p>
</Column>
</Grid>

<h5>Wide</h5>
<Grid>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
<h5>Narrow</h5>
<Grid narrow>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid narrow>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
<h5>Condensed</h5>
<Grid condensed>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={8} lg={16}>
<Grid condensed>
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
<Column sm={4} md={4} lg={4} />
</Grid>
</Column>
</Grid>
</>
);
};

Expand Down

0 comments on commit 7877fe7

Please sign in to comment.