feat(NavigationHeader): implement NavigationHeader component (#885)

* feat(navigationbar): add new component - WIP, support API for modifying home image, links, and responsiveness re #728 * feat(header): implements desktop header * feat(header): mobile header implementation * refactor(navigationheader): renames to NavigationHeader * fix(navigationheader): fix lint error * refactor(navigationheader): rename story title * refactor(navigationheader): rename to isNarrow * fix(navigationheader): address styling issues * refactor(navigationheader): use object props instead of ReactNode * fix(navigationheader): remove unused import * fix(navigationheader): fix build error * refactor(navigationheader): inverted style prop * fix(navigationheader): remove unused imports * test(navigationheader): update snapshots * test(navigationheader): fix axe test * fix(navigationheader): address design feedback * fix(navigationheader): fixed colors and added new customTheme for Buttons and InputSearch * fix(navigationheader): fixed Chevron position in secondary nav items * feat(designtokens): added new inverse colors to design tokens * fix(navigationheader): fixed prop forwarding issues * fix(navigationheader): fixed Button and ButtonDropdown types Added tests and coverred all available controls in the storybook for the NavigationHeader component * fix(navigationheader): added tests and fixed bugs * fix(inputdropdown): fix styles * fix(inputdropdown): fixed button styles * fix(navigationheader): fixed design review bugs and finalized the component * feat(navigationheader): added auto switch between mobile and desktop if there is not enough space * fix(navigationheader): fixed style errors * fix(navigationheader): fixed primary nav items hover style --------- Co-authored-by: Andrew Holloway <booc0mtaco@users.noreply.github.com> Co-authored-by: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
chanzuckerberg · Feb 13, 2025 · 97ba7f5 · 97ba7f5
1 parent add779b
commit 97ba7f5
Show file tree

Hide file tree

Showing 55 changed files with 2,834 additions and 491 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "webpack": "^5.90.1"
   },
   "scripts": {
-    "start": "storybook dev -p 6006 --no-open",
+    "start": "NODE_OPTIONS=\"--max-old-space-size=8192\" && storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build -o docs-build",
     "test-storybook": "test-storybook",
     "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",

diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json
@@ -106,18 +106,34 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "border-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "border-hover": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
+          "border-hover-inverse": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
           "border-inverse": {
+            "value": "{sds.color.primitive.gray.300.value}",
+            "darkValue": "{sds.color.primitive.gray.300.darkValue}"
+          },
+          "border-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
           },
           "border-pressed": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
           },
+          "border-pressed-inverse": {
+            "value": "{sds.color.primitive.gray.50.value}",
+            "darkValue": "{sds.color.primitive.gray.50.darkValue}"
+          },
           "border-table": {
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
@@ -158,6 +174,10 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "ornament-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "ornament-on-fill": {
             "value": "{sds.color.primitive.gray.50.value}",
             "darkValue": "{sds.color.primitive.gray.50.darkValue}"
@@ -174,6 +194,10 @@
             "value": "{sds.color.primitive.gray.600.value}",
             "darkValue": "{sds.color.primitive.gray.600.darkValue}"
           },
+          "ornament-secondary-inverse": {
+            "value": "{sds.color.primitive.gray.300.value}",
+            "darkValue": "{sds.color.primitive.gray.300.darkValue}"
+          },
           "ornament-secondary-hover": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"
@@ -194,6 +218,10 @@
             "value": "{sds.color.primitive.gray.300.value}",
             "darkValue": "{sds.color.primitive.gray.300.darkValue}"
           },
+          "text-disabled-inverse": {
+            "value": "{sds.color.primitive.gray.600.value}",
+            "darkValue": "{sds.color.primitive.gray.600.darkValue}"
+          },
           "text-primary": {
             "value": "{sds.color.primitive.gray.900.value}",
             "darkValue": "{sds.color.primitive.gray.900.darkValue}"

diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -1165,9 +1165,13 @@
       "sds-color-semantic-base-background-tertiary": "#494949",
       "sds-color-semantic-base-border": "#cdcdcd",
       "sds-color-semantic-base-border-disabled": "#696969",
+      "sds-color-semantic-base-border-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-border-hover": "#ffffff",
-      "sds-color-semantic-base-border-inverse": "#000000",
+      "sds-color-semantic-base-border-hover-inverse": "#000000",
+      "sds-color-semantic-base-border-inverse": "#696969",
+      "sds-color-semantic-base-border-on-fill": "#000000",
       "sds-color-semantic-base-border-pressed": "#ffffff",
+      "sds-color-semantic-base-border-pressed-inverse": "#000000",
       "sds-color-semantic-base-border-table": "#696969",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-inverse": "#cdcdcd",
@@ -1178,15 +1182,18 @@
       "sds-color-semantic-base-fill-primary": "#000000",
       "sds-color-semantic-base-fill-selected": "#ffffff",
       "sds-color-semantic-base-ornament-disabled": "#696969",
+      "sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-ornament-on-fill": "#000000",
       "sds-color-semantic-base-ornament-primary": "#ffffff",
       "sds-color-semantic-base-ornament-primary-inverse": "#000000",
       "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
+      "sds-color-semantic-base-ornament-secondary-inverse": "#696969",
       "sds-color-semantic-base-ornament-secondary-hover": "#ffffff",
       "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
       "sds-color-semantic-base-surface": "#000000",
       "sds-color-semantic-base-surface-inverse": "#ffffff",
       "sds-color-semantic-base-text-disabled": "#696969",
+      "sds-color-semantic-base-text-disabled-inverse": "#cdcdcd",
       "sds-color-semantic-base-text-primary": "#ffffff",
       "sds-color-semantic-base-text-primary-inverse": "#000000",
       "sds-color-semantic-base-text-secondary": "#cdcdcd",
@@ -1327,9 +1334,13 @@
       "sds-color-semantic-base-background-tertiary": "#dfdfdf",
       "sds-color-semantic-base-border": "#6c6c6c",
       "sds-color-semantic-base-border-disabled": "#c3c3c3",
+      "sds-color-semantic-base-border-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-border-hover": "#000000",
-      "sds-color-semantic-base-border-inverse": "#ffffff",
+      "sds-color-semantic-base-border-hover-inverse": "#ffffff",
+      "sds-color-semantic-base-border-inverse": "#c3c3c3",
+      "sds-color-semantic-base-border-on-fill": "#ffffff",
       "sds-color-semantic-base-border-pressed": "#000000",
+      "sds-color-semantic-base-border-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-border-table": "#c3c3c3",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-inverse": "#6c6c6c",
@@ -1340,15 +1351,18 @@
       "sds-color-semantic-base-fill-primary": "#ffffff",
       "sds-color-semantic-base-fill-selected": "#000000",
       "sds-color-semantic-base-ornament-disabled": "#c3c3c3",
+      "sds-color-semantic-base-ornament-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-ornament-on-fill": "#ffffff",
       "sds-color-semantic-base-ornament-primary": "#000000",
       "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
       "sds-color-semantic-base-ornament-secondary": "#6c6c6c",
+      "sds-color-semantic-base-ornament-secondary-inverse": "#c3c3c3",
       "sds-color-semantic-base-ornament-secondary-hover": "#000000",
       "sds-color-semantic-base-ornament-secondary-pressed": "#000000",
       "sds-color-semantic-base-surface": "#ffffff",
       "sds-color-semantic-base-surface-inverse": "#000000",
       "sds-color-semantic-base-text-disabled": "#c3c3c3",
+      "sds-color-semantic-base-text-disabled-inverse": "#6c6c6c",
       "sds-color-semantic-base-text-primary": "#000000",
       "sds-color-semantic-base-text-primary-inverse": "#ffffff",
       "sds-color-semantic-base-text-secondary": "#6c6c6c",

diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -191,12 +191,20 @@ $sds-color-semantic-base-border: #6c6c6c;
 $sds-color-semantic-base-border-dark: #cdcdcd;
 $sds-color-semantic-base-border-disabled: #c3c3c3;
 $sds-color-semantic-base-border-disabled-dark: #696969;
+$sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-border-hover: #000000;
 $sds-color-semantic-base-border-hover-dark: #ffffff;
-$sds-color-semantic-base-border-inverse: #ffffff;
-$sds-color-semantic-base-border-inverse-dark: #000000;
+$sds-color-semantic-base-border-hover-inverse: #ffffff;
+$sds-color-semantic-base-border-hover-inverse-dark: #000000;
+$sds-color-semantic-base-border-inverse: #c3c3c3;
+$sds-color-semantic-base-border-inverse-dark: #696969;
+$sds-color-semantic-base-border-on-fill: #ffffff;
+$sds-color-semantic-base-border-on-fill-dark: #000000;
 $sds-color-semantic-base-border-pressed: #000000;
 $sds-color-semantic-base-border-pressed-dark: #ffffff;
+$sds-color-semantic-base-border-pressed-inverse: #ffffff;
+$sds-color-semantic-base-border-pressed-inverse-dark: #000000;
 $sds-color-semantic-base-border-table: #c3c3c3;
 $sds-color-semantic-base-border-table-dark: #696969;
 $sds-color-semantic-base-divider: #dfdfdf;
@@ -217,6 +225,8 @@ $sds-color-semantic-base-fill-selected: #000000;
 $sds-color-semantic-base-fill-selected-dark: #ffffff;
 $sds-color-semantic-base-ornament-disabled: #c3c3c3;
 $sds-color-semantic-base-ornament-disabled-dark: #696969;
+$sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-ornament-on-fill: #ffffff;
 $sds-color-semantic-base-ornament-on-fill-dark: #000000;
 $sds-color-semantic-base-ornament-primary: #000000;
@@ -225,6 +235,8 @@ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
 $sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
 $sds-color-semantic-base-ornament-secondary: #6c6c6c;
 $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
+$sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
+$sds-color-semantic-base-ornament-secondary-inverse-dark: #696969;
 $sds-color-semantic-base-ornament-secondary-hover: #000000;
 $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
 $sds-color-semantic-base-ornament-secondary-pressed: #000000;
@@ -235,6 +247,8 @@ $sds-color-semantic-base-surface-inverse: #000000;
 $sds-color-semantic-base-surface-inverse-dark: #ffffff;
 $sds-color-semantic-base-text-disabled: #c3c3c3;
 $sds-color-semantic-base-text-disabled-dark: #696969;
+$sds-color-semantic-base-text-disabled-inverse: #6c6c6c;
+$sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd;
 $sds-color-semantic-base-text-primary: #000000;
 $sds-color-semantic-base-text-primary-dark: #ffffff;
 $sds-color-semantic-base-text-primary-inverse: #ffffff;

diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts
@@ -2,6 +2,7 @@ export enum SDSWarningTypes {
   ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps",
   ButtonMissingSDSProps = "buttonMissingProps",
   ButtonIconMissingIconProp = "buttonIconMissingIconProp",
+  ButtonDropdownMinimal = "buttonDropdownMinimal",
   ButtonToggleMissingIconProp = "buttonToggleMissingIconProp",
   ChipDeprecated = "chipDeprecated",
   MenuSelectDeprecated = "menuSelectDeprecated",
@@ -14,7 +15,7 @@ export const SDS_WARNINGS = {
   [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
     hasWarned: false,
     message:
-      "Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.",
+      "Warning: isAllCaps can not be applied to buttons with sdsStyle='icon'.",
   },
   [SDSWarningTypes.ButtonMissingSDSProps]: {
     hasWarned: false,
@@ -26,6 +27,10 @@ export const SDS_WARNINGS = {
     message:
       "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
   },
+  [SDSWarningTypes.ButtonDropdownMinimal]: {
+    hasWarned: false,
+    message: "Warning: Button Dropdowns can not be of type minimal!",
+  },
   [SDSWarningTypes.ButtonToggleMissingIconProp]: {
     hasWarned: false,
     message: "Warning: Button Toggles require an icon prop to be provided.",