From 0bd6f4509b68696a68f6e27760f5bca0c60be9f9 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Fri, 20 Sep 2024 05:39:52 -0400
Subject: [PATCH] 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
---
 .../TransparentColor.stories.tsx              | 10 +++---
 .../storybook/stories/Size/Border.stories.tsx |  2 +-
 .../stories/Size/Breakpoints.stories.tsx      |  2 +-
 .../stories/Size/Control.stories.tsx          | 28 +++++++--------
 .../stories/Size/Overlay.stories.tsx          |  2 +-
 docs/storybook/stories/Size/Size.stories.tsx  |  4 +--
 docs/storybook/stories/Size/Stack.stories.tsx |  4 +--
 .../stories/Size/ViewportRange.stories.tsx    |  2 +-
 .../stories/Typography/Base.stories.tsx       |  2 +-
 .../stories/Typography/Functional.stories.tsx | 36 +++++++++----------
 10 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx b/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
index 71015ecf3..7f667a9b3 100644
--- a/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
+++ b/docs/storybook/stories/Color/TransparentColors/TransparentColor.stories.tsx
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
diff --git a/docs/storybook/stories/Size/Border.stories.tsx b/docs/storybook/stories/Size/Border.stories.tsx
index d5860b2cf..8c8fa6ffc 100644
--- a/docs/storybook/stories/Size/Border.stories.tsx
+++ b/docs/storybook/stories/Size/Border.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/Breakpoints.stories.tsx b/docs/storybook/stories/Size/Breakpoints.stories.tsx
index 692de62e1..91bef5259 100644
--- a/docs/storybook/stories/Size/Breakpoints.stories.tsx
+++ b/docs/storybook/stories/Size/Breakpoints.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/Control.stories.tsx b/docs/storybook/stories/Size/Control.stories.tsx
index 3b3812d30..3b1dcfb35 100644
--- a/docs/storybook/stories/Size/Control.stories.tsx
+++ b/docs/storybook/stories/Size/Control.stories.tsx
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/Overlay.stories.tsx b/docs/storybook/stories/Size/Overlay.stories.tsx
index 859866963..a61b0466e 100644
--- a/docs/storybook/stories/Size/Overlay.stories.tsx
+++ b/docs/storybook/stories/Size/Overlay.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/Size.stories.tsx b/docs/storybook/stories/Size/Size.stories.tsx
index f174dbf04..8d2811034 100644
--- a/docs/storybook/stories/Size/Size.stories.tsx
+++ b/docs/storybook/stories/Size/Size.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/Stack.stories.tsx b/docs/storybook/stories/Size/Stack.stories.tsx
index 381cffdfd..a4eb0ff48 100644
--- a/docs/storybook/stories/Size/Stack.stories.tsx
+++ b/docs/storybook/stories/Size/Stack.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Size/ViewportRange.stories.tsx b/docs/storybook/stories/Size/ViewportRange.stories.tsx
index d01124a8a..6550c668b 100644
--- a/docs/storybook/stories/Size/ViewportRange.stories.tsx
+++ b/docs/storybook/stories/Size/ViewportRange.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Typography/Base.stories.tsx b/docs/storybook/stories/Typography/Base.stories.tsx
index cc30b0c00..fff574090 100644
--- a/docs/storybook/stories/Typography/Base.stories.tsx
+++ b/docs/storybook/stories/Typography/Base.stories.tsx
@@ -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>
             },
           },
         ]}
diff --git a/docs/storybook/stories/Typography/Functional.stories.tsx b/docs/storybook/stories/Typography/Functional.stories.tsx
index d30bb8882..216f8ef33 100644
--- a/docs/storybook/stories/Typography/Functional.stories.tsx
+++ b/docs/storybook/stories/Typography/Functional.stories.tsx
@@ -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>
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -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>
             },
           },
         ]}
@@ -1012,7 +1012,7 @@ export const Overview = () => {
           },
           {
             header: 'Description',
-            field: 'comment',
+            field: 'description',
             rowHeader: true,
             width: 'auto',
             renderCell: row => {
@@ -1025,7 +1025,7 @@ export const Overview = () => {
                     marginBottom: '0',
                   }}
                 >
-                  {row.comment}
+                  {row.description}
                 </p>
               )
             },