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

WIP/Draft: Navigation/Header pattern v2.0 (includes search + improved colours) #86

Merged
merged 12 commits into from
May 8, 2024
Merged

WIP/Draft: Navigation/Header pattern v2.0 (includes search + improved colours) #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d37d421
WIP: Updates
MitchAnderson93 May 3, 2024
e7bc531
WIP: Updates
MitchAnderson93 May 4, 2024
5d0c83c
WIP: Updates
MitchAnderson93 May 6, 2024
ec99e76
WIP: Updates - includes Chevron menu icons
MitchAnderson93 May 6, 2024
a225a23
WIP: Updates
MitchAnderson93 May 6, 2024
74c6008
WIP: Updates, added standard mdx
MitchAnderson93 May 6, 2024
9cb99dd
WIP: Updates
MitchAnderson93 May 6, 2024
b82af35
WIP: Updates
MitchAnderson93 May 6, 2024
05cc427
WIP: Updates - fix to lint issue
MitchAnderson93 May 7, 2024
62aa07f
WIP: Updates
MitchAnderson93 May 8, 2024
c76f5fb
WIP: Updates
MitchAnderson93 May 8, 2024
5d947b8
Merge branch 'develop' into QOLOE-100-Header-Search
stvp-qld May 8, 2024
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
110 changes: 55 additions & 55 deletions src/assets/img/header-logo-qgov--default.svg → ...ts/img/_coa_header-logo-qgov--stacked.svg
View file
Open in desktop
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 ...header-logo-qgov-masterbrand--default.svg → ...img/_coa_header-logo-qgov-masterbrand.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 src/assets/img/header-logo-qgov--light.svg → src/assets/img/_coa_preheader-logo-qgov.svg
View file
Open in desktop
File renamed without changes
Binary file removed src/assets/img/header-logo-agov.png
View file
Open in desktop
Binary file not shown.
63 changes: 0 additions & 63 deletions src/assets/img/header-logo-qgov--dark.svg
View file
Open in desktop

This file was deleted.

56 changes: 0 additions & 56 deletions src/assets/img/header-logo-qgov--pre-dark.svg
View file
Open in desktop

This file was deleted.

56 changes: 0 additions & 56 deletions src/assets/img/header-logo-qgov-masterbrand--dark.svg
View file
Open in desktop

This file was deleted.

16 changes: 16 additions & 0 deletions src/components/bs5/header/Header.mdx
View file
Open in desktop
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)
180 changes: 180 additions & 0 deletions src/components/bs5/header/_colours.scss
View file
Open in desktop
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);
}
}
10 changes: 10 additions & 0 deletions src/components/bs5/header/_icons.scss
View file
Open in desktop
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;
}
}
42 changes: 12 additions & 30 deletions src/components/bs5/header/header.data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
{
"default_variant": {
"masterbrand_variant": {
"icon-root": "assets/img/svg-icons.svg",
"sitePreHeader": {
"theme": {
"value": "dark"
},
"url": {
"value": "https://qld.gov.au"
},
"text": {
"value": "Queensland Government websites"
},
"logo": {
"value": "./assets/img/header-logo-qgov--light.svg"
},
"mainNavCtaOne": {
"value": "#",
"icon": {
"value": "#"
"value": "ctaIcon"
},
"text": {
"value": "test"
Expand All @@ -25,7 +20,7 @@
"mainNavCtaTwo": {
"value": "#",
"icon": {
"value": "#"
"value": "ctaIcon"
},
"text": {
"value": "test"
Expand All @@ -40,12 +35,6 @@
"url": {
"value": "https://qld.gov.au"
},
"theme": {
"value": "light"
},
"logo": {
"value": "./assets/img/header-logo-qgov-masterbrand--default.svg"
},
"secondaryType": {
"logo": {
"value": ""
Expand All @@ -61,28 +50,24 @@
"siteSearchAsset": {
"value": "#",
"icons": {
"search-icon": "",
"search-close-icon": ""
"menu-icon": "qld__icon__mobile-menu",
"search-icon": "qld__icon__search",
"search-close-icon": "qld__icon__close"
},
"siteSearchUrl": {
"value": ""
}
}
},
"dark_variant": {
"subbrand_variant": {
"icon-root": "assets/img/svg-icons.svg",
"sitePreHeader": {
"theme": {
"value": "dark-alt"
},
"url": {
"value": "https://qld.gov.au"
},
"text": {
"value": "Queensland Government websites"
},
"logo": {
"value": "./assets/img/header-logo-qgov--light.svg"
},
"mainNavCtaOne": {
"value": "#",
"icon": {
Expand Down Expand Up @@ -110,11 +95,7 @@
"url": {
"value": "https://qld.gov.au"
},
"theme": {
"value": "dark"
},
"logo": {
"value": "./assets/img/header-logo-qgov--dark.svg"
},
"secondaryType": {
"logo": {
Expand All @@ -131,8 +112,9 @@
"siteSearchAsset": {
"value": "#",
"icons": {
"search-icon": "",
"search-close-icon": ""
"menu-icon": "qld__icon__mobile-menu",
"search-icon": "qld__icon__search",
"search-close-icon": "qld__icon__close"
},
"siteSearchUrl": {
"value": ""
Expand Down
Loading
Loading