nhsuk-react-components/stories/Content Presentation/Table.stories.tsx at 7350569878a8adf292311efe8be7c691b58180cf · NHSDigital/nhsuk-react-components · GitHub

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { Col, HintText, Row, Table } from '#components';

const meta: Meta<typeof Table> = {
  title: 'Content Presentation/Table',
  component: Table,
};
export default meta;
type Story = StoryObj<typeof Table>;

export const StandardTable: Story = {
  render: (args) => (
    <Table caption="Skin symptoms and possible causes">
      <Table.Head>
        <Table.Row>
          <Table.Cell>Skin Symptoms</Table.Cell>
          <Table.Cell>Possible cause</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Blisters on lips or around the mouth</Table.Cell>
          <Table.Cell>cold sores</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Itchy, dry, cracked, sore</Table.Cell>
          <Table.Cell>eczema</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Itchy blisters</Table.Cell>
          <Table.Cell>shingles, chickenpox</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  ),
};

export const TablePanel: Story = {
  render: (args) => (
    <Table.Panel heading="Conditions similar to impetigo">
      <Table caption="Other possible causes of your symptoms">
        <Table.Head>
          <Table.Row>
            <Table.Cell>Skin Symptoms</Table.Cell>
            <Table.Cell>Possible cause</Table.Cell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Blisters on lips or around the mouth</Table.Cell>
            <Table.Cell>cold sores</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Itchy, dry, cracked, sore</Table.Cell>
            <Table.Cell>eczema</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Itchy blisters</Table.Cell>
            <Table.Cell>shingles, chickenpox</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </Table.Panel>
  ),
};

export const ResponsiveTable: Story = {
  args: { responsive: true },
  render: ({ responsive }) => (
    <Table responsive={responsive} caption="Ibuprofen syrup dosages for children">
      <Table.Head>
        <Table.Row>
          <Table.Cell>Age</Table.Cell>
          <Table.Cell>How much?</Table.Cell>
          <Table.Cell>How often?</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>3 to 5 months (weighing more than 5kg)</Table.Cell>
          <Table.Cell>2.5ml</Table.Cell>
          <Table.Cell>Max 3 times in 24 hours</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>6 to 11 months</Table.Cell>
          <Table.Cell>2.5ml</Table.Cell>
          <Table.Cell>Max 3 to 4 times in 24 hours</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>1 to 3 years</Table.Cell>
          <Table.Cell>5ml</Table.Cell>
          <Table.Cell>Max 3 times in 24 hours</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  ),
};

export const FirstCellAsHeader: Story = {
  render: (args) => (
    <Table firstCellIsHeader>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Day of the week</Table.Cell>
          <Table.Cell>Opening hours</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Monday</Table.Cell>
          <Table.Cell>9am to 6pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Tuesday</Table.Cell>
          <Table.Cell>9am to 6pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Wednesday</Table.Cell>
          <Table.Cell>9am to 6pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Thursday</Table.Cell>
          <Table.Cell>9am to 6pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Friday</Table.Cell>
          <Table.Cell>9am to 6pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Saturday</Table.Cell>
          <Table.Cell>9am to 1pm</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Sunday</Table.Cell>
          <Table.Cell>Closed</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  ),
};

export const NumericCells: Story = {
  render: (args) => (
    <Row>
      <Col width="one-half">
        <HintText>Right-aligned cells are used for numeric values</HintText>
        <Table caption="Number of cases">
          <Table.Head>
            <Table.Row>
              <Table.Cell>Location</Table.Cell>
              <Table.Cell format="numeric">Number of cases</Table.Cell>
            </Table.Row>
          </Table.Head>
          <Table.Body>
            <Table.Row>
              <Table.Cell>England</Table.Cell>
              <Table.Cell format="numeric">4,000</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Wales</Table.Cell>
              <Table.Cell format="numeric">2,500</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Scotland</Table.Cell>
              <Table.Cell format="numeric">600</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
      </Col>
    </Row>
  ),
};