From 63956a79ff7937a88e84e9be33fb348d93a49ab0 Mon Sep 17 00:00:00 2001 From: Bec Launder Date: Thu, 20 Jun 2024 10:43:37 +1000 Subject: [PATCH 01/46] 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 ec7eb86b..451ccd8b 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/46] 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 0300d437..631087d1 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/46] 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 af438ac4..d27a844c 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/46] 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 d27a844c..61ef25ca 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/46] 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 bb3dcd03..308138bd 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/46] 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 3682c2fb..fca25e2f 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/46] 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 fca25e2f..8ef5cf8f 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/46] 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 1954003a..1ab79134 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 4b4f2711..46443aa5 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 285bd0cd..f6c5f704 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 003c94f3..746f1ba7 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 79c50196..4057fadf 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 2174fa8d..2bc5be99 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/46] 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 4057fadf..f6b64b7b 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 52c28050..bc3ca1d7 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 4a615e07..557415f5 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 9c69db04..bcbb4545 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 28669516..568e2a5c 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/46] 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 6a91748d..e5d82e56 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 f6b64b7b..7996b9ce 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 bc3ca1d7..0cc1c077 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 bcbb4545..2c4ead2a 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 2bc5be99..887c93ac 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/46] 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 1ab79134..cbb85421 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 0cc1c077..e4fdcc1c 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 cf263db0..63ebe361 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 557415f5..821477c4 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/46] 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 568e2a5c..28669516 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/46] 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 7996b9ce..8fcd36c8 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/46] 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 887c93ac..acae096b 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/46] 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 abc02d1d..e92ee712 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 8fcd36c8..72f1877d 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 63ebe361..adc88889 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/46] [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 abc02d1d..dbbeaeac 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 003c94f3..697dadd8 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 79c50196..aba9c776 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/46] 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 acae096b..2c43e532 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/46] 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 2c43e532..2174fa8d 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/46] 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 7fd8e3fd..be97f261 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 032e22f9..1ac28ada 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", From 25630f775247be1efce2f6c0e6fdc203503a3703 Mon Sep 17 00:00:00 2001 From: william dutton Date: Mon, 24 Jun 2024 08:54:17 +1000 Subject: [PATCH 20/46] Flesh out integration page creation, showing how to render a full page with custon main content. --- .../qgds-plugin-handlebar-partial-builder.js | 87 +++++++++ .esbuild/plugins/qgds-plugin-version.js | 5 +- .storybook/preview.js | 2 +- esbuild.js | 6 +- package-lock.json | 5 +- package.json | 3 +- .../bs5/breadcrumbs/breadcrumb.functions.js | 2 +- .../breadcumbsWrapper/breadcrumbsWrapper.hbs | 11 ++ .../breadcrumbsWrapper.stories.js | 38 ++++ .../breadcrumbsWrapper.test.hbs | 7 + .../breadcrumbsWrapper.test.js | 13 ++ .../bs5/breadcumbsWrapper/manifest.json | 0 .../bs5/contentFooter/contentFooter.data.json | 3 + .../bs5/contentFooter/contentFooter.hbs | 4 + .../bs5/contentFooter/contentFooter.js | 10 + .../contentFooter/contentFooter.stories.js | 68 +++++++ .../bs5/contentFooter/manifest.json | 0 .../contentFooterWrapper.hbs | 5 + .../contentFooterWrapper.stories.js | 39 ++++ .../contentFooterWrapper.test.hbs | 13 ++ .../contentFooterWrapper.test.js | 13 ++ .../bs5/contentFooterWrapper/manifest.json | 0 .../bs5/contentWrapper/ContentWrapper.test.js | 13 ++ .../contentWrapper/contentWrapper.data.json | 3 + .../bs5/contentWrapper/contentWrapper.hbs | 5 + .../contentWrapper/contentWrapper.stories.js | 68 +++++++ .../contentWrapper/contentWrapper.test.hbs | 12 ++ .../bs5/contentWrapper/manifest.json | 0 .../bs5/fullPageWrapper/fullPage.hbs | 16 ++ .../bs5/fullPageWrapper/fullPage.stories.js | 65 +++++++ .../bs5/fullPageWrapper/fullPage.test.hbs | 4 + .../bs5/fullPageWrapper/fullPage.test.js | 13 ++ .../bs5/fullPageWrapper/manifest.json | 0 src/components/bs5/head/head.stories.js | 12 +- .../mainContainerWrapper.hbs | 28 +++ .../mainContainerWrapper.stories.js | 51 ++++++ .../mainContainerWrapper.test.hbs | 6 + .../mainContainerWrapper.test.js | 13 ++ .../bs5/mainContainerWrapper/manifest.json | 0 .../bs5/metaDcTerms/MetaDcTerms.data.json | 12 ++ src/components/bs5/metaDcTerms/MetaDcTerms.js | 10 + src/components/bs5/metaDcTerms/manifest.json | 0 .../bs5/metaDcTerms/metaDcTerms.hbs | 17 ++ .../bs5/metaDcTerms/metaDcTerms.stories.js | 38 ++++ .../bs5/metaOpenGraph/MetaOpenGraph.data.json | 14 ++ .../bs5/metaOpenGraph/MetaOpenGraph.js | 10 + .../bs5/metaOpenGraph/manifest.json | 0 .../bs5/metaOpenGraph/metaOpenGraph.hbs | 18 ++ .../metaOpenGraph/metaOpenGraph.stories.js | 38 ++++ .../bs5/sidenavWrapper/SidenavWrapper.mdx | 11 ++ .../bs5/sidenavWrapper/SidenavWrapper.test.js | 13 ++ .../bs5/sidenavWrapper/manifest.json | 0 .../bs5/sidenavWrapper/sidenavWrapper.hbs | 4 + .../sidenavWrapper/sidenavWrapper.stories.js | 68 +++++++ .../sidenavWrapper/sidenavWrapper.test.hbs | 15 ++ src/js/handlebars.helpers.js | 67 +++++-- src/js/handlebars.init.js | 31 +++- src/js/handlebars.partials.js | 92 ++++++++++ src/main.js | 2 +- src/stories/integration/MainIntegration.js | 29 +++ src/stories/integration/MainIntegration.mdx | 10 + src/stories/integration/breadcrumb.data.json | 28 +++ src/stories/integration/content.data.json | 3 + .../integration/contentFooter.data.json | 3 + src/stories/integration/footer.data.json | 154 ++++++++++++++++ src/stories/integration/globalAlert.data.json | 9 + src/stories/integration/header.data.json | 173 ++++++++++++++++++ src/stories/integration/inpagenav.data.json | 26 +++ .../integration/integration.stories.js | 145 +++++++++++++++ src/stories/integration/main.hbs | 13 ++ src/stories/integration/navigation.data.json | 22 +++ src/stories/integration/search.data.json | 20 ++ src/stories/integration/sidenav.data.json | 88 +++++++++ 73 files changed, 1794 insertions(+), 32 deletions(-) create mode 100644 .esbuild/plugins/qgds-plugin-handlebar-partial-builder.js create mode 100644 src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs create mode 100644 src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js create mode 100644 src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs create mode 100644 src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js create mode 100644 src/components/bs5/breadcumbsWrapper/manifest.json create mode 100644 src/components/bs5/contentFooter/contentFooter.data.json create mode 100644 src/components/bs5/contentFooter/contentFooter.hbs create mode 100644 src/components/bs5/contentFooter/contentFooter.js create mode 100644 src/components/bs5/contentFooter/contentFooter.stories.js create mode 100644 src/components/bs5/contentFooter/manifest.json create mode 100644 src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs create mode 100644 src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js create mode 100644 src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs create mode 100644 src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js create mode 100644 src/components/bs5/contentFooterWrapper/manifest.json create mode 100644 src/components/bs5/contentWrapper/ContentWrapper.test.js create mode 100644 src/components/bs5/contentWrapper/contentWrapper.data.json create mode 100644 src/components/bs5/contentWrapper/contentWrapper.hbs create mode 100644 src/components/bs5/contentWrapper/contentWrapper.stories.js create mode 100644 src/components/bs5/contentWrapper/contentWrapper.test.hbs create mode 100644 src/components/bs5/contentWrapper/manifest.json create mode 100644 src/components/bs5/fullPageWrapper/fullPage.hbs create mode 100644 src/components/bs5/fullPageWrapper/fullPage.stories.js create mode 100644 src/components/bs5/fullPageWrapper/fullPage.test.hbs create mode 100644 src/components/bs5/fullPageWrapper/fullPage.test.js create mode 100644 src/components/bs5/fullPageWrapper/manifest.json create mode 100644 src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs create mode 100644 src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js create mode 100644 src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs create mode 100644 src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js create mode 100644 src/components/bs5/mainContainerWrapper/manifest.json create mode 100644 src/components/bs5/metaDcTerms/MetaDcTerms.data.json create mode 100644 src/components/bs5/metaDcTerms/MetaDcTerms.js create mode 100644 src/components/bs5/metaDcTerms/manifest.json create mode 100644 src/components/bs5/metaDcTerms/metaDcTerms.hbs create mode 100644 src/components/bs5/metaDcTerms/metaDcTerms.stories.js create mode 100644 src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json create mode 100644 src/components/bs5/metaOpenGraph/MetaOpenGraph.js create mode 100644 src/components/bs5/metaOpenGraph/manifest.json create mode 100644 src/components/bs5/metaOpenGraph/metaOpenGraph.hbs create mode 100644 src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js create mode 100644 src/components/bs5/sidenavWrapper/SidenavWrapper.mdx create mode 100644 src/components/bs5/sidenavWrapper/SidenavWrapper.test.js create mode 100644 src/components/bs5/sidenavWrapper/manifest.json create mode 100644 src/components/bs5/sidenavWrapper/sidenavWrapper.hbs create mode 100644 src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js create mode 100644 src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs create mode 100644 src/js/handlebars.partials.js create mode 100644 src/stories/integration/MainIntegration.js create mode 100644 src/stories/integration/MainIntegration.mdx create mode 100644 src/stories/integration/breadcrumb.data.json create mode 100644 src/stories/integration/content.data.json create mode 100644 src/stories/integration/contentFooter.data.json create mode 100644 src/stories/integration/footer.data.json create mode 100644 src/stories/integration/globalAlert.data.json create mode 100644 src/stories/integration/header.data.json create mode 100644 src/stories/integration/inpagenav.data.json create mode 100644 src/stories/integration/integration.stories.js create mode 100644 src/stories/integration/main.hbs create mode 100644 src/stories/integration/navigation.data.json create mode 100644 src/stories/integration/search.data.json create mode 100644 src/stories/integration/sidenav.data.json diff --git a/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js b/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js new file mode 100644 index 00000000..ca18399b --- /dev/null +++ b/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js @@ -0,0 +1,87 @@ +// updateHandlebarsPartialsPlugin.js +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import { build } from 'esbuild'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const COMPONENTS_DIR = path.resolve(__dirname, './../../src/components'); +const PARTIALS_JS_FILE = path.resolve(__dirname, '../../src/js/handlebars.partials.js'); + + +function getAllFiles(dirPath, arrayOfFiles) { + const files = fs.readdirSync(dirPath, { withFileTypes: true }); + + arrayOfFiles = arrayOfFiles || []; + + files.forEach((file) => { + //console.log(file); + if (file.isDirectory()) { + arrayOfFiles = getAllFiles(path.join(dirPath, file.name), arrayOfFiles); + } else if (file.isFile() && (file.name.endsWith('.hbs') && !file.name.endsWith('.test.hbs'))) { + arrayOfFiles.push(path.join(dirPath, file.name)); + } + }); + + return arrayOfFiles; +} + +export default function QGDSupdateHandlebarsPartialsPlugin() { + return { + name: 'update-handlebars-partials', + setup(build) { + build.onStart(async () => { + + const files = getAllFiles(COMPONENTS_DIR); + //console.log(files); + const fileNames = new Map(); + let duplicateFound = false; + + let importLines = ''; + let registerLines = ''; + + for (const file of files) { + //console.log(file); + const componentName = path.basename(file, '.hbs') + //console.log(componentName); + // Duplicate check + if (fileNames.has(componentName)) { + console.error(`Error: Duplicate component name found: "${componentName}" second partial located at ${file} and ${fileNames.get(componentName)}`); + duplicateFound = true; + continue; + } + fileNames.set(componentName, file); + + const importName = componentName.replace(/-/g, ''); + const componentPath = path.relative(path.dirname(PARTIALS_JS_FILE), file).replace(/\\/g, '/'); + + importLines += `import ${importName} from "${componentPath}?raw";\n`; + registerLines += ` handlebars.registerPartial("${componentName}", ${importName});\n`; + } + + if (duplicateFound) { + process.exit(1); + } + + const newContent = `/** THIS IS A GENERATED FILE **/ + +${importLines} + +/** + * Registers Handlebars Partials + * @param {Handlebars} handlebars Templating engine + * @returns {void} Result of the helper operation + */ +export default function handlebarsPartials(handlebars) { +${registerLines} +} +`; + + fs.writeFileSync(PARTIALS_JS_FILE, newContent); + console.log('handlebar.partials.js has been updated.'); + }); + }, + } +}; \ No newline at end of file diff --git a/.esbuild/plugins/qgds-plugin-version.js b/.esbuild/plugins/qgds-plugin-version.js index a6cbefa0..ed1ca5be 100644 --- a/.esbuild/plugins/qgds-plugin-version.js +++ b/.esbuild/plugins/qgds-plugin-version.js @@ -67,7 +67,7 @@ const versionPlugin = () => ({ // Replace placeholders in HTML, Mustache, and Handlebars files build.onEnd(async (result) => { - console.log('version update starting'); + console.log('version update starting...'); //List new components const root = process.cwd(); @@ -85,11 +85,12 @@ const versionPlugin = () => ({ // Check if the content has changed if (source !== newSource) { - console.log(`Placeholder replaced in: ${file}, ${newSource}`); + // console.log(`Placeholder replaced in: ${file}, ${newSource}`); await fs.writeFile(file, newSource); } } } + console.log('version update Completed'); }); diff --git a/.storybook/preview.js b/.storybook/preview.js index addbd933..e6784aa7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -96,7 +96,7 @@ const preview = { }, ], - tags: ["autodocs", "autodocs"] + tags: ["autodocs"] }; export default preview; diff --git a/esbuild.js b/esbuild.js index bdfb9d9c..7a4cdaaa 100644 --- a/esbuild.js +++ b/esbuild.js @@ -3,6 +3,7 @@ import * as esbuild from "esbuild"; //Local ESBUILD PLUGINS +import QGDSupdateHandlebarsPartialsPlugin from "./.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js"; import QGDSrawLoader from "./.esbuild/plugins/qgds-plugin-raw-loader.js"; import QDGScleanFolders from "./.esbuild/plugins/qgds-plugin-clean-output-folders.js"; import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js"; @@ -60,14 +61,15 @@ const buildConfig = { }, plugins: [ + QGDSupdateHandlebarsPartialsPlugin(), QDGScopy(), QDGSbuildLog(), QGDSrawLoader(), versionPlugin(), QDGScleanFolders(), handlebarsPlugin(), - sassPlugin() - ] + sassPlugin(), + ], }; async function StartBuild() { diff --git a/package-lock.json b/package-lock.json index be97f261..72449494 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "bootstrap": "^5.3.1", - "material-symbols": "^0.20.0" + "material-symbols": "^0.20.0", + "run-parallel": "^1.2.0" }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", @@ -17212,7 +17213,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true, "funding": [ { "type": "github", @@ -18042,7 +18042,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "dev": true, "funding": [ { "type": "github", diff --git a/package.json b/package.json index 1ac28ada..3a5c0afc 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,8 @@ "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "bootstrap": "^5.3.1", - "material-symbols": "^0.20.0" + "material-symbols": "^0.20.0", + "run-parallel": "^1.2.0" }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", diff --git a/src/components/bs5/breadcrumbs/breadcrumb.functions.js b/src/components/bs5/breadcrumbs/breadcrumb.functions.js index b1ee5af1..2cd6231e 100644 --- a/src/components/bs5/breadcrumbs/breadcrumb.functions.js +++ b/src/components/bs5/breadcrumbs/breadcrumb.functions.js @@ -92,4 +92,4 @@ export function breadcrumbExpand(event) { crumb.querySelector('a').setAttribute('tabindex', 0) } }) -} \ No newline at end of file +} diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs new file mode 100644 index 00000000..58414b9e --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs @@ -0,0 +1,11 @@ + +
          +
          +
          +
          + + {{> @partial-block }} +
          +
          +
          +
          \ No newline at end of file diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js new file mode 100644 index 00000000..1fecd83f --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js @@ -0,0 +1,38 @@ +import { forGov } from "../breadcrumbs/breadcrumbs.data.json"; +import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +const defaultData = { breadcrumbs: forGov }; + +export default { + title: "!Layout/Components/Breadcrumbs Wrapper", + render: (args) => { + init(Handlebars) + return new BreadcrumbsWrapperTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + docs: { + controls: { + + }, + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs new file mode 100644 index 00000000..26939fcb --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs @@ -0,0 +1,7 @@ +header before +
          +{{#>breadcrumbsWrapper}} + {{> breadcrumbs breadcrumbs }} +{{/breadcrumbsWrapper}} +content after +
          diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js new file mode 100644 index 00000000..9ff7a7c0 --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./breadcrumbsWrapper.test.hbs?raw"; + +export class BreadcrumbsWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/breadcumbsWrapper/manifest.json b/src/components/bs5/breadcumbsWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/contentFooter/contentFooter.data.json b/src/components/bs5/contentFooter/contentFooter.data.json new file mode 100644 index 00000000..f19bcb2e --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.data.json @@ -0,0 +1,3 @@ +{ + "lastUpdated": "1900-01-31" +} diff --git a/src/components/bs5/contentFooter/contentFooter.hbs b/src/components/bs5/contentFooter/contentFooter.hbs new file mode 100644 index 00000000..25414899 --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.hbs @@ -0,0 +1,4 @@ +
          +
          Last updated:
          +
          {{formatDateOrToday lastUpdated }}
          +
          \ No newline at end of file diff --git a/src/components/bs5/contentFooter/contentFooter.js b/src/components/bs5/contentFooter/contentFooter.js new file mode 100644 index 00000000..9ac20a83 --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentFooter.hbs?raw"; + +export class ContentFooter { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/contentFooter/contentFooter.stories.js b/src/components/bs5/contentFooter/contentFooter.stories.js new file mode 100644 index 00000000..54c2ad8e --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.stories.js @@ -0,0 +1,68 @@ +import defaultdata from "./contentFooter.data.json"; +import { ContentFooter } from "./contentFooter.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Footer", + render: (args) => { + init(Handlebars) + return new ContentFooter(args).html; + }, + + argTypes: { + lastUpdated: { + name: "Last Updated", + description: `Date page was Last Updated`, + control: { type: 'text' }, + }, + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + + +export const DEV = { + args: { + cdn: "DEV", + }, + decorators:[Story => { + return ` + ${Story()} + `; + }], +}; + +export const SQUIZ = { + args: { + cdn: "/__data/assets/git_bridge/0026/471752", + }, + decorators:[Story => { + return ` + ${Story()} + `; + }], +}; + + diff --git a/src/components/bs5/contentFooter/manifest.json b/src/components/bs5/contentFooter/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs new file mode 100644 index 00000000..21642e24 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs @@ -0,0 +1,5 @@ +
          +
          + {{> @partial-block }} +
          +
          \ No newline at end of file diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js new file mode 100644 index 00000000..d9fa4c89 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js @@ -0,0 +1,39 @@ +import defaultdata from "./../contentFooter/contentFooter.data.json"; +import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Footer Wrapper", + render: (args) => { + init(Handlebars) + return new ContentFooterWrapperTest(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs new file mode 100644 index 00000000..b6523550 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs @@ -0,0 +1,13 @@ + +
          +
          + {{#>contentFooterWrapper}} + {{> contentFooter }} +

          inner contentFooterWrapper data

          + {{/contentFooterWrapper}} +
          +
          +
          +

          post contentFooterWrapper suffix

          +
          + diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js new file mode 100644 index 00000000..731a2ef8 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentFooterWrapper.test.hbs?raw"; + +export class ContentFooterWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/contentFooterWrapper/manifest.json b/src/components/bs5/contentFooterWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/contentWrapper/ContentWrapper.test.js b/src/components/bs5/contentWrapper/ContentWrapper.test.js new file mode 100644 index 00000000..34456d07 --- /dev/null +++ b/src/components/bs5/contentWrapper/ContentWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentWrapper.test.hbs?raw"; + +export class ContentWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/contentWrapper/contentWrapper.data.json b/src/components/bs5/contentWrapper/contentWrapper.data.json new file mode 100644 index 00000000..d92ed276 --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.data.json @@ -0,0 +1,3 @@ +{ + "title": "this is my title" +} diff --git a/src/components/bs5/contentWrapper/contentWrapper.hbs b/src/components/bs5/contentWrapper/contentWrapper.hbs new file mode 100644 index 00000000..06b79ecf --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.hbs @@ -0,0 +1,5 @@ + +
          + {{#if title}}

          {{title}}

          {{/if}} + {{> @partial-block }} +
          diff --git a/src/components/bs5/contentWrapper/contentWrapper.stories.js b/src/components/bs5/contentWrapper/contentWrapper.stories.js new file mode 100644 index 00000000..dc046305 --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.stories.js @@ -0,0 +1,68 @@ +// ComponentExample.stories.js +import { ContentWrapperTest } from "./ContentWrapper.test.js"; +import defaultdata from "./contentWrapper.data.json"; +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Wrapper", + render: (args) => { + init(Handlebars); + return new ContentWrapperTest(args).html; + }, + + argTypes: { + title: { control: 'text' }, + }, + parameters: { + docs: { + description: { + component: ` +This is a partial-block to embed more content inside another partial. See [Handlebars Partial Blocks](https://handlebarsjs.com/guide/partials.html#partial-blocks) for more details. +pass "title" to set title at top content block. + `, + }, + }, + }, +}; + +/** + * Default Content Wrapper + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
          +
          + ${Story()} +
          +
          + `; + }, + ], +}; + + +/** + * Dark Content Wrapper + */ +export const Dark = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
          +
          +
          +
          + ${Story()} +
          +
          +
          +
          + `; + }, + ], +}; diff --git a/src/components/bs5/contentWrapper/contentWrapper.test.hbs b/src/components/bs5/contentWrapper/contentWrapper.test.hbs new file mode 100644 index 00000000..8ecbae7c --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.test.hbs @@ -0,0 +1,12 @@ + +
          +
          +

          pre contentWrapper prefix

          +
          +
          +{{#>contentWrapper}} +

          inner contentWrapper data

          +{{/contentWrapper}} +
          +

          post contentWrapper suffix

          +
          diff --git a/src/components/bs5/contentWrapper/manifest.json b/src/components/bs5/contentWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/fullPageWrapper/fullPage.hbs b/src/components/bs5/fullPageWrapper/fullPage.hbs new file mode 100644 index 00000000..c79173e5 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.hbs @@ -0,0 +1,16 @@ + + + + + + {{title}} + {{> metaDcTerms title=title description=description uri=uri dcTerms=dcTerms }} + {{> metaOpenGraph title=title description=description uri=uri seo=seo og=og }} + {{> head }} + + +{{#> mainContainerWrapper }} + {{> @partial-block }} +{{/mainContainerWrapper}} + + \ No newline at end of file diff --git a/src/components/bs5/fullPageWrapper/fullPage.stories.js b/src/components/bs5/fullPageWrapper/fullPage.stories.js new file mode 100644 index 00000000..6a405cd1 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.stories.js @@ -0,0 +1,65 @@ +import { FullPageTest } from "./fullPage.test.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +import { dcTerms } from '../metaDcTerms/MetaDcTerms.data.json'; +import metaOpenGraphData from '../metaOpenGraph/MetaOpenGraph.data.json'; +import { masterbrand_variant } from '../header/header.data.json'; +import { menu_state } from "../navbar/navbar.data.json"; +import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json"; +import searchData from "../searchInput/searchInput.data.json"; +import globalAlertData from "../globalAlert/globalAlert.data.json"; +import sidenavData from "../sidenav/sidenav.data.json"; +import contentFooterData from "../contentFooter/contentFooter.data.json"; +import footerData from "../footer/footer.data.json"; + +const defaultData = { + cdn: ".", //for StoryBook it's ., for normal usage "PROD" + title: "title goes here", + description: "my description", + uri: "http://localhost/uri/here", + dcTerms: dcTerms, + seo: metaOpenGraphData.seo, + og: metaOpenGraphData.og, + header: masterbrand_variant, + search: searchData, + navbar: menu_state, + breadcrumbs: breadcrumbsData.forGov, + globalAlert: globalAlertData.critical, + sidenav: sidenavData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: "!Layout/Full Page", + render: (args) => { + init(Handlebars) + return new FullPageTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + layout: 'fullscreen', + docs: { + controls: { + + }, + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +/** + * Default + * + */ +export const Default = {}; + diff --git a/src/components/bs5/fullPageWrapper/fullPage.test.hbs b/src/components/bs5/fullPageWrapper/fullPage.test.hbs new file mode 100644 index 00000000..c4cc5bc9 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.test.hbs @@ -0,0 +1,4 @@ +{{#>fullPage}} + my main content goes here +{{/fullPage}} + diff --git a/src/components/bs5/fullPageWrapper/fullPage.test.js b/src/components/bs5/fullPageWrapper/fullPage.test.js new file mode 100644 index 00000000..8e17461a --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./fullPage.test.hbs?raw"; + +export class FullPageTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/fullPageWrapper/manifest.json b/src/components/bs5/fullPageWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/head/head.stories.js b/src/components/bs5/head/head.stories.js index 476f9e71..1dcf64e0 100644 --- a/src/components/bs5/head/head.stories.js +++ b/src/components/bs5/head/head.stories.js @@ -3,7 +3,7 @@ import { Head } from "./Head.js"; export default { tags: ["autodocs"], - title: "!Core/HeadMeta", + title: "!Core/Head/Includes CDN or Local", render: (args) => { return new Head(args).html; }, @@ -23,7 +23,7 @@ export default { "PROD", "/__data/assets/git_bridge/0026/471752", ], - } + }, }, parameters: { @@ -53,24 +53,24 @@ export const Default = { export const DEV = { args: { - cdn: "DEV" + cdn: "DEV", }, decorators:[Story => { return ` ${Story()} `; - }] + }], }; export const SQUIZ = { args: { - cdn: "/__data/assets/git_bridge/0026/471752" + cdn: "/__data/assets/git_bridge/0026/471752", }, decorators:[Story => { return ` ${Story()} `; - }] + }], }; diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs new file mode 100644 index 00000000..3808dc70 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs @@ -0,0 +1,28 @@ +{{> header header}} +{{> navbar navbar}} +{{> globalAlert globalAlert}} +
          + {{#> breadcrumbsWrapper}} + {{> breadcrumbs breadcrumbs}} + {{/breadcrumbsWrapper}} + +
          +
          +
          + + {{#> sidenavWrapper}} + {{> sidenav sidenav}} + {{/sidenavWrapper}} + {{#> contentWrapper}} + {{> @partial-block }} + {{/contentWrapper}} +
          +
          + + {{#>contentFooterWrapper}} + {{> contentFooter contentFooter }} + {{/contentFooterWrapper}} + +
          +
          +{{> footer footer}} \ No newline at end of file diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js new file mode 100644 index 00000000..c80e7a54 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js @@ -0,0 +1,51 @@ +import { MainContainerWrapperTest } from "./mainContainerWrapper.test.js"; + +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; +//Data +import { masterbrand_variant } from '../header/header.data.json'; +import { menu_state } from "../navbar/navbar.data.json"; +import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json"; +import searchData from "../searchInput/searchInput.data.json"; +import globalAlertData from "../globalAlert/globalAlert.data.json"; +import sidenavData from "../sidenav/sidenav.data.json"; +import contentFooterData from "../contentFooter/contentFooter.data.json"; +import footerData from "../footer/footer.data.json"; + +const defaultData = { + cdn: ".", //for storybook it's ., for normal usage "PROD" + title: "title goes here", + header: masterbrand_variant, + search: searchData, + navbar: menu_state, + breadcrumbs: breadcrumbsData.forGov, + globalAlert: globalAlertData.critical, + sidenav: sidenavData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: "!Layout/Main Container Wrapper", + render: (args) => { + init(Handlebars) + return new MainContainerWrapperTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + layout: 'fullscreen', + docs: { + controls: { + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs new file mode 100644 index 00000000..abac4314 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs @@ -0,0 +1,6 @@ +{{#> mainContainerWrapper}} +

          inner mainContainerWrapper data

          +

          content goes here dd

          +{{/mainContainerWrapper}} + + diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js new file mode 100644 index 00000000..da0ca325 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./mainContainerWrapper.test.hbs?raw"; + +export class MainContainerWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/mainContainerWrapper/manifest.json b/src/components/bs5/mainContainerWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaDcTerms/MetaDcTerms.data.json b/src/components/bs5/metaDcTerms/MetaDcTerms.data.json new file mode 100644 index 00000000..e8268e15 --- /dev/null +++ b/src/components/bs5/metaDcTerms/MetaDcTerms.data.json @@ -0,0 +1,12 @@ +{ + "dcTerms": { + "created": "2021-06-02", + "modified": "2024-02-26", + "type": "Text|Collection", + "aggregationLevel": "null|collection", + "documentType": "guidelines|index", + "audience": "AGLSTERMS.agls-audience", + "subject": "", + "licenseUri": "https://creativecommons.org/licenses/by/4.0/" + } +} \ No newline at end of file diff --git a/src/components/bs5/metaDcTerms/MetaDcTerms.js b/src/components/bs5/metaDcTerms/MetaDcTerms.js new file mode 100644 index 00000000..456f3305 --- /dev/null +++ b/src/components/bs5/metaDcTerms/MetaDcTerms.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./metaDcTerms.hbs?raw"; + +export class MetaDcTerms { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/metaDcTerms/manifest.json b/src/components/bs5/metaDcTerms/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaDcTerms/metaDcTerms.hbs b/src/components/bs5/metaDcTerms/metaDcTerms.hbs new file mode 100644 index 00000000..9bdc5dca --- /dev/null +++ b/src/components/bs5/metaDcTerms/metaDcTerms.hbs @@ -0,0 +1,17 @@ + +{{#if dcTerms}} + + + +{{#if dcTerms.created}}{{/if}} +{{#if dcTerms.modified}}{{/if}} +{{#if description}}{{/if}} +{{#if uri}}{{/if}} + +{{#if dcTerms.type}}{{/if}} +{{#if dcTerms.aggregationLevel}}{{/if}} +{{#if dcTerms.documentType}}{{/if}} +{{#if dcTerms.subject}}{{/if}} +{{#if dcTerms.audience}}{{/if}} +{{#if dcTerms.licenseUri}}{{/if}} +{{/if}} \ No newline at end of file diff --git a/src/components/bs5/metaDcTerms/metaDcTerms.stories.js b/src/components/bs5/metaDcTerms/metaDcTerms.stories.js new file mode 100644 index 00000000..6fc70472 --- /dev/null +++ b/src/components/bs5/metaDcTerms/metaDcTerms.stories.js @@ -0,0 +1,38 @@ +import MetaDcTermsData from "./MetaDcTerms.data.json"; +import { MetaDcTerms } from "./MetaDcTerms.js"; + +const defaultData = { + ...MetaDcTermsData, + uri: "https://forgov.qld.gov.au/projects-and-initiatives/search-for-projects-and-initiatives", + description: "description goes here", + title: "this is my title", +} + +export default { + tags: ["autodocs"], + title: "!Core/Head/Meta Dublin Core Terms (DCTERMS)", + args: defaultData, + render: (args) => { + return new MetaDcTerms(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + + + diff --git a/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json b/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json new file mode 100644 index 00000000..a35d6ffe --- /dev/null +++ b/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json @@ -0,0 +1,14 @@ +{ + "seo": { + "pageSnippet": "10", + "keywords": "keywords go here", + "department": "None" + }, + "og": { + "type": "article", + "image": "https://oss-uat.clients.squiz.net/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png", + "twitter_image": "https://oss-uat.clients.squiz.net/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png", + "twitter_description": "if not set, will use description" + } +} + diff --git a/src/components/bs5/metaOpenGraph/MetaOpenGraph.js b/src/components/bs5/metaOpenGraph/MetaOpenGraph.js new file mode 100644 index 00000000..e9629f7b --- /dev/null +++ b/src/components/bs5/metaOpenGraph/MetaOpenGraph.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./metaOpenGraph.hbs?raw"; + +export class MetaOpenGraph { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/metaOpenGraph/manifest.json b/src/components/bs5/metaOpenGraph/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs b/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs new file mode 100644 index 00000000..b176cb78 --- /dev/null +++ b/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs @@ -0,0 +1,18 @@ + + +{{#if description }}{{/if}} +{{#if seo.pageSnippet }}{{/if}} + + +{{#if seo.keywords }}{{/if}} +{{#if seo.department }}{{/if}} + + + + +{{#if description }}{{/if}} +{{#ifAny og.twitter_description description }}{{/ifAny}} +{{#if og.image }}{{/if}} +{{#ifAny og.twitter_image og.image }}{{/ifAny}} +{{#if uri }}{{/if}} +{{#if og.type }}{{/if}} \ No newline at end of file diff --git a/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js b/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js new file mode 100644 index 00000000..81bbb1e1 --- /dev/null +++ b/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js @@ -0,0 +1,38 @@ +import MetaDcTermsData from "./MetaOpenGraph.data.json"; +import { MetaOpenGraph } from "./MetaOpenGraph.js"; + +const defaultData = { + ...MetaDcTermsData, + title: "this is my title", + uri: "https://forgov.qld.gov.au/projects-and-initiatives/search-for-projects-and-initiatives", + description: "this is my description", +} + +export default { + tags: ["autodocs"], + title: "!Core/Head/Meta OpenGraph and SEO", + args: defaultData, + render: (args) => { + return new MetaOpenGraph(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + + + diff --git a/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx b/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx new file mode 100644 index 00000000..54bf624f --- /dev/null +++ b/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx @@ -0,0 +1,11 @@ +import { Canvas, Meta, Story } from "@storybook/blocks" +import * as SidenavWrapperStories from "./sidenavWrapper.stories" + + + +# Side Wrapper navigation +This is a partial-block to embed more content inside another partial https://handlebarsjs.com/guide/partials.html#partial-blocks + + + + diff --git a/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js b/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js new file mode 100644 index 00000000..412dea39 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./sidenavWrapper.test.hbs?raw"; + +export class SidenavWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/sidenavWrapper/manifest.json b/src/components/bs5/sidenavWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs b/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs new file mode 100644 index 00000000..0561ab80 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs @@ -0,0 +1,4 @@ + +
          + {{> @partial-block }} +
          diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js b/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js new file mode 100644 index 00000000..64206fc7 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js @@ -0,0 +1,68 @@ +// ComponentExample.stories.js +import { SidenavWrapperTest } from "./SidenavWrapper.test.js"; +import defaultdata from "./../sidenav/sidenav.data.json"; +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; +export default { + tags: ["autodocs"], + title: "!Layout/Components/Side Navigation Wrapper", + render: (args) => { + init(Handlebars); + return new SidenavWrapperTest(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + exclude: ["navlist", "navtitlelink"], + }, + }, + }, +}; + +/** + * Default side navigation + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
          +
          + + ${Story()} +
          +
          + `; + }, + ], +}; + + +/** + * Dark side navigation + * + */ +export const Dark = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
          +
          +
          +
          + ${Story()} +
          +
          +
          +
          + `; + }, + ], +}; diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs b/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs new file mode 100644 index 00000000..22a7f614 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs @@ -0,0 +1,15 @@ + +
          +
          +

          pre sidenaveWrapper prefix

          +
          +
          +{{#>sidenavWrapper}} + {{> sidenav }} +

          inner sidenavWrapper data

          +{{/sidenavWrapper}} +
          +

          post sidenaveWrapper suffix

          +
          +
          +
          \ No newline at end of file diff --git a/src/js/handlebars.helpers.js b/src/js/handlebars.helpers.js index 0e1453f4..77974b64 100644 --- a/src/js/handlebars.helpers.js +++ b/src/js/handlebars.helpers.js @@ -1,22 +1,20 @@ -/* global Handlebars */ - /** * Registers Handlebars Helpers - * @param {module} Handlebars Templating engine + * @param {Handlebars} handlebars Templating engine * @returns {void} Result of the helper operation */ -export default function handlebarsHelpers(Handlebars) { - // Contains - - Handlebars.registerHelper("contains", function (needle, haystack, options) { - needle = Handlebars.escapeExpression(needle); - haystack = Handlebars.escapeExpression(haystack); +export default function handlebarsHelpers(handlebars) { + // contains - if first object is in collection (second object) to return true + handlebars.registerHelper("contains", function (needle, haystack, options) { + needle = handlebars.escapeExpression(needle); + haystack = handlebars.escapeExpression(haystack); return haystack.indexOf(needle) > -1 ? options.fn(this) : options.inverse(this); }); - // ifCond - checks conditions - Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) { + // ifCond - checks conditions + handlebars.registerHelper("ifCond", function (v1, operator, v2, options) { switch (operator) { case "==": return v1 == v2 ? options.fn(this) : options.inverse(this); @@ -48,16 +46,59 @@ export default function handlebarsHelpers(Handlebars) { return options.inverse(this); } }); - // Checks is expected type - Handlebars.registerHelper('isType', function (value, expected, options) { + // isType - Checks is expected type + handlebars.registerHelper('isType', function (value, expected, options) { if (value === expected) { return options.fn(this); // Render the block if condition is true } else { return options.inverse(this); // Render the else block if present } }); + // ifAny - {{{#ifAny variable1 variable2 variable3 variable4 etc}}, if any set then return true + handlebars.registerHelper('ifAny', function (...args) { + const options = args.pop(); // The last argument is the options object + return args.some(arg => !!arg) ? options.fn(this) : options.inverse(this); + }); + // formatDate - Format Date, for footer meta data i.e {{formatDate '2023-06-23'}} + handlebars.registerHelper('formatDate', function(dateString, defaultDate) { + // Use the dateString if provided, otherwise use the defaultDate, otherwise error + let date; + if (dateString) { + date = new Date(dateString); + } + if (isNaN(date) && defaultDate) { + date = new Date(defaultDate); + } + + // Check if the date is valid + if (isNaN(date)) { + return 'Invalid Date'; + } + + var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + var day = date.getDate(); + var month = monthNames[date.getMonth()]; + var year = date.getFullYear(); + return `${day} ${month} ${year}`; + }); + + // formatDateOrToday - Format Date if passed or today i.e. {{formatDateOrToday '2023-06-23'}} or {{formatDateOrToday}} + handlebars.registerHelper('formatDateOrToday', function(dateString) { + // Use the current date if dateString is missing or invalid + const dateToFormat = dateString || new Date().toISOString(); + // Call the formatDate helper with the determined date and format + return handlebars.helpers.formatDate(dateToFormat); + }); } +//Only load once if Handlebars is available if(typeof(Handlebars) !== 'undefined') { - handlebarsHelpers(Handlebars); + this.registedHandlebarsHelpers = undefined; + if (typeof this.registedHandlebarsHelpers === 'undefined') { + // eslint-disable-next-line no-undef + handlebarsHelpers(Handlebars); + this.registedHandlebarsHelpers = true; + } +} else { + console.log("HandleBars is undefined, did not load helpers") } diff --git a/src/js/handlebars.init.js b/src/js/handlebars.init.js index 365dec6a..e349309e 100644 --- a/src/js/handlebars.init.js +++ b/src/js/handlebars.init.js @@ -1,6 +1,33 @@ import handlebarsHelpers from "./handlebars.helpers.js"; +import handlebarsPartials from "./handlebars.partials.js"; import Handlebars from "handlebars"; -export * from "./handlebars.helpers.js"; -export const init = () => handlebarsHelpers(Handlebars); +/** + * init function to load all HandleBar partials and helpers + * + * @param {Handlebars} handlebars + */ +export default function init(handlebars = Handlebars) { + if (typeof(handlebars) === 'undefined') { + if(typeof(Handlebars) !== 'undefined') { + handlebars = Handlebars + } + } + + if(typeof(handlebars) !== 'undefined') { + //only load once + if (typeof handlebarsHelpers.registeredHandlebarsHelpers === 'undefined') { + handlebarsHelpers(handlebars); + handlebarsHelpers.registeredHandlebarsHelpers = true; + } + //only load once + if (typeof handlebarsPartials.registeredHandlebarsPartials === 'undefined') { + handlebarsPartials(handlebars); + handlebarsPartials.registeredHandlebarsPartials = true; + console.log('partials loaded'); + } + } else { + console.log("Handlebars not found, init failed"); + } +} diff --git a/src/js/handlebars.partials.js b/src/js/handlebars.partials.js new file mode 100644 index 00000000..38d0dd4f --- /dev/null +++ b/src/js/handlebars.partials.js @@ -0,0 +1,92 @@ +/** THIS IS A GENERATED FILE **/ + +import accordion from "../components/bs5/accordion/accordion.hbs?raw"; +import banner from "../components/bs5/banner/banner.hbs?raw"; +import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw"; +import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw"; +import breadcrumbsWrapper from "../components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs?raw"; +import button from "../components/bs5/button/button.hbs?raw"; +import callout from "../components/bs5/callout/callout.hbs?raw"; +import card from "../components/bs5/card/card.hbs?raw"; +import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw"; +import contentFooterWrapper from "../components/bs5/contentFooterWrapper/contentFooterWrapper.hbs?raw"; +import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?raw"; +import correctincorrect from "../components/bs5/correctincorrect/correctincorrect.hbs?raw"; +import dateinput from "../components/bs5/dateinput/dateinput.hbs?raw"; +import footer from "../components/bs5/footer/footer.hbs?raw"; +import footerForgov from "../components/bs5/footer/footerForgov.hbs?raw"; +import formcheck from "../components/bs5/formcheck/formcheck.hbs?raw"; +import fullPage from "../components/bs5/fullPageWrapper/fullPage.hbs?raw"; +import globalAlert from "../components/bs5/globalAlert/globalAlert.hbs?raw"; +import head from "../components/bs5/head/head.hbs?raw"; +import header from "../components/bs5/header/header.hbs?raw"; +import inpageAlert from "../components/bs5/inpageAlert/inpageAlert.hbs?raw"; +import inpagenav from "../components/bs5/inpagenav/inpagenav.hbs?raw"; +import mainContainerWrapper from "../components/bs5/mainContainerWrapper/mainContainerWrapper.hbs?raw"; +import metaDcTerms from "../components/bs5/metaDcTerms/metaDcTerms.hbs?raw"; +import metaOpenGraph from "../components/bs5/metaOpenGraph/metaOpenGraph.hbs?raw"; +import modal from "../components/bs5/modal/modal.hbs?raw"; +import navbar from "../components/bs5/navbar/navbar.hbs?raw"; +import pagination from "../components/bs5/pagination/pagination.hbs?raw"; +import quickexit from "../components/bs5/quickexit/quickexit.hbs?raw"; +import searchInput from "../components/bs5/searchInput/searchInput.hbs?raw"; +import select from "../components/bs5/select/select.hbs?raw"; +import sidenav from "../components/bs5/sidenav/sidenav.hbs?raw"; +import sidenavWrapper from "../components/bs5/sidenavWrapper/sidenavWrapper.hbs?raw"; +import spinner from "../components/bs5/spinner/spinner.hbs?raw"; +import table from "../components/bs5/table/table.hbs?raw"; +import tag from "../components/bs5/tag/tag.hbs?raw"; +import textarea from "../components/bs5/textarea/textarea.hbs?raw"; +import textbox from "../components/bs5/textbox/textbox.hbs?raw"; +import typography from "../components/bs5/typography/typography.hbs?raw"; +import video from "../components/bs5/video/video.hbs?raw"; + + +/** + * Registers Handlebars Partials + * @param {Handlebars} handlebars Templating engine + * @returns {void} Result of the helper operation + */ +export default function handlebarsPartials(handlebars) { + handlebars.registerPartial("accordion", accordion); + handlebars.registerPartial("banner", banner); + handlebars.registerPartial("blockquote", blockquote); + handlebars.registerPartial("breadcrumbs", breadcrumbs); + handlebars.registerPartial("breadcrumbsWrapper", breadcrumbsWrapper); + handlebars.registerPartial("button", button); + handlebars.registerPartial("callout", callout); + handlebars.registerPartial("card", card); + handlebars.registerPartial("contentFooter", contentFooter); + handlebars.registerPartial("contentFooterWrapper", contentFooterWrapper); + handlebars.registerPartial("contentWrapper", contentWrapper); + handlebars.registerPartial("correctincorrect", correctincorrect); + handlebars.registerPartial("dateinput", dateinput); + handlebars.registerPartial("footer", footer); + handlebars.registerPartial("footerForgov", footerForgov); + handlebars.registerPartial("formcheck", formcheck); + handlebars.registerPartial("fullPage", fullPage); + handlebars.registerPartial("globalAlert", globalAlert); + handlebars.registerPartial("head", head); + handlebars.registerPartial("header", header); + handlebars.registerPartial("inpageAlert", inpageAlert); + handlebars.registerPartial("inpagenav", inpagenav); + handlebars.registerPartial("mainContainerWrapper", mainContainerWrapper); + handlebars.registerPartial("metaDcTerms", metaDcTerms); + handlebars.registerPartial("metaOpenGraph", metaOpenGraph); + handlebars.registerPartial("modal", modal); + handlebars.registerPartial("navbar", navbar); + handlebars.registerPartial("pagination", pagination); + handlebars.registerPartial("quickexit", quickexit); + handlebars.registerPartial("searchInput", searchInput); + handlebars.registerPartial("select", select); + handlebars.registerPartial("sidenav", sidenav); + handlebars.registerPartial("sidenavWrapper", sidenavWrapper); + handlebars.registerPartial("spinner", spinner); + handlebars.registerPartial("table", table); + handlebars.registerPartial("tag", tag); + handlebars.registerPartial("textarea", textarea); + handlebars.registerPartial("textbox", textbox); + handlebars.registerPartial("typography", typography); + handlebars.registerPartial("video", video); + +} diff --git a/src/main.js b/src/main.js index 7547c1e8..debfdf78 100644 --- a/src/main.js +++ b/src/main.js @@ -135,4 +135,4 @@ window.addEventListener("DOMContentLoaded", () => { transcript.addEventListener("click", videoTranscriptTitle); }); })(); -}); \ No newline at end of file +}); diff --git a/src/stories/integration/MainIntegration.js b/src/stories/integration/MainIntegration.js new file mode 100644 index 00000000..b2b1798b --- /dev/null +++ b/src/stories/integration/MainIntegration.js @@ -0,0 +1,29 @@ +/* global, __dirname */ + +import init from "./../../js/handlebars.init"; +import Handlebars from 'handlebars'; + +export class MainIntegration { + + constructor(data, args = {}) { + init(Handlebars); + console.log("contracutor"); + this.data = data; + this.args = args; + + this.template = data.template; + // Compile the template + this.compiled = Handlebars.compile(this.template)(this.data); + + // For debugging purposes + console.log('Template:', this.template); + console.log('Data:', this.data); + //console.log('Compiled:', this.compiled); + + return { + template: this.template, + data: this.data, + html: this.compiled, + }; + } +} diff --git a/src/stories/integration/MainIntegration.mdx b/src/stories/integration/MainIntegration.mdx new file mode 100644 index 00000000..648346db --- /dev/null +++ b/src/stories/integration/MainIntegration.mdx @@ -0,0 +1,10 @@ +import { Canvas, Meta, Story } from "@storybook/blocks" +import * as Integration from "./integration.stories" + + + +# Integration details + + + + diff --git a/src/stories/integration/breadcrumb.data.json b/src/stories/integration/breadcrumb.data.json new file mode 100644 index 00000000..055f67c9 --- /dev/null +++ b/src/stories/integration/breadcrumb.data.json @@ -0,0 +1,28 @@ +{ + "breadcrumbs": [ + { + "link": "#", + "linktext": "For government" + }, + { + "link": "#", + "linktext": "Information and communication technology" + }, + { + "link": "#", + "linktext": "Communication and publishing" + }, + { + "link": "#", + "linktext": "Website and digital publishing" + }, + { + "link": "#", + "linktext": "Website standards, guidelines and templates" + }, + { + "link": "#", + "linktext": "Single Website Experience" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/content.data.json b/src/stories/integration/content.data.json new file mode 100644 index 00000000..077c9fae --- /dev/null +++ b/src/stories/integration/content.data.json @@ -0,0 +1,3 @@ +{ + "input": "data1" +} \ No newline at end of file diff --git a/src/stories/integration/contentFooter.data.json b/src/stories/integration/contentFooter.data.json new file mode 100644 index 00000000..59d9805f --- /dev/null +++ b/src/stories/integration/contentFooter.data.json @@ -0,0 +1,3 @@ +{ + "lastUpdated": "1987/12/10" +} diff --git a/src/stories/integration/footer.data.json b/src/stories/integration/footer.data.json new file mode 100644 index 00000000..0680f0c9 --- /dev/null +++ b/src/stories/integration/footer.data.json @@ -0,0 +1,154 @@ +{ + "sitename": "Site name, Namestyle or Name Identifier", + "contactHasContactList": true, + "footerHasCrest": true, + "footerHasStateOfQld": true, + "feedbackFormEnabled": false, + "followlinksEnabled": true, + "copyrightHasYearFrom": false, + "copyrightOrganisationName": "Organisation", + "contact": { + "hasBorderColumn": false, + "title": "Contact us", + "content": "

          Get in touch for enquiries, feedback, complaints and compliments.

          ", + "list": [ + { + "icon": "icon-phone", + "label": "Phone: 13 QGOV (13 74 68)" + }, + { + "icon": "icon-email", + "label": "Email: email@qld.gov.au" + } + ], + "buttonLabel": "Contact us", + "buttonLink": "" + }, + "lookup": { + "link": { + "URL": "https://www.qld.gov.au", + "text": "Queensland Government" + } + }, + "acknowledgements": [ + { + "title": "", + "content": "

          We pay our respects to the Aboriginal and Torres Strait Islander ancestors of this land, their spirits and their legacy. The foundations laid by these ancestors—our First Nations peoples—give strength, inspiration and courage to current and future generations towards creating a better Queensland.

          " + } + ], + "copyright": { + "hasBorderColumn": true, + "content": "© The State of Queensland", + "yearFrom": "1995", + "currentYear": "2024" + }, + "footerlinks": { + "hasBorderColumn": false, + "title": "", + "list": [ + { + "title": "Help", + "link": "#" + }, + { + "title": "Copyright", + "link": "#" + }, + { + "title": "Disclaimer", + "link": "#" + }, + { + "title": "Privacy", + "link": "#" + }, + { + "title": "Right to information", + "link": "#" + }, + { + "title": "Accessibility", + "link": "#" + }, + { + "title": "Jobs in Queensland Government", + "link": "https://smartjobs.qld.gov.au", + "target": "_blank" + }, + { + "title": "Other languages", + "link": "#" + } + ] + }, + "feedbackForm": { + "hasBorderColumn": true, + "title": "Website feedback", + "content": "Help us improve the content on our website or tell us what is working well.", + "btnTitle": "Leave your feedback", + "formAttr": [ + { + "key": "data-formio", + "value": "" + }, + { + "key": "data-formio-project-name", + "value": "dev-oldkihhcwbdtwye" + }, + { + "key": "data-formio-form-name", + "value": "footerfeedbackcontactus" + }, + { + "key": "data-formio-env-url", + "value": "api.forms.platforms.qld.gov.au" + }, + { + "key": "data-formio-createForm-options", + "value": "formioCreateFormOptions" + }, + { + "key": "data-formio-createForm-controller", + "value": "formioCreateFormController" + } + ], + "formioResource": "https://static.qgov.net.au/formio-qld/v2/v2.x.x-latest/formio-script.min.js" + }, + "followlinks": { + "hasBorderColumn": true, + "title": "Follow us", + "list": [ + { + "name": "Facebook", + "enabled": true, + "link": "#", + "target": "_blank", + "icon": "" + }, + { + "name": "LinkedIn", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "X (Twitter)", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "Youtube", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "Instagram", + "enabled": true, + "link": "#", + "icon": "" + } + ] + } +} \ No newline at end of file diff --git a/src/stories/integration/globalAlert.data.json b/src/stories/integration/globalAlert.data.json new file mode 100644 index 00000000..2a1eaf7f --- /dev/null +++ b/src/stories/integration/globalAlert.data.json @@ -0,0 +1,9 @@ +{ + "alertItems": [ + { + "variant": "global-alert-critical", + "content": "Testing: This website is currently undergoing testing", + "action": "          Read more" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/header.data.json b/src/stories/integration/header.data.json new file mode 100644 index 00000000..0eb7f6a2 --- /dev/null +++ b/src/stories/integration/header.data.json @@ -0,0 +1,173 @@ +{ + "icon-root": "assets/img/svg-icons.svg", + "icons": { + "menu-icon": "qld__icon__mobile-menu", + "search-icon": "qld__icon__search", + "close-icon": "qld__icon__close", + "chevron_down": "qld__icon__chevron-down" + }, + "sitePreHeader": { + "url": { + "value": "https://qld.gov.au" + }, + "text": { + "value": "www.qld.gov.au" + }, + "CTA": [ + { + "id": "CTAone", + "url": { + "value": "#" + }, + "text": { + "value": "For Queenslanders" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "list", + "view_more": true, + "label": "View all", + "url": "https://www.qld.gov.au/queenslanders", + "target": "_blank", + "dropdown_config": { + "groups": [ + { + "action": "_blank", + "url": "#", + "label": "Transport and motoring" + }, + { + "action": "_blank", + "url": "#", + "label": "Employment and jobs" + }, + { + "action": "_blank", + "url": "#", + "label": "Education and training" + }, + { + "action": "_blank", + "url": "#", + "label": "Queensland and its government" + }, + { + "action": "_blank", + "url": "#", + "label": "Health and wellbeing" + }, + { + "action": "_blank", + "url": "#", + "label": "Community support" + } + ] + } + } + }, + { + "id": "CTAtwo", + "url": { + "value": "#" + }, + "text": { + "value": "Business and Industry" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "list", + "view_more": true, + "label": "View all", + "url": "https://www.qld.gov.au/queenslanders", + "target": "_blank", + "dropdown_config": { + "groups": [ + { + "action": "_blank", + "url": "#", + "label": "Transport and motoring" + }, + { + "action": "_blank", + "url": "#", + "label": "Employment and jobs" + }, + { + "action": "_blank", + "url": "#", + "label": "Education and training" + }, + { + "action": "_blank", + "url": "#", + "label": "Queensland and its government" + }, + { + "action": "_blank", + "url": "#", + "label": "Health and wellbeing" + }, + { + "action": "_blank", + "url": "#", + "label": "Community support" + } + ] + } + } + }, + { + "id": "CTAthree", + "url": { + "value": "#" + }, + "text": { + "value": "Login" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "form", + "dropdown_config": { + "content": "
          " + } + } + } + ] + }, + "siteHeader": { + "config": { + "masterbrand_enabled": true, + "subbrand_enabled": false, + "cobrand_enabled": false, + "endorsed_enabled": false, + "standalone_enabled": false + }, + "url": { + "value": "https://qld.gov.au" + }, + "secondaryType": { + "logo": { + "value": "" + }, + "siteTitle": { + "value": "Queensland Government Design System" + }, + "subline": { + "value": "QGDS" + } + } + }, + "siteSearchAsset": { + "value": "#", + "placeholder": "", + "label": "", + "formAction": { + "url": "https://www.forgov.qld.gov.au/search" + }, + "options": { + "borderStyle": { + "full": true + } + } + } +} \ No newline at end of file diff --git a/src/stories/integration/inpagenav.data.json b/src/stories/integration/inpagenav.data.json new file mode 100644 index 00000000..a7c429e9 --- /dev/null +++ b/src/stories/integration/inpagenav.data.json @@ -0,0 +1,26 @@ +{ + "navtitle": "On this page", + "variantClass": "", + "navitems": [ + { + "linktext": "Section heading", + "linkid": "#section-heading" + }, + { + "linktext": "Content heading", + "linkid": "#content-heading" + }, + { + "linktext": "Pre-registration inspection", + "linkid": "#inspection" + }, + { + "linktext": "Fees and charges", + "linkid": "#fees-and-charges" + }, + { + "linktext": "Related services", + "linkid": "#related-services" + } + ] +} diff --git a/src/stories/integration/integration.stories.js b/src/stories/integration/integration.stories.js new file mode 100644 index 00000000..35a2fa2d --- /dev/null +++ b/src/stories/integration/integration.stories.js @@ -0,0 +1,145 @@ + +import { MainIntegration } from './MainIntegration'; +//Data +import headerData from './header.data.json'; +import navbarData from './navigation.data.json'; +import breadcrumbsData from './breadcrumb.data.json'; +import searchData from './search.data.json'; +import globalAlertData from './globalAlert.data.json'; +import inpagenavData from './inpagenav.data.json'; +import sidenavData from './sidenav.data.json'; +import contentFooterData from './contentFooter.data.json'; +import footerData from './footer.data.json'; +//Content Data +import contentData from './content.data.json'; +import template from "./main.hbs?raw"; +import metaOpenGraphData from "../../components/bs5/metaOpenGraph/MetaOpenGraph.data.json"; +import { dcTerms } from '../../components/bs5/metaDcTerms/MetaDcTerms.data.json'; + +/** sample data **/ +const defaultData = { + template: template, // Adjust template path relative to this file + cdn: ".", //for storybook it's ., for normal usage "PROD" + title: "title goes here", + description: "my description", + uri: "http://localhost/uri/here", + dcTerms: dcTerms, + seo: metaOpenGraphData.seo, + og: metaOpenGraphData.og, + header: headerData, + search: searchData, + navbar: navbarData, + breadcrumbs: breadcrumbsData, + globalAlert: globalAlertData, + sidenav: sidenavData, + inpagenav: inpagenavData, + content: contentData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: 'Integration/Main Integration Template', + render: (args) => { + return new MainIntegration(args).html; + }, + args: defaultData, + props: { + data: { ...defaultData }, + }, + parameters: { + layout: 'fullscreen', + }, +}; + + +/** + * Default Integration story + */ +export const Default = {}; + + +// /** +// * Integration in 'Light' colour theme. +// */ +// export const Light = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Light', +// values: [ +// {name: 'Light', value: 'var(--qld-light-background)'}, +// ], +// }, +// }, +// }; +// +// +// /** +// * Integration in 'Alternative' colour theme. +// */ +// export const Alternative = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Alternative', +// values: [ +// {name: 'Alternative', value: 'var(--qld-light-grey-background)'}, +// ], +// }, +// }, +// +// }; +// +// +// /** +// * Accordion in 'Dark' colour theme. +// */ +// export const Dark = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Dark', +// values: [ +// {name: 'Dark', value: 'var(--qld-dark-background)'}, +// ], +// }, +// }, +// +// }; +// +// /** +// * Accordion in 'Dark alternative' colour theme. +// */ +// export const DarkAlternative = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Dark Alternative', +// values: [ +// {name: 'Dark Alternative', value: 'var(--qld-dark-alt-background)'}, +// ], +// }, +// }, +// +// }; + + + + diff --git a/src/stories/integration/main.hbs b/src/stories/integration/main.hbs new file mode 100644 index 00000000..3a5b199f --- /dev/null +++ b/src/stories/integration/main.hbs @@ -0,0 +1,13 @@ +{{#>fullPage}} + my main content goes here + +{{> inpagenav inpagenav}} +

          this is something, accordion next

          + {{> accordion groupid="accordion-group-1" toggleAll=true accordionItems=[{id="One", title="Accordion item #1", expanded=true, content="

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas.

          Aenean sed pretium mauris. Quisque euismod in nisl et consequat.

          " },{id="Two", title="Accordion item #2", expanded=false, content="

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

          • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          • Aliquam tincidunt mauris eu risus.
          • Vestibulum auctor dapibus neque.
          "},{id="Three", title="Accordion item #3", expanded=false, content="

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

          1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          2. Aliquam tincidunt mauris eu risus.
          3. Vestibulum auctor dapibus neque.
          "}] }} +
          + {{> textbox name="firstName" placeholder="First Name"}} + {{> textbox name="lastName" placeholder="Last Name"}} + {{> select name="options" options=options}} + {{> button type="submit" text="Submit"}} +
          +{{/fullPage}} diff --git a/src/stories/integration/navigation.data.json b/src/stories/integration/navigation.data.json new file mode 100644 index 00000000..c39aa56b --- /dev/null +++ b/src/stories/integration/navigation.data.json @@ -0,0 +1,22 @@ +{ + "metadata": { + "target_url": "metadata-index.html", + "options": { + "showHomeTitleSmallDevices": true, + "icon-root": "assets/img/svg-icons.svg", + "home-active": true + } + }, + "navigation": [ + { + "title": "Link 1", + "icon": "", + "target_url": "index.html" + }, + { + "title": "Link 2", + "icon": "", + "target_url": "index.html" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/search.data.json b/src/stories/integration/search.data.json new file mode 100644 index 00000000..85654c20 --- /dev/null +++ b/src/stories/integration/search.data.json @@ -0,0 +1,20 @@ +{ + "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" + } +} \ No newline at end of file diff --git a/src/stories/integration/sidenav.data.json b/src/stories/integration/sidenav.data.json new file mode 100644 index 00000000..2b7b75de --- /dev/null +++ b/src/stories/integration/sidenav.data.json @@ -0,0 +1,88 @@ +{ + "navtitle": "In this section", + "navtitlelink": "#optionallink", + "navlist": [ + { + "link": "https://www.qld.gov.au/transport/registration/register/heavy", + "label": "Heavy vehicles", + "class": "", + "target": "", + "children": [ + { + "link": "#", + "class": "", + "label": "Level two item", + "children": [] + }, + { + "link": "#", + "class": "active", + "label": "Level two item", + "children": [] + }, + { + "link": "#", + "class": "", + + "label": "Level two item", + "children": [ + { + "link": "#", + "class": "", + "label": "Level three item", + "children": [] + }, + { + "link": "#", + "class": "active", + "label": "Level three item that wraps to another line", + "children": [] + } + ] + } + ] + }, + { + "link": "#", + "label": "Renew registration", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Register a motorised mobility device", + "class": "active", + "children": [] + }, + { + "link": "#", + "label": "Register a boat", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Conditional registration", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Vehicles registered overseas temporarily being used in Queensland", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Left hand drive vehicles", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Registration Help Tool—how to register a used motor vehicle or motorcycle", + "class": "", + "children": [] + } + ] +} From afbb28b0ba69f5ecf175c2f11923f8de004cbca2 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Mon, 17 Jun 2024 16:01:55 +1000 Subject: [PATCH 21/46] QOLOE-188 Close Icon Font changes etc --- .../bs5/globalAlert/globalAlert.scss | 28 +++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 1fa2ca2b..07c3d8ce 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -1,4 +1,5 @@ .global-alert { + padding: 5px 0 5px 0; $chevron-icon-white: url('data:image/svg+xml,'); @@ -45,19 +46,29 @@ margin-left: auto; .btn-close { height: 2rem; - width: 2rem; - background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23F5F5F5'/%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%231D1D1D'/%3E%3C/svg%3E") no-repeat center center; + width: 2rem; + --#{$prefix}btn-close-opacity: 1; + background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23131212' fill-opacity='0.1' /%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%23131212'/%3E%3C/svg%3E") no-repeat center center; } } } &.global-alert-critical { background-color: $qld-notify-warning; color: $qld-white; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8.0001V13.0001M12 16.0001H12.01M8.84751 20.6604H15.1525C15.8255 20.6604 16.1621 20.6604 16.4633 20.5625C16.7299 20.4759 16.9753 20.3342 17.1835 20.1466C17.419 19.9347 17.5872 19.6432 17.9237 19.0604L21.0762 13.6001C21.4128 13.0172 21.581 12.7258 21.6469 12.4159C21.7052 12.1418 21.7052 11.8584 21.6469 11.5843C21.581 11.2744 21.4128 10.983 21.0762 10.4001L17.9237 4.93984C17.5872 4.35696 17.419 4.06551 17.1835 3.85355C16.9753 3.66601 16.7299 3.52434 16.4633 3.43773C16.1621 3.33984 15.8255 3.33984 15.1525 3.33984H8.84751C8.17445 3.33984 7.83792 3.33984 7.53665 3.43773C7.27009 3.52434 7.02471 3.66601 6.81643 3.85355C6.58102 4.06551 6.41276 4.35696 6.07623 4.93984L2.92375 10.4001C2.58722 10.983 2.41895 11.2744 2.35309 11.5843C2.29482 11.8584 2.29482 12.1418 2.35309 12.4159C2.41895 12.7258 2.58722 13.0172 2.92375 13.6001L6.07623 19.0604C6.41276 19.6432 6.58102 19.9347 6.81643 20.1466C7.02471 20.3342 7.27009 20.4759 7.53665 20.5625C7.83792 20.6604 8.17445 20.6604 8.84751 20.6604Z' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } + .global-alert-close { + margin-left: auto; + .btn-close { + height: 2rem; + width: 2rem; + --#{$prefix}btn-close-opacity: 1; + background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23131212' fill-opacity='0.1' /%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%23F5F5F5'/%3E%3C/svg%3E") no-repeat center center; + } + } .global-alert-action a { color: $qld-white; &:after { @@ -71,7 +82,7 @@ &.global-alert-warning { background-color: $qld-notify-alert; color: $qld-text-grey; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_80802' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='2' width='20' height='17'%3E%3Cpath d='M10 13.9062C10.457 13.9062 10.8438 14.293 10.8086 14.75C10.8086 15.2422 10.457 15.5938 10 15.5938C9.54297 15.5938 9.15625 15.2422 9.15625 14.75C9.15625 14.293 9.50781 13.9062 10 13.9062ZM10 12.5C9.68359 12.5 9.4375 12.2539 9.4375 11.9375V6.875C9.4375 6.59375 9.71875 6.3125 10 6.3125C10.2461 6.3125 10.5273 6.59375 10.5273 6.875V11.9375C10.5273 12.2539 10.2812 12.5 10 12.5ZM18.7188 15.2422C19.0703 15.8398 19.0703 16.543 18.7188 17.1406C18.3672 17.7734 17.7344 18.125 17.0312 18.125H2.96875C2.23047 18.125 1.59766 17.7734 1.24609 17.1406C0.894531 16.543 0.894531 15.8398 1.24609 15.2422L8.27734 3.35938C8.62891 2.76172 9.26172 2.375 10 2.375C10.7031 2.41016 11.3359 2.76172 11.6875 3.35938L18.7188 15.2422ZM17.7344 16.5781C17.9102 16.332 17.875 16.0508 17.7344 15.8047L10.7031 3.92188C10.5625 3.67578 10.2812 3.53516 10 3.5C9.96484 3.5 10 3.5 10 3.5C9.68359 3.5 9.40234 3.67578 9.26172 3.92188L2.23047 15.8047C2.08984 16.0508 2.05469 16.332 2.23047 16.5781C2.37109 16.8594 2.65234 17 2.96875 17H16.9961C17.3125 17 17.5938 16.8594 17.7344 16.5781Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_80802)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A"); @@ -89,7 +100,7 @@ &.global-alert-info { background-color: $qld-general-info-alert; color: $qld-text-grey; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A"); @@ -106,6 +117,13 @@ } } + +@include media-breakpoint-up(lg) { + .global-alert { + border-top: 5px solid black; + } +} + @media (min-width: 768px) { .global-alert-content { flex-direction: row !important; From dd6a1a673590c8596466d495d8e6d5d488815393 Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Tue, 11 Jun 2024 09:20:15 +1000 Subject: [PATCH 22/46] [HOTFIX]Add npm command to run a single story in Storybook. --- .storybook/main.js | 6 ++++-- package.json | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 86fd23ea..6baccadd 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,8 +4,10 @@ const config = { "../src/stories/Introduction.mdx", // Include all stories found under the src/components directory ( For example: alert/alert.stories.js ) // Exlude any stories starting with an underscore ( For example: _exludeme.stories.js ) - "../src/**/!(*_)*.mdx", - "../src/**/!(*_)*.stories.js", + // "../src/**/!(*_)*.mdx", + // "../src/**/!(*_)*.stories.js", + process.env.STORYBOOK_SINGLE ? process.env.STORYBOOK_SINGLE : "../src/**/!(*_)*.mdx", + process.env.STORYBOOK_SINGLE ? process.env.STORYBOOK_SINGLE : "../src/**/!(*_)*.stories.js", ], staticDirs: [ { from: '../dist', to: '/assets' }, diff --git a/package.json b/package.json index 3a5c0afc..07ff4293 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "serve": "live-server dist", "dev-storybook": "npm-run-all --parallel watch storybook", "storybook": "storybook dev -p 6006", + "storybook-single": "STORYBOOK_SINGLE=../src/components/bs5/button/button.stories.js npm run storybook", + "storybook-single-watch": "STORYBOOK_SINGLE=../src/components/bs5/button/button.stories.js npm-run-all --parallel watch storybook", "build-storybook": "storybook build --webpack-stats-json ", "build-storybook:serve": "live-server storybook-static" }, From 27bda01a8cfb4300adcfc6bbaf2fccd482b4d01e Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Tue, 11 Jun 2024 10:15:12 +1000 Subject: [PATCH 23/46] [HOTFIX]Update ESBuild to ignore cleaning output folders on initial build or initial watch mode. --- .../qgds-plugin-clean-output-folders.js | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/.esbuild/plugins/qgds-plugin-clean-output-folders.js b/.esbuild/plugins/qgds-plugin-clean-output-folders.js index 9be85fec..0e17b4f9 100644 --- a/.esbuild/plugins/qgds-plugin-clean-output-folders.js +++ b/.esbuild/plugins/qgds-plugin-clean-output-folders.js @@ -1,30 +1,39 @@ import fs from "fs"; import log from "../helpers/logger.js"; +/** + * Clean the output folders /dist. + * Skip cleaning during the initial build or initial watch mode. + * + * @returns {Object} Object with a name and a setup function. + */ export default function cleanFoldersPlugin() { + let isInitialBuild = true; return { name: "qgds-clean-output-folders", setup(build) { build.onStart(() => { - //Console feedback - log("cyan", `\u{1F4C2} Cleaning /dist folders\n\n`); + if (!isInitialBuild) { + //Console feedback + log("cyan", `\u{1F4C2} Cleaning /dist folders\n\n`); - // Clean the output folders - const { outdir, outfile } = build.initialOptions; + // Clean the output folders + const { outdir, outfile } = build.initialOptions; - if (outdir && fs.existsSync(outdir)) { - fs.rmSync(outdir, { recursive: true }); - } + if (outdir && fs.existsSync(outdir)) { + fs.rmSync(outdir, { recursive: true }); + } - if (outfile && fs.existsSync(outfile)) { - fs.rmSync(outfile); - } + if (outfile && fs.existsSync(outfile)) { + fs.rmSync(outfile); + } - // // Clean the docs folder - // const docsdir = "./docs/"; - // if (fs.existsSync(docsdir)) { - // fs.rmSync(docsdir, { recursive: true }); - // } + // // Clean the docs folder + // const docsdir = "./docs/"; + // if (fs.existsSync(docsdir)) { + // fs.rmSync(docsdir, { recursive: true }); + // } + } }); }, }; From 07067822769526bef2d8e8a658909e4b3526087c Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Tue, 18 Jun 2024 22:45:07 +1000 Subject: [PATCH 24/46] QOLOE-188 Edited data to test alert content with more than 3 lines, re-positioned icons, alignments and labels --- .../bs5/globalAlert/globalAlert.data.json | 2 +- .../bs5/globalAlert/globalAlert.scss | 86 ++++++++++++++++--- 2 files changed, 74 insertions(+), 14 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.data.json b/src/components/bs5/globalAlert/globalAlert.data.json index f7505f07..19e5fbc3 100644 --- a/src/components/bs5/globalAlert/globalAlert.data.json +++ b/src/components/bs5/globalAlert/globalAlert.data.json @@ -3,7 +3,7 @@ "alertItems": [ { "variant": "global-alert-critical", - "content": "Testing: This website is currently undergoing testing", + "content": "Testing: This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing", "action": "Read more" } ] diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 07c3d8ce..1093d6c3 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -1,6 +1,6 @@ .global-alert { - padding: 5px 0 5px 0; + // padding: 5px 0 5px 0; $chevron-icon-white: url('data:image/svg+xml,'); $chevron-icon-grey: url('data:image/svg+xml,'); @@ -15,20 +15,21 @@ .global-alert-icon { position: absolute; line-height: 1; - margin-top: 2px; - width: 2em; - height: 1em; + width: 22px; + height: 22px; display: inline-block; transition: fill 0.3s ease; // align-self: center; // vertical-align: middle; font-size: 1.5rem; + padding-left: 1.5rem; // padding between icon and text. Added due to bug when content has 3 lines of text. + } .global-alert-content { padding: 0 20px 0 16px; - display: flex; - flex-direction: column; - align-items: center; + // display: flex; + // flex-direction: column; + // align-items: center; .global-alert-action a { display: flex; align-items: center; @@ -71,6 +72,7 @@ } .global-alert-action a { color: $qld-white; + text-decoration-color: $qld-white; &:after { background: var(--chevron-icon-white); } @@ -117,18 +119,76 @@ } } - -@include media-breakpoint-up(lg) { +@media (min-width: 768px) { // md and above .global-alert { - border-top: 5px solid black; + .qld-global-alert-main { + padding: 16px 16px; + .global-alert-content { + padding-left: 16px; + display: flex; + align-items: center; + } + } } -} - -@media (min-width: 768px) { .global-alert-content { flex-direction: row !important; } .global-alert-action { margin-left: 2rem; } + .global-alert-icon { + // aligning with text + padding-top: 12px; + } + +} + +@media (max-width: 767.98px) { // sm and below + .global-alert { + .qld-global-alert-main { + padding: 12px 16px; + } + .global-alert-content { + padding: 0 16px 0 12px; + } + } + // .global-alert-icon { + // // positioning at corner + // position: relative; + // top: -12px; + // } + + .global-alert-icon { + // aligning with text + padding-top: 12px; + } } + +@include media-breakpoint-up(lg) { // 992px and above + + .global-alert { + &.global-alert-critical { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-error-darker); + } + &.global-alert-warning { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-caution-darker); + } + &.global-alert-info { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-info-darker); + } + .global-alert-icon { + // aligning with text + padding-top: 22px; + } + .qld-global-alert-main { + // Padding requires 64px in space between alert icon and left border; minus (24px(1.5rem) gutter + 16px padding) = 24px (1.5rem) + padding-left: 1.5rem; + .global-alert-content { + padding-left: 16px; + display: flex; + align-items: center; + } + } + + } +} \ No newline at end of file From 2cab2a6d9c5d8ea008fd41ab7626fde171761693 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Fri, 21 Jun 2024 16:55:27 +1000 Subject: [PATCH 25/46] Resolved padding for global-alert-message, converted px to rem (most) --- .../bs5/globalAlert/globalAlert.data.json | 2 +- .../bs5/globalAlert/globalAlert.scss | 46 +++++++------------ 2 files changed, 17 insertions(+), 31 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.data.json b/src/components/bs5/globalAlert/globalAlert.data.json index 19e5fbc3..f7505f07 100644 --- a/src/components/bs5/globalAlert/globalAlert.data.json +++ b/src/components/bs5/globalAlert/globalAlert.data.json @@ -3,7 +3,7 @@ "alertItems": [ { "variant": "global-alert-critical", - "content": "Testing: This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing", + "content": "Testing: This website is currently undergoing testing", "action": "Read more" } ] diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 1093d6c3..1e201b11 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -1,7 +1,4 @@ .global-alert { - - // padding: 5px 0 5px 0; - $chevron-icon-white: url('data:image/svg+xml,'); $chevron-icon-grey: url('data:image/svg+xml,'); @@ -10,26 +7,20 @@ .qld-global-alert-main { display: flex; - // align-items: center; // this was affecting the close button - margin: 6px 0; + .global-alert-icon { - position: absolute; line-height: 1; width: 22px; height: 22px; display: inline-block; transition: fill 0.3s ease; - // align-self: center; - // vertical-align: middle; + vertical-align: middle; font-size: 1.5rem; padding-left: 1.5rem; // padding between icon and text. Added due to bug when content has 3 lines of text. } .global-alert-content { - padding: 0 20px 0 16px; - // display: flex; - // flex-direction: column; - // align-items: center; + padding: 0 1.25rem 0 1rem; .global-alert-action a { display: flex; align-items: center; @@ -122,13 +113,16 @@ @media (min-width: 768px) { // md and above .global-alert { .qld-global-alert-main { - padding: 16px 16px; + padding: 1rem 1rem; .global-alert-content { - padding-left: 16px; + padding-left: 1rem; display: flex; align-items: center; } } + .global-alert-message { + padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px + } } .global-alert-content { flex-direction: row !important; @@ -136,31 +130,21 @@ .global-alert-action { margin-left: 2rem; } - .global-alert-icon { - // aligning with text - padding-top: 12px; - } - } @media (max-width: 767.98px) { // sm and below .global-alert { .qld-global-alert-main { - padding: 12px 16px; + padding: 0.75rem 1rem; // Also 12px 16px } .global-alert-content { - padding: 0 16px 0 12px; + padding: 0 1rem 0 0.75rem; // Also 0 16px 0 12px } } - // .global-alert-icon { - // // positioning at corner - // position: relative; - // top: -12px; - // } .global-alert-icon { // aligning with text - padding-top: 12px; + padding-top: 0.75rem; } } @@ -178,17 +162,19 @@ } .global-alert-icon { // aligning with text - padding-top: 22px; + padding-top: 1.375rem; } .qld-global-alert-main { // Padding requires 64px in space between alert icon and left border; minus (24px(1.5rem) gutter + 16px padding) = 24px (1.5rem) padding-left: 1.5rem; .global-alert-content { - padding-left: 16px; + padding-left: 1rem; // Also 16px display: flex; align-items: center; } } - + .global-alert-message { + padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px + } } } \ No newline at end of file From 3660bc1b85ca567ce7a455a07ebd0e40ae081803 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Tue, 18 Jun 2024 22:45:07 +1000 Subject: [PATCH 26/46] QOLOE-188 Edited data to test alert content with more than 3 lines, re-positioned icons, alignments and labels --- src/components/bs5/globalAlert/globalAlert.data.json | 2 +- src/components/bs5/globalAlert/globalAlert.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/bs5/globalAlert/globalAlert.data.json b/src/components/bs5/globalAlert/globalAlert.data.json index f7505f07..19e5fbc3 100644 --- a/src/components/bs5/globalAlert/globalAlert.data.json +++ b/src/components/bs5/globalAlert/globalAlert.data.json @@ -3,7 +3,7 @@ "alertItems": [ { "variant": "global-alert-critical", - "content": "Testing: This website is currently undergoing testing", + "content": "Testing: This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing", "action": "Read more" } ] diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 1e201b11..bae53160 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -130,6 +130,11 @@ .global-alert-action { margin-left: 2rem; } + .global-alert-icon { + // aligning with text + padding-top: 12px; + } + } @media (max-width: 767.98px) { // sm and below From dca3383c3ed852d14fe31d6b8a4485a01d59c403 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Fri, 21 Jun 2024 16:55:27 +1000 Subject: [PATCH 27/46] Resolved padding for global-alert-message, converted px to rem (most) --- src/components/bs5/globalAlert/globalAlert.data.json | 2 +- src/components/bs5/globalAlert/globalAlert.scss | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.data.json b/src/components/bs5/globalAlert/globalAlert.data.json index 19e5fbc3..f7505f07 100644 --- a/src/components/bs5/globalAlert/globalAlert.data.json +++ b/src/components/bs5/globalAlert/globalAlert.data.json @@ -3,7 +3,7 @@ "alertItems": [ { "variant": "global-alert-critical", - "content": "Testing: This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing This website is currently undergoing testing", + "content": "Testing: This website is currently undergoing testing", "action": "Read more" } ] diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index bae53160..1e201b11 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -130,11 +130,6 @@ .global-alert-action { margin-left: 2rem; } - .global-alert-icon { - // aligning with text - padding-top: 12px; - } - } @media (max-width: 767.98px) { // sm and below From 56ca5b5520b165d79db9b8cf91a3f05c5f6b294e Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Mon, 24 Jun 2024 13:20:07 +1000 Subject: [PATCH 28/46] QOLOE-188 Centred icon in md/lg viewport, fixed label collapse via max-width in global alert message --- src/components/bs5/globalAlert/globalAlert.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 1e201b11..0b6d4588 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -121,7 +121,8 @@ } } .global-alert-message { - padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px + padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px, according to Health DS + max-width: 80%;// Added to prevent Label from collapsing } } .global-alert-content { @@ -163,18 +164,16 @@ .global-alert-icon { // aligning with text padding-top: 1.375rem; + // temporary change to align icon to center + align-self: center; } .qld-global-alert-main { // Padding requires 64px in space between alert icon and left border; minus (24px(1.5rem) gutter + 16px padding) = 24px (1.5rem) padding-left: 1.5rem; .global-alert-content { - padding-left: 1rem; // Also 16px - display: flex; - align-items: center; + padding-left: 1rem; // Also: 16px } } - .global-alert-message { - padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px - } + } } \ No newline at end of file From 5acede5dd790b94eff9d12a20716337d879b64cf Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Mon, 24 Jun 2024 13:38:29 +1000 Subject: [PATCH 29/46] QOLOE-188 Centered md viewport icon as a temp workaround --- src/components/bs5/globalAlert/globalAlert.scss | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 0b6d4588..f6e8f92f 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -124,13 +124,18 @@ padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px, according to Health DS max-width: 80%;// Added to prevent Label from collapsing } + .global-alert-icon { + // temporary change to align icon with content + align-self: center; + } + .global-alert-content { + flex-direction: row !important; + } + .global-alert-action { + margin-left: 2rem; + } } - .global-alert-content { - flex-direction: row !important; - } - .global-alert-action { - margin-left: 2rem; - } + } @media (max-width: 767.98px) { // sm and below From 624d0ca3b58c16cfd02f6c5ce05357bfe3ef5199 Mon Sep 17 00:00:00 2001 From: william dutton Date: Mon, 24 Jun 2024 13:43:42 +1000 Subject: [PATCH 30/46] Clean up initilization system of partials. handlebarsHelpers and handlebarsPartials are modules that need to be called handlebarsHelpers(HandleBars) --- .esbuild/plugins/qgds-plugin-copy-assets.js | 7 ++++--- esbuild.js | 6 +++++- package.json | 2 +- src/js/handlebars.helpers.js | 12 ------------ src/js/handlebars.init.js | 13 ++++++------- 5 files changed, 16 insertions(+), 24 deletions(-) diff --git a/.esbuild/plugins/qgds-plugin-copy-assets.js b/.esbuild/plugins/qgds-plugin-copy-assets.js index 02ed14c6..98fefea2 100644 --- a/.esbuild/plugins/qgds-plugin-copy-assets.js +++ b/.esbuild/plugins/qgds-plugin-copy-assets.js @@ -18,13 +18,14 @@ export default function copyPlugin() { to: ["./dist/sample-data/"], }, { - from: ["./src/js/handlebars*"], - to: ["./dist/assets/js"], + from: ["./src/js/handlebars.helpers.js"], + to: ["./dist/assets/js/handlebars.helpers.js"], }, { - from: ["./src/js/handlebars*"], + from: ["./src/js/handlebars.*"], to: ["./dist/components/"], }, + { from: ["./src/assets/img/*"], to: ["./dist/assets/img"] }, ], }); diff --git a/esbuild.js b/esbuild.js index 7a4cdaaa..9fe3aa8d 100644 --- a/esbuild.js +++ b/esbuild.js @@ -48,7 +48,11 @@ const buildConfig = { }, { in: "./src/js/handlebars.init.js", - out: "./components/handlebars.init.bundle", + out: "./components/handlebars.init.min", + }, + { + in: "./src/js/handlebars.init.js", + out: "./components/handlebars.init.min", }, ], diff --git a/package.json b/package.json index 3a5c0afc..9e4547f7 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js", "qld.bootstrap.css": "./dist/assets/css/qld.bootstrap.css", "handlebars.helpers.bundle.js": "./dist/components/handlebars.helpers.bundle.js", - "handlebars.init.js": "./dist/components/handlebars.init.js", + "handlebars.init.min.js": "./dist/components/handlebars.init.min.js", "bootstrap.min.js": "./dist/assets/js/boostrap.min.js" } } diff --git a/src/js/handlebars.helpers.js b/src/js/handlebars.helpers.js index 77974b64..b4f5cb83 100644 --- a/src/js/handlebars.helpers.js +++ b/src/js/handlebars.helpers.js @@ -90,15 +90,3 @@ export default function handlebarsHelpers(handlebars) { return handlebars.helpers.formatDate(dateToFormat); }); } - -//Only load once if Handlebars is available -if(typeof(Handlebars) !== 'undefined') { - this.registedHandlebarsHelpers = undefined; - if (typeof this.registedHandlebarsHelpers === 'undefined') { - // eslint-disable-next-line no-undef - handlebarsHelpers(Handlebars); - this.registedHandlebarsHelpers = true; - } -} else { - console.log("HandleBars is undefined, did not load helpers") -} diff --git a/src/js/handlebars.init.js b/src/js/handlebars.init.js index e349309e..5ff9a22f 100644 --- a/src/js/handlebars.init.js +++ b/src/js/handlebars.init.js @@ -7,6 +7,8 @@ import Handlebars from "handlebars"; * * @param {Handlebars} handlebars */ +let isHandlebarsHelpersAndPartialsRegistered = false; + export default function init(handlebars = Handlebars) { if (typeof(handlebars) === 'undefined') { if(typeof(Handlebars) !== 'undefined') { @@ -16,15 +18,12 @@ export default function init(handlebars = Handlebars) { if(typeof(handlebars) !== 'undefined') { //only load once - if (typeof handlebarsHelpers.registeredHandlebarsHelpers === 'undefined') { + if (!isHandlebarsHelpersAndPartialsRegistered) { handlebarsHelpers(handlebars); - handlebarsHelpers.registeredHandlebarsHelpers = true; - } - //only load once - if (typeof handlebarsPartials.registeredHandlebarsPartials === 'undefined') { handlebarsPartials(handlebars); - handlebarsPartials.registeredHandlebarsPartials = true; - console.log('partials loaded'); + isHandlebarsHelpersAndPartialsRegistered = true; + } else { + console.log("HandleBars Helpers And Partials already loaded") } } else { console.log("Handlebars not found, init failed"); From 47dac27c793ba37d33a65f8d263e7f03089d25a8 Mon Sep 17 00:00:00 2001 From: william dutton Date: Mon, 24 Jun 2024 13:55:47 +1000 Subject: [PATCH 31/46] Self init, or allow a different handlebars to be setup --- .../breadcumbsWrapper/breadcrumbsWrapper.stories.js | 5 ++--- src/components/bs5/searchInput/search.functions.js | 8 ++++---- src/js/handlebars.init.js | 10 ++++++---- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js index 1fecd83f..d630d3d1 100644 --- a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js @@ -1,14 +1,13 @@ import { forGov } from "../breadcrumbs/breadcrumbs.data.json"; import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js"; -import init from "../../../js/handlebars.init.js"; -import Handlebars from "handlebars"; +import init from "../../../js/handlebars.init.js"; //self init's when loaded const defaultData = { breadcrumbs: forGov }; export default { title: "!Layout/Components/Breadcrumbs Wrapper", render: (args) => { - init(Handlebars) + return new BreadcrumbsWrapperTest(args).html; }, args: defaultData, diff --git a/src/components/bs5/searchInput/search.functions.js b/src/components/bs5/searchInput/search.functions.js index e4fdcc1c..7870f286 100644 --- a/src/components/bs5/searchInput/search.functions.js +++ b/src/components/bs5/searchInput/search.functions.js @@ -114,9 +114,9 @@ export async function showSuggestions(value = '', isDefault = false, form) {
          Suggestions
            ${fetchedSuggestions.slice(0, 4).map(item => { - const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '$1'); - return `
          • ${highlightedText}
            • `; - }).join('')}
          + const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '$1'); + return `
        • ${highlightedText}
          • `; + }).join('')}
          `; dynamicSuggestionsContainer.style.display = 'block'; createPopper(searchInput, suggestions, { @@ -190,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); \ No newline at end of file +window.selectSuggestion = (value, form) => selectSuggestion(value, form); diff --git a/src/js/handlebars.init.js b/src/js/handlebars.init.js index 5ff9a22f..6c6c0a2d 100644 --- a/src/js/handlebars.init.js +++ b/src/js/handlebars.init.js @@ -17,16 +17,18 @@ export default function init(handlebars = Handlebars) { } if(typeof(handlebars) !== 'undefined') { - //only load once if (!isHandlebarsHelpersAndPartialsRegistered) { - handlebarsHelpers(handlebars); - handlebarsPartials(handlebars); isHandlebarsHelpersAndPartialsRegistered = true; } else { - console.log("HandleBars Helpers And Partials already loaded") + console.log("HandleBars Helpers And Partials already loaded, loading again") } + handlebarsHelpers(handlebars); + + handlebarsPartials(handlebars); } else { console.log("Handlebars not found, init failed"); } } +init(); + From ef87d26a2578d54da5cb43ced87e7928f1eeb9b3 Mon Sep 17 00:00:00 2001 From: william dutton Date: Mon, 24 Jun 2024 13:57:46 +1000 Subject: [PATCH 32/46] also place bundle init in js, since it can be used standalone --- esbuild.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/esbuild.js b/esbuild.js index 9fe3aa8d..3c6c9305 100644 --- a/esbuild.js +++ b/esbuild.js @@ -52,7 +52,7 @@ const buildConfig = { }, { in: "./src/js/handlebars.init.js", - out: "./components/handlebars.init.min", + out: "./assets/js/handlebars.init.min", }, ], From 32a9628324675274fac22ce97653687f70bda302 Mon Sep 17 00:00:00 2001 From: william dutton Date: Mon, 24 Jun 2024 13:59:57 +1000 Subject: [PATCH 33/46] lint ignore to test self setup --- .../bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js index d630d3d1..2a6f1925 100644 --- a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js @@ -1,5 +1,6 @@ import { forGov } from "../breadcrumbs/breadcrumbs.data.json"; import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js"; +// eslint-disable-next-line no-unused-vars import init from "../../../js/handlebars.init.js"; //self init's when loaded const defaultData = { breadcrumbs: forGov }; From 4a660a410fa1bfd50a2e1145b50ad43aeaff8d8c Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Wed, 19 Jun 2024 10:55:38 +1000 Subject: [PATCH 34/46] QOLOE-245 (Hopefully) hid header and footer more precisely, need to double check in UAT --- src/scss/qld-print.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/qld-print.scss b/src/scss/qld-print.scss index c9393c2d..f748c55d 100644 --- a/src/scss/qld-print.scss +++ b/src/scss/qld-print.scss @@ -264,7 +264,7 @@ } /* Hide elements not needed for printing */ - .navbar, footer, .sidebar { + .navbar, footer, .sidebar, footer.qld-footer.dark { display: none; } @@ -330,8 +330,8 @@ content:" (" attr(href) ")"; } /* Custom qld- styles */ - .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed { - display: none; + .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed, .qld__header__pre-header { + display: none !important; } .qld__header__brand-image.qld__header__brand-image_subtype, .qld__header__brand-image { display: block !important; From 34691886b83d136a23a209b82943dec75bbcdb46 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Wed, 19 Jun 2024 13:14:00 +1000 Subject: [PATCH 35/46] QOLOE-245 Resolved displaying alert icons in print layout --- src/scss/qld-type.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 61ef25ca..ec442cd7 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -152,6 +152,9 @@ caption { font-weight: 400; line-height: 20px; } +.alert { + print-color-adjust: exact; +} // Dark, dark alt .dark, From 7bdf3ded645cb652d7c1a8d0fb6684823a469a14 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Thu, 20 Jun 2024 12:29:08 +1000 Subject: [PATCH 36/46] QOLOE-245 Resolved links overlapping page with cards, icon for alert showing --- src/scss/qld-print.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/qld-print.scss b/src/scss/qld-print.scss index f748c55d..70d8e755 100644 --- a/src/scss/qld-print.scss +++ b/src/scss/qld-print.scss @@ -329,6 +329,12 @@ display: block; content:" (" attr(href) ")"; } + a.stretched-link:after { + content:" (" attr(href) ")"; + font-size: 13px; + line-height: 1; + position: relative; + } /* Custom qld- styles */ .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed, .qld__header__pre-header { display: none !important; From 35d37f01fa9329d2e178e99bedeb750dd0f07c4a Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Thu, 20 Jun 2024 16:54:10 +1000 Subject: [PATCH 37/46] QOLOE-245 Fixed breadcrumb display issue --- src/scss/qld-print.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/scss/qld-print.scss b/src/scss/qld-print.scss index 70d8e755..ccd1fe86 100644 --- a/src/scss/qld-print.scss +++ b/src/scss/qld-print.scss @@ -208,6 +208,11 @@ .breadcrumb li:before, .breadcrumb a:before { display: none !important; } + // displaying full breadcrumbs + .breadcrumb .breadcrumb-item.breadcrumb-toggle { + display: none!important; + } + /* A few simple lines */ #qg-site-header { @@ -346,7 +351,7 @@ .qld__header__brand a:after { display: none; } - + /* adding class to print data-href from breadcrumb link */ .print-current-url { display: block; From 373df7a69a1bed126b7023875e9e85ed9cb967a5 Mon Sep 17 00:00:00 2001 From: Theo Teo Date: Fri, 21 Jun 2024 16:05:53 +1000 Subject: [PATCH 38/46] QOLOE-245 Added background for print layout, resolved mistake of adding print variables in qld-type.scss instead of qld-print.scss --- src/scss/qld-print.scss | 7 +++++++ src/scss/qld-type.scss | 3 --- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/scss/qld-print.scss b/src/scss/qld-print.scss index ccd1fe86..7cba2edf 100644 --- a/src/scss/qld-print.scss +++ b/src/scss/qld-print.scss @@ -329,6 +329,7 @@ .global-alert { display: none; } + a.btn:after { display: block; @@ -361,6 +362,12 @@ } + /* Print colors to show background elements */ + + .alert, .card-img { + print-color-adjust: exact; + } + /*print styles for forms*/ @media only print { form abbr[title*=required]:after { diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index ec442cd7..61ef25ca 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -152,9 +152,6 @@ caption { font-weight: 400; line-height: 20px; } -.alert { - print-color-adjust: exact; -} // Dark, dark alt .dark, From 0cfa0d1546d06be90a268fc5c37bfcabc565ecd2 Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Thu, 20 Jun 2024 14:07:33 +1000 Subject: [PATCH 39/46] QOLOE-222 Footer component changes --- src/components/bs5/footer/_colours.scss | 2 +- src/components/bs5/footer/_measurements.scss | 3 +- src/components/bs5/footer/footer.data.json | 4 +- src/components/bs5/footer/footer.scss | 63 ++++++++++++++++---- 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/src/components/bs5/footer/_colours.scss b/src/components/bs5/footer/_colours.scss index ac014d8e..1534d0e9 100644 --- a/src/components/bs5/footer/_colours.scss +++ b/src/components/bs5/footer/_colours.scss @@ -26,7 +26,7 @@ --#{$prefix}formIO-bg-colour: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}formIO-callout-bg-colour: var(--#{$prefix}core-default-color-neutral-lighter); --#{$prefix}formIO-hr-colour: var(--#{$prefix}core-default-color-neutral-lighter); - --#{$prefix}formIO-formio-colour: var(--#{$prefix}core-default-color-neutral-black); + --#{$prefix}formIO-formio-colour: #414141; //var(--#{$prefix}core-default-color-neutral-black); --#{$prefix}formIO-input-border: var(--#{$prefix}color-default-color-light-border-alt); --#{$prefix}formIO-btn-disabled-colour: var(--#{$prefix}core-default-color-neutral-light); --#{$prefix}formIO-btn-close-colour: var(--#{$prefix}color-default-color-light-action-secondary); diff --git a/src/components/bs5/footer/_measurements.scss b/src/components/bs5/footer/_measurements.scss index 596902bf..6350146d 100644 --- a/src/components/bs5/footer/_measurements.scss +++ b/src/components/bs5/footer/_measurements.scss @@ -23,8 +23,9 @@ --#{$prefix}footer-crest-max-width: 252px; // Form IO - --#{$prefix}formIO-feeback-font-weight: 700; + --#{$prefix}formIO-feeback-font-weight: normal; --#{$prefix}formIO-border-outline-width: 2px; --#{$prefix}formIO-form-control-border-width: 2px; --#{$prefix}formIO-callout-heading-line-height: 24px; + --#{$prefix}formIO-spacing: 1rem; } diff --git a/src/components/bs5/footer/footer.data.json b/src/components/bs5/footer/footer.data.json index cd1130ee..38b17762 100644 --- a/src/components/bs5/footer/footer.data.json +++ b/src/components/bs5/footer/footer.data.json @@ -14,11 +14,11 @@ "list": [ { "icon": "icon-phone", - "label": "Phone: 13 QGOV (13 74 68)" + "label": "Phone: 13 QGOV (13 74 68)" }, { "icon": "icon-email", - "label": "Email: email@qld.gov.au" + "label": "Email: email@qld.gov.au" } ], "buttonLabel": "Contact us", diff --git a/src/components/bs5/footer/footer.scss b/src/components/bs5/footer/footer.scss index ee3262ce..29d32b60 100644 --- a/src/components/bs5/footer/footer.scss +++ b/src/components/bs5/footer/footer.scss @@ -78,6 +78,9 @@ --qld-brand-accent: var(--#{$prefix}footer-color-alt-button__hover); } } + b { + margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.5); + } } .footer-crest { display: block; @@ -106,6 +109,9 @@ &:focus-visible { box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border); } + span { + display: block; + } } &--social .nav-link { display: flex; @@ -137,7 +143,7 @@ .footer-contact { .btn { min-width: 200px; // magic number - margin-block-start: calc(var(--#{$prefix}footer-spacing) * 0.5); + margin-block-start: var(--#{$prefix}footer-spacing); // calc(var(--#{$prefix}footer-spacing) * 0.5); } } .container > .row > div { @@ -161,6 +167,7 @@ padding-inline: 0; } > .col-md-12 { + --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2); border-top: calc(var(--#{$prefix}footer-special-border-width) - 2px) solid var(--#{$prefix}footer-color-border); @@ -194,6 +201,9 @@ padding-inline: var(--qld-gutter-x); margin-inline: 0; width: 100%; + .footer-column { + margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2); + } } p:last-child { margin-block-end: 0; @@ -218,6 +228,7 @@ .container { > .row { > .col-md-12 { + --qld-gutter-x: var(--#{$prefix}footer-spacing); margin-inline-start: var(--qld-gutter-x); width: calc(100% - calc(var(--qld-gutter-x) * 2)); } @@ -226,6 +237,9 @@ padding-inline: var(--qld-gutter-x); margin-inline: 0; width: 100%; + .footer-column { + margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2.5); + } } p:last-child { margin-block-end: var(--#{$prefix}last-para-margin); @@ -249,6 +263,7 @@ border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}footer-color-alt-button); width: 100%; font-weight: normal; + margin-block-start: var(--#{$prefix}footer-spacing); &:active { color: var(--#{$prefix}formIO-formio-colour); } @@ -262,7 +277,9 @@ width: 100%; text-align: start; background-color: var(--#{$prefix}formIO-bg-colour); - color: var(--#{$prefix}formIO-formio-colour); + // color: var(--#{$prefix}formIO-formio-colour); + color: var(--#{$prefix}light-text-heading); + font-weight: 700; border-color: var(--#{$prefix}formIO-bg-colour); border-start-start-radius: var(--#{$prefix}footer-border-radius); border-start-end-radius: var(--#{$prefix}footer-border-radius); @@ -273,6 +290,8 @@ } #qg-footer-feedback { + --qld-footer-bootstrap-default-padding: 1.5rem; + background-color: var(--#{$prefix}formIO-bg-colour); a { color: var(--#{$prefix}formIO-link-colour); @@ -324,8 +343,18 @@ margin-block-end: 0; } .col-form-label { - margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5); - font-weight: bold; + margin-block-end: var(--#{$prefix}footer-spacing); + padding-block-end: 4px; + font-weight: 600; + padding-block-start: var(--#{$prefix}formIO-spacing); + // color: var(--#{$prefix}formIO-thankyou-page-title-colour); + color: var(--#{$prefix}formIO-formio-colour); //tried to make it --qld-light-text-text but that var is incorrect + display: block; + } + .has-feedback { + label.col-form-label { + border-block-start: var(--qld-footer-border-width) solid var(--qld-formIO-hr-colour); + } } .formio-component-submit { margin-block-start: var(--#{$prefix}footer-spacing); @@ -333,11 +362,11 @@ .form-check { align-items: flex-start; } - .formio-modified .form-check-input, - .formio-modified .form-control { - border-color: var(--#{$prefix}formIO-border-notify-success); - outline: var(--#{$prefix}formIO-border-outline-width) solid var(--#{$prefix}formIO-border-notify-success); - } + // .formio-modified .form-check-input, + // .formio-modified .form-control { + // border-color: var(--#{$prefix}formIO-border-notify-success); + // outline: var(--#{$prefix}formIO-border-outline-width) solid var(--#{$prefix}formIO-border-notify-success); + // } .formio-component-submit .btn, .formio-component-submit .btn-primary { --qld-btn-active-bg: var(--#{$prefix}formIO-submit-btn); @@ -366,8 +395,8 @@ margin: 0; .form-check-label { display: flex; - align-items: center; - margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5); + align-items: start; + margin-block-end: var(--#{$prefix}footer-spacing); margin-inline-start: 0; span { margin-inline-start: calc(var(--#{$prefix}footer-spacing) - 4px); @@ -405,7 +434,9 @@ } .callout { margin-block: var(--#{$prefix}footer-spacing); - background-color: var(--#{$prefix}formIO-callout-bg-colour); + background-color: var( + --#{$prefix}core-default-color-neutral-lightest + ); //var(--#{$prefix}formIO-callout-bg-colour); border-left: none; border-inline-start: calc(var(--#{$prefix}formIO-form-control-border-width) * 2) solid var(--#{$prefix}formIO-callout-border-colour); @@ -456,6 +487,14 @@ .formio-errors .error { margin-block-end: var(--#{$prefix}footer-spacing); } + .field-required:after { + content: none; + content: ""; + } + .field-required:before { + content: " *"; + color: #eb0000; + } } } From 76dd242c56791e2b4bf64c2fbc8ed35d485ca80d Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Fri, 21 Jun 2024 12:25:11 +1000 Subject: [PATCH 40/46] QOLOE-222 CSS clean up --- src/components/bs5/footer/_colours.scss | 2 +- src/components/bs5/footer/footer.scss | 24 ++++++------------------ 2 files changed, 7 insertions(+), 19 deletions(-) diff --git a/src/components/bs5/footer/_colours.scss b/src/components/bs5/footer/_colours.scss index 1534d0e9..7627f651 100644 --- a/src/components/bs5/footer/_colours.scss +++ b/src/components/bs5/footer/_colours.scss @@ -26,7 +26,7 @@ --#{$prefix}formIO-bg-colour: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}formIO-callout-bg-colour: var(--#{$prefix}core-default-color-neutral-lighter); --#{$prefix}formIO-hr-colour: var(--#{$prefix}core-default-color-neutral-lighter); - --#{$prefix}formIO-formio-colour: #414141; //var(--#{$prefix}core-default-color-neutral-black); + --#{$prefix}formIO-formio-colour: var(--#{$prefix}color-default-color-light-text-default); --#{$prefix}formIO-input-border: var(--#{$prefix}color-default-color-light-border-alt); --#{$prefix}formIO-btn-disabled-colour: var(--#{$prefix}core-default-color-neutral-light); --#{$prefix}formIO-btn-close-colour: var(--#{$prefix}color-default-color-light-action-secondary); diff --git a/src/components/bs5/footer/footer.scss b/src/components/bs5/footer/footer.scss index 29d32b60..94e3862c 100644 --- a/src/components/bs5/footer/footer.scss +++ b/src/components/bs5/footer/footer.scss @@ -41,7 +41,6 @@ } } - //Bordered columns in the footer should only show above medium breakpoint .border-column { height: 100%; position: relative; @@ -92,7 +91,6 @@ } } - //Footer Nav classes .nav { --#{$prefix}nav-link-color: var(--#{$prefix}footer-color-link); &.footer-link-list { @@ -142,8 +140,8 @@ } .footer-contact { .btn { - min-width: 200px; // magic number - margin-block-start: var(--#{$prefix}footer-spacing); // calc(var(--#{$prefix}footer-spacing) * 0.5); + min-width: 200px; + margin-block-start: var(--#{$prefix}footer-spacing); } } .container > .row > div { @@ -277,7 +275,6 @@ width: 100%; text-align: start; background-color: var(--#{$prefix}formIO-bg-colour); - // color: var(--#{$prefix}formIO-formio-colour); color: var(--#{$prefix}light-text-heading); font-weight: 700; border-color: var(--#{$prefix}formIO-bg-colour); @@ -314,7 +311,7 @@ width: 100%; display: block; border-radius: var(--#{$prefix}footer-border-radius); - padding: 9px 24px; // magic numbers + padding: 9px 24px; text-align: center; text-decoration: none; &:hover { @@ -347,8 +344,7 @@ padding-block-end: 4px; font-weight: 600; padding-block-start: var(--#{$prefix}formIO-spacing); - // color: var(--#{$prefix}formIO-thankyou-page-title-colour); - color: var(--#{$prefix}formIO-formio-colour); //tried to make it --qld-light-text-text but that var is incorrect + color: var(--#{$prefix}formIO-formio-colour); display: block; } .has-feedback { @@ -362,11 +358,6 @@ .form-check { align-items: flex-start; } - // .formio-modified .form-check-input, - // .formio-modified .form-control { - // border-color: var(--#{$prefix}formIO-border-notify-success); - // outline: var(--#{$prefix}formIO-border-outline-width) solid var(--#{$prefix}formIO-border-notify-success); - // } .formio-component-submit .btn, .formio-component-submit .btn-primary { --qld-btn-active-bg: var(--#{$prefix}formIO-submit-btn); @@ -434,9 +425,7 @@ } .callout { margin-block: var(--#{$prefix}footer-spacing); - background-color: var( - --#{$prefix}core-default-color-neutral-lightest - ); //var(--#{$prefix}formIO-callout-bg-colour); + background-color: var(--#{$prefix}core-default-color-neutral-lightest); border-left: none; border-inline-start: calc(var(--#{$prefix}formIO-form-control-border-width) * 2) solid var(--#{$prefix}formIO-callout-border-colour); @@ -471,7 +460,7 @@ &:first-of-type { border-block-end: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour); - padding-block-end: 13px; // magic number + padding-block-end: 13px; } } p:last-of-type { @@ -499,7 +488,6 @@ } @media (max-width: 300px) { - // This is the min width where the content is still usable. .qld-footer { width: 300px; } From de76e758779a1283e0eb804b49fcdbc04c8110ad Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Fri, 21 Jun 2024 14:56:39 +1000 Subject: [PATCH 41/46] QOLOE-222 updated the way the breakpoints are added --- src/components/bs5/footer/_colours.scss | 3 ++- src/components/bs5/footer/footer.scss | 24 ++++++++++-------------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/bs5/footer/_colours.scss b/src/components/bs5/footer/_colours.scss index 7627f651..63594b1e 100644 --- a/src/components/bs5/footer/_colours.scss +++ b/src/components/bs5/footer/_colours.scss @@ -40,7 +40,8 @@ --#{$prefix}formIO-border-notify-invalid: var(--#{$prefix}core-default-color-status-error-default); --#{$prefix}formIO-border-notify-success: var(--#{$prefix}core-default-color-status-success-default); --#{$prefix}formIO-callout-border-colour: var(--#{$prefix}core-default-color-brand-primary-light-green); - @media (max-width: 991.98px) { + --#{$prefix}formIO-error: var(--#{$prefix}core-default-color-status-error-default); + @include media-breakpoint-down(lg) { --qld-footer-column-border-color: transparent; } diff --git a/src/components/bs5/footer/footer.scss b/src/components/bs5/footer/footer.scss index 94e3862c..92e1fb96 100644 --- a/src/components/bs5/footer/footer.scss +++ b/src/components/bs5/footer/footer.scss @@ -40,7 +40,6 @@ margin-block-start: calc(var(--#{$prefix}footer-spacing) * 2); } } - .border-column { height: 100%; position: relative; @@ -90,7 +89,6 @@ width: 100%; } } - .nav { --#{$prefix}nav-link-color: var(--#{$prefix}footer-color-link); &.footer-link-list { @@ -150,7 +148,7 @@ .btn-global-secondary { white-space: normal; } - @media (max-width: 991.98px) { + @include media-breakpoint-down(lg) { --#{$prefix}last-para-margin: 24px; --qld-footer-padding-y: 0; @@ -160,7 +158,8 @@ } .container { > .row { - --qld-gutter-x: calc(var(--#{$prefix}footer-gap) * 2); + margin-inline: calc(var(--#{$prefix}footer-gap) * -1); + --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2); & > * { padding-inline: 0; } @@ -222,17 +221,16 @@ } } } - @media (max-width: 767.98px) { + @include media-breakpoint-down(md) { .container { > .row { > .col-md-12 { - --qld-gutter-x: var(--#{$prefix}footer-spacing); - margin-inline-start: var(--qld-gutter-x); - width: calc(100% - calc(var(--qld-gutter-x) * 2)); + margin-inline-start: var(--#{$prefix}footer-spacing); + width: calc(100% - calc(var(--#{$prefix}footer-spacing) * 2)); } > .title, > .crest { - padding-inline: var(--qld-gutter-x); + padding-inline: var(--qld-footer-spacing); margin-inline: 0; width: 100%; .footer-column { @@ -285,7 +283,6 @@ font-weight: bold; } } - #qg-footer-feedback { --qld-footer-bootstrap-default-padding: 1.5rem; @@ -482,13 +479,12 @@ } .field-required:before { content: " *"; - color: #eb0000; + color: var(--#{$prefix}formIO-error); } } } - -@media (max-width: 300px) { +@include media-breakpoint-down(sm) { .qld-footer { - width: 300px; + width: 400px; } } From 5611181fcc260a1965c7aba45ead6728334fd4da Mon Sep 17 00:00:00 2001 From: Sen Chung Date: Mon, 24 Jun 2024 11:37:25 +1000 Subject: [PATCH 42/46] QOLOE-222 updated the headings font size and trhe padding --- src/components/bs5/footer/_measurements.scss | 1 + src/components/bs5/footer/footer.scss | 23 ++++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/bs5/footer/_measurements.scss b/src/components/bs5/footer/_measurements.scss index 6350146d..fdd9f516 100644 --- a/src/components/bs5/footer/_measurements.scss +++ b/src/components/bs5/footer/_measurements.scss @@ -3,6 +3,7 @@ // Measurements // -text --#{$prefix}footer-font-size: 0.875rem; + --#{$prefix}footer-title-font-size: 1.25rem; --#{$prefix}footer-text-underline-offset: 0.3em; --#{$prefix}footer-font-underline-boarder: 2px; diff --git a/src/components/bs5/footer/footer.scss b/src/components/bs5/footer/footer.scss index 92e1fb96..7ac0835c 100644 --- a/src/components/bs5/footer/footer.scss +++ b/src/components/bs5/footer/footer.scss @@ -23,7 +23,7 @@ } } .footer-site-name { - font-size: calc(var(--#{$prefix}footer-spacing) * 1.25); + font-size: var(--#{$prefix}footer-title-font-size); line-height: 1.5; font-weight: 600; margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2); @@ -55,7 +55,7 @@ } .footer-heading { color: var(--#{$prefix}footer-color-title); - font-size: calc(var(--#{$prefix}footer-font-size) * 1.25); + font-size: var(--#{$prefix}footer-title-font-size); margin-block-end: var(--#{$prefix}footer-spacing); line-height: 1.5; font-weight: 600; @@ -246,6 +246,10 @@ column-count: 2; width: 100%; } + .footer-site-name, + .footer-heading { + font-size: calc(var(--#{$prefix}footer-title-font-size) - 0.25rem); + } } } @@ -301,7 +305,7 @@ .qg-footer-feedback-footer { border-block-start: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour); - padding-block-start: var(--#{$prefix}footer-spacing); + padding-block-start: calc(var(--#{$prefix}footer-spacing) + 4px); a.qg-footer-feedback__close { border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}formIO-btn-close-colour); @@ -389,7 +393,11 @@ span { margin-inline-start: calc(var(--#{$prefix}footer-spacing) - 4px); } + &:last-of-type { + margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px); + } } + .form-check-input { margin-left: 0; } @@ -398,6 +406,7 @@ .formio-component-howSatisfiedAreYouWithYourExperienceToday { flex-direction: column; padding-inline-start: 0; + margin-block-end: 0; label.col-form-label { margin-inline-start: 0; @@ -421,7 +430,8 @@ outline-offset: 0; } .callout { - margin-block: var(--#{$prefix}footer-spacing); + margin-block-start: 0; + margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px); background-color: var(--#{$prefix}core-default-color-neutral-lightest); border-left: none; border-inline-start: calc(var(--#{$prefix}formIO-form-control-border-width) * 2) solid @@ -483,8 +493,3 @@ } } } -@include media-breakpoint-down(sm) { - .qld-footer { - width: 400px; - } -} From f271ab5645ea990d2cdd7666a93cafa36198507e Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Mon, 24 Jun 2024 13:06:49 +1000 Subject: [PATCH 43/46] [QOLOE-313]Hide transcript when its content is empty. --- src/components/bs5/video/video.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/bs5/video/video.hbs b/src/components/bs5/video/video.hbs index 9c5b1ea0..a9f58220 100644 --- a/src/components/bs5/video/video.hbs +++ b/src/components/bs5/video/video.hbs @@ -45,6 +45,8 @@ {{! Render the transcript content in an accordion template }} - {{{ transcriptAccordion }}} + {{#if transcriptContent}} + {{{ transcriptAccordion }}} + {{/if}} From eefd22496d47b2c38673e35a4641460032f100d9 Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Mon, 24 Jun 2024 14:58:41 +1000 Subject: [PATCH 44/46] [QOLOE-192]Update select input's label text colour - Design QA. --- src/components/bs5/textbox/textInput.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/bs5/textbox/textInput.scss b/src/components/bs5/textbox/textInput.scss index f3f718b8..7338296d 100644 --- a/src/components/bs5/textbox/textInput.scss +++ b/src/components/bs5/textbox/textInput.scss @@ -40,7 +40,7 @@ } .qld-text-input-label { - color: var(--#{$prefix}color-default-color-light-text-lighter); + color: var(--#{$prefix}text-grey); display: block; font-weight: 600; line-height: 1.5; From 0092396424a93c0eca55ea8e47e7938752de48b8 Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Mon, 24 Jun 2024 16:14:52 +1000 Subject: [PATCH 45/46] Revert "[HOTFIX]Update ESBuild to ignore cleaning output folders on initial build or initial watch mode." This reverts commit 27bda01a8cfb4300adcfc6bbaf2fccd482b4d01e. --- .../qgds-plugin-clean-output-folders.js | 39 +++++++------------ 1 file changed, 15 insertions(+), 24 deletions(-) diff --git a/.esbuild/plugins/qgds-plugin-clean-output-folders.js b/.esbuild/plugins/qgds-plugin-clean-output-folders.js index 0e17b4f9..9be85fec 100644 --- a/.esbuild/plugins/qgds-plugin-clean-output-folders.js +++ b/.esbuild/plugins/qgds-plugin-clean-output-folders.js @@ -1,39 +1,30 @@ import fs from "fs"; import log from "../helpers/logger.js"; -/** - * Clean the output folders /dist. - * Skip cleaning during the initial build or initial watch mode. - * - * @returns {Object} Object with a name and a setup function. - */ export default function cleanFoldersPlugin() { - let isInitialBuild = true; return { name: "qgds-clean-output-folders", setup(build) { build.onStart(() => { - if (!isInitialBuild) { - //Console feedback - log("cyan", `\u{1F4C2} Cleaning /dist folders\n\n`); + //Console feedback + log("cyan", `\u{1F4C2} Cleaning /dist folders\n\n`); - // Clean the output folders - const { outdir, outfile } = build.initialOptions; + // Clean the output folders + const { outdir, outfile } = build.initialOptions; - if (outdir && fs.existsSync(outdir)) { - fs.rmSync(outdir, { recursive: true }); - } - - if (outfile && fs.existsSync(outfile)) { - fs.rmSync(outfile); - } + if (outdir && fs.existsSync(outdir)) { + fs.rmSync(outdir, { recursive: true }); + } - // // Clean the docs folder - // const docsdir = "./docs/"; - // if (fs.existsSync(docsdir)) { - // fs.rmSync(docsdir, { recursive: true }); - // } + if (outfile && fs.existsSync(outfile)) { + fs.rmSync(outfile); } + + // // Clean the docs folder + // const docsdir = "./docs/"; + // if (fs.existsSync(docsdir)) { + // fs.rmSync(docsdir, { recursive: true }); + // } }); }, }; From 34051013c8432b6a9b922fea7ec2ce507c028451 Mon Sep 17 00:00:00 2001 From: Elvi Shu Date: Mon, 24 Jun 2024 16:15:15 +1000 Subject: [PATCH 46/46] Revert "[HOTFIX]Add npm command to run a single story in Storybook." This reverts commit dd6a1a673590c8596466d495d8e6d5d488815393. --- .storybook/main.js | 6 ++---- package.json | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 6baccadd..86fd23ea 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -4,10 +4,8 @@ const config = { "../src/stories/Introduction.mdx", // Include all stories found under the src/components directory ( For example: alert/alert.stories.js ) // Exlude any stories starting with an underscore ( For example: _exludeme.stories.js ) - // "../src/**/!(*_)*.mdx", - // "../src/**/!(*_)*.stories.js", - process.env.STORYBOOK_SINGLE ? process.env.STORYBOOK_SINGLE : "../src/**/!(*_)*.mdx", - process.env.STORYBOOK_SINGLE ? process.env.STORYBOOK_SINGLE : "../src/**/!(*_)*.stories.js", + "../src/**/!(*_)*.mdx", + "../src/**/!(*_)*.stories.js", ], staticDirs: [ { from: '../dist', to: '/assets' }, diff --git a/package.json b/package.json index 07ff4293..3a5c0afc 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,6 @@ "serve": "live-server dist", "dev-storybook": "npm-run-all --parallel watch storybook", "storybook": "storybook dev -p 6006", - "storybook-single": "STORYBOOK_SINGLE=../src/components/bs5/button/button.stories.js npm run storybook", - "storybook-single-watch": "STORYBOOK_SINGLE=../src/components/bs5/button/button.stories.js npm-run-all --parallel watch storybook", "build-storybook": "storybook build --webpack-stats-json ", "build-storybook:serve": "live-server storybook-static" },