From 63956a79ff7937a88e84e9be33fb348d93a49ab0 Mon Sep 17 00:00:00 2001 From: Bec Launder Date: Thu, 20 Jun 2024 10:43:37 +1000 Subject: [PATCH 01/19] QOLOE-135 card, accordion, type visual adjustments --- src/components/bs5/accordion/accordion.scss | 1 - src/components/bs5/card/card.scss | 8 ---- src/scss/qld-type.scss | 43 +++++++++++---------- 3 files changed, 23 insertions(+), 29 deletions(-) diff --git a/src/components/bs5/accordion/accordion.scss b/src/components/bs5/accordion/accordion.scss index ec7eb86b0..451ccd8b7 100644 --- a/src/components/bs5/accordion/accordion.scss +++ b/src/components/bs5/accordion/accordion.scss @@ -81,7 +81,6 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml, Date: Thu, 20 Jun 2024 14:12:45 +1000 Subject: [PATCH 02/19] Moved import of qld-type.scss to better placement for it to work --- src/main.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main.scss b/src/main.scss index 0300d437f..631087d10 100644 --- a/src/main.scss +++ b/src/main.scss @@ -28,9 +28,7 @@ $enable-dark-mode: true; // 2. QLD Design System variables (Bootstrap overrides) @import "./scss/qld-variables"; - // @import "./scss/qld-variables-dark"; //future state -@import "./scss/qld-type"; // 3. Include remainder of bootstrap // 3.1 Required @@ -78,8 +76,10 @@ $enable-dark-mode: true; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "~bootstrap/scss/utilities/api"; +//8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency. +@import "./scss/qld-type"; -// 8. QLD Design System components (bootsrap overrides and custom). Please maintain naming consistency +// 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency. @import "./components/bs5/accordion/accordion.scss"; @import "./components/bs5/banner/banner.scss"; @import "./components/bs5/blockquote/blockquote.scss"; From dd5987420333b7389437d4c6179982e3faf609e5 Mon Sep 17 00:00:00 2001 From: Bec Launder Date: Thu, 20 Jun 2024 14:13:52 +1000 Subject: [PATCH 03/19] Moved import of qld-type.scss to better placement for it to work --- src/scss/qld-type.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index af438ac48..d27a844c5 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -109,8 +109,10 @@ body { } } +// Apply correct bold font-weight +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b, th { - font-weight: $font-weight-bold !important; // Overrides default BS styles + font-weight: $font-weight-bold; } @@ -119,10 +121,10 @@ strong, b, th { a, a.nav-link { text-underline-offset: var(--qld-link-underline-offset); - text-decoration-thickness: var(--qld-link-underline-thickness) !important; // Overrides default BS styles + text-decoration-thickness: var(--qld-link-underline-thickness); &:hover { - text-decoration-thickness: var(--qld-link-underline-thickness-hover) !important; // Overrides default BS styles + text-decoration-thickness: var(--qld-link-underline-thickness-hover); } &:visited { @@ -139,6 +141,7 @@ a.nav-link { outline-offset: 2px; } } + caption { font-size: 14px; font-weight: 400; From 410bc690fb85265c0aee46e8e60a3008e872003d Mon Sep 17 00:00:00 2001 From: Bec Launder Date: Thu, 20 Jun 2024 19:50:09 +1000 Subject: [PATCH 04/19] Scoped in light and dark heading color --- src/scss/qld-type.scss | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index d27a844c5..61ef25ca9 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -41,6 +41,7 @@ $h6-font-size: $font-size-base * 0.875; $headings-font-weight: 600; $headings-line-height: 2; $headings-color: $qld-text-headings; +$qld-heading-color: $core-default-color-brand-primary-light-green; $link-color: $qld-brand-primary; $link-hover-color: $qld-brand-primary; @@ -118,6 +119,10 @@ strong, b, th { // Light, Light alt +h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-light-text-heading); +} + a, a.nav-link { text-underline-offset: var(--qld-link-underline-offset); @@ -151,18 +156,15 @@ caption { // Dark, dark alt .dark, .dark-alt { - body & { - color: var(--qld-body-color); - } - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--qld-headings-color); - } + h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-dark-text-heading); + } + + + body & { + color: var(--qld-body-color); + } a, a.nav-link { text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default); From 463dfaf262e63e19faa574274a0c3ba15a5b2c07 Mon Sep 17 00:00:00 2001 From: Bec Launder Date: Thu, 20 Jun 2024 20:10:35 +1000 Subject: [PATCH 05/19] Refactored custom heading sizes --- src/components/bs5/typography/typography.scss | 47 ++++++------------- 1 file changed, 15 insertions(+), 32 deletions(-) diff --git a/src/components/bs5/typography/typography.scss b/src/components/bs5/typography/typography.scss index bb3dcd032..308138bd4 100644 --- a/src/components/bs5/typography/typography.scss +++ b/src/components/bs5/typography/typography.scss @@ -9,21 +9,33 @@ h1, line-height: 1.3; margin-top: 0; margin-bottom: 1.5rem; + font-size: 2rem; + + @include media-breakpoint-up(lg) { + font-size: 2.5rem; + } + } h2, .h2 { line-height: 1.5; margin-bottom: 1.5rem; + font-size: 1.75rem; &:not(:first-child) { margin-top: 3rem; } + + @include media-breakpoint-up(lg) { + font-size: 2rem; + } } h3, .h3 { line-height: 1.5; margin-bottom: 1.5rem; + font-size: 1.5rem; &:not(:first-child) { margin-top: 2.25rem; } @@ -34,6 +46,7 @@ h4, line-height: 1; margin-bottom: 1.5rem; margin-top: 2rem; + font-size: 1.25rem; } h5, @@ -41,6 +54,7 @@ h5, line-height: 1; margin-bottom: 1.5rem; margin-top: 1.5rem; + font-size: 1rem; } h6, @@ -48,36 +62,5 @@ h6, line-height: 1; margin-bottom: 1.5rem; margin-top: 1.5rem; -} - /* large and x-large sizes */ -@media (min-width: 992px) { - h1, - .h1 { - font-size: 40px; - } - h2, - .h2 { - font-size: 32px; - } - - h3, - .h3 { - font-size: 24px; - } -} -/* small and medium sizes */ -@media (max-width: 991.99px) { - h1, - .h1 { - font-size: 32px; - } - h2, - .h2 { - font-size: 28px; - } - - h3, - .h3 { - font-size: 24px; - } + font-size: 0.87rem; } \ No newline at end of file From f8f9a134442dc7891fcb4a914e7f4b26535fc1d4 Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Fri, 21 Jun 2024 11:05:25 +1000 Subject: [PATCH 06/19] QOLOE-209 CSS clean up --- src/components/bs5/quickexit/quickexit.scss | 118 +++++++++----------- 1 file changed, 51 insertions(+), 67 deletions(-) diff --git a/src/components/bs5/quickexit/quickexit.scss b/src/components/bs5/quickexit/quickexit.scss index 3682c2fb5..fca25e2fd 100644 --- a/src/components/bs5/quickexit/quickexit.scss +++ b/src/components/bs5/quickexit/quickexit.scss @@ -10,7 +10,6 @@ --#{$prefix}quick-exit-gaps: 25px; --#{$prefix}quick-exit-text-outline: 2px; --#{$prefix}quick-exit-text-outline-offset: 2px; - --#{$prefix}tooltip-width: 190px; --#{$prefix}tooltip-arrow: 8px; --#{$prefix}tooltip-desktop-top-offset: 40px; @@ -28,7 +27,6 @@ z-index: 200; &-inner { - display: -ms-flexbox; display: flex; align-items: center; height: 100%; @@ -72,7 +70,6 @@ } .qld-quick-exit-item.qld-tooltip-container { text-decoration: underline; - margin-inline-end: var(--#{$prefix}quick-exit-gaps); &:focus, &:active, &:focus-within { @@ -106,6 +103,7 @@ height: 100%; -ms-flex-pack: distribute; justify-content: space-around; + gap: var(--#{$prefix}quick-exit-gaps); } .qld-quick-exit-actions { -ms-flex-positive: 1; @@ -124,24 +122,32 @@ background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover); } } - .qld-quick-exit-tip-link { + a.qld-quick-exit-tip-link { color: var(--#{$prefix}quick-exit-link-text-colour); + &:visited { + text-decoration-color: var(--#{$prefix}quick-exit-text-colour); + } + &:hover, + &:focus { + text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover); + } } .qg-quick-exit__tips { flex-grow: 1; } &.has-icon-info .qg-quick-exit__tips { + position: relative; display: block; - padding-inline-start: var(--#{$prefix}icon-info-spacing); } } -} - -/* - * Desktop layout - */ -@media screen and (min-width: 992px) { - .qld-quick-exit { + .icon-info { + position: absolute; + inset-inline-start: 0; + background-repeat: no-repeat; + margin-block-start: 4px; + background-image: url("data:image/svg+xml,"); + } + @media screen and (min-width: 992px) { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; @@ -152,18 +158,15 @@ z-index: 999; padding-block: 20px; padding-inline: 40px; - .container { padding-inline: calc(var(--#{$prefix}gutter-x) * 0.5); } - &-inner { justify-content: space-between; - .qld-quick-exit-tip-link { -ms-flex-align: center; align-items: center; - color: $qld-white; + color: var(--#{$prefix}quick-exit-text-colour); display: -ms-flexbox; display: flex; } @@ -197,66 +200,47 @@ } } } -} -.icon-info { - position: absolute; - inset-inline-start: calc(var(--#{$prefix}quick-exit-spacing) * 2.5); - background-repeat: no-repeat; - margin-block-start: 4px; - background-image: url("data:image/svg+xml,"); -} -.qld-quick-exit-inner.has-tooltip { - .qg-quick-exit__tips { - padding-inline-start: 0; - } - @media screen and (max-width: 925px) { - .not-mobile { - display: none; + .qld-quick-exit-inner.has-tooltip { + .qg-quick-exit__tips { + padding-inline-start: 0; + } + @media screen and (max-width: 925px) { + .not-mobile { + display: none; + } + } + @media screen and (max-width: 420px) { + .very-small-mobile { + display: none; + } } } - @media screen and (max-width: 420px) { - .very-small-mobile { - display: none; + .qld-quick-exit-inner.has-icon-info { + .qg-quick-exit__tips { + padding-inline-start: calc(var(--#{$prefix}icon-info-spacing) * 1); } } -} -.qld-quick-exit-inner.has-icon-info { - .qg-quick-exit__tips { - padding-inline-start: var(--#{$prefix}icon-info-spacing); + .qld-quick-exit-inner.has-icon-info.has-tooltip { + @media screen and (max-width: 925px) { + .not-mobile { + display: none; + } + } } -} -.qld-quick-exit-inner.has-icon-info.has-tooltip { - @media screen and (max-width: 1020px) { - .icon-info { + @media screen and (max-width: 850px) { + .not-mobile, + .qld-quick-exit-tip-link { display: none; } - .qg-quick-exit__tips { - padding-inline-start: 0; + .icon-info { + margin-block-start: 0; } } - @media screen and (max-width: 925px) { - .not-mobile { - display: none; + //////////////////////////////////////////////////////////////////////////////////// + /// This is only for Responsive Design and keeping important info available to view + @media screen and (max-width: 365px) { + .qld-quick-exit-button { + padding-inline: 10px; } } - // @media screen and (max-width: 520px) { - // .very-small-mobile { - // display: none; - // } - // } -} - -@media screen and (max-width: 850px) { - .not-mobile, - .qld-quick-exit-tip-link { - display: none; - } -} - -//////////////////////////////////////////////////////////////////////////////////// -/// This is only for Responsive Design and keeping important info available to view -@media screen and (max-width: 365px) { - .qld-quick-exit-button { - padding-inline: 10px; // - } } From ae4dae544f070c30a5fd803d4778393dded311f0 Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Fri, 21 Jun 2024 14:21:52 +1000 Subject: [PATCH 07/19] QOLOE-209 updated the way the breakpoints are added --- src/components/bs5/quickexit/quickexit.scss | 35 ++++++++++++--------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/src/components/bs5/quickexit/quickexit.scss b/src/components/bs5/quickexit/quickexit.scss index fca25e2fd..8ef5cf8f4 100644 --- a/src/components/bs5/quickexit/quickexit.scss +++ b/src/components/bs5/quickexit/quickexit.scss @@ -147,7 +147,7 @@ margin-block-start: 4px; background-image: url("data:image/svg+xml,"); } - @media screen and (min-width: 992px) { + @include media-breakpoint-up(lg) { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; @@ -204,12 +204,12 @@ .qg-quick-exit__tips { padding-inline-start: 0; } - @media screen and (max-width: 925px) { + @include media-breakpoint-down(lg) { .not-mobile { display: none; } } - @media screen and (max-width: 420px) { + @include media-breakpoint-down(sm) { .very-small-mobile { display: none; } @@ -221,24 +221,31 @@ } } .qld-quick-exit-inner.has-icon-info.has-tooltip { - @media screen and (max-width: 925px) { + @include media-breakpoint-down(lg) { .not-mobile { display: none; } + .not-mobile, + .qld-quick-exit-tip-link { + display: none; + } + .icon-info { + margin-block-start: 0; + } } } - @media screen and (max-width: 850px) { - .not-mobile, - .qld-quick-exit-tip-link { - display: none; - } - .icon-info { - margin-block-start: 0; + + @include media-breakpoint-down(md) { + .qld-quick-exit-inner { + .qg-quick-exit__tips { + .not-mobile, + a { + display: none; + } + } } } - //////////////////////////////////////////////////////////////////////////////////// - /// This is only for Responsive Design and keeping important info available to view - @media screen and (max-width: 365px) { + @include media-breakpoint-down(sm) { .qld-quick-exit-button { padding-inline: 10px; } From 6b2b14898ec774a4df170359ed888c2c4a1b1f35 Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Fri, 21 Jun 2024 21:20:30 +1000 Subject: [PATCH 08/19] WIP: Update --- src/components/bs5/header/header.scss | 5 +-- src/components/bs5/navbar/_colours.scss | 10 ++++++ src/components/bs5/navbar/navbar.data.json | 6 ++-- src/components/bs5/navbar/navbar.hbs | 2 +- src/components/bs5/navbar/navbar.scss | 37 +++++++++++++++++++++- src/scss/qld-type.scss | 3 +- 6 files changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/bs5/header/header.scss b/src/components/bs5/header/header.scss index 1954003a8..1ab791344 100644 --- a/src/components/bs5/header/header.scss +++ b/src/components/bs5/header/header.scss @@ -507,10 +507,6 @@ &__main--masterbrand--true { @include media-breakpoint-down(lg) { height: 0; - - .qld__header__site-search--open { - margin-top: 3rem; - } } } @@ -531,6 +527,7 @@ position: absolute; left: 0; right: 0; + top: 0.4rem; padding: 1rem; background-color: var(--#{$prefix}header_bg); } diff --git a/src/components/bs5/navbar/_colours.scss b/src/components/bs5/navbar/_colours.scss index 4b4f27112..46443aa54 100644 --- a/src/components/bs5/navbar/_colours.scss +++ b/src/components/bs5/navbar/_colours.scss @@ -30,6 +30,9 @@ --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default); --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade); + --#{$prefix}navbar-mobile-bg-color: var(--#{$prefix}color-default-color-dark-background-default); + --#{$prefix}navbar-mobile-cta-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade); + --#{$prefix}navbar-mobile-cta-bg-color-open: var(--#{$prefix}color-default-color-dark-background-default); // Toggle icons for mobile --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1); @@ -64,8 +67,15 @@ --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-dark-text-heading); + --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover); + --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-link-color-hover: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default); + --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-menuitem-active: var(--#{$prefix}color-default-color-dark-background-alt); --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover); --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary); --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default); diff --git a/src/components/bs5/navbar/navbar.data.json b/src/components/bs5/navbar/navbar.data.json index 285bd0cdf..f6c5f7044 100644 --- a/src/components/bs5/navbar/navbar.data.json +++ b/src/components/bs5/navbar/navbar.data.json @@ -145,7 +145,7 @@ "CTA": [ { "id": "CTAone", - "target_url": "index.html", + "target_url": "#", "label": "Business and Industry", "dropdown_enabled": true, "dropdown_options": { @@ -196,7 +196,7 @@ }, { "id": "CTAtwo", - "target_url": "index.html", + "target_url": "#", "label": "For government", "dropdown_enabled": true, "dropdown_options": { @@ -247,7 +247,7 @@ }, { "id": "CTAthree", - "target_url": "login.html", + "target_url": "#", "label": "Login", "dropdown_enabled": true, "dropdown_options": { diff --git a/src/components/bs5/navbar/navbar.hbs b/src/components/bs5/navbar/navbar.hbs index 003c94f3a..746f1ba7d 100644 --- a/src/components/bs5/navbar/navbar.hbs +++ b/src/components/bs5/navbar/navbar.hbs @@ -168,7 +168,7 @@ {{/if}} {{/each }} {{#each CTA}} -
  • +
  • diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 79c50196f..4057fadf2 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -98,7 +98,7 @@ top: 0; bottom: 0; overflow-x: hidden; - background-color: var(--#{$prefix}navbar-bg-color); + background-color: var(--#{$prefix}navbar-mobile-bg-color); /* Initially positioned off-screen to the right */ transition: transform .25s ease-in-out; @@ -286,11 +286,46 @@ @include media-breakpoint-down(lg) { border-left: 4px solid var(--#{$prefix}navbar-border-accent); + background-color: var(--#{$prefix}navbar-bg-color); } .dropdown-container { display: flex; } + + .nav-item.CTA_feature { + + color: var(--#{$prefix}navbar-mobile-text-color); + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color); + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + + .mobile-only { + + .dropdown-menu.show { + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + .dropdown-item { + color: var(--#{$prefix}navbar-mobile-text-color); + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + } + } + + .first-element { + color: var(--#{$prefix}navbar-mobile-text-color); + &:hover { + color: var(--#{$prefix}navbar-mobile-text-color); + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + } + } + + .first-element.show { + color: var(--#{$prefix}navbar-mobile-text-color); + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + .dropdown-item { + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + } + } + } + } } .dropdown { diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 2174fa8d4..2bc5be993 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -113,8 +113,7 @@ a { font-weight: var(--qld-link-font-weight); } -a, -a.nav-link { +a:not(.nav-link) { text-decoration: underline; text-underline-offset: var(--qld-link-underline-offset) !important; text-decoration-thickness: var(--qld-link-underline-thickness) !important; From bbfb1d2b199e8816cee7aa2105844691b9688704 Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Fri, 21 Jun 2024 21:52:44 +1000 Subject: [PATCH 09/19] WIP --- src/components/bs5/navbar/navbar.scss | 1 + .../bs5/searchInput/search.functions.js | 15 +++++++++---- .../bs5/searchInput/searchInput.hbs | 22 +++++++++---------- .../bs5/searchInput/searchInput.scss | 7 +++++- .../bs5/searchInput/searchInput.stories.js | 2 +- 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 4057fadf2..f6b64b7bc 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -303,6 +303,7 @@ .dropdown-menu.show { background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + border-left: solid .25rem var(--#{$prefix}navbar-mobile-cta-bg-color-open); .dropdown-item { color: var(--#{$prefix}navbar-mobile-text-color); border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); diff --git a/src/components/bs5/searchInput/search.functions.js b/src/components/bs5/searchInput/search.functions.js index 52c28050d..bc3ca1d7b 100644 --- a/src/components/bs5/searchInput/search.functions.js +++ b/src/components/bs5/searchInput/search.functions.js @@ -91,16 +91,23 @@ export async function showSuggestions(value = '', isDefault = false, form) { if (isDefault) { // Load default suggestions suggestions.innerHTML = ` -
    +
    Popular services
      ${defaultSuggestions.popular_services.slice(0, 4).map(item => `
    • ${item.title}
      • `).join('')}
    -
    +
    Browse by category
      ${defaultSuggestions.categories.slice(0, 4).map(item => `
    • ${item.title}
      • `).join('')}
    - ${defaultSuggestions.options.view_more ? `
    ${defaultSuggestions.options.label}
    ` : ''} + ${defaultSuggestions.options.view_more ? ` +
    + +
    ` : ''} `; suggestions.classList.add('show'); createPopper(searchInput, suggestions, { @@ -160,7 +167,7 @@ export async function showSuggestions(value = '', isDefault = false, form) { suggestions.innerHTML += `
    Services -
      ${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `
    • ${item.title}
      • `).join('')}
    +
      ${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `
    • ${item.title}
      • `).join('')}
    `; suggestions.classList.add('show'); diff --git a/src/components/bs5/searchInput/searchInput.hbs b/src/components/bs5/searchInput/searchInput.hbs index 4a615e073..557415f5b 100644 --- a/src/components/bs5/searchInput/searchInput.hbs +++ b/src/components/bs5/searchInput/searchInput.hbs @@ -1,22 +1,20 @@ -
    -
    - +
    - + - {{#if suggestions}} -
      - {{/if}} + -
      + {{#if suggestions}} +
        + {{/if}}
        \ No newline at end of file diff --git a/src/components/bs5/searchInput/searchInput.scss b/src/components/bs5/searchInput/searchInput.scss index 9c69db040..bcbb45457 100644 --- a/src/components/bs5/searchInput/searchInput.scss +++ b/src/components/bs5/searchInput/searchInput.scss @@ -15,7 +15,11 @@ --icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5C11.5 4.71875 10.5312 3.09375 9 2.1875C7.4375 1.28125 5.53125 1.28125 4 2.1875C2.4375 3.09375 1.5 4.71875 1.5 6.5C1.5 8.3125 2.4375 9.9375 4 10.8438C5.53125 11.75 7.4375 11.75 9 10.8438C10.5312 9.9375 11.5 8.3125 11.5 6.5ZM10.5312 11.625C9.40625 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.4375 11.5938 10.5625L15.7812 14.7188C16.0625 15.0312 16.0625 15.5 15.7812 15.7812C15.4688 16.0938 15 16.0938 14.7188 15.7812L10.5312 11.625Z' fill='%23414141'/%3E%3C/svg%3E%0A"); position: relative; - min-width: 22.5rem; + width: 100%; + + @include media-breakpoint-up(lg) { + min-width: 22.5rem; + } //Search dropdown .suggestions { @@ -32,6 +36,7 @@ .suggestions-category { padding: 0 1rem; + margin-top: 1rem; } hr { diff --git a/src/components/bs5/searchInput/searchInput.stories.js b/src/components/bs5/searchInput/searchInput.stories.js index 286695160..568e2a5c7 100644 --- a/src/components/bs5/searchInput/searchInput.stories.js +++ b/src/components/bs5/searchInput/searchInput.stories.js @@ -15,7 +15,7 @@ export default { parameters: { docs: { controls: { - exclude: ["variantClass", "customClass", "inputID", "inputName", "buttonID", "buttonType", "ariaLabel"], + exclude: ["customClass", "inputID", "inputName", "buttonID", "buttonType", "ariaLabel"], }, }, }, From 7b9b8d79847c783f24239a488549f065bf8abbff Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sat, 22 Jun 2024 14:21:26 +1000 Subject: [PATCH 10/19] WIP: Update --- src/components/bs5/header/header.stories.js | 9 +-------- src/components/bs5/navbar/navbar.scss | 15 ++++++++------- .../bs5/searchInput/search.functions.js | 4 ++-- src/components/bs5/searchInput/searchInput.scss | 3 +-- src/scss/qld-type.scss | 5 ----- 5 files changed, 12 insertions(+), 24 deletions(-) diff --git a/src/components/bs5/header/header.stories.js b/src/components/bs5/header/header.stories.js index 6a91748d8..e5d82e56d 100644 --- a/src/components/bs5/header/header.stories.js +++ b/src/components/bs5/header/header.stories.js @@ -238,7 +238,6 @@ export const CoBrand = {
        ${Story()} -
        ${new Banner(bannerDataWithOverride).html} ${new Footer(footerDataWithOverride).html}
        @@ -281,10 +280,7 @@ export const EndorsedBrand = { ${Story()}
        - ${new Banner(bannerDataWithOverride).html} -
        - ${new SearchInput(searchData).html} -
        + ${new Banner(bannerDataWithOverride).html} ${new Footer(footerDataWithOverride).html}
        `; @@ -327,9 +323,6 @@ export const StandaloneBrand = {
        ${new Banner(bannerDataWithOverride).html} -
        - ${new SearchInput(searchData).html} -
        ${new Footer(footerDataWithOverride).html}
        `; diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index f6b64b7bc..7996b9ceb 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -304,6 +304,7 @@ .dropdown-menu.show { background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); border-left: solid .25rem var(--#{$prefix}navbar-mobile-cta-bg-color-open); + .dropdown-item { color: var(--#{$prefix}navbar-mobile-text-color); border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); @@ -312,19 +313,19 @@ .first-element { color: var(--#{$prefix}navbar-mobile-text-color); + &.show { + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + .dropdown-item { + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + } + } &:hover { color: var(--#{$prefix}navbar-mobile-text-color); background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); } } - .first-element.show { - color: var(--#{$prefix}navbar-mobile-text-color); - background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); - .dropdown-item { - border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); - } - } + } } } diff --git a/src/components/bs5/searchInput/search.functions.js b/src/components/bs5/searchInput/search.functions.js index bc3ca1d7b..0cc1c077a 100644 --- a/src/components/bs5/searchInput/search.functions.js +++ b/src/components/bs5/searchInput/search.functions.js @@ -91,12 +91,12 @@ export async function showSuggestions(value = '', isDefault = false, form) { if (isDefault) { // Load default suggestions suggestions.innerHTML = ` -
        +
        Popular services
          ${defaultSuggestions.popular_services.slice(0, 4).map(item => `
        • ${item.title}
          • `).join('')}
        -
        +
        Browse by category
          ${defaultSuggestions.categories.slice(0, 4).map(item => `
        • ${item.title}
          • `).join('')}
        diff --git a/src/components/bs5/searchInput/searchInput.scss b/src/components/bs5/searchInput/searchInput.scss index bcbb45457..2c4ead2a7 100644 --- a/src/components/bs5/searchInput/searchInput.scss +++ b/src/components/bs5/searchInput/searchInput.scss @@ -1,5 +1,5 @@ // ---------------------------------------------------------------------------------------------------------------------- -// Header - palettes and second hand variables: +// Search input - palettes and second hand variables: @import './colours'; // ---------------------------------------------------------------------------------------------------------------------- @@ -36,7 +36,6 @@ .suggestions-category { padding: 0 1rem; - margin-top: 1rem; } hr { diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 2bc5be993..887c93acc 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -107,13 +107,8 @@ strong, b, th { font-weight: $font-weight-bold !important; // Overrides default BS styles } - -// Light, Light alt a { font-weight: var(--qld-link-font-weight); -} - -a:not(.nav-link) { text-decoration: underline; text-underline-offset: var(--qld-link-underline-offset) !important; text-decoration-thickness: var(--qld-link-underline-thickness) !important; From ff402c0fa455992476a9c94bc8b7fef69b64f1da Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sat, 22 Jun 2024 16:59:36 +1000 Subject: [PATCH 11/19] WIP --- src/components/bs5/header/header.scss | 2 +- .../bs5/searchInput/search.functions.js | 86 +++++++------------ .../bs5/searchInput/searchInput.data.json | 47 +++++++++- .../bs5/searchInput/searchInput.hbs | 49 ++++++++--- 4 files changed, 116 insertions(+), 68 deletions(-) diff --git a/src/components/bs5/header/header.scss b/src/components/bs5/header/header.scss index 1ab791344..cbb85421a 100644 --- a/src/components/bs5/header/header.scss +++ b/src/components/bs5/header/header.scss @@ -528,7 +528,7 @@ left: 0; right: 0; top: 0.4rem; - padding: 1rem; + padding: 1rem 0; background-color: var(--#{$prefix}header_bg); } &--closed { diff --git a/src/components/bs5/searchInput/search.functions.js b/src/components/bs5/searchInput/search.functions.js index 0cc1c077a..e4fdcc1cd 100644 --- a/src/components/bs5/searchInput/search.functions.js +++ b/src/components/bs5/searchInput/search.functions.js @@ -1,5 +1,4 @@ import { createPopper } from '@popperjs/core'; -import { defaultSuggestions } from './search.json'; /** * Fetches data from the provided URL. @@ -63,7 +62,7 @@ export function selectSuggestion(value, form) { } /** - * Shows suggestions based on the user's input. + * Shows/hides suggestions based on the user's input. * * @param {string} value - The current input value. * @param {boolean} isDefault - Whether to show default suggestions or not. @@ -73,77 +72,53 @@ export function selectSuggestion(value, form) { export async function showSuggestions(value = '', isDefault = false, form) { const searchInput = form.querySelector('.qld-search-input input'); const suggestions = form.querySelector('.suggestions'); + const defaultSuggestionsContainer = form.querySelector('.default-suggestions'); + const dynamicSuggestionsContainer = form.querySelector('.dynamic-suggestions'); if (!suggestions || !searchInput) { console.error("Required elements not found."); return; } - // Search input attributes - const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search'; - const profile = searchInput.getAttribute('data-profile') || 'qld'; - const suggestUrl = searchInput.getAttribute('data-suggestions') || '10'; - const resultsUrl = searchInput.getAttribute('data-results-url') || 'off'; - - // Clear previous suggestions and services - suggestions.innerHTML = ''; - + // Hide/show default suggestions if (isDefault) { - // Load default suggestions - suggestions.innerHTML = ` -
        - Popular services -
          ${defaultSuggestions.popular_services.slice(0, 4).map(item => `
        • ${item.title}
          • `).join('')}
        -
        -
        -
        - Browse by category -
          ${defaultSuggestions.categories.slice(0, 4).map(item => `
        • ${item.title}
          • `).join('')}
        -
        - ${defaultSuggestions.options.view_more ? ` -
        - -
        ` : ''} - `; - suggestions.classList.add('show'); + defaultSuggestionsContainer.style.display = 'block'; + dynamicSuggestionsContainer.innerHTML = ''; + dynamicSuggestionsContainer.style.display = 'none'; createPopper(searchInput, suggestions, { placement: 'bottom-start', }); suggestions.style.display = 'block'; - - // Attach click event listeners to each suggestion item - form.querySelectorAll('.suggestions li').forEach((item) => { - item.addEventListener('click', () => selectSuggestion(item.innerText, form)); - }); - return; } if (value.length === 0) { - suggestions.innerHTML = ''; + defaultSuggestionsContainer.style.display = 'none'; + dynamicSuggestionsContainer.innerHTML = ''; + dynamicSuggestionsContainer.style.display = 'none'; suggestions.style.display = 'none'; return; } + defaultSuggestionsContainer.style.display = 'none'; + // Fetch dynamic suggestions if available + const suggestUrl = searchInput.getAttribute('data-suggestions'); if (suggestUrl) { + const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search'; + const profile = searchInput.getAttribute('data-profile') || 'qld'; const fetchedSuggestions = await fetchData(`${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`, 'suggestions'); if (fetchedSuggestions.length > 0) { - suggestions.innerHTML = ` + dynamicSuggestionsContainer.innerHTML = `
        Suggestions
          ${fetchedSuggestions.slice(0, 4).map(item => { - const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '$1'); - return `
        • ${highlightedText}
          • `; - }).join('')}
        -
        - `; - suggestions.classList.add('show'); + const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '$1'); + return `
      • ${highlightedText}
        • `; + }).join('')} + `; + dynamicSuggestionsContainer.style.display = 'block'; createPopper(searchInput, suggestions, { placement: 'bottom-start', }); @@ -153,24 +128,26 @@ export async function showSuggestions(value = '', isDefault = false, form) { form.querySelectorAll('.suggestions li').forEach((item) => { item.addEventListener('click', () => selectSuggestion(item.innerText, form)); }); - } else { - suggestions.innerHTML = ''; + dynamicSuggestionsContainer.innerHTML = ''; + dynamicSuggestionsContainer.style.display = 'none'; suggestions.style.display = 'none'; } } + const resultsUrl = searchInput.getAttribute('data-results-url'); if (resultsUrl) { + const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search'; + const profile = searchInput.getAttribute('data-profile') || 'qld'; const fetchedServices = await fetchData(`${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`, 'services'); if (fetchedServices.response.resultPacket && fetchedServices.response.resultPacket.results.length > 0) { - suggestions.innerHTML += ` + dynamicSuggestionsContainer.innerHTML += `
        Services - -
        - `; - suggestions.classList.add('show'); + + `; + dynamicSuggestionsContainer.style.display = 'block'; createPopper(searchInput, suggestions, { placement: 'bottom-start', }); @@ -184,6 +161,7 @@ export async function showSuggestions(value = '', isDefault = false, form) { } } + /** * Submits the search form with proper parameters. * @@ -212,4 +190,4 @@ export function submitSearchForm(query = '', form) { } // Attach the function to the window object to make it globally accessible -window.selectSuggestion = (value, form) => selectSuggestion(value, form); +window.selectSuggestion = (value, form) => selectSuggestion(value, form); \ No newline at end of file diff --git a/src/components/bs5/searchInput/searchInput.data.json b/src/components/bs5/searchInput/searchInput.data.json index cf263db0f..63ebe3610 100644 --- a/src/components/bs5/searchInput/searchInput.data.json +++ b/src/components/bs5/searchInput/searchInput.data.json @@ -16,5 +16,48 @@ "tiers": "off", "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", "results-url": "https://discover.search.qld.gov.au/s/search.json" - } -} + }, + "default_suggestions": { + "popular_services": [ + { + "title": "Apply for leave", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application" + }, + { + "title": "Apply for higher duties or relieving at level", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level" + }, + { + "title": "Extend a temporary or casual employee", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee" + }, + { + "title": "Hire a staff member (recruitment)", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment" + } + ], + "categories": [ + { + "title": "Search for directives, policies, circulars, and guidelines", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines" + }, + { + "title": "Employee pay and benefits", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits" + }, + { + "title": "Queensland Shared Services", + "link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services" + }, + { + "title": "Career development", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development" + } + ], + "options": { + "label": "Browse all categories", + "view_more": false, + "href": "/queenslanders" + } + } +} \ No newline at end of file diff --git a/src/components/bs5/searchInput/searchInput.hbs b/src/components/bs5/searchInput/searchInput.hbs index 557415f5b..821477c4d 100644 --- a/src/components/bs5/searchInput/searchInput.hbs +++ b/src/components/bs5/searchInput/searchInput.hbs @@ -1,20 +1,47 @@ +
        +
        + + -
        + {{#if suggestions}} +
          +
          +
          + Popular services +
            + {{#each default_suggestions.popular_services}} +
          • {{title}}
            • + {{/each}} +
          +
          - +
          - - - {{#if suggestions}} -
            - {{/if}} +
            + Browse by category +
              + {{#each default_suggestions.categories}} +
            • {{title}}
              • + {{/each}} +
            +
            + {{#if default_suggestions.options.view_more}} +
            + {{default_suggestions.options.label}} +
            + {{/if}} +
            +
            +
          + {{/if}} +
          \ No newline at end of file From 9ee9e7e13d092cc4a1b9ae61df2aec7b34dd257f Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sat, 22 Jun 2024 17:46:12 +1000 Subject: [PATCH 12/19] WIP --- src/components/bs5/searchInput/searchInput.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/bs5/searchInput/searchInput.stories.js b/src/components/bs5/searchInput/searchInput.stories.js index 568e2a5c7..286695160 100644 --- a/src/components/bs5/searchInput/searchInput.stories.js +++ b/src/components/bs5/searchInput/searchInput.stories.js @@ -15,7 +15,7 @@ export default { parameters: { docs: { controls: { - exclude: ["customClass", "inputID", "inputName", "buttonID", "buttonType", "ariaLabel"], + exclude: ["variantClass", "customClass", "inputID", "inputName", "buttonID", "buttonType", "ariaLabel"], }, }, }, From c28d218fce4da0e693990809669b1cac25c45f6a Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sat, 22 Jun 2024 17:50:35 +1000 Subject: [PATCH 13/19] WIP --- src/components/bs5/navbar/navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 7996b9ceb..8fcd36c88 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -535,7 +535,7 @@ } .nav-link { - color: var(--#{$prefix}navbar-nav-text-color); + color: var(--#{$prefix}navbar-nav-text-color) !important; //To do: Due to qld-type.scss needing refractor. Remove later. text-decoration: none; line-height: 2rem; width: 100%; From a636a1ae2b6add8ee8fe4e44132927c12da0d6ba Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sun, 23 Jun 2024 16:31:58 +1000 Subject: [PATCH 14/19] WIP: resetting changes to shared scss due to regression bug --- src/scss/qld-type.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 887c93acc..acae096b2 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -107,7 +107,8 @@ strong, b, th { font-weight: $font-weight-bold !important; // Overrides default BS styles } -a { +a, +a.nav-link { font-weight: var(--qld-link-font-weight); text-decoration: underline; text-underline-offset: var(--qld-link-underline-offset) !important; From 9dfcda51e19d423581e28e16718e3c416efc1f55 Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Sun, 23 Jun 2024 18:13:57 +1000 Subject: [PATCH 15/19] WIP --- src/components/bs5/navbar/_icons.scss | 2 +- src/components/bs5/navbar/navbar.scss | 2 +- .../bs5/searchInput/searchInput.data.json | 120 +++++++++--------- 3 files changed, 62 insertions(+), 62 deletions(-) diff --git a/src/components/bs5/navbar/_icons.scss b/src/components/bs5/navbar/_icons.scss index abc02d1df..e92ee7126 100644 --- a/src/components/bs5/navbar/_icons.scss +++ b/src/components/bs5/navbar/_icons.scss @@ -4,7 +4,7 @@ .navbar { .dropdown-toggle { .toggle_icon { - color: var(--qld-navbar-svg-color); + color: var(--#{$prefix}navbar-svg-color); height: 1rem; width: 1rem; margin-left: .25rem; diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 8fcd36c88..72f1877d4 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -312,7 +312,7 @@ } .first-element { - color: var(--#{$prefix}navbar-mobile-text-color); + color: var(--#{$prefix}navbar-mobile-text-color) !important; //TO DO: resolve, caused by qld-type overrides &.show { background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); .dropdown-item { diff --git a/src/components/bs5/searchInput/searchInput.data.json b/src/components/bs5/searchInput/searchInput.data.json index 63ebe3610..adc888899 100644 --- a/src/components/bs5/searchInput/searchInput.data.json +++ b/src/components/bs5/searchInput/searchInput.data.json @@ -1,63 +1,63 @@ { - "customClass": "", - "variantClass": "", - "placeholder": "Search website", - "inputID": "search", - "inputName": "query", - "buttonID": "search-button", - "buttonType": "submit", - "buttonLabel": "Search", - "ariaLabel": "Search website", - "suggestions": true, - "tags": { - "collection": "qgov~sp-search", - "profile": "qld", - "numranks": "10", - "tiers": "off", - "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", - "results-url": "https://discover.search.qld.gov.au/s/search.json" - }, - "default_suggestions": { - "popular_services": [ - { - "title": "Apply for leave", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application" - }, - { - "title": "Apply for higher duties or relieving at level", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level" - }, - { - "title": "Extend a temporary or casual employee", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee" - }, - { - "title": "Hire a staff member (recruitment)", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment" - } - ], - "categories": [ - { - "title": "Search for directives, policies, circulars, and guidelines", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines" - }, - { - "title": "Employee pay and benefits", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits" - }, - { - "title": "Queensland Shared Services", - "link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services" - }, - { - "title": "Career development", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development" - } - ], - "options": { - "label": "Browse all categories", - "view_more": false, - "href": "/queenslanders" - } + "customClass": "", + "variantClass": "", + "placeholder": "Search website", + "inputID": "search", + "inputName": "query", + "buttonID": "search-button", + "buttonType": "submit", + "buttonLabel": "Search", + "ariaLabel": "Search website", + "suggestions": true, + "tags": { + "collection": "qgov~sp-search", + "profile": "qld", + "numranks": "10", + "tiers": "off", + "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", + "results-url": "https://discover.search.qld.gov.au/s/search.json" + }, + "default_suggestions": { + "popular_services": [ + { + "title": "Apply for leave", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application" + }, + { + "title": "Apply for higher duties or relieving at level", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level" + }, + { + "title": "Extend a temporary or casual employee", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee" + }, + { + "title": "Hire a staff member (recruitment)", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment" + } + ], + "categories": [ + { + "title": "Search for directives, policies, circulars, and guidelines", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines" + }, + { + "title": "Employee pay and benefits", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits" + }, + { + "title": "Queensland Shared Services", + "link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services" + }, + { + "title": "Career development", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development" + } + ], + "options": { + "label": "Browse all categories", + "view_more": false, + "href": "/queenslanders" } + } } \ No newline at end of file From d997f9364167d5de66edb933e017e1597092510f Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Mon, 24 Jun 2024 07:49:39 +1000 Subject: [PATCH 16/19] [QOLOE-268]Set responsive width on header's dropdown menu. --- src/components/bs5/navbar/_icons.scss | 5 ++++- src/components/bs5/navbar/navbar.hbs | 2 +- src/components/bs5/navbar/navbar.scss | 16 +++++++++++----- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/bs5/navbar/_icons.scss b/src/components/bs5/navbar/_icons.scss index abc02d1df..dbbeaeac7 100644 --- a/src/components/bs5/navbar/_icons.scss +++ b/src/components/bs5/navbar/_icons.scss @@ -46,8 +46,11 @@ } a.dropdown-item { + position: relative; .chevron__icon { - float: right; + position: absolute; + top: 1.15rem; + right: 0; } } } diff --git a/src/components/bs5/navbar/navbar.hbs b/src/components/bs5/navbar/navbar.hbs index 003c94f3a..697dadd83 100644 --- a/src/components/bs5/navbar/navbar.hbs +++ b/src/components/bs5/navbar/navbar.hbs @@ -64,7 +64,7 @@ {{#each navigation_items}}
        • - {{title}} + {{title}} diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 79c50196f..aba9c776d 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -82,6 +82,7 @@ &-collapse { + position: relative; @include media-breakpoint-down(md) { width: 20rem; @@ -293,7 +294,9 @@ } } - .dropdown { + .dropdown { + position: static; + &-menu { background-color: var(--#{$prefix}navbar-dropdown-bg-color); @@ -305,7 +308,7 @@ @include media-breakpoint-up(lg) { left: 0; right: 0; - width: 1320px; //TO DO: FIX + width: 100%; padding: 3rem 4rem; margin-top: 0.5rem; margin-left: -4rem; @@ -331,8 +334,6 @@ } } - - @include media-breakpoint-down(lg) { border-radius: 0; box-shadow: none; @@ -402,6 +403,12 @@ padding: 1rem 0; color: var(--#{$prefix}navbar-link-color); border-bottom: solid 1px var(--#{$prefix}navbar-border-color); + white-space: normal; + + .dropdown-item__text { + display: inline-block; + margin-right: 1.5rem; + } &:active { background-color: transparent; @@ -438,7 +445,6 @@ @include media-breakpoint-down(lg) { padding: 1rem; - white-space: normal; overflow-wrap: break-word; } } From 0d6c79231abcf573ef80a3b2dfccdc22b22f18b7 Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Mon, 24 Jun 2024 11:05:18 +1000 Subject: [PATCH 17/19] WIP - Reset type changes due to conflict --- src/scss/qld-type.scss | 75 +++++++++++++++++++++++++----------------- 1 file changed, 44 insertions(+), 31 deletions(-) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index acae096b2..2c43e5323 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -41,6 +41,7 @@ $h6-font-size: $font-size-base * 0.875; $headings-font-weight: 600; $headings-line-height: 2; $headings-color: $qld-text-headings; +$qld-heading-color: $core-default-color-brand-primary-light-green; $link-color: $qld-brand-primary; $link-hover-color: $qld-brand-primary; @@ -94,6 +95,12 @@ body { } .qld-content-body { + + p { + margin-top: 1.5rem; + margin-bottom: 0; + } + ul, ol, p { line-height: 1.75; } @@ -103,27 +110,34 @@ body { } } +// Apply correct bold font-weight +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b, th { - font-weight: $font-weight-bold !important; // Overrides default BS styles + font-weight: $font-weight-bold; +} + + +// Light, Light alt + +h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-light-text-heading); } a, a.nav-link { - font-weight: var(--qld-link-font-weight); - text-decoration: underline; - text-underline-offset: var(--qld-link-underline-offset) !important; - text-decoration-thickness: var(--qld-link-underline-thickness) !important; + text-underline-offset: var(--qld-link-underline-offset); + text-decoration-thickness: var(--qld-link-underline-thickness); &:hover { - text-decoration-thickness: var(--qld-link-underline-thickness-hover) !important; + text-decoration-thickness: var(--qld-link-underline-thickness-hover); } &:visited { - color: #551A8B; - text-decoration-color: #551A8B; + color: var(--#{$prefix}color-default-color-light-link-visited); + text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited); &:hover { - text-decoration-thickness: 2px; - text-decoration-color: #551A8B; + text-decoration-thickness: var(--qld-link-underline-thickness-hover); + text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited-hover); } } @@ -132,6 +146,7 @@ a.nav-link { outline-offset: 2px; } } + caption { font-size: 14px; font-weight: 400; @@ -141,31 +156,29 @@ caption { // Dark, dark alt .dark, .dark-alt { - body & { - color: var(--qld-body-color); - } - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--qld-headings-color); - } + h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-dark-text-heading); + } + + + body & { + color: var(--qld-body-color); + } a, a.nav-link { - text-decoration-color: #B5CCE2; - &:visited { - color: var(--qld-link-visited-dark); - text-decoration-color: var(--qld-link-visited-dark); - &:hover { - text-decoration-color: #FFFFFF; - } - } + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default); + + &:visited { + color: var(--#{$prefix}color-default-color-dark-link-visited); + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-visited); + + &:hover { + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default-hover); + } + } } } - caption { font-size: 14px; font-weight: 400; @@ -192,4 +205,4 @@ a.nostyle { color: var(--qld-selection-color); background: var(--qld-selection-bg); text-shadow: none; -} +} \ No newline at end of file From 7815d032fd684ac8fd38e5275bf75a412a40d462 Mon Sep 17 00:00:00 2001 From: Mitch Anderson Date: Mon, 24 Jun 2024 11:31:39 +1000 Subject: [PATCH 18/19] WIP: Resetting type changes --- src/scss/qld-type.scss | 72 +++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 40 deletions(-) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 2c43e5323..2174fa8d4 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -41,7 +41,6 @@ $h6-font-size: $font-size-base * 0.875; $headings-font-weight: 600; $headings-line-height: 2; $headings-color: $qld-text-headings; -$qld-heading-color: $core-default-color-brand-primary-light-green; $link-color: $qld-brand-primary; $link-hover-color: $qld-brand-primary; @@ -95,12 +94,6 @@ body { } .qld-content-body { - - p { - margin-top: 1.5rem; - margin-bottom: 0; - } - ul, ol, p { line-height: 1.75; } @@ -110,34 +103,32 @@ body { } } -// Apply correct bold font-weight -h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b, th { - font-weight: $font-weight-bold; + font-weight: $font-weight-bold !important; // Overrides default BS styles } // Light, Light alt - -h1, h2, h3, h4, h5, h6 { - color: var(--#{$prefix}color-default-color-light-text-heading); +a { + font-weight: var(--qld-link-font-weight); } a, a.nav-link { - text-underline-offset: var(--qld-link-underline-offset); - text-decoration-thickness: var(--qld-link-underline-thickness); + text-decoration: underline; + text-underline-offset: var(--qld-link-underline-offset) !important; + text-decoration-thickness: var(--qld-link-underline-thickness) !important; &:hover { - text-decoration-thickness: var(--qld-link-underline-thickness-hover); + text-decoration-thickness: var(--qld-link-underline-thickness-hover) !important; } &:visited { - color: var(--#{$prefix}color-default-color-light-link-visited); - text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited); + color: #551A8B; + text-decoration-color: #551A8B; &:hover { - text-decoration-thickness: var(--qld-link-underline-thickness-hover); - text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited-hover); + text-decoration-thickness: 2px; + text-decoration-color: #551A8B; } } @@ -146,7 +137,6 @@ a.nav-link { outline-offset: 2px; } } - caption { font-size: 14px; font-weight: 400; @@ -156,29 +146,31 @@ caption { // Dark, dark alt .dark, .dark-alt { + body & { + color: var(--qld-body-color); + } - h1, h2, h3, h4, h5, h6 { - color: var(--#{$prefix}color-default-color-dark-text-heading); - } - - - body & { - color: var(--qld-body-color); - } + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--qld-headings-color); + } a, a.nav-link { - text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default); - - &:visited { - color: var(--#{$prefix}color-default-color-dark-link-visited); - text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-visited); - - &:hover { - text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default-hover); - } - } + text-decoration-color: #B5CCE2; + &:visited { + color: var(--qld-link-visited-dark); + text-decoration-color: var(--qld-link-visited-dark); + &:hover { + text-decoration-color: #FFFFFF; + } + } } } + caption { font-size: 14px; font-weight: 400; @@ -205,4 +197,4 @@ a.nostyle { color: var(--qld-selection-color); background: var(--qld-selection-bg); text-shadow: none; -} \ No newline at end of file +} From 253ad5f541ddda6d4c4969e84bf3cb6aadea3a61 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 24 Jun 2024 01:46:17 +0000 Subject: [PATCH 19/19] 1.0.19 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fd8e3fd3..be97f2614 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "license": "ISC", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", diff --git a/package.json b/package.json index 032e22f9b..1ac28ada1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "description": "", "repository": { "type": "git",