Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add story for all grid layouts

Browse Source 
[MAILPOET-2774]
This commit is contained in:
Ján Mikláš
2020-05-10 21:00:58 +02:00
committed by Veljko V
parent 6f55dd0ecc
commit 032f15f2d0
1 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
assets/js/src/common/grid/_stories/grid.tsx Normal file
View File

@@ -0,0 +1,96 @@
import React from 'react';
import Heading from '../../typography/heading/heading';
import Grid from '..';
export default {
title: 'Grid',
};
export const Layouts = () => {
const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero.';
return (
<>
<Heading level={3}>Column</Heading>
<Grid.Column>
{content}
</Grid.Column>
<div className="mailpoet-gap" />
<Heading level={3}>Column - small</Heading>
<Grid.Column dimension="small">
{content}
</Grid.Column>
<div className="mailpoet-gap" />
<Heading level={3}>Two columns</Heading>
<Grid.TwoColumns>
<div>{content}</div>
<div>{content}</div>
</Grid.TwoColumns>
<div className="mailpoet-gap" />
<Heading level={3}>Three columns</Heading>
<Grid.ThreeColumns>
<div>{content}</div>
<div>{content}</div>
<div>{content}</div>
</Grid.ThreeColumns>
<div className="mailpoet-gap" />
<Heading level={3}>Two columns list</Heading>
<Grid.Column>
<Grid.TwoColumnsList>
<div>
Option 1
<br />
Option 2
<br />
Option 3
<br />
Option 4
<br />
Option 5
<br />
</div>
</Grid.TwoColumnsList>
</Grid.Column>
<div className="mailpoet-gap" />
<Heading level={3}>Space between</Heading>
<Grid.Column>
<Grid.SpaceBetween>
<div>
Left
<br />
Part
</div>
<div>
Right Part
</div>
</Grid.SpaceBetween>
</Grid.Column>
<div className="mailpoet-gap" />
<Heading level={3}>Space between - vertically centered</Heading>
<Grid.Column>
<Grid.SpaceBetween verticalAlign="center">
<div>
Left
<br />
Part
</div>
<div>
Right Part
</div>
</Grid.SpaceBetween>
</Grid.Column>
</>
);
};