fix storybook

Author: lukasoppermann

docs/storybook/stories/Color/DataVis/Charts.stories.tsx

@@ -17,18 +17,18 @@ export default {
 }
 
 export const HighchartsAccentColors = () => {
-  const data = getTokensByName(colorTokens, 'data').map(token => {
-    console.log(token)
-    
-    return {
-      id: token.name,
-      ...token,
-    }
-  })
+  const data = getTokensByName(colorTokens, 'data')
+    .filter(({type}) => type === 'color')
+    .map(token => {
+      return {
+        id: token.name,
+        ...token,
+      }
+    })
   return (
     <Table.Container>
       <Table.Title as="h1" id="pattern">
-        Data visualization
+        Data visualization colors
       </Table.Title>
       <DataTable
         aria-labelledby="pattern"
@@ -63,3 +63,53 @@ export const HighchartsAccentColors = () => {
     </Table.Container>
   )
 }
+
+export const HighchartsGradients = () => {
+  const data = getTokensByName(colorTokens, 'data')
+    .filter(({type}) => type === 'gradient')
+    .map(token => {
+      console.log(token)
+
+      return {
+        id: token.name,
+        ...token,
+      }
+    })
+  return (
+    <Table.Container>
+      <Table.Title as="h1" id="pattern">
+        Data visualization gradients
+      </Table.Title>
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch gradientStops={row.value} />
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard cssVar />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value.map(({color, position}) => `${color} ${position * 100}%`).join(', ')}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}

docs/storybook/stories/StorybookComponents/ColorTokenSwatch/ColorTokenSwatch.tsx

@@ -8,6 +8,8 @@ export type ColorTokenSwatchProps = {
   shadowColor?: string
   outlineColor?: string
   selectionColor?: string
+  gradientStops?: Record<string, number>[]
+  gradientAngle?: number
   size?: 'default' | 'large'
 }
 
@@ -18,6 +20,8 @@ export function ColorTokenSwatch({
   shadowColor,
   outlineColor,
   selectionColor,
+  gradientStops,
+  gradientAngle = 180,
   size = 'default',
 }: ColorTokenSwatchProps) {
   return (
@@ -29,6 +33,14 @@ export function ColorTokenSwatch({
       )}
       {borderColor && <div style={{borderColor: `var(--${borderColor})`}} className="ColorTokenSwatch-border"></div>}
       {bgColor && <div style={{backgroundColor: `var(--${bgColor})`}} className="ColorTokenSwatch-bg"></div>}
+      {gradientStops && (
+        <div
+          style={{
+            background: `linear-gradient(${gradientAngle}deg, ${gradientStops.map(({color, position}) => `${color} ${position * 100}%`).join(', ')})`,
+          }}
+          className="ColorTokenSwatch-bg"
+        ></div>
+      )}
       {shadowColor && <div style={{boxShadow: `var(--${shadowColor})`}} className="ColorTokenSwatch-shadow"></div>}
       {outlineColor && (
         <div style={{outlineColor: `var(--${outlineColor})`}} className="ColorTokenSwatch-outline"></div>

src/tokens/functional/color/data-vis.json5

@@ -60,11 +60,11 @@
         $type: 'gradient',
         $value: [
           {
-            color: '{data.blue.color.gradient-stop-1}',
+            color: '{data.blue.color.gradientStop.1}',
             position: 0,
           },
           {
-            color: '{data.blue.color.gradient-stop-2}',
+            color: '{data.blue.color.gradientStop.2}',
             position: 1,
           },
         ],