Merge branch 'next' into jlee/removeDeprecatedDropdown

chanzuckerberg · Jul 26, 2023 · f491e32 · f491e32
2 parents fb8f826 + 569481a
commit f491e32
Show file tree

Hide file tree

Showing 306 changed files with 7,001 additions and 9,039 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,6 +12,9 @@ jobs:
     steps:
       - name: Checkout ⬇️
         uses: actions/checkout@v3
+        with:
+          # Omlet uses git history for analysis; disable shallow clone
+          fetch-depth: 0
 
       - name: Setup node 😻
         uses: actions/setup-node@v3

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/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/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>

diff --git a/.storybook/components/DesignTokens/Tier1/Shadows.jsx b/.storybook/components/DesignTokens/Tier1/Shadows.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 Tier1Shadows extends Component {
           <Grid>
             {filterTokens(`eds-box-shadow-`).map(function (listItem) {
               return (
-                <GridItem key={listItem.name}>
+                <Grid.Item key={listItem.name}>
                   <TokenSpecimen
                     inlineStyles={{
                       backgroundColor: '#fbfbfb',
@@ -20,7 +20,7 @@ export class Tier1Shadows extends Component {
                     name={listItem.name}
                     value={listItem.value}
                   />
-                </GridItem>
+                </Grid.Item>
               );
             })}
           </Grid>

diff --git a/.storybook/components/DesignTokens/Tier1/Sizes.jsx b/.storybook/components/DesignTokens/Tier1/Sizes.jsx
@@ -1,29 +1,49 @@
 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';
 
 export class Tier1Sizes extends Component {
   render() {
     return (
       <div>
-        <Section title="Size">
+        <Section title="Base Grid Size">
           <Grid>
-            {filterTokens(`eds-size`).map(function (listItem) {
-              return (
-                <GridItem key={listItem.name}>
-                  <TokenSpecimen
-                    inlineStyles={{
-                      width: `var(${listItem.name})`,
-                      height: `var(${listItem.name})`,
-                      minHeight: '0',
-                    }}
-                    name={listItem.name}
-                    value={listItem.value}
-                  />
-                </GridItem>
-              );
-            })}
+            {filterTokens('eds-size-base').map((listItem) => (
+              <Grid.Item key={listItem.name}>
+                <TokenSpecimen
+                  comment="Calculated from a multiple of the base font size --eds-font-size-base"
+                  inlineStyles={{
+                    width: `var(${listItem.name})`,
+                    height: `var(${listItem.name})`,
+                    minHeight: '0',
+                  }}
+                  name={listItem.name}
+                  value={listItem.value}
+                />
+              </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: `var(${listItem.name})`,
+                        height: `var(${listItem.name})`,
+                        minHeight: '0',
+                      }}
+                      name={listItem.name}
+                      value={listItem.value}
+                    />
+                  </Grid.Item>
+                );
+              })}
           </Grid>
         </Section>
       </div>

diff --git a/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx b/.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx
@@ -0,0 +1,43 @@
+import { at, forEach } from 'lodash';
+
+import React, { Component } from 'react';
+import { Grid, Section } from '../../../../src';
+import presets from '../../../../src/design-tokens/tier-1-definitions/typography.json';
+import flatten from '../../../util/flattenToken';
+import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
+
+export class Tier1TypographyPresets extends Component {
+  render() {
+    const values = {};
+    forEach(at(presets, 'eds.typography')[0], (_, key) => {
+      values[key] = flatten(
+        at(presets, `eds.typography.${key}`)[0],
+        `eds-typography-${key}-`,
+      );
+    });
+
+    return (
+      <div>
+        {Object.keys(values).map((section) => {
+          return (
+            <Section key={section} title="Typography Presets">
+              <Grid>
+                {Object.keys(values[section]).map((usage) => {
+                  return (
+                    <TokenSpecimen
+                      inlineStyles={{ font: values[section][usage] }}
+                      key={usage}
+                      name={usage}
+                      value={values[section][usage]}
+                      variant="typography-body"
+                    />
+                  );
+                })}
+              </Grid>
+            </Section>
+          );
+        })}
+      </div>
+    );
+  }
+}