Skip to content

Commit

Permalink
Docs: Fix broken and incomplete storybook stories (#1063)
Browse files Browse the repository at this point in the history 
* Docs: Fix broken and incomplete storybook stories

* Docs: replace instances of .value with $.value, use description instead of comment
  • Loading branch information
@francinelucca
francinelucca authored Sep 20, 2024
1 parent 7806a4c commit 0bd6f45
Show file tree
Hide file tree
Showing 10 changed files with 46 additions and 46 deletions.
10 changes: 5 additions & 5 deletions docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const Light = () => {
field: 'name',
rowHeader: true,
renderCell: row => {
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
return (
<Stack direction="horizontal" gap="condensed">
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
Expand Down Expand Up @@ -135,7 +135,7 @@ export const Dark = () => {
field: 'name',
rowHeader: true,
renderCell: row => {
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
return (
<Stack direction="horizontal" gap="condensed">
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
Expand Down Expand Up @@ -211,7 +211,7 @@ export const LightHighContrast = () => {
field: 'name',
rowHeader: true,
renderCell: row => {
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
return (
<Stack direction="horizontal" gap="condensed">
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
Expand Down Expand Up @@ -287,7 +287,7 @@ export const DarkHighContrast = () => {
field: 'name',
rowHeader: true,
renderCell: row => {
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
return (
<Stack direction="horizontal" gap="condensed">
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
Expand Down Expand Up @@ -360,7 +360,7 @@ export const DarkDimmed = () => {
field: 'name',
rowHeader: true,
renderCell: row => {
const cleanedValue = `${row.original.value.replace(/[{}]/g, '').replace(/\./g, '-')}`
const cleanedValue = `${row.original.$value.replace(/[{}]/g, '').replace(/\./g, '-')}`
return (
<Stack direction="horizontal" gap="condensed">
<ColorTokenSwatch bgColor={cleanedValue} /> <code>{cleanedValue}</code>
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/Size/Border.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const BorderSize = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/Size/Breakpoints.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const Breakpoints = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
28 changes: 14 additions & 14 deletions docs/storybook/stories/Size/Control.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@ export const XSmall = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -165,10 +165,10 @@ export const Small = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -248,10 +248,10 @@ export const Medium = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -324,10 +324,10 @@ export const Large = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -400,10 +400,10 @@ export const XLarge = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -466,10 +466,10 @@ export const ControlStackRegular = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -584,10 +584,10 @@ export const ControlTouchTarget = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/Size/Overlay.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const Overlay = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
4 changes: 2 additions & 2 deletions docs/storybook/stories/Size/Size.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ export const Base = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
4 changes: 2 additions & 2 deletions docs/storybook/stories/Size/Stack.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ export const Stack = () => {
},
{
header: 'Source value',
field: 'original.value',
field: 'original.$value',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/Size/ViewportRange.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const Viewport = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
2 changes: 1 addition & 1 deletion docs/storybook/stories/Typography/Base.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export const Base = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.original.value}</p>
return <p>{row.original.$value}</p>
},
},
]}
Expand Down
36 changes: 18 additions & 18 deletions docs/storybook/stories/Typography/Functional.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,17 @@ export const FontShorthand = () => {
return (
<div>
<p>
font-weight: <code>{row.original.value.fontSize}</code>
font-weight: <code>{row.original.$value.fontSize}</code>
</p>
<p>
font-size: <code>{row.original.value.fontSize}</code>
font-size: <code>{row.original.$value.fontSize}</code>
</p>
<p>
font-family: <code>{row.original.value.fontFamily}</code>
font-family: <code>{row.original.$value.fontFamily}</code>
</p>
{row.original.value.lineHeight && (
{row.original.$value.lineHeight && (
<p>
line-height: <code>{row.original.value.lineHeight}</code>
line-height: <code>{row.original.$value.lineHeight}</code>
</p>
)}
</div>
Expand Down Expand Up @@ -200,7 +200,7 @@ export const Display = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -276,7 +276,7 @@ export const TitleLarge = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -353,7 +353,7 @@ export const TitleMedium = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -430,7 +430,7 @@ export const TitleSmall = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -505,7 +505,7 @@ export const Subtitle = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -582,7 +582,7 @@ export const BodyLarge = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -659,7 +659,7 @@ export const BodyMedium = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -736,7 +736,7 @@ export const BodySmall = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -811,7 +811,7 @@ export const Caption = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -886,7 +886,7 @@ export const CodeBlock = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -961,7 +961,7 @@ export const InlineCodeBlock = () => {
field: 'original',
rowHeader: true,
renderCell: row => {
return <p>{row.name.includes('shorthand') ? undefined : row.original.value}</p>
return <p>{row.name.includes('shorthand') ? undefined : row.original.$value}</p>
},
},
]}
Expand Down Expand Up @@ -1012,7 +1012,7 @@ export const Overview = () => {
},
{
header: 'Description',
field: 'comment',
field: 'description',
rowHeader: true,
width: 'auto',
renderCell: row => {
Expand All @@ -1025,7 +1025,7 @@ export const Overview = () => {
marginBottom: '0',
}}
>
{row.comment}
{row.description}
</p>
)
},
Expand Down

0 comments on commit 0bd6f45

Please sign in to comment.