-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP/Draft: Navigation/Header pattern v2.0 (includes search + improved…
… colours) (#86) * WIP: Updates * WIP: Updates * WIP: Updates * WIP: Updates - includes Chevron menu icons * WIP: Updates * WIP: Updates, added standard mdx * WIP: Updates * WIP: Updates * WIP: Updates - fix to lint issue * WIP: Updates * WIP: Updates --------- Co-authored-by: Steve Pegg <[email protected]>
- Loading branch information
1 parent
c0ff7ca
commit cc8ae94
Showing
21 changed files
with
1,246 additions
and
1,114 deletions.
There are no files selected for viewing
110 changes: 55 additions & 55 deletions
110
src/assets/img/header-logo-qgov--default.svg → ...ts/img/_coa_header-logo-qgov--stacked.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 55 additions & 55 deletions
110
...header-logo-qgov-masterbrand--default.svg → ...img/_coa_header-logo-qgov-masterbrand.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Canvas, Meta, Story } from "@storybook/blocks" | ||
| import * as HeaderStories from "./header.stories" | ||
|
|
||
| <Meta of={HeaderStories} /> | ||
|
|
||
| # Header | ||
| <Canvas> | ||
| <Story of={HeaderStories.MasterBrand} /> | ||
| </Canvas> | ||
|
|
||
| ## Design resources | ||
|
|
||
| - [Horizontal Navigation (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6332-45264&mode=design&t=O1bFPWV7oxF4vs2D-0) | ||
| - [Brand components file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395566&mode=design&t=O1bFPWV7oxF4vs2D-0) | ||
| - [Design System website](https://www.designsystem.qld.gov.au/components/header) | ||
| - [Bootstrap component (Navbar)](https://getbootstrap.com/docs/5.3/components/navbar) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| .qld__header { | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| // 1. Palette colours | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| // Default light palette | ||
| --#{$prefix}header-color-crest-fill: #1D1D1D; | ||
| --#{$prefix}header-color-light-siteTitle: #022A50; | ||
| --#{$prefix}header-color-light-designAccent: #6BBE27; | ||
| --#{$prefix}header-color-light-text: #414141; | ||
| --#{$prefix}header-color-light-text__muted: #636363; | ||
| --#{$prefix}header-color-light-link: #09549F; | ||
| --#{$prefix}header-color-light-focus: #0085B3; | ||
| --#{$prefix}header-color-light-border: #EBEBEB; | ||
| --#{$prefix}header-color-light-background: #FFFFFF; | ||
| --#{$prefix}header-color-light-background__shade: #F5F5F5; | ||
| --#{$prefix}header-color-light-underline: #3F7AB4; | ||
| --#{$prefix}header-color-light-hover-underline: #09549F; | ||
| --#{$prefix}header-color-light-alt-button: #008733; | ||
| --#{$prefix}header-color-light-alt-button__hover: #00702B; | ||
| --#{$prefix}header-color-light-button__hover: #003E7D; | ||
|
|
||
| // Dark palette | ||
| --#{$prefix}header-color-dark-crest-fill: #FFFFFF; | ||
| --#{$prefix}header-color-dark-siteTitle: #FFFFFF; | ||
| --#{$prefix}header-color-dark-designAccent: #6BBE27; | ||
| --#{$prefix}header-color-dark-heading: #FFFFFF; | ||
| --#{$prefix}header-color-dark-text: #FFFFFF; | ||
| --#{$prefix}header-color-dark-text__muted: #DEEBF9; | ||
| --#{$prefix}header-color-dark-link: #FFFFFF; | ||
| --#{$prefix}header-color-dark-focus: #01B0E5; | ||
| --#{$prefix}header-color-dark-border: #1D9AC6; | ||
| --#{$prefix}header-color-dark-background: #09549F; | ||
| --#{$prefix}header-color-dark-background__shade: #04498F; | ||
| --#{$prefix}header-color-dark-underline: #B5CCE2; | ||
| --#{$prefix}header-color-dark-hover-underline: #FFFFFF; | ||
| --#{$prefix}header-color-dark-alt-button: #EFD700; | ||
| --#{$prefix}header-color-dark-alt-button__hover: #FFE817; | ||
| --#{$prefix}header-color-dark-alt-background: #05325F; | ||
| --#{$prefix}header-color-dark-alt-background__shade: #052C53; | ||
|
|
||
| // Shared thickness, offset etc. | ||
| --#{$prefix}header-underline__thickness-thin: 0.5px; | ||
| --#{$prefix}header-underline__thickness-thick: 2px; | ||
| --#{$prefix}header-underline__offset: 0.3em; | ||
|
|
||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| // 2. Second hand variables (each variant, default, light, dark, dark-alt) | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
|
|
||
| // Search | ||
| --#{$prefix}header-site-search-bg: var(--#{$prefix}header-color-light-background__shade); | ||
| --#{$prefix}header-site-search-btn-bg: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header-site-search-border-color: var(--#{$prefix}header-color-light-button__hover); | ||
| --#{$prefix}header-site-search-icon-color:var(--#{$prefix}header-color-light-text__muted); | ||
| --#{$prefix}header-site-search-text-color:var(--#{$prefix}header-color-light-text__muted); | ||
|
|
||
| --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}header-color-dark-background__shade); | ||
| --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}header-color-light-designAccent); | ||
| --#{$prefix}header-dark-site-search-border-color: var(--#{$prefix}header-color-dark-border); | ||
| --#{$prefix}header-dark-site-search-icon-color:var(--#{$prefix}header-color-dark-text__muted); | ||
| --#{$prefix}header-dark-site-search-text-color:var(--#{$prefix}header-color-dark-text__muted); | ||
|
|
||
| // Header | ||
| --#{$prefix}header_color: var(--#{$prefix}header-color-light-text); | ||
| --#{$prefix}header_bg: var(--#{$prefix}header-color-light-background); | ||
|
|
||
| // Skip links | ||
| --#{$prefix}header_skip-link_color: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}header-color-light-focus); | ||
| --#{$prefix}header_skip-link_focus_text_color: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header_skip-link_focus_bg_color: var(--#{$prefix}header-color-light-background); | ||
|
|
||
| // Pre-header bar | ||
| --#{$prefix}header__pre-header_text_color: var(--#{$prefix}header-color-dark-text); | ||
| --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-background); | ||
| --#{$prefix}header__pre-header_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1); | ||
| --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}header-color-dark-text); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}header-color-dark-hover-underline); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}header-color-dark-underline); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thin); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(--#{$prefix}header-underline__offset); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}header-color-dark-hover-underline); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thick); | ||
| --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}header-color-dark-link); | ||
|
|
||
| // CTA Wrapper | ||
| --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}header-color-dark-alt-button); | ||
| --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}header-color-dark-alt-button__hover); | ||
|
|
||
| // Toggle main navigation | ||
| --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}header-color-dark-border); | ||
| --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}header-color-dark-background__shade); | ||
| --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}header-color-dark-alt-button__hover); | ||
| --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}header-color-dark-focus); | ||
| --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}header-color-dark-alt-button); | ||
|
|
||
| // COA and title | ||
| --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}header-color-crest-fill); | ||
| --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}header-color-light-designAccent); | ||
| --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}header-color-light-siteTitle); | ||
| --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}header-color-light-link); | ||
| --#{$prefix}header__brand__anchor__hover_brand-image__filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)), drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)); | ||
|
|
||
| // Sitename heading | ||
| --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}header-color-light-siteTitle); | ||
| --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}header-color-light-text__muted); | ||
|
|
||
| // // Search | ||
| --site-search-bg: var(--#{$prefix}header-site-search-bg); | ||
| --site-search-btn-bg: var(--#{$prefix}header-site-search-btn-bg); | ||
| --site-search-border-color: var(--#{$prefix}header-site-search-border-color); | ||
| --site-search-icon-color: var(--#{$prefix}header-site-search-icon-color); | ||
| --site-search-input-color: var(--#{$prefix}header-site-search-text-color); | ||
| --site-search-input-focus-color: var(--#{$prefix}header-color-light-focus); | ||
|
|
||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| // 3. Dark/dark-alt modes | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| .dark &, | ||
| .dark-alt & { | ||
| // Root (dark/dark-alt) | ||
| --#{$prefix}header_color: var(--#{$prefix}header-color-dark-text); | ||
|
|
||
| // Pre-header bar (dark) | ||
| --#{$prefix}header__pre-header_text_color: var(--#{$prefix}header-color-dark-text); | ||
| --#{$prefix}header__pre-header_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1); | ||
| --#{$prefix}header__pre-header__url_text_color: var(--#{$prefix}header-color-dark-link); | ||
|
|
||
| --#{$prefix}header__pre-header__anchor_text_color: var(--#{$prefix}header-color-dark-text); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_color: var(--#{$prefix}header-color-dark-hover-underline); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_color: var(--#{$prefix}header-color-dark-underline); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thin); | ||
| --#{$prefix}header__pre-header__anchor_text_decoration_offset: var(--#{$prefix}header-underline__offset); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_decoration_color: var(--#{$prefix}header-color-dark-hover-underline); | ||
| --#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness: var(--#{$prefix}header-underline__thickness-thick); | ||
|
|
||
| // Pre-header CTA elements (dark/dark-alt) | ||
| --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}header-color-dark-alt-button); | ||
| --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}header-color-dark-alt-button__hover); | ||
|
|
||
| // Toggle navigation (dark/dark-alt) | ||
| --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__toggle-main-nav_border_color: var(--#{$prefix}header-color-dark-border); | ||
| --#{$prefix}header__toggle-main-nav__hover_bg: var(--#{$prefix}header-color-dark-background__shade); | ||
| --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}header-color-dark-alt-button__hover); | ||
| --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}header-color-dark-focus); | ||
| --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}header-color-dark-alt-button); | ||
| --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}header-color-dark-link); | ||
| --#{$prefix}header__brand__anchor__hover_brand-image__filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)), drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)); | ||
| --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}header-color-dark-designAccent); | ||
| --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}header-color-dark-siteTitle); | ||
| --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}header-color-dark-siteTitle); | ||
| --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}header-color-dark-text__muted); | ||
|
|
||
| // COA | ||
| --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}header-color-dark-crest-fill); | ||
|
|
||
| // Search (dark/dark/alt) | ||
| --site-search-bg: var(--#{$prefix}header-dark-site-search-bg); | ||
| --site-search-btn-bg: var(--#{$prefix}header-dark-site-search-btn-bg); | ||
| --site-search-border-color: var(--#{$prefix}header-dark-site-search-border-color); | ||
| --site-search-icon-color: var(--#{$prefix}header-dark-site-search-icon-color); | ||
| --site-search-input-color: var(--#{$prefix}header-dark-site-search-text-color); | ||
| } | ||
| .dark-alt & { | ||
| --#{$prefix}header_bg: var(--#{$prefix}header-color-dark-alt-background); | ||
| --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-background); | ||
| } | ||
| .dark & { | ||
| --#{$prefix}header_bg: var(--#{$prefix}header-color-dark-background); | ||
| --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-alt-background); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| // 1. Palette colours | ||
| // ------------------------------------------------------------------------------------------------------------------ | ||
| .qld__header { | ||
| .qld__icon { | ||
| vertical-align: middle; | ||
| -ms-flex-item-align: center; | ||
| align-self: center; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.