Skip to content

Commit 0bd6f45

Browse files
francineluccafrancinelucca
authored
Docs: Fix broken and incomplete storybook stories (#1063)
* Docs: Fix broken and incomplete storybook stories * Docs: replace instances of .value with $.value, use description instead of comment
1 parent 7806a4c commit 0bd6f45

File tree

10 files changed

+46
-46
lines changed

10 files changed

+46
-46
lines changed

‎docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const Light = () => {
5959
field: 'name',
6060
rowHeader: true,
6161
renderCell: row => {
62-
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
62+
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
6363
return (
6464
<Stack direction="horizontal" gap="condensed">
6565
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
@@ -135,7 +135,7 @@ export const Dark = () => {
135135
field: 'name',
136136
rowHeader: true,
137137
renderCell: row => {
138-
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
138+
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
139139
return (
140140
<Stack direction="horizontal" gap="condensed">
141141
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
@@ -211,7 +211,7 @@ export const LightHighContrast = () => {
211211
field: 'name',
212212
rowHeader: true,
213213
renderCell: row => {
214-
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
214+
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
215215
return (
216216
<Stack direction="horizontal" gap="condensed">
217217
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
@@ -287,7 +287,7 @@ export const DarkHighContrast = () => {
287287
field: 'name',
288288
rowHeader: true,
289289
renderCell: row => {
290-
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
290+
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
291291
return (
292292
<Stack direction="horizontal" gap="condensed">
293293
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
@@ -360,7 +360,7 @@ export const DarkDimmed = () => {
360360
field: 'name',
361361
rowHeader: true,
362362
renderCell: row => {
363-
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
363+
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
364364
return (
365365
<Stack direction="horizontal" gap="condensed">
366366
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>

‎docs/storybook/stories/Size/Border.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const BorderSize = () => {
7777
field: 'original',
7878
rowHeader: true,
7979
renderCell: row => {
80-
return <p>{row.original.value}</p>
80+
return <p>{row.original.$value}</p>
8181
},
8282
},
8383
]}

‎docs/storybook/stories/Size/Breakpoints.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const Breakpoints = () => {
5050
field: 'original',
5151
rowHeader: true,
5252
renderCell: row => {
53-
return <p>{row.original.value}</p>
53+
return <p>{row.original.$value}</p>
5454
},
5555
},
5656
]}

‎docs/storybook/stories/Size/Control.stories.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ export const XSmall = () => {
8989
},
9090
{
9191
header: 'Source value',
92-
field: 'original.value',
92+
field: 'original.$value',
9393
rowHeader: true,
9494
renderCell: row => {
95-
return <p>{row.original.value}</p>
95+
return <p>{row.original.$value}</p>
9696
},
9797
},
9898
]}
@@ -165,10 +165,10 @@ export const Small = () => {
165165
},
166166
{
167167
header: 'Source value',
168-
field: 'original.value',
168+
field: 'original.$value',
169169
rowHeader: true,
170170
renderCell: row => {
171-
return <p>{row.original.value}</p>
171+
return <p>{row.original.$value}</p>
172172
},
173173
},
174174
]}
@@ -248,10 +248,10 @@ export const Medium = () => {
248248
},
249249
{
250250
header: 'Source value',
251-
field: 'original.value',
251+
field: 'original.$value',
252252
rowHeader: true,
253253
renderCell: row => {
254-
return <p>{row.original.value}</p>
254+
return <p>{row.original.$value}</p>
255255
},
256256
},
257257
]}
@@ -324,10 +324,10 @@ export const Large = () => {
324324
},
325325
{
326326
header: 'Source value',
327-
field: 'original.value',
327+
field: 'original.$value',
328328
rowHeader: true,
329329
renderCell: row => {
330-
return <p>{row.original.value}</p>
330+
return <p>{row.original.$value}</p>
331331
},
332332
},
333333
]}
@@ -400,10 +400,10 @@ export const XLarge = () => {
400400
},
401401
{
402402
header: 'Source value',
403-
field: 'original.value',
403+
field: 'original.$value',
404404
rowHeader: true,
405405
renderCell: row => {
406-
return <p>{row.original.value}</p>
406+
return <p>{row.original.$value}</p>
407407
},
408408
},
409409
]}
@@ -466,10 +466,10 @@ export const ControlStackRegular = () => {
466466
},
467467
{
468468
header: 'Source value',
469-
field: 'original.value',
469+
field: 'original.$value',
470470
rowHeader: true,
471471
renderCell: row => {
472-
return <p>{row.original.value}</p>
472+
return <p>{row.original.$value}</p>
473473
},
474474
},
475475
]}
@@ -584,10 +584,10 @@ export const ControlTouchTarget = () => {
584584
},
585585
{
586586
header: 'Source value',
587-
field: 'original.value',
587+
field: 'original.$value',
588588
rowHeader: true,
589589
renderCell: row => {
590-
return <p>{row.original.value}</p>
590+
return <p>{row.original.$value}</p>
591591
},
592592
},
593593
]}

‎docs/storybook/stories/Size/Overlay.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const Overlay = () => {
5050
field: 'original',
5151
rowHeader: true,
5252
renderCell: row => {
53-
return <p>{row.original.value}</p>
53+
return <p>{row.original.$value}</p>
5454
},
5555
},
5656
]}

‎docs/storybook/stories/Size/Size.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ export const Base = () => {
5757
},
5858
{
5959
header: 'Source value',
60-
field: 'original.value',
60+
field: 'original.$value',
6161
rowHeader: true,
6262
renderCell: row => {
63-
return <p>{row.original.value}</p>
63+
return <p>{row.original.$value}</p>
6464
},
6565
},
6666
]}

‎docs/storybook/stories/Size/Stack.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ export const Stack = () => {
6262
},
6363
{
6464
header: 'Source value',
65-
field: 'original.value',
65+
field: 'original.$value',
6666
rowHeader: true,
6767
renderCell: row => {
68-
return <p>{row.original.value}</p>
68+
return <p>{row.original.$value}</p>
6969
},
7070
},
7171
]}

‎docs/storybook/stories/Size/ViewportRange.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Viewport = () => {
4949
field: 'original',
5050
rowHeader: true,
5151
renderCell: row => {
52-
return <p>{row.original.value}</p>
52+
return <p>{row.original.$value}</p>
5353
},
5454
},
5555
]}

‎docs/storybook/stories/Typography/Base.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const Base = () => {
6464
field: 'original',
6565
rowHeader: true,
6666
renderCell: row => {
67-
return <p>{row.original.value}</p>
67+
return <p>{row.original.$value}</p>
6868
},
6969
},
7070
]}

‎docs/storybook/stories/Typography/Functional.stories.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -114,17 +114,17 @@ export const FontShorthand = () => {
114114
return (
115115
<div>
116116
<p>
117-
font-weight: <code>{row.original.value.fontSize}</code>
117+
font-weight: <code>{row.original.$value.fontSize}</code>
118118
</p>
119119
<p>
120-
font-size: <code>{row.original.value.fontSize}</code>
120+
font-size: <code>{row.original.$value.fontSize}</code>
121121
</p>
122122
<p>
123-
font-family: <code>{row.original.value.fontFamily}</code>
123+
font-family: <code>{row.original.$value.fontFamily}</code>
124124
</p>
125-
{row.original.value.lineHeight && (
125+
{row.original.$value.lineHeight && (
126126
<p>
127-
line-height: <code>{row.original.value.lineHeight}</code>
127+
line-height: <code>{row.original.$value.lineHeight}</code>
128128
</p>
129129
)}
130130
</div>
@@ -200,7 +200,7 @@ export const Display = () => {
200200
field: 'original',
201201
rowHeader: true,
202202
renderCell: row => {
203-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
203+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
204204
},
205205
},
206206
]}
@@ -276,7 +276,7 @@ export const TitleLarge = () => {
276276
field: 'original',
277277
rowHeader: true,
278278
renderCell: row => {
279-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
279+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
280280
},
281281
},
282282
]}
@@ -353,7 +353,7 @@ export const TitleMedium = () => {
353353
field: 'original',
354354
rowHeader: true,
355355
renderCell: row => {
356-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
356+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
357357
},
358358
},
359359
]}
@@ -430,7 +430,7 @@ export const TitleSmall = () => {
430430
field: 'original',
431431
rowHeader: true,
432432
renderCell: row => {
433-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
433+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
434434
},
435435
},
436436
]}
@@ -505,7 +505,7 @@ export const Subtitle = () => {
505505
field: 'original',
506506
rowHeader: true,
507507
renderCell: row => {
508-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
508+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
509509
},
510510
},
511511
]}
@@ -582,7 +582,7 @@ export const BodyLarge = () => {
582582
field: 'original',
583583
rowHeader: true,
584584
renderCell: row => {
585-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
585+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
586586
},
587587
},
588588
]}
@@ -659,7 +659,7 @@ export const BodyMedium = () => {
659659
field: 'original',
660660
rowHeader: true,
661661
renderCell: row => {
662-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
662+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
663663
},
664664
},
665665
]}
@@ -736,7 +736,7 @@ export const BodySmall = () => {
736736
field: 'original',
737737
rowHeader: true,
738738
renderCell: row => {
739-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
739+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
740740
},
741741
},
742742
]}
@@ -811,7 +811,7 @@ export const Caption = () => {
811811
field: 'original',
812812
rowHeader: true,
813813
renderCell: row => {
814-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
814+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
815815
},
816816
},
817817
]}
@@ -886,7 +886,7 @@ export const CodeBlock = () => {
886886
field: 'original',
887887
rowHeader: true,
888888
renderCell: row => {
889-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
889+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
890890
},
891891
},
892892
]}
@@ -961,7 +961,7 @@ export const InlineCodeBlock = () => {
961961
field: 'original',
962962
rowHeader: true,
963963
renderCell: row => {
964-
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
964+
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
965965
},
966966
},
967967
]}
@@ -1012,7 +1012,7 @@ export const Overview = () => {
10121012
},
10131013
{
10141014
header: 'Description',
1015-
field: 'comment',
1015+
field: 'description',
10161016
rowHeader: true,
10171017
width: 'auto',
10181018
renderCell: row => {
@@ -1025,7 +1025,7 @@ export const Overview = () => {
10251025
marginBottom: '0',
10261026
}}
10271027
>
1028-
{row.comment}
1028+
{row.description}
10291029
</p>
10301030
)
10311031
},

0 commit comments

Comments
 (0)