Skip to content

Commit 9d23abf

Browse files
airikejairikej
authored
chore: move grid stories under Layout folder #526 (#529)
* chore: move grid stories under Layout folder #526 * chore: move VerticalSpacing story to Layout as well #526 * chore: fix bootstrap typo #526
1 parent 8f1f7f6 commit 9d23abf

10 files changed

Lines changed: 132 additions & 146 deletions

File tree

‎src/community/docs/scale-layout/development.mdx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎src/tedi/components/layout/grid/col.stories.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Meta, StoryFn, StoryObj } from '@storybook/react';
2+
3+
import { Heading } from '../../base/typography/heading/heading';
4+
import { VerticalSpacing } from '../vertical-spacing';
5+
import { Col } from './col';
6+
import { Row } from './row';
7+
8+
/**
9+
* <a href="https://www.tedi.ee/1ee8444b7/p/24da19-grid" target="_BLANK">Zeroheight ↗</a><br/>
10+
* <a hreg="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
11+
* Row and Col components are inspired by Bootstrap V5 Grid System. <br/> You can use different Bootstrap grid classes
12+
* through component props.
13+
*/
14+
15+
const meta: Meta<typeof Col> = {
16+
title: 'Tedi-Ready/Layout/Grid/Col',
17+
component: Col,
18+
subcomponents: { Row } as never,
19+
parameters: {
20+
status: { type: 'devComponent' },
21+
},
22+
};
23+
24+
export default meta;
25+
type Story = StoryObj<typeof Col>;
26+
27+
export const Default: StoryFn = () => (
28+
<VerticalSpacing size={2}>
29+
<VerticalSpacing size={0.5}>
30+
<Heading element="h4">Label/Value pairs</Heading>
31+
<Row>
32+
<Col>
33+
<dl>
34+
<Row>
35+
<Col element="dt" width={2}>
36+
<strong>Label</strong>
37+
</Col>
38+
<Col element="dd">Value</Col>
39+
</Row>
40+
<Row>
41+
<Col element="dt" width={2}>
42+
<strong>Label</strong>
43+
</Col>
44+
<Col element="dd">Value</Col>
45+
</Row>
46+
</dl>
47+
</Col>
48+
</Row>
49+
</VerticalSpacing>
50+
51+
<VerticalSpacing size={0.5}>
52+
<Heading element="h4">Lists</Heading>
53+
<Row element="ul" direction="column">
54+
<Col>Item 1</Col>
55+
<Col>Item 2</Col>
56+
</Row>
57+
</VerticalSpacing>
58+
</VerticalSpacing>
59+
);

‎src/tedi/components/layout/grid/grid.stories.tsx‎

Lines changed: 0 additions & 120 deletions
This file was deleted.

‎src/tedi/components/layout/grid/row.stories.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Meta, StoryFn, StoryObj } from '@storybook/react';
2+
3+
import { Col } from './col';
4+
import { Row, RowProps } from './row';
5+
6+
/**
7+
* <a href="https://www.tedi.ee/1ee8444b7/p/24da19-grid" target="_BLANK">Zeroheight ↗</a><br/>
8+
* <a hreg="https://getbootstrap.com/docs/5.1/layout/grid" target="_BLANK">Bootstrap docs ↗</a> <br/>
9+
* Row and Col components are inspired by Bootstrap V5 Grid System. <br/> You can use different Bootstrap grid classes
10+
* through component props.
11+
*/
12+
13+
const meta: Meta<typeof Row> = {
14+
title: 'Tedi-Ready/Layout/Grid/Row',
15+
component: Row,
16+
subcomponents: { Col } as never,
17+
parameters: {
18+
status: { type: 'devComponent' },
19+
},
20+
};
21+
22+
export default meta;
23+
type Story = StoryObj<typeof Row>;
24+
25+
const Template: StoryFn<RowProps> = (args) => (
26+
<div>
27+
<Row className="example-row" {...args}>
28+
<Col className="example-box">Col-1</Col>
29+
<Col className="example-box">Col-2</Col>
30+
<Col className="example-box">Col-3</Col>
31+
</Row>
32+
33+
<Row className="example-row" justifyContent="between" {...args}>
34+
<Col className="example-box" sm={2} lg={3}>
35+
Col-1
36+
</Col>
37+
<Col className="example-box" sm={2} lg={3}>
38+
Col-2
39+
</Col>
40+
<Col className="example-box" sm={2} lg={3}>
41+
Col-3
42+
</Col>
43+
</Row>
44+
45+
<Row className="example-row" cols={1} md={2} lg={3} xl={{ justifyContent: 'around' }} {...args}>
46+
<Col className="example-box" xl={{ width: 3, order: 'last' }}>
47+
Col-1
48+
</Col>
49+
<Col className="example-box" xl={{ width: 3, order: 0 }}>
50+
Col-2
51+
</Col>
52+
<Col className="example-box" xl={{ width: 3, order: 'first' }}>
53+
Col-3
54+
</Col>
55+
</Row>
56+
</div>
57+
);
58+
59+
export const Default: Story = { render: Template };

‎src/tedi/components/layout/vertical-spacing/vertical-spacing.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { VerticalSpacing, VerticalSpacingProps } from './vertical-spacing';
1111

1212
const meta: Meta<typeof VerticalSpacing> = {
1313
component: VerticalSpacing,
14-
title: 'Tedi-Ready/Components/Helpers/VerticalSpacing',
14+
title: 'Tedi-Ready/Layout/VerticalSpacing',
1515
subcomponents: {
1616
'VerticalSpacing.Item': VerticalSpacing.Item,
1717
} as never,

src/community/docs/scale-layout/breaking-points.tsx renamed to src/tedi/docs/scale-layout/breaking-points.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
22

3-
import { Text } from '../../../tedi/components/base/typography/text/text';
4-
import { Breakpoint, CustomizeTableCell, getBackgroundColorClass, Table } from '../../index';
3+
import { Breakpoint, CustomizeTableCell, getBackgroundColorClass, Table } from '../../../community/index';
4+
import { Text } from '../../components/base/typography/text/text';
55

66
interface BreakpointRow {
77
type: 'mobile' | 'tablet' | 'desktop';

src/community/docs/scale-layout/grid.mdx renamed to src/tedi/docs/scale-layout/grid.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Meta, Title, Subtitle, Unstyled } from '@storybook/blocks';
22
import Grid from './grid.tsx';
33

4-
<Meta name="Spacing system" title="Documentation/Scale and layout/Grid and breakpoints" />
4+
<Meta name="Spacing system" title="TEDI-Ready/Layout/Grid/Grid and breakpoints" />
55

66
<Unstyled>
77
<Grid />

src/community/docs/scale-layout/grid.tsx renamed to src/tedi/docs/scale-layout/grid.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Title } from '@storybook/blocks';
22

3-
import { Heading } from '../../../tedi/components/base/typography/heading/heading';
4-
import { Col, Row } from '../../../tedi/components/layout/grid';
5-
import { VerticalSpacing } from '../../../tedi/components/layout/vertical-spacing';
6-
import { Separator } from '../../../tedi/components/misc/separator/separator';
3+
import { Heading } from '../../components/base/typography/heading/heading';
4+
import { Col, Row } from '../../components/layout/grid';
5+
import { VerticalSpacing } from '../../components/layout/vertical-spacing';
6+
import { Separator } from '../../components/misc/separator/separator';
77
import BreakingpointsTable from './breaking-points';
88

99
const Grid = () => {

src/community/docs/scale-layout/spacing.mdx renamed to src/tedi/docs/scale-layout/spacing.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Meta, Unstyled } from '@storybook/blocks';
22

33
import Spacing from './spacing.tsx';
44

5-
<Meta name="Spacing system" title="Documentation/Scale and layout/Spacing system" />
5+
<Meta name="Spacing system" title="TEDI-Ready/Layout/Grid/Spacing system" />
66

77
<Unstyled>
88
<Spacing />

src/community/docs/scale-layout/spacing.tsx renamed to src/tedi/docs/scale-layout/spacing.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Title } from '@storybook/blocks';
22
import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
33

4-
import { Heading } from '../../../tedi/components/base/typography/heading/heading';
5-
import { Col, Row } from '../../../tedi/components/layout/grid';
6-
import { VerticalSpacing } from '../../../tedi/components/layout/vertical-spacing';
7-
import { Separator } from '../../../tedi/components/misc/separator/separator';
8-
import { Table } from '../../index';
4+
import { Table } from '../../../community/index';
5+
import { Heading } from '../../components/base/typography/heading/heading';
6+
import { Col, Row } from '../../components/layout/grid';
7+
import { VerticalSpacing } from '../../components/layout/vertical-spacing';
8+
import { Separator } from '../../components/misc/separator/separator';
99

1010
const Spacing = () => {
1111
return (

0 commit comments

Comments
 (0)