@kaizen/components 1.45.3 → 1.46.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Table/Table.cjs +17 -23
- package/dist/cjs/Table/Table.module.scss.cjs +1 -0
- package/dist/cjs/index.css +4 -4
- package/dist/esm/Table/Table.mjs +17 -23
- package/dist/esm/Table/Table.module.scss.mjs +1 -0
- package/dist/esm/index.css +4 -4
- package/dist/styles.css +1 -1
- package/dist/types/Table/Table.d.ts +15 -5
- package/package.json +3 -3
- package/src/Table/Table.module.scss +68 -8
- package/src/Table/Table.tsx +27 -11
- package/src/Table/_docs/Table.mdx +43 -13
- package/src/Table/_docs/Table.stickersheet.stories.tsx +703 -0
- package/src/Table/_docs/Table.stories.tsx +290 -158
- package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +12 -4
|
@@ -0,0 +1,703 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { action } from "@storybook/addon-actions"
|
|
3
|
+
import { Meta, StoryObj } from "@storybook/react"
|
|
4
|
+
import { EffectivenessIcon } from "~components/Icon"
|
|
5
|
+
import { Text } from "~components/Text"
|
|
6
|
+
import { StickerSheetStory } from "~storybook/components/StickerSheet"
|
|
7
|
+
import {
|
|
8
|
+
TableCard,
|
|
9
|
+
TableContainer,
|
|
10
|
+
TableHeader,
|
|
11
|
+
TableHeaderRowCell,
|
|
12
|
+
TableRow,
|
|
13
|
+
TableRowCell,
|
|
14
|
+
} from "../index"
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
title: "Components/Table",
|
|
18
|
+
parameters: {
|
|
19
|
+
chromatic: { disable: false },
|
|
20
|
+
docs: {
|
|
21
|
+
source: { type: "dynamic" },
|
|
22
|
+
},
|
|
23
|
+
a11y: {
|
|
24
|
+
config: {
|
|
25
|
+
rules: [
|
|
26
|
+
{
|
|
27
|
+
// Fixing this in a rebuild
|
|
28
|
+
id: "nested-interactive",
|
|
29
|
+
enabled: false,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
// Fixing this in a rebuild
|
|
33
|
+
id: "aria-required-children",
|
|
34
|
+
enabled: false,
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
// Fixing this in a rebuild
|
|
38
|
+
id: "aria-required-parent",
|
|
39
|
+
enabled: false,
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
decorators: [
|
|
46
|
+
Story => (
|
|
47
|
+
<div className="w-full max-w-[60rem] flex flex-col gap-12 mx-auto">
|
|
48
|
+
<Story />
|
|
49
|
+
</div>
|
|
50
|
+
),
|
|
51
|
+
],
|
|
52
|
+
} satisfies Meta
|
|
53
|
+
|
|
54
|
+
const TableTemplate: StoryObj<StickerSheetStory> = {
|
|
55
|
+
render: ({ isReversed }) => (
|
|
56
|
+
<>
|
|
57
|
+
<Text
|
|
58
|
+
tag="div"
|
|
59
|
+
variant="intro-lede"
|
|
60
|
+
color={isReversed ? "white" : "dark"}
|
|
61
|
+
>
|
|
62
|
+
TableHeaderRowCell with long titles
|
|
63
|
+
</Text>
|
|
64
|
+
<TableContainer>
|
|
65
|
+
<TableHeader>
|
|
66
|
+
<TableRow>
|
|
67
|
+
<TableHeaderRowCell
|
|
68
|
+
reversed={isReversed}
|
|
69
|
+
labelText="Default"
|
|
70
|
+
width={4 / 12}
|
|
71
|
+
onClick={action("header 1")}
|
|
72
|
+
/>
|
|
73
|
+
<TableHeaderRowCell
|
|
74
|
+
reversed={isReversed}
|
|
75
|
+
labelText="Long title that should convert to ellipsis lorem ipsum thing"
|
|
76
|
+
width={4 / 12}
|
|
77
|
+
onClick={action("header 3")}
|
|
78
|
+
/>
|
|
79
|
+
<TableHeaderRowCell
|
|
80
|
+
reversed={isReversed}
|
|
81
|
+
labelText="Long title that should wrap to a new line lorem ipsum thing"
|
|
82
|
+
width={4 / 12}
|
|
83
|
+
wrapping="wrap"
|
|
84
|
+
align="end"
|
|
85
|
+
onClick={action("header 2")}
|
|
86
|
+
/>
|
|
87
|
+
</TableRow>
|
|
88
|
+
</TableHeader>
|
|
89
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
90
|
+
<TableRow>
|
|
91
|
+
<TableRowCell width={4 / 12}>
|
|
92
|
+
<Text tag="div" variant="body">
|
|
93
|
+
Default
|
|
94
|
+
</Text>
|
|
95
|
+
</TableRowCell>
|
|
96
|
+
<TableRowCell width={4 / 12}>
|
|
97
|
+
<Text tag="div" variant="body">
|
|
98
|
+
Data 2
|
|
99
|
+
</Text>
|
|
100
|
+
</TableRowCell>
|
|
101
|
+
<TableRowCell width={4 / 12}>
|
|
102
|
+
<Text tag="div" variant="body">
|
|
103
|
+
Data 3
|
|
104
|
+
</Text>
|
|
105
|
+
</TableRowCell>
|
|
106
|
+
</TableRow>
|
|
107
|
+
</TableCard>
|
|
108
|
+
</TableContainer>
|
|
109
|
+
<Text
|
|
110
|
+
tag="div"
|
|
111
|
+
variant="intro-lede"
|
|
112
|
+
color={isReversed ? "white" : "dark"}
|
|
113
|
+
>
|
|
114
|
+
TableHeaderRowCell onClick
|
|
115
|
+
</Text>
|
|
116
|
+
<TableContainer>
|
|
117
|
+
<TableHeader>
|
|
118
|
+
<TableRow>
|
|
119
|
+
<TableHeaderRowCell
|
|
120
|
+
reversed={isReversed}
|
|
121
|
+
labelText="Default"
|
|
122
|
+
width={4 / 12}
|
|
123
|
+
sorting="descending"
|
|
124
|
+
onClick={action("header 1")}
|
|
125
|
+
data-sb-pseudo-styles="hover"
|
|
126
|
+
/>
|
|
127
|
+
<TableHeaderRowCell
|
|
128
|
+
reversed={isReversed}
|
|
129
|
+
labelText="Hover"
|
|
130
|
+
width={4 / 12}
|
|
131
|
+
sorting="ascending"
|
|
132
|
+
onClick={action("header 3")}
|
|
133
|
+
data-sb-pseudo-styles="hover"
|
|
134
|
+
/>
|
|
135
|
+
<TableHeaderRowCell
|
|
136
|
+
reversed={isReversed}
|
|
137
|
+
labelText="Focus"
|
|
138
|
+
width={4 / 12}
|
|
139
|
+
sorting="ascending"
|
|
140
|
+
onClick={action("header 2")}
|
|
141
|
+
data-sb-pseudo-styles="focus-visible"
|
|
142
|
+
/>
|
|
143
|
+
</TableRow>
|
|
144
|
+
</TableHeader>
|
|
145
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
146
|
+
<TableRow>
|
|
147
|
+
<TableRowCell width={4 / 12}>
|
|
148
|
+
<Text tag="div" variant="body">
|
|
149
|
+
Default
|
|
150
|
+
</Text>
|
|
151
|
+
</TableRowCell>
|
|
152
|
+
<TableRowCell width={4 / 12}>
|
|
153
|
+
<Text tag="div" variant="body">
|
|
154
|
+
Data 2
|
|
155
|
+
</Text>
|
|
156
|
+
</TableRowCell>
|
|
157
|
+
<TableRowCell width={4 / 12}>
|
|
158
|
+
<Text tag="div" variant="body">
|
|
159
|
+
Data 3
|
|
160
|
+
</Text>
|
|
161
|
+
</TableRowCell>
|
|
162
|
+
</TableRow>
|
|
163
|
+
</TableCard>
|
|
164
|
+
</TableContainer>
|
|
165
|
+
<Text
|
|
166
|
+
tag="div"
|
|
167
|
+
variant="intro-lede"
|
|
168
|
+
color={isReversed ? "white" : "dark"}
|
|
169
|
+
>
|
|
170
|
+
TableHeaderRowCell icons with onClick
|
|
171
|
+
</Text>
|
|
172
|
+
<TableContainer>
|
|
173
|
+
<TableHeader>
|
|
174
|
+
<TableRow>
|
|
175
|
+
<TableHeaderRowCell
|
|
176
|
+
reversed={isReversed}
|
|
177
|
+
labelText="Default"
|
|
178
|
+
width={4 / 12}
|
|
179
|
+
sorting="descending"
|
|
180
|
+
onClick={action("header 1")}
|
|
181
|
+
icon={<EffectivenessIcon role="img" aria-label="Focus" />}
|
|
182
|
+
/>
|
|
183
|
+
<TableHeaderRowCell
|
|
184
|
+
reversed={isReversed}
|
|
185
|
+
labelText="Hover"
|
|
186
|
+
width={4 / 12}
|
|
187
|
+
sorting="ascending"
|
|
188
|
+
onClick={action("header 3")}
|
|
189
|
+
data-sb-pseudo-styles="hover"
|
|
190
|
+
icon={<EffectivenessIcon role="img" aria-label="Focus" />}
|
|
191
|
+
/>
|
|
192
|
+
<TableHeaderRowCell
|
|
193
|
+
reversed={isReversed}
|
|
194
|
+
labelText="Focus"
|
|
195
|
+
width={4 / 12}
|
|
196
|
+
sorting="ascending"
|
|
197
|
+
onClick={action("header 2")}
|
|
198
|
+
data-sb-pseudo-styles="focus-visible"
|
|
199
|
+
icon={<EffectivenessIcon role="img" aria-label="Focus" />}
|
|
200
|
+
/>
|
|
201
|
+
</TableRow>
|
|
202
|
+
</TableHeader>
|
|
203
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
204
|
+
<TableRow>
|
|
205
|
+
<TableRowCell width={4 / 12}>
|
|
206
|
+
<Text tag="div" variant="body">
|
|
207
|
+
Default
|
|
208
|
+
</Text>
|
|
209
|
+
</TableRowCell>
|
|
210
|
+
<TableRowCell width={4 / 12}>
|
|
211
|
+
<Text tag="div" variant="body">
|
|
212
|
+
Data 2
|
|
213
|
+
</Text>
|
|
214
|
+
</TableRowCell>
|
|
215
|
+
<TableRowCell width={4 / 12}>
|
|
216
|
+
<Text tag="div" variant="body">
|
|
217
|
+
Data 3
|
|
218
|
+
</Text>
|
|
219
|
+
</TableRowCell>
|
|
220
|
+
</TableRow>
|
|
221
|
+
</TableCard>
|
|
222
|
+
</TableContainer>
|
|
223
|
+
<Text
|
|
224
|
+
tag="div"
|
|
225
|
+
variant="intro-lede"
|
|
226
|
+
color={isReversed ? "white" : "dark"}
|
|
227
|
+
>
|
|
228
|
+
TableHeaderRowCell tooltips
|
|
229
|
+
</Text>
|
|
230
|
+
<TableContainer>
|
|
231
|
+
<TableHeader>
|
|
232
|
+
<TableRow>
|
|
233
|
+
<TableHeaderRowCell
|
|
234
|
+
reversed={isReversed}
|
|
235
|
+
labelText="Default"
|
|
236
|
+
width={4 / 12}
|
|
237
|
+
sorting="descending"
|
|
238
|
+
onClick={action("header 1")}
|
|
239
|
+
tooltipInfo="Default state"
|
|
240
|
+
/>
|
|
241
|
+
<TableHeaderRowCell
|
|
242
|
+
reversed={isReversed}
|
|
243
|
+
labelText="Hover"
|
|
244
|
+
width={4 / 12}
|
|
245
|
+
sorting="ascending"
|
|
246
|
+
onClick={action("header 3")}
|
|
247
|
+
data-sb-pseudo-styles="hover"
|
|
248
|
+
tooltipInfo="Hover state."
|
|
249
|
+
/>
|
|
250
|
+
<TableHeaderRowCell
|
|
251
|
+
reversed={isReversed}
|
|
252
|
+
labelText="Focus"
|
|
253
|
+
width={4 / 12}
|
|
254
|
+
sorting="ascending"
|
|
255
|
+
onClick={action("header 2")}
|
|
256
|
+
data-sb-pseudo-styles="focus-visible"
|
|
257
|
+
tooltipInfo="focus state"
|
|
258
|
+
/>
|
|
259
|
+
</TableRow>
|
|
260
|
+
</TableHeader>
|
|
261
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
262
|
+
<TableRow>
|
|
263
|
+
<TableRowCell width={4 / 12}>
|
|
264
|
+
<Text tag="div" variant="body">
|
|
265
|
+
Default
|
|
266
|
+
</Text>
|
|
267
|
+
</TableRowCell>
|
|
268
|
+
<TableRowCell width={4 / 12}>
|
|
269
|
+
<Text tag="div" variant="body">
|
|
270
|
+
Data 2
|
|
271
|
+
</Text>
|
|
272
|
+
</TableRowCell>
|
|
273
|
+
<TableRowCell width={4 / 12}>
|
|
274
|
+
<Text tag="div" variant="body">
|
|
275
|
+
Data 3
|
|
276
|
+
</Text>
|
|
277
|
+
</TableRowCell>
|
|
278
|
+
</TableRow>
|
|
279
|
+
</TableCard>
|
|
280
|
+
</TableContainer>
|
|
281
|
+
<Text
|
|
282
|
+
tag="div"
|
|
283
|
+
variant="intro-lede"
|
|
284
|
+
color={isReversed ? "white" : "dark"}
|
|
285
|
+
>
|
|
286
|
+
TableHeaderRowCell checkable
|
|
287
|
+
</Text>
|
|
288
|
+
<TableContainer>
|
|
289
|
+
<TableHeader>
|
|
290
|
+
<TableRow>
|
|
291
|
+
<TableHeaderRowCell
|
|
292
|
+
reversed={isReversed}
|
|
293
|
+
labelText="Default"
|
|
294
|
+
width={4 / 12}
|
|
295
|
+
checkable
|
|
296
|
+
checkboxLabel="Select all default"
|
|
297
|
+
/>
|
|
298
|
+
<TableHeaderRowCell
|
|
299
|
+
reversed={isReversed}
|
|
300
|
+
labelText="Hover"
|
|
301
|
+
width={4 / 12}
|
|
302
|
+
data-sb-pseudo-styles="hover"
|
|
303
|
+
checkable
|
|
304
|
+
checkboxLabel="Select all hover"
|
|
305
|
+
/>
|
|
306
|
+
<TableHeaderRowCell
|
|
307
|
+
reversed={isReversed}
|
|
308
|
+
labelText="Focus"
|
|
309
|
+
width={4 / 12}
|
|
310
|
+
checkable
|
|
311
|
+
checkboxLabel="Select all focus"
|
|
312
|
+
data-sb-pseudo-styles="focus-visible"
|
|
313
|
+
/>
|
|
314
|
+
</TableRow>
|
|
315
|
+
</TableHeader>
|
|
316
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
317
|
+
<TableRow>
|
|
318
|
+
<TableRowCell width={4 / 12}>
|
|
319
|
+
<Text tag="div" variant="body">
|
|
320
|
+
Default
|
|
321
|
+
</Text>
|
|
322
|
+
</TableRowCell>
|
|
323
|
+
<TableRowCell width={4 / 12}>
|
|
324
|
+
<Text tag="div" variant="body">
|
|
325
|
+
Data 2
|
|
326
|
+
</Text>
|
|
327
|
+
</TableRowCell>
|
|
328
|
+
<TableRowCell width={4 / 12}>
|
|
329
|
+
<Text tag="div" variant="body">
|
|
330
|
+
Data 3
|
|
331
|
+
</Text>
|
|
332
|
+
</TableRowCell>
|
|
333
|
+
</TableRow>
|
|
334
|
+
</TableCard>
|
|
335
|
+
</TableContainer>
|
|
336
|
+
<Text
|
|
337
|
+
tag="div"
|
|
338
|
+
variant="intro-lede"
|
|
339
|
+
color={isReversed ? "white" : "dark"}
|
|
340
|
+
>
|
|
341
|
+
TableCard onClick
|
|
342
|
+
</Text>
|
|
343
|
+
<TableContainer>
|
|
344
|
+
<TableHeader>
|
|
345
|
+
<TableRow>
|
|
346
|
+
<TableHeaderRowCell
|
|
347
|
+
reversed={isReversed}
|
|
348
|
+
labelText="State"
|
|
349
|
+
width={4 / 12}
|
|
350
|
+
/>
|
|
351
|
+
<TableHeaderRowCell
|
|
352
|
+
reversed={isReversed}
|
|
353
|
+
labelText="Second column"
|
|
354
|
+
width={4 / 12}
|
|
355
|
+
/>
|
|
356
|
+
<TableHeaderRowCell
|
|
357
|
+
reversed={isReversed}
|
|
358
|
+
labelText="Third column"
|
|
359
|
+
width={4 / 12}
|
|
360
|
+
/>
|
|
361
|
+
</TableRow>
|
|
362
|
+
</TableHeader>
|
|
363
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
364
|
+
<TableRow>
|
|
365
|
+
<TableRowCell width={4 / 12}>
|
|
366
|
+
<Text tag="div" variant="body">
|
|
367
|
+
Default
|
|
368
|
+
</Text>
|
|
369
|
+
</TableRowCell>
|
|
370
|
+
<TableRowCell width={4 / 12}>
|
|
371
|
+
<Text tag="div" variant="body">
|
|
372
|
+
Data 2
|
|
373
|
+
</Text>
|
|
374
|
+
</TableRowCell>
|
|
375
|
+
<TableRowCell width={4 / 12}>
|
|
376
|
+
<Text tag="div" variant="body">
|
|
377
|
+
Data 3
|
|
378
|
+
</Text>
|
|
379
|
+
</TableRowCell>
|
|
380
|
+
</TableRow>
|
|
381
|
+
</TableCard>
|
|
382
|
+
<TableCard
|
|
383
|
+
data-sb-pseudo-styles="hover"
|
|
384
|
+
onClick={action("TableCard onClick")}
|
|
385
|
+
>
|
|
386
|
+
<TableRow>
|
|
387
|
+
<TableRowCell width={4 / 12}>
|
|
388
|
+
<Text tag="div" variant="body">
|
|
389
|
+
Hover
|
|
390
|
+
</Text>
|
|
391
|
+
</TableRowCell>
|
|
392
|
+
<TableRowCell width={4 / 12}>
|
|
393
|
+
<Text tag="div" variant="body">
|
|
394
|
+
Data 2
|
|
395
|
+
</Text>
|
|
396
|
+
</TableRowCell>
|
|
397
|
+
<TableRowCell width={4 / 12}>
|
|
398
|
+
<Text tag="div" variant="body">
|
|
399
|
+
Data 3
|
|
400
|
+
</Text>
|
|
401
|
+
</TableRowCell>
|
|
402
|
+
</TableRow>
|
|
403
|
+
</TableCard>
|
|
404
|
+
<TableCard
|
|
405
|
+
data-sb-pseudo-styles="focus-visible"
|
|
406
|
+
onClick={action("TableCard onClick")}
|
|
407
|
+
>
|
|
408
|
+
<TableRow>
|
|
409
|
+
<TableRowCell width={4 / 12}>
|
|
410
|
+
<Text tag="div" variant="body">
|
|
411
|
+
Focus
|
|
412
|
+
</Text>
|
|
413
|
+
</TableRowCell>
|
|
414
|
+
<TableRowCell width={4 / 12}>
|
|
415
|
+
<Text tag="div" variant="body">
|
|
416
|
+
Data 2
|
|
417
|
+
</Text>
|
|
418
|
+
</TableRowCell>
|
|
419
|
+
<TableRowCell width={4 / 12}>
|
|
420
|
+
<Text tag="div" variant="body">
|
|
421
|
+
Data 3
|
|
422
|
+
</Text>
|
|
423
|
+
</TableRowCell>
|
|
424
|
+
</TableRow>
|
|
425
|
+
</TableCard>
|
|
426
|
+
</TableContainer>
|
|
427
|
+
<Text
|
|
428
|
+
tag="div"
|
|
429
|
+
variant="intro-lede"
|
|
430
|
+
color={isReversed ? "white" : "dark"}
|
|
431
|
+
>
|
|
432
|
+
TableCard popout
|
|
433
|
+
</Text>
|
|
434
|
+
<TableContainer>
|
|
435
|
+
<TableHeader>
|
|
436
|
+
<TableRow>
|
|
437
|
+
<TableHeaderRowCell
|
|
438
|
+
reversed={isReversed}
|
|
439
|
+
labelText="State"
|
|
440
|
+
width={4 / 12}
|
|
441
|
+
/>
|
|
442
|
+
<TableHeaderRowCell
|
|
443
|
+
reversed={isReversed}
|
|
444
|
+
labelText="Second Colum"
|
|
445
|
+
width={4 / 12}
|
|
446
|
+
/>
|
|
447
|
+
<TableHeaderRowCell
|
|
448
|
+
reversed={isReversed}
|
|
449
|
+
labelText="Third column"
|
|
450
|
+
width={4 / 12}
|
|
451
|
+
/>
|
|
452
|
+
</TableRow>
|
|
453
|
+
</TableHeader>
|
|
454
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
455
|
+
<TableRow>
|
|
456
|
+
<TableRowCell width={4 / 12}>
|
|
457
|
+
<Text tag="div" variant="body">
|
|
458
|
+
Default
|
|
459
|
+
</Text>
|
|
460
|
+
</TableRowCell>
|
|
461
|
+
<TableRowCell width={4 / 12}>
|
|
462
|
+
<Text tag="div" variant="body">
|
|
463
|
+
Data 2
|
|
464
|
+
</Text>
|
|
465
|
+
</TableRowCell>
|
|
466
|
+
<TableRowCell width={4 / 12}>
|
|
467
|
+
<Text tag="div" variant="body">
|
|
468
|
+
Data 3
|
|
469
|
+
</Text>
|
|
470
|
+
</TableRowCell>
|
|
471
|
+
</TableRow>
|
|
472
|
+
</TableCard>
|
|
473
|
+
<TableCard
|
|
474
|
+
onClick={action("TableCard onClick")}
|
|
475
|
+
expanded
|
|
476
|
+
expandedStyle="popout"
|
|
477
|
+
>
|
|
478
|
+
<TableRow>
|
|
479
|
+
<TableRowCell width={4 / 12}>
|
|
480
|
+
<Text tag="div" variant="body">
|
|
481
|
+
Default popout
|
|
482
|
+
</Text>
|
|
483
|
+
</TableRowCell>
|
|
484
|
+
<TableRowCell width={4 / 12}>
|
|
485
|
+
<Text tag="div" variant="body">
|
|
486
|
+
Data 2
|
|
487
|
+
</Text>
|
|
488
|
+
</TableRowCell>
|
|
489
|
+
<TableRowCell width={4 / 12}>
|
|
490
|
+
<Text tag="div" variant="body">
|
|
491
|
+
Data 3
|
|
492
|
+
</Text>
|
|
493
|
+
</TableRowCell>
|
|
494
|
+
</TableRow>
|
|
495
|
+
</TableCard>
|
|
496
|
+
<TableCard
|
|
497
|
+
data-sb-pseudo-styles="hover"
|
|
498
|
+
onClick={action("TableCard onClick")}
|
|
499
|
+
expanded
|
|
500
|
+
expandedStyle="popout"
|
|
501
|
+
>
|
|
502
|
+
<TableRow>
|
|
503
|
+
<TableRowCell width={4 / 12}>
|
|
504
|
+
<Text tag="div" variant="body">
|
|
505
|
+
Hover
|
|
506
|
+
</Text>
|
|
507
|
+
</TableRowCell>
|
|
508
|
+
<TableRowCell width={4 / 12}>
|
|
509
|
+
<Text tag="div" variant="body">
|
|
510
|
+
None
|
|
511
|
+
</Text>
|
|
512
|
+
</TableRowCell>
|
|
513
|
+
<TableRowCell width={4 / 12}>
|
|
514
|
+
<Text tag="div" variant="body">
|
|
515
|
+
Data 3
|
|
516
|
+
</Text>
|
|
517
|
+
</TableRowCell>
|
|
518
|
+
</TableRow>
|
|
519
|
+
</TableCard>
|
|
520
|
+
<TableCard
|
|
521
|
+
data-sb-pseudo-styles="focus-visible"
|
|
522
|
+
onClick={action("TableCard onClick")}
|
|
523
|
+
expanded
|
|
524
|
+
expandedStyle="popout"
|
|
525
|
+
>
|
|
526
|
+
<TableRow>
|
|
527
|
+
<TableRowCell width={4 / 12}>
|
|
528
|
+
<Text tag="div" variant="body">
|
|
529
|
+
Focus
|
|
530
|
+
</Text>
|
|
531
|
+
</TableRowCell>
|
|
532
|
+
<TableRowCell width={4 / 12}>
|
|
533
|
+
<Text tag="div" variant="body">
|
|
534
|
+
None
|
|
535
|
+
</Text>
|
|
536
|
+
</TableRowCell>
|
|
537
|
+
<TableRowCell width={4 / 12}>
|
|
538
|
+
<Text tag="div" variant="body">
|
|
539
|
+
Data 3
|
|
540
|
+
</Text>
|
|
541
|
+
</TableRowCell>
|
|
542
|
+
</TableRow>
|
|
543
|
+
</TableCard>
|
|
544
|
+
</TableContainer>
|
|
545
|
+
<Text
|
|
546
|
+
tag="div"
|
|
547
|
+
variant="intro-lede"
|
|
548
|
+
color={isReversed ? "white" : "dark"}
|
|
549
|
+
>
|
|
550
|
+
TableCard well
|
|
551
|
+
</Text>
|
|
552
|
+
<TableContainer>
|
|
553
|
+
<TableHeader>
|
|
554
|
+
<TableRow>
|
|
555
|
+
<TableHeaderRowCell
|
|
556
|
+
reversed={isReversed}
|
|
557
|
+
labelText="State"
|
|
558
|
+
width={4 / 12}
|
|
559
|
+
/>
|
|
560
|
+
<TableHeaderRowCell
|
|
561
|
+
reversed={isReversed}
|
|
562
|
+
labelText="Second Colum"
|
|
563
|
+
width={4 / 12}
|
|
564
|
+
/>
|
|
565
|
+
<TableHeaderRowCell
|
|
566
|
+
reversed={isReversed}
|
|
567
|
+
labelText="Third column"
|
|
568
|
+
width={4 / 12}
|
|
569
|
+
/>
|
|
570
|
+
</TableRow>
|
|
571
|
+
</TableHeader>
|
|
572
|
+
<TableCard onClick={action("TableCard onClick")}>
|
|
573
|
+
<TableRow>
|
|
574
|
+
<TableRowCell width={4 / 12}>
|
|
575
|
+
<Text tag="div" variant="body">
|
|
576
|
+
Default
|
|
577
|
+
</Text>
|
|
578
|
+
</TableRowCell>
|
|
579
|
+
<TableRowCell width={4 / 12}>
|
|
580
|
+
<Text tag="div" variant="body">
|
|
581
|
+
Data 2
|
|
582
|
+
</Text>
|
|
583
|
+
</TableRowCell>
|
|
584
|
+
<TableRowCell width={4 / 12}>
|
|
585
|
+
<Text tag="div" variant="body">
|
|
586
|
+
Data 3
|
|
587
|
+
</Text>
|
|
588
|
+
</TableRowCell>
|
|
589
|
+
</TableRow>
|
|
590
|
+
</TableCard>
|
|
591
|
+
<TableCard onClick={action("TableCard onClick")} expanded>
|
|
592
|
+
<TableRow>
|
|
593
|
+
<TableRowCell width={4 / 12}>
|
|
594
|
+
<Text tag="div" variant="body">
|
|
595
|
+
Default well
|
|
596
|
+
</Text>
|
|
597
|
+
</TableRowCell>
|
|
598
|
+
<TableRowCell width={4 / 12}>
|
|
599
|
+
<Text tag="div" variant="body">
|
|
600
|
+
Data 2
|
|
601
|
+
</Text>
|
|
602
|
+
</TableRowCell>
|
|
603
|
+
<TableRowCell width={4 / 12}>
|
|
604
|
+
<Text tag="div" variant="body">
|
|
605
|
+
Data 3
|
|
606
|
+
</Text>
|
|
607
|
+
</TableRowCell>
|
|
608
|
+
</TableRow>
|
|
609
|
+
</TableCard>
|
|
610
|
+
<TableCard
|
|
611
|
+
onClick={action("TableCard onClick")}
|
|
612
|
+
expanded
|
|
613
|
+
expandedStyle="well"
|
|
614
|
+
data-sb-pseudo-styles="hover"
|
|
615
|
+
>
|
|
616
|
+
<TableRow>
|
|
617
|
+
<TableRowCell width={4 / 12}>
|
|
618
|
+
<Text tag="div" variant="body">
|
|
619
|
+
Hover
|
|
620
|
+
</Text>
|
|
621
|
+
</TableRowCell>
|
|
622
|
+
<TableRowCell width={4 / 12}>
|
|
623
|
+
<Text tag="div" variant="body">
|
|
624
|
+
None
|
|
625
|
+
</Text>
|
|
626
|
+
</TableRowCell>
|
|
627
|
+
<TableRowCell width={4 / 12}>
|
|
628
|
+
<Text tag="div" variant="body">
|
|
629
|
+
Data 3
|
|
630
|
+
</Text>
|
|
631
|
+
</TableRowCell>
|
|
632
|
+
</TableRow>
|
|
633
|
+
</TableCard>
|
|
634
|
+
<TableCard
|
|
635
|
+
onClick={action("TableCard onClick")}
|
|
636
|
+
expanded
|
|
637
|
+
expandedStyle="well"
|
|
638
|
+
data-sb-pseudo-styles="focus-visible"
|
|
639
|
+
>
|
|
640
|
+
<TableRow>
|
|
641
|
+
<TableRowCell width={4 / 12}>
|
|
642
|
+
<Text tag="div" variant="body">
|
|
643
|
+
Focus
|
|
644
|
+
</Text>
|
|
645
|
+
</TableRowCell>
|
|
646
|
+
<TableRowCell width={4 / 12}>
|
|
647
|
+
<Text tag="div" variant="body">
|
|
648
|
+
Well
|
|
649
|
+
</Text>
|
|
650
|
+
</TableRowCell>
|
|
651
|
+
<TableRowCell width={4 / 12}>
|
|
652
|
+
<Text tag="div" variant="body">
|
|
653
|
+
Data 3
|
|
654
|
+
</Text>
|
|
655
|
+
</TableRowCell>
|
|
656
|
+
</TableRow>
|
|
657
|
+
</TableCard>
|
|
658
|
+
</TableContainer>
|
|
659
|
+
</>
|
|
660
|
+
),
|
|
661
|
+
parameters: {
|
|
662
|
+
pseudo: {
|
|
663
|
+
hover: [
|
|
664
|
+
'[data-sb-pseudo-styles="hover"]',
|
|
665
|
+
'[data-sb-pseudo-styles="hover"] button',
|
|
666
|
+
'[data-sb-pseudo-styles="hover"] input',
|
|
667
|
+
],
|
|
668
|
+
focus: [
|
|
669
|
+
'[data-sb-pseudo-styles="focus"]',
|
|
670
|
+
'[data-sb-pseudo-styles="focus-visible"] button',
|
|
671
|
+
'[data-sb-pseudo-styles="focus-visible"] input',
|
|
672
|
+
],
|
|
673
|
+
focusVisible: [
|
|
674
|
+
'[data-sb-pseudo-styles="focus-visible"]',
|
|
675
|
+
'[data-sb-pseudo-styles="focus-visible"] button',
|
|
676
|
+
'[data-sb-pseudo-styles="focus-visible"] input',
|
|
677
|
+
],
|
|
678
|
+
},
|
|
679
|
+
},
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
export const StickerSheetDefault: StoryObj<StickerSheetStory> = {
|
|
683
|
+
...TableTemplate,
|
|
684
|
+
name: "Sticker Sheet (Default)",
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
export const StickerSheetRTL: StoryObj<StickerSheetStory> = {
|
|
688
|
+
...TableTemplate,
|
|
689
|
+
name: "Sticker Sheet (RTL)",
|
|
690
|
+
parameters: { ...TableTemplate.parameters, textDirection: "rtl" },
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
export const StickerSheetReversed: StoryObj<StickerSheetStory> = {
|
|
694
|
+
...TableTemplate,
|
|
695
|
+
name: "Sticker Sheet (Reversed)",
|
|
696
|
+
parameters: {
|
|
697
|
+
...TableTemplate.parameters,
|
|
698
|
+
backgrounds: { default: "Purple 700" },
|
|
699
|
+
},
|
|
700
|
+
args: {
|
|
701
|
+
isReversed: true,
|
|
702
|
+
},
|
|
703
|
+
}
|