Merge pull request #357 from act-org/encourage-responsive-size-font

feat: Encourage response font sizes
act-org · Nov 30, 2023 · 90f4acb · 90f4acb
2 parents c877e06 + c48a197
commit 90f4acb
Show file tree

Hide file tree

Showing 25 changed files with 241 additions and 115 deletions.
diff --git a/src/_foundations/Typography/index.stories.tsx b/src/_foundations/Typography/index.stories.tsx
@@ -12,12 +12,9 @@ import { Grid, IconButton, Tooltip, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { Variant } from '@mui/material/styles/createTypography';
 import { Meta, StoryObj } from '@storybook/react';
-import { compact, isPlainObject, isString, sortBy } from 'lodash';
+import { compact, isPlainObject } from 'lodash';
 import React from 'react';
 
-import pxToNumber from '@actinc/dls/helpers/pxToNumber';
-import { Px } from '@actinc/dls/types';
-
 import {
   StyledCode,
   StyledDivider,
@@ -40,6 +37,7 @@ const Story = (): React.ReactElement => {
 
   const variants = compact(
     Object.keys(typography).map((key: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       if (isPlainObject((typography as any)[key])) {
         return key as Variant;
       }
@@ -48,13 +46,7 @@ const Story = (): React.ReactElement => {
     }),
   ).filter((v: string): boolean => v !== 'allVariants');
 
-  const sortedVariants = sortBy(variants, v => {
-    const fontSize = typography[v].fontSize;
-
-    return fontSize && isString(fontSize)
-      ? pxToNumber(fontSize as Px)
-      : fontSize;
-  }).reverse();
+  const sortedVariants = variants;
 
   return (
     <>
@@ -75,6 +67,7 @@ const Story = (): React.ReactElement => {
                         <>
                           {Object.keys(properties).map(
                             (key): React.ReactElement => {
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
                               const cssStyle = (properties as any)[key];
                               const value = typography[variant][key];
 

diff --git a/src/components/Alert/__snapshots__/index.test.tsx.snap b/src/components/Alert/__snapshots__/index.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`Alert ENCOURA_CLASSIC theme matches the snapshot 1`] = `
 exports[`Alert ENCOURAGE theme matches the snapshot 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-tw8vhd-MuiPaper-root-MuiAlert-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-standardInfo MuiAlert-standard css-cpfl3m-MuiPaper-root-MuiAlert-root"
     role="alert"
   >
     <div
@@ -130,7 +130,7 @@ exports[`Alert ENCOURAGE theme matches the snapshot 1`] = `
       class="MuiAlert-message css-1pxa9xg-MuiAlert-message"
     >
       <div
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom MuiAlertTitle-root css-7fdefg-MuiTypography-root-MuiAlertTitle-root"
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom MuiAlertTitle-root css-1pufft8-MuiTypography-root-MuiAlertTitle-root"
       >
         Title Here
       </div>

diff --git a/src/components/AppBarNavigation/__snapshots__/index.test.tsx.snap b/src/components/AppBarNavigation/__snapshots__/index.test.tsx.snap
@@ -183,7 +183,7 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
           to="#"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-juuzfu-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-1s8n9o2-MuiTypography-root"
           >
             Home
           </p>
@@ -197,7 +197,7 @@ exports[`AppBarNavigation ENCOURAGE theme matches the snapshot 1`] = `
           to="#"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-1j7rahv-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-44715f-MuiTypography-root"
           >
             Other Page
           </p>

diff --git a/src/components/DataTable/__snapshots__/index.test.tsx.snap b/src/components/DataTable/__snapshots__/index.test.tsx.snap
@@ -1179,7 +1179,7 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiTableContainer-root css-rorn0c-MuiTableContainer-root"
   >
     <table
-      class="MuiTable-root css-s28p6d-MuiTable-root"
+      class="MuiTable-root css-11wan23-MuiTable-root"
     >
       <thead
         class="MuiTableHead-root css-15wwp11-MuiTableHead-root"
@@ -1188,12 +1188,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-head css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-ybk42f-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-1r69k76-MuiTableCell-root"
             color="default"
             style="width: 50px;"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
             >
               ID
             </p>
@@ -1228,12 +1228,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
             </div>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
             color="default"
             style="width: 100px;"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
             >
               Name
             </p>
@@ -1267,12 +1267,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
             </div>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
             color="default"
             style="width: 100px;"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
             >
               Field A
             </p>
@@ -1306,12 +1306,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
             </div>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
             color="default"
             style="width: 100px;"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
             >
               Field B
             </p>
@@ -1345,12 +1345,12 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
             </div>
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-pri5bu-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-mykn97-MuiTableCell-root"
             color="default"
             style="width: 100px;"
           >
             <p
-              class="MuiTypography-root MuiTypography-body1 css-lex51e-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1xw3xkx-MuiTypography-root"
             >
               Field C
             </p>
@@ -1392,31 +1392,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 50px;"
           >
             1
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Item 1
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field A1
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field B1
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field C1
@@ -1426,31 +1426,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 50px;"
           >
             2
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Item 2
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field A2
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field B2
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field C2
@@ -1460,31 +1460,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 50px;"
           >
             3
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Item 3
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field A3
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field B3
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field C3
@@ -1494,31 +1494,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 50px;"
           >
             4
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Item 4
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field A4
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field B4
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field C4
@@ -1528,31 +1528,31 @@ exports[`DataTable ENCOURAGE theme matches the snapshot 1`] = `
           class="MuiTableRow-root MuiTableRow-hover css-1kuw6lo-MuiTableRow-root"
         >
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 50px;"
           >
             5
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Item 5
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field A5
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field B5
           </td>
           <td
-            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-f1iblw-MuiTableCell-root"
+            class="MuiTableCell-root MuiTableCell-body MuiTableCell-paddingNone MuiTableCell-sizeMedium css-1sl1ij6-MuiTableCell-root"
             style="width: 100px;"
           >
             Field C5

diff --git a/src/components/EmptyState/__snapshots__/index.test.tsx.snap b/src/components/EmptyState/__snapshots__/index.test.tsx.snap
@@ -124,14 +124,14 @@ exports[`EmptyState ENCOURAGE theme matches the snapshot 1`] = `
         class="MuiGrid-root MuiGrid-item css-196vuex-MuiGrid-root"
       >
         <h6
-          class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-fafcxn-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-ii47vv-MuiTypography-root"
         >
           Title
         </h6>
       </div>
     </div>
     <p
-      class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-nl94jt-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter css-1q1dllr-MuiTypography-root"
     >
       Description
     </p>

diff --git a/src/components/FormCheckbox/__snapshots__/index.test.tsx.snap b/src/components/FormCheckbox/__snapshots__/index.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`FormCheckbox ENCOURAGE theme matches the snapshot 1`] = `
         />
       </span>
       <span
-        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1hg1gry-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-s6twv8-MuiTypography-root"
       >
         The label
       </span>

diff --git a/src/components/FormInput/__snapshots__/index.test.tsx.snap b/src/components/FormInput/__snapshots__/index.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
     class="MuiFormControl-root css-jayakb-MuiFormControl-root"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rsrurj-MuiFormLabel-root-MuiInputLabel-root"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-j635u4-MuiFormLabel-root-MuiInputLabel-root"
       data-shrink="true"
     >
       <div
@@ -122,7 +122,7 @@ exports[`FormInput ENCOURAGE theme matches the snapshot 1`] = `
       </div>
     </label>
     <div
-      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-1xuytew-MuiInputBase-root-MuiInput-root"
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl css-zr16f5-MuiInputBase-root-MuiInput-root"
     >
       <input
         aria-invalid="false"
-Original file line number
+Diff line change
@@ Expand Up @@
             />
           </span>
           <span
-            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-1hg1gry-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-s6twv8-MuiTypography-root"
           >
             The label
           </span>
@@ Expand Down @@