Merge pull request #1723 from chanzuckerberg/release-v13.0.0

## [13.0.0](v12.4.2...v13.0.0) (2023-08-14) ### ⚠ BREAKING CHANGES * **link:** remove text-link tokens for link t3 tokens (#1639) * **colors:** remove old colors and convert to input and show figma token (#1711) * remove deprecated dropdown (#1657) * **banner:** remove component (#1702) * remove legacy tokens and typography mixins (#1709) * **Grid:** remove top-level sub-component(s) (#1703) * **dragdrop:** remove top level subcomponents (#1697) * **Fieldset:** remove top-level sub-component(s) (#1695) * **HorizontalStepper:** remove top-level sub-component(s) (#1696) * **Card:** remove top-level sub-component(s) (#1692) * **checkbox:** remove top level subcomponents (#1693) * **radio:** remove top level subcomponents (#1690) * **DataBar:** remove top-level sub-component(s) (#1686) * **Modal:** remove top-level sub-component(s) (#1689) * **searchbar:** remove top level subcomponents (#1687) * **table:** remove top-level sub-components (#1685) * **toolbar:** remove component (#1683) * **Breadcrumbs:** remove top-level sub-component (#1680) * **timelinenav:** remove top-level sub-component (#1681) ### Features * **Breadcrumbs:** remove top-level sub-component ([#1680](#1680)) ([669081d](669081d)) * **Card:** remove top-level sub-component(s) ([#1692](#1692)) ([7ec01f4](7ec01f4)) * **checkbox:** remove top level subcomponents ([#1693](#1693)) ([87b12e8](87b12e8)) * **DataBar:** remove top-level sub-component(s) ([#1686](#1686)) ([b4b9276](b4b9276)) * **dragdrop:** remove top level subcomponents ([#1697](#1697)) ([b4fd00c](b4fd00c)) * **Fieldset:** remove top-level sub-component(s) ([#1695](#1695)) ([0c8280d](0c8280d)) * **Grid:** remove top-level sub-component(s) ([#1703](#1703)) ([c8925c9](c8925c9)) * **HorizontalStepper:** remove top-level sub-component(s) ([#1696](#1696)) ([188fd99](188fd99)) * **Layout:** mark layout components as deprecated ([#1700](#1700)) ([930a369](930a369)) * **Modal:** remove top-level sub-component(s) ([#1689](#1689)) ([8743e62](8743e62)) * **radio:** remove top level subcomponents ([#1690](#1690)) ([82da617](82da617)) * remove legacy tokens and typography mixins ([#1709](#1709)) ([ec3e819](ec3e819)) * **searchbar:** remove top level subcomponents ([#1687](#1687)) ([d13bb6c](d13bb6c)) * **table:** remove top-level sub-components ([#1685](#1685)) ([742a530](742a530)) * **timelinenav:** remove top-level sub-component ([#1681](#1681)) ([f46eca7](f46eca7)) ### Bug Fixes * **Avatar:** support display names using emoji and multi-byte ([#1716](#1716)) ([1294022](1294022)) * update token exports ([#1722](#1722)) ([982c55f](982c55f)) * **banner:** remove component ([#1702](#1702)) ([356550c](356550c)) * **colors:** remove old colors and convert to input and show figma token ([#1711](#1711)) ([c9a5079](c9a5079)) * **link:** remove text-link tokens for link t3 tokens ([#1639](#1639)) ([d35cfe4](d35cfe4)) * remove deprecated dropdown ([#1657](#1657)) ([26d1694](26d1694)) * **toolbar:** remove component ([#1683](#1683)) ([bd47899](bd47899))
chanzuckerberg · Aug 15, 2023 · c935b4f · c935b4f
2 parents b4eace2 + c5795a2
commit c935b4f
Show file tree

Hide file tree

Showing 326 changed files with 7,260 additions and 16,955 deletions.
diff --git a/.omletrc.json b/.omletrc.json
@@ -0,0 +1,5 @@
+{
+  "ignore": ["lib/**", ".storybook/**"],
+  "include": ["src/components/**/*.tsx"],
+  "tsconfigPath": "tsconfig.json"
+}
diff --git a/.storybook/components/ColorList/ColorList.module.css b/.storybook/components/ColorList/ColorList.module.css
@@ -0,0 +1,30 @@
+.color-list__label {
+  width: fit-content;
+  padding: var(--eds-size-half);
+  border-radius: var(--eds-theme-box-button-border-radius);
+
+  font: var(--eds-theme-typography-label-md-subtle);
+  color: rgb(235, 87, 87);
+
+  background-color: var(--eds-theme-color-background-neutral-subtle);
+}
+
+.color-list__input {
+  width: 100%;
+  height: 5rem;
+  border: var(--eds-theme-color-border-neutral-subtle) solid
+    var(--eds-border-width-sm);
+  outline: var(--eds-theme-color-border-neutral-strong) solid
+    var(--eds-border-width-sm);
+}
+
+.color-list__input::-webkit-color-swatch {
+  border-color: transparent;
+}
+.color-list__input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-list__input::-moz-color-swatch {
+  border-color: transparent;
+}
diff --git a/.storybook/components/ColorList/ColorList.tsx b/.storybook/components/ColorList/ColorList.tsx
@@ -1,33 +1,56 @@
-import React, { Component } from 'react';
-import { Grid } from '../../../src';
-import { TokenSpecimen } from '../TokenSpecimen/TokenSpecimen';
+import React from 'react';
+import Table from '../../../src/components/Table';
+import styles from './ColorList.module.css';
 
 type ListItem = {
   name: string;
-  value: any;
+  value: string;
+  figmaToken?: string;
+  tailwindClass?: string;
 };
 
 type Props = {
   listItems: ListItem[];
 };
 
-export class ColorList extends Component<Props> {
-  render() {
-    return (
-      <Grid>
-        {this.props.listItems.map(function (listItem) {
-          return (
-            <TokenSpecimen
-              inlineStyles={{
-                backgroundColor: `var(${listItem.name})`,
-              }}
-              key={listItem.name}
-              name={listItem.name}
+export const ColorList = (props: Props) => (
+  <Table>
+    <Table.Header>
+      <Table.Row variant="header">
+        <Table.HeaderCell className="w-72">CSS Variable</Table.HeaderCell>
+        <Table.HeaderCell className="w-40">Figma Token Name</Table.HeaderCell>
+        <Table.HeaderCell className="w-72">
+          Tailwind Class Name(s)
+        </Table.HeaderCell>
+        <Table.HeaderCell className="w-40">Raw Value</Table.HeaderCell>
+        <Table.HeaderCell>Clickable Color Palatte</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {props.listItems.map((listItem) => (
+        <Table.Row key={listItem.name}>
+          <Table.Cell>
+            <label
+              className={styles['color-list__label']}
+              htmlFor={listItem.name}
+            >
+              <code>{listItem.name}</code>
+            </label>
+          </Table.Cell>
+          <Table.Cell>{listItem.figmaToken}</Table.Cell>
+          <Table.Cell>{listItem.tailwindClass}</Table.Cell>
+          <Table.Cell>{listItem.value}</Table.Cell>
+          <Table.Cell>
+            <input
+              className={styles['color-list__input']}
+              id={listItem.name}
+              readOnly
+              type="color"
               value={listItem.value}
             />
-          );
-        })}
-      </Grid>
-    );
-  }
-}
+          </Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  </Table>
+);
diff --git a/.storybook/components/DesignTokens/Tier1/Animation.jsx b/.storybook/components/DesignTokens/Tier1/Animation.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-fade`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionDuration: `var(${listItem.name})`,
@@ -20,7 +20,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-fade"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -30,7 +30,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-move`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionDuration: `var(${listItem.name})`,
@@ -39,7 +39,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-move"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -49,7 +49,7 @@ export class Tier1Animation extends Component {
           <Grid>
             {filterTokens(`eds-anim-ease`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       transitionTimingFunction: `var(${listItem.name})`,
@@ -58,7 +58,7 @@ export class Tier1Animation extends Component {
                     value={listItem.value}
                     variant="animation-fade"
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Borders.jsx b/.storybook/components/DesignTokens/Tier1/Borders.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,7 +11,7 @@ export class Tier1Borders extends Component {
           <Grid>
             {filterTokens(`eds-border-width`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
@@ -22,7 +22,7 @@ export class Tier1Borders extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>
@@ -32,7 +32,7 @@ export class Tier1Borders extends Component {
           <Grid>
             {filterTokens(`eds-border-radius`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: 'transparent',
@@ -44,7 +44,7 @@ export class Tier1Borders extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Colors.jsx b/.storybook/components/DesignTokens/Tier1/Colors.jsx
diff --git a/.storybook/components/DesignTokens/Tier1/Colors.tsx b/.storybook/components/DesignTokens/Tier1/Colors.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import '../DesignTokens.css';
+import { Section } from '../../../../src';
+import filterTokens from '../../../util/filterTokens';
+import { ColorList } from '../../ColorList/ColorList';
+
+export const Tier1Colors = () => {
+  const getListItems = (filterTerm: string, figmaTokenHeader: string) =>
+    filterTokens(filterTerm).map(({ name, value }) => ({
+      name,
+      value,
+      figmaToken:
+        figmaTokenHeader + '/' + name.slice(name.lastIndexOf('-') + 1),
+    }));
+  return (
+    <div>
+      <Section title="Neutral Colors">
+        <ColorList listItems={getListItems('eds-color-neutral', 'neutral')} />
+      </Section>
+      <Section title="Brand Colors">
+        <ColorList listItems={getListItems('eds-color-brand', 'brand-grape')} />
+      </Section>
+      <Section className="flex flex-col gap-3" title="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')} />
+        <ColorList
+          listItems={getListItems('eds-color-other-lemon', 'supporting')}
+        />
+      </Section>
+    </div>
+  );
+};
diff --git a/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx b/.storybook/components/DesignTokens/Tier1/FontFamilies.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontFamilies = () => (
     <Grid>
       {filterTokens(`eds-font-family`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontFamily: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontFamilies = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontSizes.tsx b/.storybook/components/DesignTokens/Tier1/FontSizes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontSizes = () => (
     <Grid>
       {filterTokens(`eds-font-size`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontSize: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontSizes = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/FontWeights.tsx b/.storybook/components/DesignTokens/Tier1/FontWeights.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -8,7 +8,7 @@ export const FontWeights = () => (
     <Grid>
       {filterTokens(`eds-font-weight`).map(function (listItem) {
         return (
-          <GridItem key={listItem.name}>
+          <Grid.Item key={listItem.name}>
             <TokenSpecimen
               inlineStyles={{
                 fontWeight: `var(${listItem.name})`,
@@ -17,7 +17,7 @@ export const FontWeights = () => (
               value={listItem.value}
               variant="typography-title"
             />
-          </GridItem>
+          </Grid.Item>
         );
       })}
     </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Layout.jsx b/.storybook/components/DesignTokens/Tier1/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Grid, GridItem, Section } from '../../../../src';
+import { Grid, Section } from '../../../../src';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
@@ -11,15 +11,15 @@ export class Tier1Layout extends Component {
           <Grid>
             {filterTokens(`eds-l-`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       maxWidth: `var(${listItem.name})`,
                     }}
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>