@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.14

package/src/main.js

@@ -1,9 +1,11 @@
 import { accordionToggleAll, accordionToggleAllButtonState, accordionHashLinks } from "./components/bs5/accordion/accordion.functions";
 import { videoEmbedPlay, videoTranscriptTitle } from "./components/bs5/video/video.functions";
 import { initializeNavbar } from './components/bs5/navbar/navbar.functions';
-import { breadcrumbShorten } from "./components/bs5/breadcrumbs/breadcrumb.functions";
+import { initBreadcrumb } from "./components/bs5/breadcrumbs/breadcrumb.functions";
 import { positionQuickExit, initQuickexit } from './components/bs5/quickexit/quickexit.functions';
-import { toggleSearch, showSuggestions } from './components/bs5/header/header.functions';
+
+import { toggleSearch } from './components/bs5/header/header.functions';
+import { showSuggestions } from './components/bs5/searchInput/search.functions';
 
 window.addEventListener('scroll', positionQuickExit, true);
 window.addEventListener('resize', positionQuickExit, true);
@@ -15,10 +17,14 @@ window.addEventListener("DOMContentLoaded", () => {
 
     //Header search
     let headerSearchButton = document.querySelector('.qld__main-nav__toggle-search');
-    if(headerSearchButton) {
+
+    if (headerSearchButton) {
       document.querySelector('.qld__main-nav__toggle-search').addEventListener('click', toggleSearch);
     }
-    const searchInput = document.getElementById('search-input');
+
+    const form = document.querySelector('.site-search');
+    const searchInput = form.querySelector('.qld-search-input input');
+
     if (searchInput) {
       let timeout;
 
@@ -38,19 +44,30 @@ window.addEventListener("DOMContentLoaded", () => {
           showSuggestions('', true);
         }
       });
+
       // Close suggestions when clicking outside
       document.addEventListener('click', function(event) {
-        if (!searchInput.contains(event.target) && !document.getElementById('suggestions').contains(event.target)) {
-          document.getElementById('suggestions').style.display = 'none';
+        if (!searchInput.contains(event.target) && !document.querySelector('.suggestions').contains(event.target)) {
+          document.querySelector('.suggestions').style.display = 'none';
         }
       });
     }
 
+    //Header 
+    // Get the <header> element
+    var header = document.querySelector('header');
+    if (header) {
+      // Get the current page URL without query string parameters
+      var url = window.location.origin + window.location.pathname;
+      // Set the data-page-url attribute on the <header> element
+      header.setAttribute('data-page-url', url);
+    }
+    
     // Navbar
     initializeNavbar();
 
     // Breadcrumb
-    breadcrumbShorten();
+    initBreadcrumb();
 
     // Quick exit
     initQuickexit();

package/src/main.scss

@@ -5,7 +5,7 @@
 // Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
 
 // External fonts
-@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap');
 $font-family-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-sitename: "Fira Sans";
 
@@ -113,5 +113,8 @@ $enable-dark-mode: true;
 // Common Layout Blocks, under review
 @import "./components/common/layout/content.scss";
 
-// Themes, under review
-@import "./scss/qld-theme.scss";
+// Themes
+@import "./scss/qld-theme.scss";
+
+// Print
+@import "./scss/qld-print.scss";

package/src/scss/qld-print.scss

@@ -0,0 +1,365 @@
+@media print {
+
+    .h1, h1 {
+      font-size: 1.5em; // Size of h2
+      margin-top: -5rem;
+    }
+
+    .h2, h2 {
+      font-size: 1.17em; // Size of h3
+      &:not(:first-child) {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .h3, h3 {
+      font-size: 1em; // Size of h4
+    }
+
+    .h4, h4 {
+      font-size: 0.83em; // Size of h5
+    }
+
+    .h5, h5 {
+      font-size: 0.67em; // Size of h6
+    }
+    
+    * {
+        width: 100%; 
+        margin: 0; 
+        float: none;
+        position: static;
+    }
+    *:before,
+    *:after {
+      color: #000 !important; 
+      text-shadow: none !important;
+      // background: transparent !important; // originally for icons
+      box-shadow: none !important;
+    }
+    a,
+    a:visited {
+      text-decoration-line: underline;
+      color: #000 !important;
+    }
+  // Don't show links that are fragment identifiers,
+  // or use the `javascript:` pseudo protocol
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+      content: "";
+    }
+
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+    thead {
+        display: table-header-group; 
+    }
+
+    tr,
+    img {
+      page-break-inside: avoid;
+      page-break-after: avoid;
+      page-break-before: avoid;
+    }
+
+    .qld__header__pre-header-brand-image {
+      display: block !important;
+    }
+    img {
+      max-width: 100% !important;
+      width: auto;
+    }
+    /** Setting margins */       
+    // @page { margin: 2cm }
+
+    /* Addding page breaks for best practice */
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+  
+    a {
+      page-break-inside: avoid;
+    }
+    h1, h2, h3, h4, h5, h6 {
+      page-break-after: avoid;
+      page-break-inside: avoid;
+    }
+
+    table, pre {
+      page-break-inside: avoid;
+    }
+
+    ul, ol, dl {
+      page-break-before: avoid;
+    }
+    blockquote {
+      page-break-inside: avoid;
+    }
+
+
+    .btn,
+    .dropup > .btn {
+      > .caret {
+        border-top-color: #000 !important;
+      }
+    }
+    .label {
+        border: 1px solid #000;
+    }
+
+    .table-bordered {
+        th,
+        td {
+          border: 1px solid #ddd !important;
+        }
+    }
+    .row {
+        display: block;
+      }
+    .btn {
+      border: none;
+        .btn-icon {
+            width: auto;
+        }
+        &:disabled,
+        &.disabled {
+            color: #d3d3d3!important;
+        }
+    }
+    
+    .qg-site-map { 
+    display:none !important;
+    }
+    #qg-primary-content {
+        max-width: 100%;
+        width:100%;
+        left:0;
+        table{
+          font-size: 15px;
+        }
+        margin-top: 0;
+        h1 {
+          font-size: 25px;
+        }
+        h2 {
+          font-size: 20px;
+        }
+    }
+
+      /* Hide sections that are not to print */
+    #qg-access,
+    #browser, 
+    #qg-banner,
+    #tools,
+    #qg-site-nav,
+    #qg-section-nav,
+    .qg-section-nav,
+    #qg-site-map,
+    .qg-options,
+    #qg-page-feedback,
+    #header-bg,
+    .print-content-link,
+    #qg-site-header form,
+    .qg-utilities,
+    #qg-location-dropdown,
+    .qg-legal li {
+        display: none;
+    }
+
+      /* Some landmark headings should be visible */
+    .breadcrumb h2 {
+        position: static;
+    }
+    /* Style breadcrumbs */
+    .breadcrumb {
+        display: inline;
+        list-style: none;
+    }
+    .breadcrumb h2 {
+        font-size: 100%;
+        display: block;
+        margin: .5em 0;
+        font-weight: normal;
+    }
+    .breadcrumb ol,
+    .breadcrumb li,
+    .breadcrumb li.last-child,
+    .breadcrumb a {
+      text-decoration-line: none !important;
+      color: black !important;
+      display: inline !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    .breadcrumb a {
+      padding-right: .5em;
+    }
+    .breadcrumb a:after, .breadcrumb .breadcrumb-item a:after {
+      content: " >";
+      
+    }
+    .breadcrumb li:before, .breadcrumb a:before {
+      display: none !important;
+    }
+
+     /* A few simple lines */
+  #qg-site-header {
+    border-bottom: 1px solid #000000 !important;
+    margin-bottom: 1em;
+    display: block;
+    min-height: 32mm;
+  }
+  #qg-site-map {
+    border-top: 1px solid #000000;
+    padding-top: 1em;
+  }
+
+  /* hide the tagline when printing */
+  #qg-branding {
+    display: none;
+  }
+
+  #page-container,
+  #content-container,
+  .article,
+  #document-properties,
+  #post-page-options,
+  #page-feedback,
+  #content .section,
+  #content,
+  .section,
+  .max-width {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .print-link-url,
+  #site-name img.qg-print-version,
+  #qg-logo img.qg-print-version,
+  #qg-coa img.qg-print-version {
+    margin: 0;
+    padding: 0;
+    text-decoration-line: none;
+    display: inline;
+  }
+
+  #ia .d1 img { 
+    float: left;
+  }
+
+    body {
+      /* Set some defaults */
+      background: white;
+  
+      /* Reset variables as needed for printing */
+      --qld-body-color: black;
+      
+    }
+  
+    /* Hide elements not needed for printing */
+    .navbar, footer, .sidebar {
+      display: none;
+    }
+
+    .row {
+      margin-left: 0px;
+      margin-right: 0px;
+    }
+
+  
+    /* Other print styles... */
+    blockquote {
+      border: none;
+    }
+    .pagination, .qld-quick-exit {
+      display: none;
+    }
+    .accordion {
+      --#{$prefix}accordion-btn-bg: transparent !important;
+      --#{$prefix}accordion-border-color:  transparent !important;
+      --#{$prefix}accordion-btn-color: var(--qld-body-color);
+      .accordion-button {
+        text-decoration: none;
+      }
+    }
+    .accordion-toggle-btn {
+      display: none;
+    }
+    header:after {
+      content:"(" attr(data-page-url) ")";
+      display: block;
+      font-size: 0.9rem;
+      font-weight: bold;
+      margin-bottom: 1em;
+      margin-left: 2em;
+    }
+
+    .nav-item.active a {
+      display: block;
+    }
+    .accordion-collapse {
+        display: block!important;
+    }
+
+    a[href^=http]:after {
+        content:" (" attr(href) ")";
+        color: var(--qld-primary) !important;
+      }
+        
+    a.btn {
+      box-shadow: none;
+    }
+
+    button.btn {
+      display: none;
+    }
+
+    .global-alert {
+      display: none;
+    }
+    
+    a.btn:after {
+        display: block;
+        content:" (" attr(href) ")";
+    }
+    /* Custom qld- styles */
+    .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed {
+      display: none;
+    }
+    .qld__header__brand-image.qld__header__brand-image_subtype, .qld__header__brand-image {
+      display: block !important;
+    }
+
+    .qld__header__brand a:after {
+      display: none;
+    }
+  
+    /* adding class to print data-href from breadcrumb link */
+    .print-current-url {
+      display: block;
+      font-size: bold;
+      color: var(--qld-primary) !important;
+    }
+
+  }
+
+  /*print styles for forms*/
+@media only print {
+    form abbr[title*=required]:after {
+        content: ''
+    }
+    form .label {
+        border: none;
+    }
+  }
+  
+  .no-print {
+    @extend .d-print-none;
+  }

package/src/scss/qld-variables.scss

@@ -4,48 +4,40 @@
 // These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.scss,
 
 //QGDS tokens - masterbrand
+@import "@qld-gov-au/qgds-tokens/dist/scss/_variables.scss";
 @import "@qld-gov-au/qgds-tokens/dist/scss/_map.scss";
 
 //QLD Names Colours
-$qld-dark-blue : #05325F;
-$qld-sapphire-blue : #09549F;
-$qld-light-blue : #0085B3;
-$qld-light-green : #6BBE27;
-$qld-dark-green : #008635;
-$qld-golden-yellow : #FFE500;
-$qld-maroon-traditional : #771E32;
-$qld-maroon-modern : #A70240;
-$qld-dark-text: #FFFFFF;
-$qld-dark-border: #1D9AC6;
-$qld-dark-alt-border: #09ACFE;
-$qld-alt-button-hover: #005B23;
-$qld-general-info-alert: #e5eef5;
-$qld-red-border: #8A1220;
-$qld-blue-border: #5C94C0;
-$qld-yellow-border: #B38800;
-$qld-dark-blue-shade : #052C53;
-$qld-light-background: #EFF4F9;
-$qld-light-background-shade: #E5EEF5;
-$qld-light-border: #ECEDE9;
-$qld-dark-focus: #01B0E5;
-$qld-link-visited: #8B63B0;
-$qld-link-visited-dark: #E1C2FF;
-$qld-text-light-blue-dark : #DEEBF9;
-$qld-light-green-dark : #ADD33F;
-$qld-dark-green-dark : #78BA00;
-$qld-light-yellow : #FFEF60;
-$qld-button-dark-blue : #003E7D;
-$qld-text-darkest : #121940;
-$qld-dark-hover : #044a8f;
-
-//Hypothetical
-$cobrand-blue : #132D4E;
-$cobrand-grey : #294d7b;
-$cobrand-maroon : #A70240;
-$cobrand-purple : #634B78;
-$cobrand-yellow : #FBAF54;
-$cobrand-orange : #FD855D;
-
+$qld-dark-blue : $core-default-color-brand-primary-dark-blue;
+$qld-sapphire-blue : $core-default-color-brand-primary-sapphire-blue;
+$qld-light-blue : $core-default-color-brand-primary-light-blue;
+$qld-light-green : $core-default-color-brand-primary-light-green;
+$qld-dark-green : $core-default-color-brand-secondary-darkgreen;
+$qld-golden-yellow : $core-default-color-brand-secondary-golden-yellow;
+$qld-maroon-traditional : $core-default-color-brand-other-gov-maroon;
+$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
+$qld-dark-text: $core-default-color-neutral-white;
+$qld-dark-border: $color-default-color-dark-border-default;
+$qld-dark-alt-border: $color-default-color-dark-border-alt;
+$qld-alt-button-hover: $color-default-color-light-action-secondary-hover;
+$qld-general-info-alert: $core-default-color-status-info-lighter;
+$qld-red-border: $core-default-color-status-error-darker;
+$qld-blue-border: $color-default-color-light-border-light;
+$qld-yellow-border: $core-default-color-status-caution-darker;
+$qld-dark-blue-shade : $color-default-color-dark-background-alt-shade;
+$qld-light-background: $core-default-color-status-info-lightest;
+$qld-light-background-shade: $color-default-color-light-background-light-shade;
+$qld-light-border: $color-default-color-light-border-default;
+$qld-dark-focus: $color-default-color-dark-focus-default;
+$qld-link-visited: $color-default-color-light-underline-visited;
+$qld-link-visited-dark: $color-default-color-dark-underline-visited;
+$qld-text-light-blue-dark : $core-default-color-neutral-lighter;
+$qld-light-green-dark : $core-default-color-brand-primary-light-green;
+$qld-dark-green-dark : $color-default-color-dark-action-primary;
+$qld-light-yellow : $core-default-color-status-caution-lightest;
+$qld-button-dark-blue : $color-default-color-light-action-primary-hover;
+$qld-text-darkest : $color-default-color-dark-link-on-action;
+$qld-dark-hover : $color-default-color-dark-background-default-shade;
 
 //QGOV Brand Mapping - QLD.GOV.AU
 $qld-brand-primary-dark : $qld-dark-blue;
@@ -55,74 +47,66 @@ $qld-brand-secondary-dark : $qld-dark-green;
 $qld-brand-secondary : $qld-light-green;
 $qld-brand-accent : $qld-golden-yellow;
 
-
-// Uncoment to switch primary palette
-// $qld-brand-primary-dark   : $cobrand-grey;
-// $qld-brand-primary        : $cobrand-maroon;
-// $qld-brand-primary-light  : $cobrand-blue;
-// $qld-brand-secondary-dark : $cobrand-orange;
-// $qld-brand-secondary      : $cobrand-purple;
-// $qld-brand-accent         : $cobrand-yellow;
-
-
 //Grays
-$qld-system-darkest : #1D1D1D;
-$qld-text-grey : #414141;
-$qld-hint-text-color: #6F777b;
-$qld-hint-text-color-muted: #DEEBF9;
-$qld-color-dark-button-hover: #ADD33F;
-$qld-text-headings : #04284C;
-$qld-dark-grey : #595959;
-$qld-dark-grey-muted : #636363; // --QLD-color-light-text__muted
-$qld-medium-grey : #78797E;
-$qld-soft-grey : #7A7A7A;
-$qld-alt-grey : #DADADA;
-$qld-grey : #E0E0E0;
-$qld-light-grey : #EBEBEB;
-$qld-light-grey-alt : #E8E8E8;
-$qld-extra-light-grey : #F5F5F5;
-$qld-white : #FFFFFF;
-$qld-white-underline : rgba(255, 255, 255, 0.72);
-$qld-dark-underline : rgba(3, 33, 63, 0.72);
-$qld-maroon-traditional: #771E32;
-$qld-maroon-modern : #A70240;
-$qld-notify-warning : #E22339;
-$qld-notify-information: #0085B3;
-$qld-notify-success : #339D37;
-$qld-notify-alert : #FFCC2C;
-$qld-syntax-values : #6BBE27;
-$qld-syntax-elements : #A7E5FF;
-$qld-syntax-properties : #C88DF7;
-$qld-syntax-comments : #C0D7EC;
-$qld-textbox-border-color: #003E7D;
-$qld-color-error-light: #FFF6F6;
-$qld-color-success-light: #F7FBF8;
+$qld-system-darkest : $core-default-color-neutral-darkest;
+$qld-hint-text-color: $core-default-color-neutral-dark;
+$qld-dark-grey : $core-default-color-neutral-darker;
+$qld-medium-grey : $core-default-color-neutral-dark;
+$qld-alt-grey : $core-default-color-neutral-light;
+$qld-light-link: $color-default-color-light-link-default;
+
+//Should be core color rather than second hand reference (no match)
+$qld-soft-grey : $color-default-color-light-border-alt;
 
-$qld-light-link: #1E5866;
+$qld-dark-grey-muted : $color-default-color-light-text-lighter; 
+$qld-text-grey : $color-default-color-light-text-default;
+$qld-hint-text-color-muted: $core-default-color-neutral-lighter;
+$qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
+$qld-text-headings : $color-default-color-light-text-heading;
+$qld-grey : $core-default-color-neutral-light;
+$qld-light-grey : $core-default-color-neutral-lighter;
+$qld-light-grey-alt : $color-default-color-light-background-alt;
+$qld-extra-light-grey : $core-default-color-neutral-lightest;
+$qld-white : $core-default-color-neutral-white;
+$qld-white-underline : $core-default-color-status-underline-light;
+$qld-dark-underline : $core-default-color-status-underline-dark;
+$qld-maroon-traditional: $core-default-color-brand-other-gov-maroon;
+$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
+$qld-notify-warning : $core-default-color-status-error-default;
+$qld-notify-information: $core-default-color-status-info-default;
+$qld-notify-success : $core-default-color-status-success-default;
+$qld-notify-alert : $core-default-color-status-caution-default;
+$qld-syntax-values : $core-default-color-brand-primary-light-green;
+$qld-syntax-elements : $core-default-color-code-light-blue;
+$qld-syntax-properties : $core-default-color-code-violet;
+$qld-syntax-comments : $core-default-color-code-muted;
+$qld-textbox-border-color: $color-default-color-light-action-primary-hover;
+$qld-color-error-light: $core-default-color-status-error-lightest;
+$qld-color-success-light: $core-default-color-status-success-lightest;
 
 // Define new figma variables as SASS variables
-$qld-color-background: #FFFFFF;
-$qld-color-background--shade: #F5F5F5;
-$qld-color-light-background: #EFF4F9;
-$qld-color-light-background--shade: #E5EEF5;
-$qld-color-light-alt-background: #E8E8E8;
-$qld-color-light-alt-background--shade: #E0E0E0;
+$qld-color-background: $core-default-color-neutral-white;
+$qld-color-background--shade: $color-default-color-light-background-default-shade;
+$qld-color-light-background: $core-default-color-status-info-lightest;
+$qld-color-light-background--shade: $color-default-color-light-background-light-shade;
+$qld-color-light-alt-background: $color-default-color-light-background-alt;
+$qld-color-light-alt-background--shade: $color-default-color-light-background-alt-shade;
 
-$qld-color-dark-background: #09549F;
-$qld-color-dark-background--shade: #04498F;
-$qld-color-dark-alt-background: #05325F;
-$qld-color-dark-alt-background--shade: #052C53;
+$qld-color-dark-background: $core-default-color-brand-primary-sapphire-blue;
+$qld-color-dark-background--shade: $color-default-color-dark-background-default-shade;
+$qld-color-dark-alt-background: $core-default-color-brand-primary-dark-blue;
+$qld-color-dark-alt-background--shade: $color-default-color-dark-background-alt-shade;
 
 $qld-light-action-primary: $qld-sapphire-blue;
-$qld-light-action-primary-hover: $qld-button-dark-blue;
-$qld-light-action-secondary: #008635;
-$qld-light-action-secondary-hover: #005B23;
+$qld-light-action-primary-hover: $color-default-color-light-action-primary-hover;
+$qld-light-action-secondary: $color-default-color-light-action-secondary;
+$qld-light-action-secondary-hover: $color-default-color-light-action-secondary-hover;
 
-$qld-dark-action-primary: $qld-dark-green-dark;
-$qld-dark-action-primary-hover: $qld-light-green-dark;
-$qld-dark-action-secondary: #FFE500;
-$qld-dark-action-secondary-hover: #FFEF60;
-$qld-dark-action-text: $qld-text-darkest;
+$qld-dark-action-primary: $color-default-color-dark-action-primary;
+$qld-dark-action-primary-hover: $color-default-color-dark-action-primary-hover;
+$qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
+$qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
+$qld-dark-action-text: $color-default-color-dark-link-on-action;
 
 $primary : $qld-brand-primary;
 $primary-dark : $qld-brand-primary-dark;
@@ -223,6 +207,8 @@ $project-colors: (
   "light-background": $qld-light-background,
   "light-background-shade": $qld-light-background-shade,
   "light-border": $qld-light-border,
+  "light-link": $qld-light-link,
+
   "light-alt-background": $qld-color-light-alt-background,
   "light-alt-background-shade": $qld-color-light-alt-background--shade,
   "dark-background": $qld-color-dark-background,
@@ -234,8 +220,8 @@ $project-colors: (
 );
 
 // Merge maps
-$merged-theme-qld: map-merge($theme-colors, $qld-tokens);
-$theme-colors: map-merge($merged-theme-qld, $project-colors);
+$tokens: map-merge($theme-colors, $qld-tokens);
+$theme-colors: map-merge($tokens, $project-colors);
 
 // Cusotm GRID breakpoints: https://getbootstrap.com/docs/5.2/layout/grid/#variables
 $grid-breakpoints: (

package/src/components/common/header/Header.js

@@ -1,11 +0,0 @@
-import Component from "../../../js/QGDSComponent.js";
-import template from "./table.hbs?raw";
-
-export class Header {
-  // Use the global Component class to create a new instance of the Header component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
-
-  constructor(data = {}) {
-    return new Component(template, data);
-  }
-}