@qld-gov-au/qgds-bootstrap5 2.1.0 → 2.1.1

package/src/components/bs5/sidenav/sidenav.scss

@@ -14,8 +14,8 @@
   --sidenav-level-three-padding: 3.5rem;
   --sidenav-navlink-padding: 1rem;
 
-  --sidenav-hover-bg: var(--#{$prefix}extra-light-grey);
-  --sidenav-hover-color: var(--#{$prefix}brand-primary);
+  --sidenav-hover-bg: var(--#{$prefix}neutral-lightest);
+  --sidenav-hover-color: var(--#{$prefix}light-action-primary);
   --sidenav-hover-underline-color: var(
     --#{$prefix}color-default-color-light-underline-hover
   );
@@ -24,9 +24,9 @@
     --#{$prefix}color-default-color-light-text-heading
   );
 
-  --sidenav-heading-border-color: #{$qld-brand-secondary};
-  --sidenav-item-border-color: #{$qld-soft-grey};
-  --sidenav-subitem-border-color: #{$qld-light-grey};
+  --sidenav-heading-border-color: var(--#{$prefix}light-accent);
+  --sidenav-item-border-color: var(--#{$prefix}light-border-alt);
+  --sidenav-subitem-border-color: var(--#{$prefix}neutral-lighter);
 
   --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='var(--#{$prefix}color-light-border)' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
 
@@ -43,7 +43,7 @@
   --#{$prefix}accordion-btn-padding-x: 1rem;
   --#{$prefix}accordion-btn-padding-y: 1rem;
   --#{$prefix}accordion-btn-color: var(--#{$prefix}link-color);
-  --#{$prefix}accordion-btn-bg: var(--#{$prefix}extra-light-grey);
+  --#{$prefix}accordion-btn-bg: var(--#{$prefix}neutral-lightest);
   --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
   --#{$prefix}accordion-btn-active-icon: #{escape-svg(
       $accordion-button-active-icon
@@ -59,15 +59,13 @@
   .light & {
     --#{$prefix}accordion-bg: var(--#{$prefix}light-background);
     --#{$prefix}accordion-btn-bg: var(--#{$prefix}light-background-shade);
-    --#{$prefix}accordion-border-color: var(
-      --#{$prefix}color-default-color-light-border-light
-    );
+    --#{$prefix}accordion-border-color: var(--#{$prefix}light-border);
   }
 
   .alt & {
-    --#{$prefix}accordion-bg: var(--#{$prefix}light-grey-alt);
-    --#{$prefix}accordion-btn-bg: var(--#{$prefix}grey);
-    --#{$prefix}accordion-border-color: var(--#{$prefix}soft-grey);
+    --#{$prefix}accordion-bg: var(--#{$prefix}light-alt-background);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}neutral-light);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}light-border-alt);
   }
 
   // Shared 'Dark' theme variables
@@ -85,14 +83,14 @@
 
   // Theme specific variables
   .dark & {
-    --#{$prefix}accordion-bg: var(--#{$prefix}brand-primary);
+    --#{$prefix}accordion-bg: var(--#{$prefix}dark-background);
     --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-background-shade);
     --#{$prefix}accordion-border-color: var(--#{$prefix}dark-border);
   }
 
   .dark-alt & {
-    --#{$prefix}accordion-bg: var(--#{$prefix}dark-blue);
-    --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-blue-shade);
+    --#{$prefix}accordion-bg: var(--#{$prefix}dark-alt-background);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-alt-background-shade);
     --#{$prefix}accordion-border-color: var(--#{$prefix}dark-alt-border);
   }
 }
@@ -114,10 +112,10 @@
       --#{$prefix}color-default-color-dark-text-heading
     );
 
-    --sidenav-heading-border-color: var(--#{$prefix}brand-secondary);
-    --sidenav-item-border-color: var(--#{$prefix}brand-primary-light);
-    --sidenav-subitem-border-color: var(--#{$prefix}brand-primary-light);
-    --sidenav-active-item-color: var(--#{$prefix}white);
+    --sidenav-heading-border-color: var(--#{$prefix}dark-accent);
+    --sidenav-item-border-color: var(--#{$prefix}dark-alt-border);
+    --sidenav-subitem-border-color: var(--#{$prefix}dark-border);
+    --sidenav-active-item-color: var(--#{$prefix}neutral-white);
   }
 }
 

package/src/components/bs5/table/table.scss

@@ -1,93 +1,103 @@
 .qld-table {
-
-    border: 1px solid var(--qld-light-grey);
+  border: 1px solid var(--qld-neutral-lighter);
+  border-radius: 0.75rem;
+  margin-bottom: 1rem;
+
+  // DS includes a version of the table without borders ("quiet table").
+  // This is achieved by setting the border on a wrapping .qld-table--borderless class
+  &--borderless {
+    border: 1px solid transparent;
+  }
+
+  .table {
+    --qld-table-border-color: var(--qld-neutral-lighter);
+    --qld-table-header-color: var(--qld-light-text-heading);
+    --qld-table-cell-color: var(--qld-light-text-text);
+    --qld-table-striped-bg: var(--qld-neutral-lightest);
+
+    margin-bottom: 0;
     border-radius: 0.75rem;
-    margin-bottom: 1rem;
 
-    // DS includes a version of the table without borders ("quiet table").
-    // This is achieved by setting the border on a wrapping .qld-table--borderless class
-    &--borderless {
-        border: 1px solid transparent;
+    //required to maintain effective border-radius on the table
+    overflow: hidden;
+
+    // Override Bootstrap's default odd-row striping to use even rows
+    &.table-striped {
+      > tbody > tr:nth-of-type(odd) > * {
+        --qld-table-accent-bg: transparent;
+        --qld-table-bg-type: transparent;
+      }
+
+      > tbody > tr:nth-of-type(even) > * {
+        --qld-table-accent-bg: var(--qld-table-striped-bg);
+        --qld-table-bg-type: var(--qld-table-striped-bg);
+      }
+    }
+
+    caption {
+      caption-side: top;
+      color: var(--qld-headings-color);
+      padding: 0.75rem;
+      line-height: 2rem;
+      font-weight: 600;
+      font-size: 1.25rem;
+      border-bottom: 1px solid var(--qld-table-border-color);
+    }
+
+    .sub-caption {
+      color: var(--qld-light-text-lighter);
+      font-size: 0.875rem;
+      font-weight: 400;
+      line-height: 1.25rem;
+      display: table-row;
     }
 
-    .table {
-        --qld-table-border-color: var(--qld-light-grey);
-        --qld-table-header-color: var(--qld-light-text-heading);
-        --qld-table-cell-color: var(--qld-light-text-text);
-        --qld-table-striped-bg: var(--qld-extra-light-grey);
-
-        margin-bottom: 0;
-        border-radius: 0.75rem;
-
-        //required to maintain effective border-radius on the table
-        overflow: hidden;
-
-        caption {
-            caption-side: top;
-            color: var(--qld-headings-color);
-            padding: 0.75rem;
-            line-height: 2rem;
-            font-weight: 600;
-            font-size: 1.25rem;
-            border-bottom: 1px solid var(--qld-table-border-color);
-        }
-
-        .sub-caption {
-            color: var(--qld-dark-grey-muted);
-            font-size: 0.875rem;
-            font-weight: 400;
-            line-height: 1.25rem;
-            display: table-row;
-        }
-
-        thead th,
-        thead td {
-            border-bottom: 2px solid var(--qld-brand-secondary);
-        }
-
-        th {
-            color: var(--qld-table-header-color);
-            padding: 1.25rem 0.75rem; 
-        }
-
-        td {
-            color: var(--qld-table-cell-color);
-            padding: 0.75rem; 
-        }
-
-        tbody tr {
-            border-bottom: 1px solid var(--qld-table-border-color);
-        }
-
-        tfoot th,
-        tfoot td {
-            border-top: 2px solid $qld-brand-secondary;
-            border-bottom: 0;
-            font-weight: 600;
-            padding: 0.75rem;
-        }
+    thead th,
+    thead td {
+      border-bottom: 2px solid var(--qld-light-accent);
+    }
+
+    th {
+      color: var(--qld-table-header-color);
+      padding: 1.25rem 0.75rem;
+    }
 
+    td {
+      color: var(--qld-table-cell-color);
+      padding: 0.75rem;
     }
 
+    tbody tr {
+      border-bottom: 1px solid var(--qld-table-border-color);
+    }
+
+    tfoot th,
+    tfoot td {
+      border-top: 2px solid var(--qld-light-accent);
+      border-bottom: 0;
+      font-weight: 600;
+      padding: 0.75rem;
+    }
+  }
+
+  //Build a bootstrap ".table-dark" class dynamically, passing in a background colour
+  @include table-variant("dark", $color-default-color-dark-background-default);
+
+  //Then, we extend .table-dark with some additional rules
+  .table-dark {
+    --qld-table-border-color: var(--qld-dark-border);
+    --qld-table-header-color: var(--qld-dark-text-heading);
+    --qld-table-cell-color: var(--qld-dark-text-text);
+    --qld-table-striped-bg: var(--qld-dark-background-shade);
+
+    caption,
+    .sub-caption {
+      background-color: var(--qld-dark-background);
+      color: var(--qld-dark-text-text);
+    }
 
-    //Build a bootstrap ".table-dark" class dynamically, passing in a background colour
-    @include table-variant("dark", #09549F);
-
-    //Then, we extend .table-dark with some additional rules 
-    .table-dark {
-        --qld-table-border-color: var(--qld-dark-border);
-        --qld-table-header-color: var(--qld-white);
-        --qld-table-cell-color: var(--qld-white);
-        --qld-table-striped-bg: var(--qld-extra-light-grey);
-        
-        caption,
-        .sub-caption {
-            background-color: #09549F;
-            color: #FFF;
-        }
-
-        thead th {
-            background-color: #04498F;
-        }
+    thead th {
+      background-color: var(--qld-dark-background-shade);
     }
-}
+  }
+}

package/src/css/main.scss

@@ -152,3 +152,6 @@ $enable-dark-mode: true;
 
 // Print
 @import "qld-print";
+
+// Reduced motion
+@import "qld-reduced-motion";

package/src/css/mixins/focusable.scss

@@ -1,6 +1,6 @@
 ///
 /// Default focus styles for use in buttons etc. Resets :focus and uses :focus-visible instead which only appears on keyboard interaction.
-/// @param {Boolean} $offsetOutline [true] - Offset the focus ring by 2px.
+/// @param {Boolean|number} $offsetOutline [true] - Offset the focus ring by 2px.
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
 /// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput

package/src/css/qld-reduced-motion.scss

@@ -0,0 +1,51 @@
+@media (prefers-reduced-motion: reduce) {
+  .show,
+  .show:after,
+  .show:before,
+  a::after,
+  a::before,
+  a.dropdown-item,
+  .collapsed,
+  .accordion-toggle-btn--closed::after,
+  .accordion-toggle-btn--open::after,
+  .video-thumbnail .video-thumbnail-image:before,
+  * {
+    transition-duration: 0.001ms !important;
+    animation-duration: 0.001ms !important;
+    transition: none !important;
+    animation: none !important;
+  }
+  a.dropdown-item,
+  a.dropdown-item:hover {
+    gap: 1rem !important;
+  }
+  a.dropdown-item,
+  a.dropdown-item:hover,
+  a.dropdown-item:hover::after {
+    padding-inline-end: 0.5rem !important;
+    transform: none !important;
+    top: unset;
+  }
+  .qld-cta-link:hover {
+    gap: 0.5rem !important;
+  }
+  .link-column .nav-item .nav-link::after,
+  .link-column .nav-item .nav-link:hover::after {
+    margin-inline-end: 0.5rem;
+  }
+  .link-column .all-link .qld-cta-link:hover {
+    padding-inline-end: 0.5rem;
+  }
+  .qld-tabs .nav-tabs {
+    scroll-behavior: unset !important;
+  }
+  .card.card-arrow:hover .qld-icon {
+    transform: translateX(0rem);
+  }
+  @media (max-width: 991.98px) {
+    .navbar.show > .container,
+    .navbar.vertical.show > .container {
+      transform: translateX(0);
+    }
+  }
+}

package/src/css/qld-tokens.scss

@@ -16,15 +16,15 @@ $color-default-color-dark-crest-fill: #ffffff !default;
 $color-default-color-dark-focus-default: #c6ffff !default;
 $color-default-color-dark-link-default: #ffffff !default;
 $color-default-color-dark-link-on-action: #001c37 !default;
-$color-default-color-dark-link-visited: #e1bbee !default;
+$color-default-color-dark-link-visited: #F2CDFF !default;
 $color-default-color-dark-site-title: #ffffff !default;
 $color-default-color-dark-text-default: #ffffff !default;
 $color-default-color-dark-text-heading: #ffffff !default;
 $color-default-color-dark-text-lighter: #deebf9 !default;
 $color-default-color-dark-underline-default-hover: #ffffff !default;
 $color-default-color-dark-underline-default: #b5cce2 !default;
-$color-default-color-dark-underline-visited-hover: #e1bbee !default;
-$color-default-color-dark-underline-visited: #e1c2ff !default;
+$color-default-color-dark-underline-visited-hover: #F2CDFF !default;
+$color-default-color-dark-underline-visited: #C6AED9 !default;
 
 /* Light palettes */
 $color-default-color-light-accent-design-accent: #84d3ff !default;

package/src/css/qld-type.scss

@@ -6,12 +6,11 @@ body {
 
 .qld-content-body {
   p {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
   }
-
   ul,
-  ol,
-  p {
+  ol{
     line-height: 1.75;
   }
 
@@ -77,12 +76,6 @@ a.nav-link {
   border-radius: 0;
 }
 
-figure > figcaption {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-}
-
 a.nostyle {
   text-decoration: unset;
   text-underline-offset: unset;
@@ -93,9 +86,10 @@ a.nostyle {
   }
 }
 
-::-moz-selection {
-  background: var(--qld-selection-bg);
-  text-shadow: none;
+figure > figcaption {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
 }
 
 ::selection {

package/src/js/constants.js

@@ -0,0 +1,10 @@
+/**
+ * Media query breakpoints. These must be kept in sync with breakpoints defined in sass variables.
+ */
+export const breakpoints = {
+  xs: 0,
+  sm: 400,
+  md: 700,
+  lg: 992,
+  xl: 1312,
+};

package/src/js/qld.bootstrap.js

@@ -9,6 +9,7 @@ import {
 } from "./../components/bs5/video/video.functions";
 import { initializeNavbar } from "./../components/bs5/navbar/navbar.functions";
 import { initBreadcrumb } from "./../components/bs5/breadcrumbs/breadcrumbs.functions";
+import { initDateInput } from "../components/bs5/dateinput/dateinput.functions";
 import { initQuickexit } from "./../components/bs5/quickexit/quickexit.functions";
 //import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
 import { toggleSearch } from "./../components/bs5/header/header.functions";
@@ -23,122 +24,121 @@ import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.funct
 
 window.addEventListener("click", initQuickexit, true);
 window.addEventListener("keydown", initQuickexit, true);
-
 window.addEventListener("DOMContentLoaded", () => {
-  (() => {
-    backToTop();
+  backToTop();
 
-    initTabsScroll();
+  initTabsScroll();
 
-    initGlobalAlerts();
+  initGlobalAlerts();
 
-    // Footer FormIO Action
-    // Note: This is added here, as there is an issue with breadcrumbShorten() function.
-    //       Will move this once that issue is fixed.
-    /*   
+  // Footer FormIO Action
+  // Note: This is added here, as there is an issue with breadcrumbShorten() function.
+  //       Will move this once that issue is fixed.
+  /*   
       const footerFormio = document.getElementById("qg-feedback-toggle");
       if (footerFormio) {
         displayFeedbackForm();
       }
    */
-    //Header search
-    let headerSearchButton = document.getElementById(
-      "qld-header-toggle-search-button",
-    );
-    if (headerSearchButton) {
-      headerSearchButton.addEventListener("click", toggleSearch);
-    }
-
-    // Get all forms with the class 'site-search'
-    let forms = document.querySelectorAll(".site-search");
-
-    forms.forEach((form) => {
-      // Get the search input within the current form
-      let searchInput = form.querySelector(".qld-search-input input");
-
-      if (searchInput) {
-        let timeout;
-
-        // Add keyup event listener to the search input
-        searchInput.addEventListener("input", function (e) {
-          clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            const value = e.target.value.trim();
-            showSuggestions(value, value === "", form);
-          }, 300);
-        });
-
-        // Attach event listener to form submit
-        form.addEventListener("submit", function (event) {
-          event.preventDefault();
-          const query = searchInput.value.trim();
-          submitSearchForm(query, form);
-        });
-      }
-    });
-
-    //Header - get the <header> element
-    let header = document.querySelector("header");
-
-    if (header) {
-      // Get the current page URL without query string parameters
-      let 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
-    initBreadcrumb();
-
-    // Quick exit
-    window.addEventListener("click", initQuickexit, true);
-    window.addEventListener("keydown", initQuickexit, true);
-    initQuickexit();
-
-    // Accordion
-    let accordionToggleButton = document.querySelectorAll(
-      ".accordion-toggle-btn",
-    );
-
-    accordionToggleButton.forEach(function (toggleButton) {
-      toggleButton.addEventListener("click", accordionToggleAll);
-
-      let accordionButtons = toggleButton
-        .closest(".accordion-group")
-        .querySelectorAll(".accordion-button");
+  //Header search
+  let headerSearchButton = document.getElementById(
+    "qld-header-toggle-search-button",
+  );
+  if (headerSearchButton) {
+    headerSearchButton.addEventListener("click", toggleSearch);
+  }
+
+  // Get all forms with the class 'site-search'
+  let forms = document.querySelectorAll(".site-search");
+
+  forms.forEach((form) => {
+    // Get the search input within the current form
+    let searchInput = form.querySelector(".qld-search-input input");
+
+    if (searchInput) {
+      let timeout;
+
+      // Add keyup event listener to the search input
+      searchInput.addEventListener("input", function (e) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          const value = e.target.value.trim();
+          showSuggestions(value, value === "", form);
+        }, 300);
+      });
 
-      accordionButtons.forEach(function (button) {
-        button.addEventListener("click", accordionToggleAllButtonState);
+      // Attach event listener to form submit
+      form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        const query = searchInput.value.trim();
+        submitSearchForm(query, form);
       });
+    }
+  });
+
+  //Header
+  // Get the <header> element
+  let header = document.querySelector("header");
+  if (header) {
+    // Get the current page URL without query string parameters
+    let 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
+  initBreadcrumb();
+
+  // Quick exit
+  window.addEventListener("click", initQuickexit, true);
+  window.addEventListener("keydown", initQuickexit, true);
+  initQuickexit();
+
+  // Accordion
+  let accordionToggleButton = document.querySelectorAll(
+    ".accordion-toggle-btn",
+  );
+
+  accordionToggleButton.forEach(function (toggleButton) {
+    toggleButton.addEventListener("click", accordionToggleAll);
+
+    let accordionButtons = toggleButton
+      .closest(".accordion-group")
+      .querySelectorAll(".accordion-button");
+
+    accordionButtons.forEach(function (button) {
+      button.addEventListener("click", accordionToggleAllButtonState);
     });
+  });
 
-    let inPageLinks = document.querySelectorAll('a[href^="#"]');
+  let inPageLinks = document.querySelectorAll('a[href^="#"]');
 
-    accordionHashLinks();
-    window.onhashchange = accordionHashLinks;
-    inPageLinks.forEach(function (link) {
-      link.addEventListener("click", accordionHashLinks);
-    });
+  accordionHashLinks();
+  window.onhashchange = accordionHashLinks;
+  inPageLinks.forEach(function (link) {
+    link.addEventListener("click", accordionHashLinks);
+  });
 
-    // Video
-    let videoThumbnails = document.querySelectorAll(".video-thumbnail");
+  // Video
+  let videoThumbnails = document.querySelectorAll(".video-thumbnail");
 
-    videoThumbnails.forEach(function (thumbnail) {
-      thumbnail.addEventListener("click", videoEmbedPlay);
-    });
+  videoThumbnails.forEach(function (thumbnail) {
+    thumbnail.addEventListener("click", videoEmbedPlay);
+  });
 
-    let videoTranscripts = document.querySelectorAll(
-      ".video .accordion .accordion-button",
-    );
+  let videoTranscripts = document.querySelectorAll(
+    ".video .accordion .accordion-button",
+  );
 
-    videoTranscripts.forEach(function (transcript) {
-      transcript.addEventListener("click", videoTranscriptTitle);
-    });
+  videoTranscripts.forEach(function (transcript) {
+    transcript.addEventListener("click", videoTranscriptTitle);
+  });
+
+  initDateInput();
 
-    // Skip Links
-    validateSkipLinks();
-  })();
+  // Skip Links
+  validateSkipLinks();
 });

package/src/js/utils.js

@@ -186,6 +186,8 @@ export function createFocusTrap(container, options = {}) {
     activate,
     deactivate,
     update: updateFocusableElements,
-    isActive: () => isActive,
+    get isActive() {
+      return isActive;
+    },
   };
 }