Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(NavigationHeader): implement NavigationHeader component #885

Merged
merged 30 commits into from
Feb 13, 2025
Merged

feat(NavigationHeader): implement NavigationHeader component #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
736f831
feat(navigationbar): add new component
booc0mtaco Jan 5, 2025
2499a4c
feat(header): implements desktop header
codemonkey800 Jan 5, 2025
cc8ec28
feat(header): mobile header implementation
codemonkey800 Jan 5, 2025
f82b4dc
refactor(navigationheader): renames to NavigationHeader
codemonkey800 Jan 5, 2025
2c3a030
fix(navigationheader): fix lint error
codemonkey800 Jan 5, 2025
b19ccab
refactor(navigationheader): rename story title
codemonkey800 Jan 5, 2025
2c63b83
refactor(navigationheader): rename to isNarrow
codemonkey800 Jan 5, 2025
a826205
fix(navigationheader): address styling issues
codemonkey800 Jan 5, 2025
c87a785
refactor(navigationheader): use object props instead of ReactNode
codemonkey800 Jan 5, 2025
0c95bbb
fix(navigationheader): remove unused import
codemonkey800 Jan 5, 2025
b66f497
fix(navigationheader): fix build error
codemonkey800 Jan 5, 2025
2c63cd8
refactor(navigationheader): inverted style prop
codemonkey800 Jan 5, 2025
ff74a7a
fix(navigationheader): remove unused imports
codemonkey800 Jan 5, 2025
0fc209a
test(navigationheader): update snapshots
codemonkey800 Jan 5, 2025
4dd43c0
test(navigationheader): fix axe test
codemonkey800 Jan 5, 2025
11ac4fd
fix(navigationheader): address design feedback
codemonkey800 Jan 5, 2025
99b20ba
fix(navigationheader): fixed colors and added new customTheme for But…
masoudmanson Jan 22, 2025
dc0e55c
Merge branch 'main' of https://github.com/chanzuckerberg/sci-componen…
masoudmanson Jan 22, 2025
4ad243b
fix(navigationheader): fixed Chevron position in secondary nav items
masoudmanson Jan 23, 2025
e09f7b9
feat(designtokens): added new inverse colors to design tokens
masoudmanson Jan 23, 2025
067f183
fix(navigationheader): fixed prop forwarding issues
masoudmanson Jan 23, 2025
5fe875c
fix(navigationheader): fixed Button and ButtonDropdown types
masoudmanson Jan 27, 2025
ba7d52e
fix(navigationheader): added tests and fixed bugs
masoudmanson Jan 28, 2025
6e17237
fix(inputdropdown): fix styles
masoudmanson Jan 28, 2025
9f3fd38
fix(inputdropdown): fixed button styles
masoudmanson Jan 28, 2025
c1c07fa
fix(navigationheader): fixed design review bugs and finalized the com…
masoudmanson Jan 31, 2025
a4f3bed
Merge branch 'main' of https://github.com/chanzuckerberg/sci-componen…
masoudmanson Jan 31, 2025
3c226fb
feat(navigationheader): added auto switch between mobile and desktop …
masoudmanson Feb 6, 2025
43241f7
fix(navigationheader): fixed style errors
masoudmanson Feb 6, 2025
3e6776f
fix(navigationheader): fixed primary nav items hover style
masoudmanson Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
528 changes: 396 additions & 132 deletions packages/components/src/common/styles-dictionary/css/variables.css
View file
Open in desktop

Large diffs are not rendered by default.

28 changes: 28 additions & 0 deletions packages/components/src/common/styles-dictionary/design-tokens/colors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
Expand Down Expand Up @@ -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}"
Expand All @@ -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}"
Expand All @@ -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}"
Expand Down
18 changes: 16 additions & 2 deletions packages/components/src/common/styles-dictionary/json/tailwind.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down
18 changes: 16 additions & 2 deletions packages/components/src/common/styles-dictionary/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion packages/components/src/common/warnings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export enum SDSWarningTypes {
ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps",
ButtonMissingSDSProps = "buttonMissingProps",
ButtonIconMissingIconProp = "buttonIconMissingIconProp",
ButtonDropdownMinimal = "buttonDropdownMinimal",
ButtonToggleMissingIconProp = "buttonToggleMissingIconProp",
ChipDeprecated = "chipDeprecated",
MenuSelectDeprecated = "menuSelectDeprecated",
Expand All @@ -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,
Expand All @@ -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.",
Expand Down
Loading