@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.3

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

@@ -1,184 +1,269 @@
 .nav {
-    --#{$prefix}nav-link-color: var(--#{$prefix}brand-primary);
+  --#{$prefix}nav-link-color: var(--#{$prefix}brand-primary);
 }
 
 @include color-mode(dark) {
-    .nav {
-        --#{$prefix}nav-link-color: #FFF;
-    }
+  .nav {
+    --#{$prefix}nav-link-color: #fff;
+  }
 }
 
-
 .qld-side-navigation {
-
-    --sidenav-level-one-left-padding: 0;
-    --sidenav-level-two-padding: 2rem;
-    --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-underline-color: var(--#{$prefix}color-default-color-light-underline-hover);
-    --sidenav-visited-color: var(--#{$prefix}color-default-color-light-link);
-    --sidenav-active-color: var(--#{$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-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");
-
-    --sidenav-active-item-color: var(--light-text-heading);
-
+  --sidenav-level-one-left-padding: 0;
+  --sidenav-level-two-padding: 2rem;
+  --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-underline-color: var(
+    --#{$prefix}color-default-color-light-underline-hover
+  );
+  --sidenav-visited-color: var(--#{$prefix}color-default-color-light-link);
+  --sidenav-active-color: var(
+    --#{$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-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");
+
+  --sidenav-active-item-color: var(--light-text-heading);
+
+  --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+  --#{$prefix}accordion-bg: var(--#{$prefix}body-bg);
+  --#{$prefix}accordion-border-color: var(
+    --#{$prefix}color-default-color-light-border-default
+  );
+  --#{$prefix}accordion-border-width: 1px;
+  --#{$prefix}accordion-border-radius: 0;
+  --#{$prefix}accordion-inner-border-radius: 0;
+  --#{$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-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+      $accordion-button-active-icon
+    )};
+  --#{$prefix}accordion-btn-icon-width: 1.5rem;
+  --#{$prefix}accordion-btn-icon-transform: rotate(180deg);
+  --#{$prefix}accordion-btn-icon-transition: transform 0.25s ease-in;
+  --#{$prefix}accordion-btn-focus-box-shadow: none;
+  --#{$prefix}accordion-active-bg: var(--#{$prefix}accordion-btn-bg);
+  --#{$prefix}accordion-active-color: var(--#{$prefix}accordion-btn-color);
+  --#{$prefix}focus: var(--#{$prefix}light-focus);
+
+  .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
+    );
+  }
+
+  .alt & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}light-grey-alt);
+    --#{$prefix}accordion-btn-bg: var(--#{$prefix}grey);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}soft-grey);
+  }
+
+  // Shared 'Dark' theme variables
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+    --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+        $accordion-button-active-icon-dark
+      )};
+    --#{$prefix}accordion-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-btn-color: var(--#{$prefix}white);
+    --#{$prefix}accordion-active-color: var(--#{$prefix}white);
+    --#{$prefix}focus: var(--#{$prefix}dark-focus);
+  }
+
+  // Theme specific variables
+  .dark & {
+    --#{$prefix}accordion-bg: var(--#{$prefix}brand-primary);
+    --#{$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-border-color: var(--#{$prefix}dark-alt-border);
+  }
 }
 
 .dark,
 .dark-alt {
-    .qld-side-navigation {
-        --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2309ACFE' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");        
-        
-        --sidenav-hover-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --sidenav-hover-color: var(--#{$prefix}white);
-        --sidenav-hover-underline-color:  var(--#{$prefix}color-default-color-dark-underline-hover);
-        --sidenav-visited-color: var(--#{$prefix}white);
-        --sidenav-active-color: var(--#{$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);
-    }
+  .qld-side-navigation {
+    --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2309ACFE' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
+
+    --sidenav-hover-bg: var(
+      --#{$prefix}color-default-color-dark-background-default-shade
+    );
+    --sidenav-hover-color: var(--#{$prefix}white);
+    --sidenav-hover-underline-color: var(
+      --#{$prefix}color-default-color-dark-underline-hover
+    );
+    --sidenav-visited-color: var(--#{$prefix}white);
+    --sidenav-active-color: var(
+      --#{$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);
+  }
 }
 
-@include color-mode(dark) {
-
-}
-
-
 .qld-side-navigation {
-
-    .nav-title {
-        color: var(--#{$prefix}-headings-color);
-        line-height: 1.5;
-        margin: 0;
-        border-bottom: 2px solid var(--sidenav-heading-border-color);
-
-        a {
-            color: var(--#{$prefix}headings-color);
-            text-decoration: none;
-            font-weight: inherit;
-            font-size: 1rem;
-        }
-
-        .nav-link {
-            &:visited {
-                color: var(--#{$prefix}headings-color);
-            }
-        }
+  border: var(--qld-accordion-border-width) solid
+    var(--qld-accordion-border-color);
+  background-color: var(--#{$prefix}accordion-bg);
+
+  .nav-title {
+    color: var(--#{$prefix}-headings-color);
+    line-height: 1.5;
+    margin: 0;
+    border-bottom: 2px solid var(--sidenav-heading-border-color);
+
+    a {
+      color: var(--#{$prefix}headings-color);
+      text-decoration: none;
+      font-weight: inherit;
+      font-size: 1rem;
     }
 
     .nav-link {
-        padding: var(--sidenav-navlink-padding);
-        font-size: 0.875rem;
-        color: var(--body-color);
-        text-decoration: none;
-        transition-duration: 0s;
-
-        //.nav-link Hover state
-        &:hover {
-            background-color: var(--sidenav-hover-bg);
-            color: var(--sidenav-hover-color);
-            text-decoration: underline;
-            text-underline-offset: 0.25rem;
-            text-decoration-thickness: 2px;
-        }
-    }
+      line-height: 1.5rem;
 
-    a.nav-link {
-        &:visited {
-            color: var(--sidenav-visited-color);
-            &:hover {
-                color: var(--sidenav-hover-color);
-                text-decoration-color: var(--sidenav-hover-underline-color);
-            }
-        }
+      &:visited {
+        color: var(--#{$prefix}headings-color);
+      }
+    }
+  }
+
+  .nav-link {
+    padding: var(--sidenav-navlink-padding);
+    font-size: 0.875rem;
+    color: var(--body-color);
+    text-decoration: none;
+    transition-duration: 0s;
+    line-height: 1.25rem;
+
+    //.nav-link Hover state
+    &:hover {
+      background-color: var(--sidenav-hover-bg);
+      color: var(--sidenav-hover-color);
+      text-decoration: underline;
+      text-underline-offset: 0.25rem;
+      text-decoration-thickness: 2px;
     }
 
-    .nav-item.active {
-        color: var(--sidenav-active-color);
+    &:focus-visible {
+      box-shadow: none;
     }
+  }
+
+  a.nav-link {
+    &:visited {
+      color: var(--sidenav-visited-color);
+      &:hover {
+        color: var(--sidenav-hover-color);
+        text-decoration-color: var(--sidenav-hover-underline-color);
+      }
+    }
+  }
 
-    //Side navigation (ul.nav) 
-    
-    ul.nav {
-        
-        //Side navigation all items remove all bullets
-        //Reset all left padding  
-        ul, ol {
-            list-style: none;
-            padding-left: 0;
-        }
+  .nav-item.active {
+    color: var(--sidenav-active-color);
+  }
 
-        display: flex;
-        flex-direction: column;
+  //Side navigation (ul.nav)
 
-        //Specifically target the first level LI's only
-        > li.nav-item {
+  ul.nav {
+    //Side navigation all items remove all bullets
+    //Reset all left padding
+    ul,
+    ol {
+      list-style: none;
+      padding-left: 0;
+    }
 
-            border-top: 1px solid var(--sidenav-item-border-color);
+    display: flex;
+    flex-direction: column;
 
-            &:first-child {
-                border-top: none;
-            }
+    //Specifically target the first level LI's only
+    > li.nav-item {
+      border-top: 1px solid var(--sidenav-item-border-color);
 
-        }
-
-        //All nav items, all levels
-        li.nav-item {
-
-            //Level two menu LI's
-            > ul > li { border-top: 1px solid var(--sidenav-subitem-border-color) }
-            > ul > li  > .nav-link { padding-left: var( --sidenav-level-two-padding); }
-            
-            //Level three menu LI's
-            > ul > li > ul > li { border-top: none }
-            > ul > li > ul > li > .nav-link {  padding-left: var( --sidenav-level-three-padding); }
-
-             //li .nav-link.active
-             &.active {
-                .nav-link {
-                    font-weight: 600;
-                    color: var(--light-text-heading);
-                    text-decoration: none;
-                    pointer-events: none;
-                }
-            }
+      &:first-child {
+        border-top: none;
+      }
+    }
 
+    //All nav items, all levels
+    li.nav-item {
+      //Level two menu LI's
+      > ul > li {
+        border-top: 1px solid var(--sidenav-subitem-border-color);
+      }
+      > ul > li > .nav-link {
+        padding-left: var(--sidenav-level-two-padding);
+      }
+
+      //Level three menu LI's
+      > ul > li > ul > li {
+        border-top: none;
+      }
+      > ul > li > ul > li > .nav-link {
+        padding-left: var(--sidenav-level-three-padding);
+      }
+
+      //li .nav-link.active
+      &.active {
+        .nav-link {
+          font-weight: 600;
+          color: var(--light-text-heading);
+          text-decoration: none;
+          pointer-events: none;
         }
+      }
+    }
 
-        //Add stalks to a UL menu (usually level 3) 
-        // <ul class="nav ... with-stalks">...</ul> 
-        .with-stalks {
-
-            .nav-item {
-                
-                position: relative;
-            
-                &:before {
-                    content: "";
-                    position: absolute;
-                    background: escape-svg(var(--sidenav-submenu-divider));
-                    background-repeat: no-repeat;
-                    // background-position: center center;
-                    top: 1rem;
-                    left: 2rem;
-                    bottom: 0;
-                    width: 1rem;
-                }
-            }
+    //Add stalks to a UL menu (usually level 3)
+    // <ul class="nav ... with-stalks">...</ul>
+    .with-stalks {
+      .nav-item {
+        position: relative;
+
+        &:before {
+          content: "";
+          position: absolute;
+          background: escape-svg(var(--sidenav-submenu-divider));
+          background-repeat: no-repeat;
+          // background-position: center center;
+          top: 1rem;
+          left: 2rem;
+          bottom: 0;
+          width: 1rem;
         }
-
+      }
     }
-
+  }
+  .nav-wrapper {
+    padding: 0.5rem 1rem;
+  }
+  @include media-breakpoint-up(lg) {
+    border: none;
+
+    .nav-wrapper {
+      padding: 0;
+    }
+  }
 }
-

package/src/components/bs5/skiplinks/skipLinks.functions.js

@@ -1,5 +1,3 @@
-import { isFocusable } from "../../../js/utils";
-
 /**
  * Checks whether target elements in a list of skip links are valid - ie they can receive focus.
  * @returns {boolean} Return true if skip links are valid, false if there is a problem.
@@ -17,13 +15,6 @@ export function validateSkipLinks() {
       );
       return false;
     }
-    // check if target is focusable
-    if (!isFocusable(target)) {
-      console.error(
-        `A skip link with label "${item.textContent}" is targeting a non-focusable element with id "${targetId}". Make sure the element is natively focusable, or assign a tab index of -1.`,
-      );
-      return false;
-    }
     return true;
   });
 }

package/src/components/bs5/skiplinks/skipLinks.test.js

@@ -72,7 +72,6 @@ describe("Skip Links", () => {
 
     expect(resolvedMessages).toEqual([
       'A skip link with label "Skip to nowhere" is targeting a non-existent element with id "i-dont-exist".',
-      'A skip link with label "Skip to unfocusable" is targeting a non-focusable element with id "unfocusable". Make sure the element is natively focusable, or assign a tab index of -1.',
     ]);
 
     // JSDOM does not implement navigation so must manual test for main functionality

package/src/components/common/layout/container.scss

@@ -19,4 +19,9 @@
   max-width: var(--qld-container-max-width);
   padding-left: var(--qld-container-padding-x);
   padding-right: var(--qld-container-padding-x);
+
+  &.is-extended {
+    // Maximum width for extended containers, 100rem (or 1600px)
+    --qld-container-max-width: 100rem;
+  }
 }

package/src/components/common/layout/content.scss

@@ -1,13 +1,21 @@
-.qld-content-body {
-  .emphasis {
-    margin: 4rem -2rem;
+.content-emphasis {
+  // Negative margin on the emphasis section. Capped to outer container padding,
+  // to prevent overflow and horizontal scrollbar
+  --margin-offset: max(-2rem, calc(var(--qld-container-padding-x) * -1));
+
+  margin-left: var(--margin-offset);
+  margin-right: var(--margin-offset);
+
+  padding: 2.5rem var(--qld-container-padding-x);
+
+  @include media-breakpoint-up(lg) {
     padding: 4rem 2rem;
     overflow: visible;
+  }
 
-    & p:last-child,
-    & ul:last-child,
-    & ol:last-child {
-      margin-bottom: 0;
-    }
+  & p:last-child,
+  & ul:last-child,
+  & ol:last-child {
+    margin-bottom: 0;
   }
 }

package/src/css/main.scss

@@ -19,11 +19,6 @@ $font-family-sans-serif:
   "Noto Color Emoji" !default;
 $font-family-sitename: "Fira Sans";
 
-//Icons
-@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
-//TODO: should we pull from ../../node_modules/@fortawesome/fontawesome-free/css/all.css instead of cdn
-@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-
 //Prefix to namespace design-system classes
 $prefix: "qld-";
 $enable-cssgrid: true;
@@ -39,8 +34,6 @@ $enable-dark-mode: true;
 @import "./qld-variables";
 @import "variables";
 
-// @import "./scss/qld-variables-dark"; //future state
-
 // 3. Include remainder of bootstrap
 // 3.1 Required
 @import "../../node_modules/bootstrap/scss/maps";

package/src/css/qld-theme.scss

@@ -55,6 +55,7 @@
 // Light theme
 .light {
   @include light-theme-properties;
+  --qld-body-bg: var(--qld-light-background);
   --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
 }
 

package/src/css/utilities/_index.scss

@@ -1 +1,2 @@
 @import "responsive-visually-hidden";
+@import "sr-only";

package/src/css/utilities/sr-only.scss

@@ -0,0 +1,5 @@
+///
+/// Screen reader only utility - hides content visually while keeping it accessible to screen readers
+.sr-only {
+  @include visually-hidden();
+}

package/src/js/qld.bootstrap.js

@@ -9,10 +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 {
-  positionQuickExit,
-  initQuickexit,
-} from "./../components/bs5/quickexit/quickexit.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";
 import {
@@ -24,8 +21,6 @@ import { initTabsScroll } from "./../components/bs5/tabs/tabs.functions";
 import { initGlobalAlerts } from "./../components/bs5/globalAlert/globalAlert.function";
 import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.functions";
 
-window.addEventListener("scroll", positionQuickExit, true);
-window.addEventListener("resize", positionQuickExit, true);
 window.addEventListener("click", initQuickexit, true);
 window.addEventListener("keydown", initQuickexit, true);
 
@@ -151,12 +146,9 @@ window.addEventListener("DOMContentLoaded", () => {
     initBreadcrumb();
 
     // Quick exit
-    window.addEventListener("scroll", positionQuickExit, true);
-    window.addEventListener("resize", positionQuickExit, true);
     window.addEventListener("click", initQuickexit, true);
     window.addEventListener("keydown", initQuickexit, true);
     initQuickexit();
-    positionQuickExit();
 
     // Accordion
     let accordionToggleButton = document.querySelectorAll(

package/src/stories/documentation/_storybookDocsTabs.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+
+/**
+ * StorybookDocsTabs component renders a tabbed interface for displaying documentation sections.
+ *
+ * @param {Array} props.tabs - Array of tab objects, each containing id, label, and content to display in the tabbed interface.
+ * @returns {JSX.Element} Tabbed documentation interface.
+ */
+export const StorybookDocsTabs = ({ tabs }) => {
+  useEffect(() => {
+    // This code will run once the component has mounted
+    initTabs();
+  }, []);
+
+  function initTabs() {
+    let tabButtons = document.querySelectorAll(".tablinks");
+    tabButtons.forEach(function (tabButton) {
+      tabButton.addEventListener("click", openTab);
+    });
+  }
+
+  function openTab(evt) {
+    const targetId = evt.currentTarget.dataset.targetid;
+
+    ["tabcontent", "tablinks"].forEach((cls) =>
+      document
+        .querySelectorAll(`.${cls}`)
+        .forEach((el) => el.classList.remove("active")),
+    );
+
+    if (targetId) {
+      document.getElementById(targetId)?.classList.add("active");
+      evt.currentTarget.classList.add("active");
+    }
+  }
+  return (
+    <>
+      <ul className="qld-sb-docs-tab sb-unstyled">
+        {tabs &&
+          tabs.map((tab, index) => (
+            <li key={`tab-${index}`}>
+              <button
+                className={`tablinks ${index === 0 ? "active" : ""}`}
+                data-targetid={tab.id}
+              >
+                {tab.label}
+              </button>
+            </li>
+          ))}
+      </ul>
+      {tabs?.map((tab, index) => (
+        <div
+          id={tab.id}
+          key={`tab-content-${index}`}
+          className={`tabcontent ${index === 0 ? "active" : ""}`}
+        >
+          {tab.heading && <h3>{tab.heading}</h3>}
+          {tab.content}
+        </div>
+      ))}
+    </>
+  );
+};