forked from freeCodeCamp/freeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.stories.tsx
83 lines (80 loc) · 1.46 KB
/
table.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React from 'react';
import { Story } from '@storybook/react';
import { Table, TableProps } from '.';
const exampleTable = (
<>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Loos</td>
<td>@mlos</td>
</tr>
<tr>
<td>3</td>
<td>Joe</td>
<td>Kot</td>
<td>@mko</td>
</tr>
</tbody>
</>
);
const story = {
title: 'Example/Table',
component: Table,
parameters: {
controls: {
include: [
'variant',
'size',
'bordered',
'borderless',
'hover',
'striped',
'condensed',
'responsive'
]
}
},
argTypes: {
striped: {
options: [true, false],
control: { type: 'radio' }
},
condensed: {
options: [true, false],
control: { type: 'radio' }
}
}
};
const Template: Story<TableProps> = args => (
<Table {...args}>{exampleTable}</Table>
);
export const Default = Template.bind({});
Default.args = {
condensed: false,
striped: false
};
export const Condensed = Template.bind({});
Condensed.args = {
condensed: true
};
export const Striped = Template.bind({});
Striped.args = {
striped: true
};
export default story;