@qld-gov-au/qgds-bootstrap5 2.0.1 → 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.mdx

@@ -23,9 +23,7 @@ Each skip link's `href` attribute must reference an `id` of an element on the pa
 <main id="content" tabindex="-1">Main content</main>
 ```
 
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## See also
 

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/bs5/table/Table.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TableStories from "./table.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TableStories from "./table.stories";
 
 <Meta of={TableStories} />
 
 # Table
-<Canvas>
-  <Story of={TableStories.Default} />
-</Canvas>
+
+<Canvas of={TableStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/tabs/Tabs.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TabsStories from "./tabs.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TabsStories from "./tabs.stories";
 
 <Meta of={TabsStories} />
 
 # Tabs
-<Canvas>
-  <Story of={TabsStories.Default} />
-</Canvas>
+
+<Canvas of={TabsStories.SectionTabsDefaultDark} />
 
 ## Design resources
 

package/src/components/bs5/tabs/tabs.scss

@@ -111,12 +111,17 @@
     }
     .tabs-area {
       --qld-gutter-x: 0;
+      padding-inline: 0;
       .nav-tabs {
         margin-block-end: -1px;
       }
     }
     .tab-content {
       padding: 1.25rem;
+
+      .tab-pane p:last-of-type {
+        margin-block-end: 0;
+      }
     }
   }
   &.section-tabs {
@@ -135,6 +140,7 @@
       @include media-breakpoint-down(sm) {
         padding-inline: 1rem;
       }
+      margin-inline: auto;
       border-block-end: 1px solid;
       .nav-tabs {
         max-width: fit-content;
@@ -154,10 +160,25 @@
       }
     }
     .tab-content {
+      padding-inline: 4rem;
+
+      @include media-breakpoint-down(xl) {
+        padding-inline: 3rem;
+      }
+      @include media-breakpoint-down(lg) {
+        padding-inline: 2rem;
+      }
+      @include media-breakpoint-down(sm) {
+        padding-inline: 1rem;
+      }
+      margin-inline: auto;
       background-color: var(--qld-body-bg);
       border: 0;
       border-block-start: 0;
       margin-block-start: -1px;
+      .tab-pane p:last-of-type {
+        margin-block-end: 0;
+      }
       > article {
         max-width: var(--max-width);
         margin-inline: auto;
@@ -396,7 +417,7 @@
           display: flex;
           gap: 0.5rem;
           white-space: nowrap;
-          color: var(--qld-link-color);
+          color: var(--qld-nav-link-color);
           align-items: anchor-center;
           i {
             font-size: 1.125rem;

package/src/components/bs5/tag/Tag.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TagStories from "./tag.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TagStories from "./tag.stories";
 
 <Meta of={TagStories} />
 
 # Tag
-<Canvas>
-  <Story of={TagStories.Default} />
-</Canvas>
+
+<Canvas of={TagStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/typography/Typography.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TypographyStories from "./typography.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TypographyStories from "./typography.stories";
 
 <Meta of={TypographyStories} />
 
 # Typography
-<Canvas>
-  <Story of={TypographyStories.Default} />
-</Canvas>
+
+<Canvas of={TypographyStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/video/Video.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as VideoStories from "./video.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as VideoStories from "./video.stories";
 
 <Meta of={VideoStories} />
 
 # Video
-<Canvas>
-  <Story of={VideoStories.Default} />
-</Canvas>
+
+<Canvas of={VideoStories.Default} />
 
 ## Design resources
 

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/functions/_index.scss

@@ -0,0 +1 @@
+@forward "in-list";

package/src/css/functions/in-list.scss

@@ -0,0 +1,5 @@
+@use "sass:list";
+
+@function in-list($value, $list) {
+  @return list.index($list, $value) != null;
+}