feat(text, heading): allow all 3 neutral text colors via variant prop

chanzuckerberg · Jul 26, 2022 · 01b2250 · 01b2250
1 parent 243490a
commit 01b2250
Show file tree

Hide file tree

Showing 23 changed files with 184 additions and 154 deletions.
diff --git a/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx b/.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
@@ -340,7 +340,7 @@ export const CoursePlannerEdit = () => {
         <DragDropContainerHeader>
           <Toolbar className="u-margin-bottom-md" variant="bare">
             <ToolbarItem>
-              <Heading as="h2" size="title-sm" variant="base">
+              <Heading as="h2" size="title-sm" variant="neutralStrong">
                 Available projects
               </Heading>
             </ToolbarItem>
@@ -361,7 +361,7 @@ export const CoursePlannerEdit = () => {
         <DragDropContainerHeader>
           <Toolbar className="u-margin-bottom-md" variant="bare">
             <ToolbarItem>
-              <Heading as="h2" size="title-sm" variant="base">
+              <Heading as="h2" size="title-sm" variant="neutralStrong">
                 Planned projects
               </Heading>
             </ToolbarItem>
@@ -508,7 +508,7 @@ export const CoursePlannerEdit = () => {
                 as="h2"
                 className="u-margin-bottom-md"
                 size="headline-sm"
-                variant="base"
+                variant="neutralStrong"
               >
                 Select projects for your History 6 plan
               </Heading>

diff --git a/.storybook/pages/ProjectOverview/ProjectOverview.tsx b/.storybook/pages/ProjectOverview/ProjectOverview.tsx
@@ -56,7 +56,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
             as="h2"
             className="u-margin-bottom-xl"
             size="headline-md"
-            variant="base"
+            variant="neutralStrong"
           >
             What is this Project About?
           </Heading>
@@ -71,7 +71,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
             as="h3"
             className="u-margin-bottom-sm"
             size="title-md"
-            variant="base"
+            variant="neutralStrong"
           >
             Essential Questions
           </Heading>
@@ -90,7 +90,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
             as="h3"
             className="u-margin-bottom-sm"
             size="title-md"
-            variant="base"
+            variant="neutralStrong"
           >
             Key Take Aways
           </Heading>
@@ -130,7 +130,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
                   as="h3"
                   className="u-margin-bottom-sm"
                   size="title-xs"
-                  variant="base"
+                  variant="neutralStrong"
                 >
                   What Was Medieval Japan Like?
                 </Heading>
@@ -146,7 +146,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
                   as="h3"
                   className="u-margin-bottom-sm"
                   size="title-xs"
-                  variant="base"
+                  variant="neutralStrong"
                 >
                   What Was Medieval Japan Like?
                 </Heading>
@@ -162,7 +162,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
                   as="h3"
                   className="u-margin-bottom-sm"
                   size="title-xs"
-                  variant="base"
+                  variant="neutralStrong"
                 >
                   What Was Medieval Japan Like?
                 </Heading>
@@ -180,7 +180,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
                   as="h3"
                   className="u-margin-bottom-sm"
                   size="title-xs"
-                  variant="base"
+                  variant="neutralStrong"
                 >
                   What Was Medieval Japan Like?
                 </Heading>
@@ -196,7 +196,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
                   as="h3"
                   className="u-margin-bottom-sm"
                   size="title-xs"
-                  variant="base"
+                  variant="neutralStrong"
                 >
                   What Was Medieval Japan Like?
                 </Heading>
@@ -227,7 +227,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
               as="h3"
               className="u-margin-bottom-lg"
               size="headline-sm"
-              variant="base"
+              variant="neutralStrong"
             >
               What to Focus on this Checkpoint
             </Heading>
@@ -279,7 +279,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
               as="h3"
               className="u-margin-bottom-lg"
               size="headline-sm"
-              variant="base"
+              variant="neutralStrong"
             >
               Resources for You
             </Heading>
@@ -311,7 +311,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
               as="h3"
               className="u-margin-bottom-lg"
               size="headline-sm"
-              variant="base"
+              variant="neutralStrong"
             >
               Resources for You
             </Heading>

diff --git a/.storybook/recipes/TableCard/TableCard.tsx b/.storybook/recipes/TableCard/TableCard.tsx
@@ -70,7 +70,7 @@ export const TableCard = ({
           as="h2"
           className="u-margin-bottom-md"
           size="title-sm"
-          variant="base"
+          variant="neutralStrong"
         >
           {title}
         </Heading>

diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ import { Heading } from '@chanzuckerberg/eds';
 and then use them in your React components
 
 ```jsx
-<Heading variant="neutral" size="h2">
+<Heading variant="neutralStrong" size="h2">
   Coffee!
 </Heading>
 ```

diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -139,6 +139,8 @@ export const Banner = ({
     isFlat && styles['banner--flat'],
   );
 
+  const variantComputed = variant === 'neutral' ? 'neutralStrong' : variant;
+
   return (
     <article className={componentClassName}>
       <Icon
@@ -151,12 +153,12 @@ export const Banner = ({
       <div className={clsx(styles['banner__text-and-action'])}>
         <div>
           {title && (
-            <Heading as={titleAs} size="title-md" variant={variant}>
+            <Heading as={titleAs} size="title-md" variant={variantComputed}>
               {title}
             </Heading>
           )}
           {description && (
-            <Text as={descriptionAs} size="sm" variant="base">
+            <Text as={descriptionAs} size="sm" variant="neutralMedium">
               {description}
             </Text>
           )}

diff --git a/src/components/Banner/__snapshots__/Banner.test.tsx.snap b/src/components/Banner/__snapshots__/Banner.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`<Banner /> Brand story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -75,7 +75,7 @@ exports[`<Banner /> BrandDismissable story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -142,7 +142,7 @@ exports[`<Banner /> BrandWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -207,7 +207,7 @@ exports[`<Banner /> DismissableWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -285,7 +285,7 @@ exports[`<Banner /> Error story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -331,7 +331,7 @@ exports[`<Banner /> ErrorDismissable story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -398,7 +398,7 @@ exports[`<Banner /> ErrorWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -455,7 +455,7 @@ exports[`<Banner /> Flat story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -496,12 +496,12 @@ exports[`<Banner /> Neutral story renders snapshot 1`] = `
   >
     <div>
       <h3
-        class="heading heading--size-title-md heading--neutral"
+        class="heading heading--size-title-md heading--neutral-strong"
       >
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -542,12 +542,12 @@ exports[`<Banner /> NeutralDismissable story renders snapshot 1`] = `
   >
     <div>
       <h3
-        class="heading heading--size-title-md heading--neutral"
+        class="heading heading--size-title-md heading--neutral-strong"
       >
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -609,12 +609,12 @@ exports[`<Banner /> NeutralWithAction story renders snapshot 1`] = `
   >
     <div>
       <h3
-        class="heading heading--size-title-md heading--neutral"
+        class="heading heading--size-title-md heading--neutral-strong"
       >
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -699,7 +699,7 @@ exports[`<Banner /> NoTitle story renders snapshot 1`] = `
   >
     <div>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -745,7 +745,7 @@ exports[`<Banner /> Success story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -791,7 +791,7 @@ exports[`<Banner /> SuccessDismissable story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -858,7 +858,7 @@ exports[`<Banner /> SuccessWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -915,7 +915,7 @@ exports[`<Banner /> Vertical story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -961,7 +961,7 @@ exports[`<Banner /> VerticalDismissable story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -1028,7 +1028,7 @@ exports[`<Banner /> VerticalDismissableWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -1106,7 +1106,7 @@ exports[`<Banner /> VerticalWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -1163,7 +1163,7 @@ exports[`<Banner /> Warning story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -1209,7 +1209,7 @@ exports[`<Banner /> WarningDismissable story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,
          
@@ -1276,7 +1276,7 @@ exports[`<Banner /> WarningWithAction story renders snapshot 1`] = `
         New curriculum updates are available for one or more of your courses.
       </h3>
       <p
-        class="text text--sm text--base"
+        class="text text--sm text--neutral-medium"
       >
         Summit Learning has a full-time team dedicated to constantly improving our curriculum. To see the updates,