Skip to content

Commit 006f42e

Browse files
christify30ChristianNikolai Lopin
authored and
Martí Malek
committed
docs: migrate components to storybook (#317)
* table * tag * text * textarea * toggle * tooltip --------- Co-authored-by: Christian <[email protected]> Co-authored-by: Nikolai Lopin <[email protected]>
1 parent 4bec7c9 commit 006f42e

27 files changed

+640
-791
lines changed

‎.storybook/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { StorybookConfig } from '@storybook/react-webpack5';
22

33
const config: StorybookConfig = {
4-
stories: ['../src/**/*.stories.mdx'],
4+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
55
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
66
framework: {
77
name: '@storybook/react-webpack5',

‎src/components/Label/Label.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { FC } from 'react';
21
import styled from 'styled-components';
32
import { compose, margin, MarginProps, ResponsiveValue, variant } from 'styled-system';
43
import { Text } from '../Text/Text';
@@ -78,7 +77,7 @@ const filledVariantStyles = variant({
7877
}
7978
});
8079

81-
const Label: FC<LabelProps> = styled(Text).attrs({ theme })<LabelProps>`
80+
const Label = styled(Text).attrs({ theme })<LabelProps>`
8281
display: inline-block;
8382
box-sizing: border-box;
8483
font-size: 0.625rem;

‎src/components/Table/components/Table.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,18 @@ interface TableElementProps
1515
Omit<ComponentPropsWithoutRef<'table'>, 'width'> {}
1616

1717
interface TableProps extends TableElementProps {
18+
/**
19+
* Row style (background colors, borders, etc.)
20+
* @default lines
21+
*/
1822
rowStyle: 'lines' | 'zebra' | 'blank';
23+
/**
24+
* The height of the table rows. More info on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height)
25+
*/
1926
rowSize?: 'large' | 'normal' | 'small' | string;
27+
/**
28+
* The space between columns of the table (any CSS value will be divided by 2 using `calc`)
29+
*/
2030
columnSpace?: 'normal' | 'small' | string;
2131
}
2232

‎src/components/Table/components/TableRow.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,15 @@ import { TableContext } from '../context/TableContext';
55
import { TableProps } from './Table';
66

77
type TableRowProps = ComponentPropsWithoutRef<'tr'> & {
8+
/**
9+
* Show active state styling on the row
10+
* @default false
11+
*/
812
active?: boolean;
13+
/**
14+
* Show the hover state styling on the row
15+
* @default true
16+
*/
917
hover?: boolean;
1018
};
1119

‎src/components/Table/components/TableRowSkeleton.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@ import { TableCell } from './TableCell';
44
import { TableRow } from './TableRow';
55

66
export interface TableRowSkeletonProps {
7+
/**
8+
* Number of columns to simulate
9+
* @default 0
10+
*/
711
columns: number;
12+
/**
13+
* Play the Skeleton animation
14+
* @default false
15+
*/
816
animated?: boolean;
917
}
1018

‎src/components/Table/docs/ActiveRowTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ChangeEvent, FC, useState } from 'react';
2-
import { Table, TableCell, TableHeaderCell, TableRow } from '..';
2+
import { Table, TableCell, TableHeaderCell, TableRow, TableRowProps } from '..';
33
import { Box, Checkbox, Input, Text } from '../..';
44

55
const data = [

‎src/components/Table/docs/DefaultTable.tsx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import React, { FC, useState } from 'react';
2+
import { Table, TableCell, TableHeaderCell, TableProps, TableRow, TableRowProps } from '..';
3+
import { Box, Button, Label, Select } from '../..';
4+
import { Colors } from '../../../essentials';
5+
import { EnvelopeIcon, PhoneIcon } from '../../../icons';
6+
import { Text } from '../../Text/Text';
7+
8+
export const DefaultTable: FC = (args: TableProps) => (
9+
<Table {...args}>
10+
<caption style={{ captionSide: 'bottom', padding: '1rem' }}>The wonderful Wave list</caption>
11+
<thead>
12+
<TableRow>
13+
<TableHeaderCell scope="col">Creation Date / Activity</TableHeaderCell>
14+
<TableHeaderCell scope="col">Name</TableHeaderCell>
15+
<TableHeaderCell scope="col">City</TableHeaderCell>
16+
<TableHeaderCell scope="col">Phone</TableHeaderCell>
17+
<TableHeaderCell scope="col">E-Mail</TableHeaderCell>
18+
<TableHeaderCell scope="col">Actions</TableHeaderCell>
19+
</TableRow>
20+
</thead>
21+
<tbody>
22+
<TableRow>
23+
<TableCell>
24+
5 July 2019 - 11:14
25+
<br />
26+
<Text fontSize={0} weak>
27+
No activity yet
28+
</Text>
29+
</TableCell>
30+
<TableCell scope="row">Leander Klein</TableCell>
31+
<TableCell>
32+
<Label>New</Label>
33+
</TableCell>
34+
<TableCell>
35+
<Box display="flex" alignItems="center">
36+
<PhoneIcon size={18} color={Colors.ACTION_BLUE_900} />
37+
&nbsp;+4915127182377
38+
</Box>
39+
</TableCell>
40+
<TableCell>
41+
<Box display="flex" alignItems="center">
42+
<EnvelopeIcon size={18} color={Colors.ACTION_BLUE_900} />
43+
&nbsp;[email protected]
44+
</Box>
45+
</TableCell>
46+
<TableCell>
47+
<Button variant="secondary" size="small">
48+
...
49+
</Button>
50+
</TableCell>
51+
</TableRow>
52+
<TableRow>
53+
<TableCell>
54+
31 January 2020 - 02:48
55+
<br />
56+
<Text fontSize={0} weak>
57+
No activity yet
58+
</Text>
59+
</TableCell>
60+
<TableCell scope="row">Marc Berg</TableCell>
61+
<TableCell>
62+
<Label variant="success">Active</Label>
63+
</TableCell>
64+
<TableCell>
65+
<Box display="flex" alignItems="center">
66+
<PhoneIcon size={18} color={Colors.ACTION_BLUE_900} />
67+
&nbsp;+4915139912828
68+
</Box>
69+
</TableCell>
70+
<TableCell>
71+
<Box display="flex" alignItems="center">
72+
<EnvelopeIcon size={18} color={Colors.ACTION_BLUE_900} />
73+
&nbsp;[email protected]
74+
</Box>
75+
</TableCell>
76+
<TableCell>
77+
<Button variant="secondary" size="small">
78+
...
79+
</Button>
80+
</TableCell>
81+
</TableRow>
82+
<TableRow>
83+
<TableCell>
84+
27 February 2020 - 16:02
85+
<br />
86+
<Text fontSize={0} weak>
87+
17 Tours
88+
</Text>
89+
</TableCell>
90+
<TableCell scope="row">Ecki Diepenhorst</TableCell>
91+
<TableCell>
92+
<Label variant="success">Active</Label>
93+
</TableCell>
94+
<TableCell>
95+
<Box display="flex" alignItems="center">
96+
<PhoneIcon size={18} color={Colors.ACTION_BLUE_900} />
97+
&nbsp;+4915139912828
98+
</Box>
99+
</TableCell>
100+
<TableCell>
101+
<Box display="flex" alignItems="center">
102+
<EnvelopeIcon size={18} color={Colors.ACTION_BLUE_900} />
103+
&nbsp;[email protected]
104+
</Box>
105+
</TableCell>
106+
<TableCell>
107+
<Button variant="secondary" size="small">
108+
...
109+
</Button>
110+
</TableCell>
111+
</TableRow>
112+
<TableRow>
113+
<TableCell>
114+
30 March 2020 - 18:19
115+
<br />
116+
<Text fontSize={0} weak>
117+
17 Tours
118+
</Text>
119+
</TableCell>
120+
<TableCell scope="row">John Doe</TableCell>
121+
<TableCell>
122+
<Label variant="danger">Fraud</Label>
123+
</TableCell>
124+
<TableCell>
125+
<Box display="flex" alignItems="center">
126+
<PhoneIcon size={18} color={Colors.ACTION_BLUE_900} />
127+
&nbsp;+491672182732
128+
</Box>
129+
</TableCell>
130+
<TableCell>
131+
<Box display="flex" alignItems="center">
132+
<EnvelopeIcon size={18} color={Colors.ACTION_BLUE_900} />
133+
&nbsp;[email protected]
134+
</Box>
135+
</TableCell>
136+
<TableCell>
137+
<Button variant="secondary" size="small">
138+
...
139+
</Button>
140+
</TableCell>
141+
</TableRow>
142+
</tbody>
143+
</Table>
144+
);

0 commit comments

Comments
 (0)