feat!: pre-cleanup changes to prepare for v15 (#1992)

- remove lingering TODO items
- clean up background color tokens from 1.0
- mark tokens as deprecated
- clean up type extension doc.s for Link/Button
- add in usages of size tokens in components
- update token documentation pages
- remove v1 components and link remaining components to new versions
- update remaining v1 components to work with v2 components
    - HorizontalStepper
    - Table
    - SearchBar
- clean up stories in documentation
- adjustments to table using sortable icon

.storybook/components/DesignTokens/Tier1/Borders.jsx

@@ -6,6 +6,7 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Borders extends Component {
   render() {
+    // TODO: what are the width tokens to document?
     return (
       <div>
         <Section title="Border Width">

.storybook/components/DesignTokens/Tier1/Colors.tsx

@@ -12,31 +12,59 @@ export const Tier1Colors = () => {
       figmaToken:
         figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
     }));
+
+  // filter down to the neutral tokens which were introduced or redefined in the new brand
+  const nonLegacyNeutralItems = getListItems(
+    'eds-color-neutral',
+    'neutral',
+  ).filter((item) => {
+    // TODO: remove this filter once the deprecated neutral tokens are deleted
+    return [
+      '025',
+      '050',
+      '100',
+      '150',
+      '200',
+      '250',
+      '350',
+      '450',
+      '550',
+      '650',
+      '750',
+      '800',
+      '850',
+      '900',
+      '950',
+    ].includes(item.figmaToken.split('/')[1]);
+  });
   return (
     <div>
-      <Section title="Brand Colors 2.0">
+      <Section
+        description="These base colors are used in higher tier tokens and not linked for use via Tailwind"
+        title="Brand Red Colors"
+      >
         <ColorList listItems={getListItems('eds-color-red', 'red')} />
+      </Section>
+      <Section title="Brand Orange Colors">
         <ColorList listItems={getListItems('eds-color-orange', 'orange')} />
+      </Section>
+      <Section title="Brand Yellow Colors">
         <ColorList listItems={getListItems('eds-color-yellow', 'yellow')} />
+      </Section>
+      <Section title="Brand Green Colors">
         <ColorList listItems={getListItems('eds-color-green', 'green')} />
+      </Section>
+      <Section title="Brand Blue Colors">
         <ColorList listItems={getListItems('eds-color-blue', 'blue')} />
+      </Section>
+      <Section title="Brand Purple Colors">
+        <ColorList listItems={getListItems('eds-color-purple', 'purple')} />
+      </Section>
+      <Section title="Brand Pink Colors">
         <ColorList listItems={getListItems('eds-color-pink', 'pink')} />
       </Section>
-      <Section title="Neutral Colors">
-        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
-      </Section>
-      <Section title="Legacy Brand Colors">
-        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
-      </Section>
-      <Section className="flex flex-col gap-3" title="Legacy Other Colors">
-        <ColorList
-          listItems={getListItems('eds-color-other-orange', 'orange')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-mint', 'mint')} />
-        <ColorList
-          listItems={getListItems('eds-color-other-yellow', 'yellow')}
-        />
-        <ColorList listItems={getListItems('eds-color-other-ruby', 'ruby')} />
+      <Section title="Brand Neutral Colors">
+        <ColorList listItems={nonLegacyNeutralItems} />
       </Section>
     </div>
   );

.storybook/components/DesignTokens/Tier1/Sizes.jsx

@@ -7,49 +7,35 @@ import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 export class Tier1Sizes extends Component {
   render() {
     return (
-      <div>
-        <Section title="Base Grid Size">
-          <Grid>
-            {filterTokens('eds-size-base').map((listItem) => (
-              <Grid.Item key={listItem.name}>
-                <TokenSpecimen
-                  comment="Calculated from a multiple of the base font size"
-                  inlineStyles={{
-                    width: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                    height: `calc(var(${listItem.name}) /16 * 1rem)`,
-                    minHeight: '0',
-                  }}
-                  name={listItem.name}
-                  value={listItem.value + 'px' + ` (${listItem.value / 16}rem)`}
-                />
-              </Grid.Item>
-            ))}
-          </Grid>
-        </Section>
-        <Section title="Grid Size">
-          <Grid>
-            {filterTokens(`eds-size`)
-              .filter((listItem) => !listItem.name.endsWith('base-unit'))
-              .map(function (listItem) {
-                return (
-                  <Grid.Item key={listItem.name}>
-                    <TokenSpecimen
-                      inlineStyles={{
-                        width: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                        height: `calc(var(${listItem.name}) / 16 * 1rem)`,
-                        minHeight: '0',
-                      }}
-                      name={listItem.name}
-                      value={
-                        listItem.value + 'px' + ` (${listItem.value / 16}rem)`
-                      }
-                    />
-                  </Grid.Item>
-                );
-              })}
-          </Grid>
-        </Section>
-      </div>
+      <Section
+        description="When using tailwind config, these sizes can be applied to any tailwind size utility class"
+        title="Grid Sizes"
+      >
+        <Grid>
+          {filterTokens(`eds-size`)
+            .filter((listItem) => !listItem.name.endsWith('base-unit'))
+            .map(function (listItem) {
+              return (
+                <Grid.Item key={listItem.name}>
+                  <TokenSpecimen
+                    comment={`Tailwind class: *-${
+                      listItem.name.split('--eds-')[1]
+                    }`}
+                    inlineStyles={{
+                      width: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      height: `calc(var(${listItem.name}) / 16 * 1rem)`,
+                      minHeight: '0',
+                    }}
+                    name={listItem.name}
+                    value={
+                      listItem.value + 'px' + ` (${listItem.value / 16}rem)`
+                    }
+                  />
+                </Grid.Item>
+              );
+            })}
+        </Grid>
+      </Section>
     );
   }
 }

.storybook/components/DesignTokens/Tier1/Tier1Tokens.stories.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Tier1Animation } from './Animation';
 import { Tier1Borders } from './Borders';
 import { Tier1Colors } from './Colors';
-import { Tier1Layout } from './Layout';
 import { Tier1Shadows } from './Shadows';
 import { Tier1Sizes } from './Sizes';
 
@@ -22,6 +21,8 @@ export default {
   },
 };
 
+// TODO: Tokens to document: eds-color-opacity
+
 export const Colors = {
   render: () => <Tier1Colors />,
 };
@@ -38,10 +39,6 @@ export const Sizes = {
   render: () => <Tier1Sizes />,
 };
 
-export const Layout = {
-  render: () => <Tier1Layout />,
-};
-
 export const Shadows = {
   render: () => <Tier1Shadows />,
 };

.storybook/components/DesignTokens/Tier2/Borders.stories.tsx

@@ -15,20 +15,21 @@ export default {
   },
 };
 
-export const Borders: StoryObj = {
+export const BorderRadii: StoryObj = {
   render: () => (
     <div>
-      <Section title="Border Width">
+      <Section title="Border Radii">
         <Grid>
-          {filterTokens(`eds-theme-border-width`).map(function (listItem) {
+          {filterTokens(`eds-theme-border-radius`).map(function (listItem) {
             return (
               <Grid.Item key={listItem.name}>
                 <TokenSpecimen
                   inlineStyles={{
                     backgroundColor: 'transparent',
-                    borderWidth: `calc(var(${listItem.name}) * 1px)`,
                     borderStyle: 'solid',
+                    borderWidth: '1px',
                     borderColor: 'black',
+                    borderRadius: `calc(var(${listItem.name}) * 1px)`,
                   }}
                   name={listItem.name}
                   value={listItem.value + 'px'}

.storybook/components/DesignTokens/Tier2/Colors.stories.tsx

@@ -14,6 +14,9 @@ export default {
   },
 };
 
+const camelCaseWarning =
+  'NOTE: emphasis tokens have a camelCase suffix for the emphasis (e.g., lowEmphasis)';
+
 const getListItems = ({
   filterTerm,
   figmaTokenHeader,
@@ -35,63 +38,104 @@ const getListItems = ({
     };
   });
 
-export const Text: StoryObj = {
+export const TextUtility: StoryObj = {
   render: () => (
     <div>
-      <Section title="Text Colors">
+      <Section title="Text Colors (utility)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-text',
+            filterTerm: 'eds-theme-color-text-utility',
             figmaTokenHeader: 'text',
-            tailwindClassHeader: 'text',
+            tailwindClassHeader: 'text-utility',
           })}
         />
       </Section>
     </div>
   ),
 };
 
-export const Icon: StoryObj = {
+export const IconUtility: StoryObj = {
   render: () => (
     <div>
-      <Section title="Icon Colors">
+      <Section title="Icon Colors (utility)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-icon',
+            filterTerm: 'eds-theme-color-icon-utility',
             figmaTokenHeader: 'icon',
-            tailwindClassHeader: 'text-icon',
+            tailwindClassHeader: 'text-icon-utility',
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const BackgroundUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section
+        description={camelCaseWarning}
+        title="Background Colors (utility)"
+      >
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-background-utility',
+            figmaTokenHeader: 'background',
+            tailwindClassHeader: 'bg-utility',
           })}
         />
       </Section>
     </div>
   ),
 };
 
-export const Background: StoryObj = {
+export const BackgroundBrand: StoryObj = {
   render: () => (
     <div>
-      <Section title="Background Colors">
+      <Section description={camelCaseWarning} title="Background Colors (brand)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-background',
+            filterTerm: 'eds-theme-color-background-brand',
             figmaTokenHeader: 'background',
-            tailwindClassHeader: 'bg',
+            tailwindClassHeader: 'bg-brand',
+          }).filter((item) => {
+            // remove legacy primary tokens
+            return item.name.indexOf('primary') === -1;
+          })}
+        />
+      </Section>
+    </div>
+  ),
+};
+
+export const BorderUtility: StoryObj = {
+  render: () => (
+    <div>
+      <Section description={camelCaseWarning} title="Border Colors (utility)">
+        <ColorList
+          listItems={getListItems({
+            filterTerm: 'eds-theme-color-border-utility',
+            figmaTokenHeader: 'border',
+            tailwindClassHeader: 'border-utility',
           })}
         />
       </Section>
     </div>
   ),
 };
 
-export const Border: StoryObj = {
+export const BorderBrand: StoryObj = {
   render: () => (
     <div>
-      <Section title="Border Colors">
+      <Section description={camelCaseWarning} title="Border Colors (brand)">
         <ColorList
           listItems={getListItems({
-            filterTerm: 'eds-theme-color-border',
+            filterTerm: 'eds-theme-color-border-brand',
             figmaTokenHeader: 'border',
-            tailwindClassHeader: 'border',
+            tailwindClassHeader: 'border-brand',
+          }).filter((item) => {
+            // remove legacy primary tokens
+            return item.name.indexOf('primary') === -1;
           })}
         />
       </Section>