docs: Add tokens to storybook examples (#31)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
linode · Dec 29, 2023 · 4452651 · 4452651
1 parent 325759a
commit 4452651
Show file tree

Hide file tree

Showing 19 changed files with 367 additions and 97 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,4 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400;1,6..12,600;1,6..12,700;1,6..12,800&display=swap" rel="stylesheet">
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/stories/ColorSwatch.stories.ts b/stories/ColorSwatch.stories.ts
@@ -6,12 +6,9 @@ const meta = {
   title: 'Example/ColorSwatch',
   component: ColorSwatch,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
     color: { control: 'color' },
   },
@@ -20,7 +17,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
   args: {
     color: 'red',

diff --git a/stories/ColorSwatch.tsx b/stories/ColorSwatch.tsx
@@ -8,20 +8,17 @@ interface ColorSwatchProps {
   color: string;
 }
 
-/**
- * A color swatch
- */
 export const ColorSwatch = ({ color }: ColorSwatchProps) => {
   return (
     <div
       style={{
         backgroundColor: color,
         border: `1px solid ${Border.Normal}`,
         borderRadius: '50%',
-        width: '50px',
+        flexShrink: 0,
         height: '50px',
+        width: '50px'
       }}
     />
   );
-}
-
+};
diff --git a/stories/Info.tsx b/stories/Info.tsx
@@ -3,34 +3,70 @@ import { ColorSwatch } from './ColorSwatch';
 import { Typography } from './Typography';
 import { formatValue } from './utils';
 
-export const TokenInfo = ({ color, colorName, value }) => (
-  <div
-    style={{
-      borderRadius: '0.5rem',
-      display: 'flex',
-      justifyContent: 'space-between'
-    }}
-  >
-    <ColorSwatch color={color} />
-    <div>
-      <Typography key={value} heading={'Hex'} value={color} />
-      <Typography
-        heading={'JS'}
-        key={value}
-        value={`Color.${colorName}${formatValue(value)}`}
-      />
-      <Typography
-        heading={'CSS'}
-        isLowerCase
-        key={value}
-        value={`--token-global-color-${colorName}-${value}`}
-      />
-      <Typography
-        heading={'SCSS'}
-        isLowerCase
-        key={value}
-        value={`$token-global-color-${colorName}-${value}`}
-      />
+interface TokenInfoProps {
+  concept?: string;
+  color: string;
+  state?: string;
+  type?: string;
+  value?: string;
+  variant: string;
+}
+
+export const TokenInfo = ({
+  concept,
+  color,
+  state = '',
+  type = 'global',
+  value,
+  variant
+}: TokenInfoProps) => {
+  const hasCategory = type !== 'global';
+  const jsConcept = concept ? `${concept}.` : '';
+  const cssConcept = concept ? `${concept}-` : '';
+  const jsState = state ? `.${state}` : '';
+  const cssState = state ? `${state}-` : '';
+
+  return (
+    <div
+      style={{
+        borderRadius: '0.5rem',
+        display: 'flex',
+        flexBasis: 'calc(50% - 1rem)',
+        gap: '.5rem',
+        padding: '.5rem'
+      }}
+    >
+      <ColorSwatch color={color} />
+      <div>
+        <Typography key={value} format={'Hex'} value={color} />
+        <Typography
+          format={'JS'}
+          key={value}
+          value={`${
+            hasCategory ? jsConcept : 'Color.'
+          }${variant}${jsState}${formatValue(value)}`}
+        />
+        <Typography
+          format={'CSS'}
+          isLowerCase
+          key={value}
+          value={
+            hasCategory
+              ? `--token-${type}-${cssConcept}${variant}-${cssState}${value}`
+              : `--token-${type}-color-${variant}-${cssState}${value}`
+          }
+        />
+        <Typography
+          format={'SCSS'}
+          isLowerCase
+          key={value}
+          value={
+            hasCategory
+              ? `$token-${type}-${cssConcept}${variant}-${cssState}${value}`
+              : `$token-${type}-color-${variant}-${cssState}${value}`
+          }
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/stories/Section.tsx b/stories/Section.tsx
@@ -1,28 +1,87 @@
 import React from 'react';
 import { TokenInfo } from './Info';
-import { Font } from '../dist/index.js';
+import { Border, Font } from '../dist/index.js';
 
-export const Section = ({ colorObject, colorName, title }) => (
-  <div key={colorName}>
-    <h2
-      style={{
-        fontFamily: Font.FontFamily.Brand
-      }}
-    >
-      {title}
-    </h2>
+interface SectionProps {
+  concept?: string;
+  stacked?: boolean;
+  state?: string;
+  title: string;
+  type?: string;
+  value: any;
+  variant: string;
+}
+
+export const Section = ({
+  concept,
+  stacked,
+  state,
+  title,
+  type,
+  value,
+  variant
+}: SectionProps) => {
+  const HeadingElement = stacked ? 'h3' : 'h2';
+  const isColorValueString = typeof value === 'string';
+
+  const renderValue = (
+    <TokenInfo type={type} color={value} variant={concept} value={variant} />
+  );
+
+  const renderInfo = isColorValueString
+    ? renderValue
+    : Object.entries(value).map(([key, value]) => {
+        if (value instanceof Object) {
+          return (
+            <Section
+              concept={concept}
+              key={key}
+              stacked
+              state={key}
+              title={key}
+              type={type}
+              value={value}
+              variant={variant}
+            />
+          );
+        }
+        return (
+          <TokenInfo
+            color={value as string}
+            concept={concept}
+            key={state}
+            state={state}
+            type={type}
+            value={key}
+            variant={variant}
+          />
+        );
+      });
+
+  return (
     <div
+      key={variant}
       style={{
-        display: 'grid',
-        gap: '2rem',
-        gridTemplateColumns: 'repeat(2, 1fr)'
+        width: '100%'
       }}
     >
-      {Object.entries(colorObject).map(([value, color]) => (
-        <div key={value}>
-          <TokenInfo color={color} colorName={colorName} value={value} />
-        </div>
-      ))}
+      <HeadingElement
+        style={{
+          borderBottom: !stacked && `1px solid ${Border.Normal}`,
+          fontFamily: Font.FontFamily.Brand
+        }}
+      >
+        {title}
+      </HeadingElement>
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          width: '100%'
+        }}
+      >
+        {renderInfo}
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/stories/Typography.tsx b/stories/Typography.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Border, Color, Font, Spacing } from '../dist/index.js';
 
-export const Typography = ({ key, heading, value, isLowerCase = false }) => {
+export const Typography = ({ key, format, value, isLowerCase = false }) => {
   if (isLowerCase) value = value.toLowerCase();
 
   return (
@@ -13,20 +13,20 @@ export const Typography = ({ key, heading, value, isLowerCase = false }) => {
     >
       <span
         style={{
-          fontFamily: 'sans-serif',
+          fontFamily: Font.FontFamily.Code,
           fontSize: Font.FontSize.Xxxs,
-          fontWeight: Font.FontWeight.Bold
+          fontWeight: Font.FontWeight.Semibold
         }}
       >
-        {heading}:
+        {format}:
       </span>{' '}
       <span
         style={{
           background: Color.Neutrals[5],
           border: `1px solid ${Border.Normal}`,
           borderRadius: '0.2rem',
           color: Color.Red[90],
-          fontFamily: 'monospace',
+          fontFamily: Font.FontFamily.Code,
           fontSize: Font.FontSize.Xxxs,
           padding: Spacing[10],
           whiteSpace: 'nowrap'

diff --git a/stories/alias/AliasColors.stories.ts b/stories/alias/AliasColors.stories.ts
@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
+import { Action,
+  Background,
+  Border,
+  Content,
+  Interaction, } from '../../dist/index.js';
 import { AliasColors } from './AliasColors';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: 'Colors/Alias',
   component: AliasColors,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'padded',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
 
   },
@@ -21,8 +21,37 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
+export const Actions: Story = {
+  args: {
+    concept: Action,
+    conceptHeading: 'Action'
+  },
+};
+
+export const Backgrounds: Story = {
+  args: {
+    concept: Background,
+    conceptHeading: 'Background'
+  },
+};
+
+export const Borders: Story = {
+  args: {
+    concept: Border,
+    conceptHeading: 'Border'
+  },
+};
+
+export const ContentColors: Story = {
+  args: {
+    concept: Content,
+    conceptHeading: 'Content'
+  },
+};
+
+export const Interactions: Story = {
   args: {
+    concept: Interaction,
+    conceptHeading: 'Interaction'
   },
 };
diff --git a/stories/alias/AliasColors.tsx b/stories/alias/AliasColors.tsx
@@ -1,16 +1,19 @@
 import React from 'react';
-import { Action } from '../../dist/index.js';
 import { Section } from '../Section.js';
 
-export const AliasColors = () => (
+export const AliasColors = ({ concept, conceptHeading }) => (
   <>
-    {Object.entries(Action).map(([colorName, colorObject]) => (
-      <Section
-        colorName={colorName}
-        colorObject={colorObject}
-        key={colorName}
-        title={`${colorName} Colors`}
-      />
-    ))}
+    {Object.entries(concept).map(([key, colorObject]) => {
+      return (
+        <Section
+          concept={conceptHeading}
+          key={key}
+          title={key}
+          type="alias"
+          value={colorObject}
+          variant={key}
+        />
+      );
+    })}
   </>
 );