@qld-gov-au/qgds-bootstrap5 2.0.6 → 2.0.8

package/src/components/bs5/mainContainerWrapper/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/metaDcTerms/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/metaOpenGraph/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/modal/Modal.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks"
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks"
 import * as ModalStories from "./modal.stories"
 
 import { Modal } from './Modal.js';

package/src/components/bs5/modal/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/navbar/navbar.scss

@@ -168,7 +168,6 @@
                 color: var(--link-color);
                 text-decoration-color: inherit;
                 padding: 0;
-                // transition:none;
                 &:after {
                   content: "";
                   content: none;
@@ -211,6 +210,15 @@
       width: 100%;
       border-block-end: 0;
       margin-block-end: 0;
+      position: relative;
+      &::before {
+        content: "";
+        position: absolute;
+        border-inline-start: 5px solid var(--link-border-color);
+        left: -5px;
+        top: 0;
+        bottom: calc(var(--border-width) *  -1);      
+      }
       &:hover,
       &.active {
         border-block-end: 0;
@@ -218,6 +226,9 @@
           margin-block-end: 0;
           border-block-end: 0;
         }
+      &::before {
+        border-inline-start: 0.25rem solid var(--link-border-color-hover);
+      }
       }
       &:hover {
         .qld-icon {
@@ -284,6 +295,9 @@
   /* House keeping */
   --icon-dir: 1;
   --navbar-max-width: 26.25rem;
+  --border-width: 1px;
+  --nav-link-padding-block: 0.625rem;
+
   :dir(rtl) {
     --icon-dir: -1;
   }
@@ -434,6 +448,9 @@
     display: none;
   }
   .container {
+    --padding-block-size: calc(var(--nav-link-padding-block) * 2);
+    min-height: calc(var(--padding-block-size) + 2rem);
+    min-height: round(up, calc(var(--padding-block-size) + 2rem), 1px);
     position: relative;
   }
   .nav-item {
@@ -453,6 +470,7 @@
       background-color: var(--dropdown-bg-color);
       border-block-end: var(--horizontal-bar-border-width) solid var(--dropdown-bg-color);
       font-weight: 600;
+      z-index: 20;
       &:hover {
         background-color: var(--dropdown-bg-color);
         border-block-end: var(--horizontal-bar-border-width) solid var(--link-border-color-hover);
@@ -475,7 +493,7 @@
   .navbar-nav a.nav-link,
   a.dropdown-item {
     color: var(--link-color);
-    padding-block: 0.625rem;
+    padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
     line-height: 2rem;
@@ -517,10 +535,7 @@
     }
   }
   .dropdown-menu.show {
-    --horizontal-bar-border-widthx2: calc(
-      var(--horizontal-bar-border-width) * 2
-    );
-    margin-block-start: calc(var(--horizontal-bar-border-widthx2) - 1px);
+    margin-block-start: calc(var(--horizontal-bar-border-width) - var(--border-width));
     inset-inline: 0;
     background-color: var(--dropdown-bg-color);
     padding: 4rem;
@@ -533,16 +548,21 @@
     grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
     row-gap: 0;
+    z-index: 10;
+    border-width: 0;
     @include media-breakpoint-up(xl) {
       column-gap: 4rem;
       row-gap: 0;
     }
+    @include media-breakpoint-up(md) {
+      padding-block: 3rem;
+    }
     &::before {
       content: "";
       position: absolute;
       height: var(--horizontal-bar-border-width);
       inset: 0;
-      inset-block-start: calc(var(--horizontal-bar-border-width) * -1);
+      inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
     li {
@@ -563,9 +583,9 @@
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
-        border-block-end: 1px solid var(--border-color);
+        border-block-end: var(--border-width) solid var(--border-color);
         padding-block-start: 1rem;
-        padding-block-end: calc(1rem - 1px);
+        padding-block-end: calc(1rem - var(--border-width));
         gap: 0.75rem;
         font-weight: 600;
         transition:
@@ -615,7 +635,7 @@
       grid-column: 1 / -1;
       .dropdown-item {
         border-block-end: 0;
-        padding-block-end: 0;
+        padding-block: 0;
         gap: 1rem;
         transition: gap var(--animation-time) ease-in-out;
         font-size: 1.5rem;
@@ -646,17 +666,18 @@
         flex-direction: row-reverse;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
+        font-size: 1.25rem;
         transition:
           gap var(--animation-time) ease-in-out,
           padding-inline-end var(--animation-time) ease-in-out;
         &::before {
           content: "";
-          mask-image: var(--qgds-icon-arrow-right);
+          mask-image: var(--qgds-icon-view-all);
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
-          width: 1.25rem;
+          height: 2rem;
+          width: 2rem;
           transform: scaleX(var(--icon-dir));
         }
         &::after {
@@ -803,4 +824,5 @@
 //Prevent double scrollbar when navabr is open
 body:has(.navbar.show) {
   overflow: hidden;
-}
+}
+

package/src/components/bs5/pagination/Pagination.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as PaginationStories from "./pagination.stories";
 
 <Meta of={PaginationStories} />

package/src/components/bs5/pagination/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/pagination/pagination.stories.js

@@ -14,13 +14,14 @@ export default {
         hideNoControlsWarning: true,
       },
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
  * Pagination (Default)
  */
-
 export const Default = {
   args: defaultdata,
 };
@@ -28,21 +29,18 @@ export const Default = {
 /**
  * Pagination when used inside a <code>.light</code> container
  */
-
 export const Light = {
   args: defaultdata,
-
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+      value: "light",
     },
   },
 
   decorators: [
     (Story) => {
       return `
-      <div class="">
+      <div class="light">
           ${Story()}
       </div>
       `;
@@ -51,18 +49,15 @@ export const Light = {
 };
 
 /**
- * Pagination when used inside a <code>.light-alternative</code> container
+ * Pagination when used inside a <code>.alt</code> container
  */
 
 export const LightAlternative = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light Alternative",
-      values: [
-        { name: "Light Alternative", value: "var(--qld-light-alt-background)" },
-      ],
+      value: "alt",
     },
   },
 
@@ -84,10 +79,9 @@ export const LightAlternative = {
 export const Dark = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
 
@@ -109,12 +103,9 @@ export const Dark = {
 export const DarkAlternative = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark Alternative",
-      values: [
-        { name: "Dark Alternative", value: "var(--qld-dark-alt-background)" },
-      ],
+      value: "darkAlt",
     },
   },
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as promotionalPanelStories from "./promotionalPanel.stories";
 import defaultdata from "./promotionalPanel.data.json";
 

package/src/components/bs5/quickexit/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/searchInput/SearchInput.js

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

package/src/components/bs5/searchInput/SearchInput.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as SearchInputStories from "./searchInput.stories";
 
 <Meta of={SearchInputStories} />

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -7,7 +7,10 @@ exports[`SearchInput > Renders as expected 1`] = `
 <div class="qld-search-input ">
     <input id="search" name="query" class="form-control" type="text" autocomplete="off"
         aria-label="Search website"  data-collection="qgov~sp-search"  data-profile="qld"  data-numranks="10"  data-tiers="off"  data-suggestions="https://discover.search.qld.gov.au/s/suggest.json"  data-results-url="https://discover.search.qld.gov.au/s/search.json"  />
-
+    <button class="btn btn-primary" type="submit" id="search-button">
+        <span class="btn-icon"></span>
+        <span class="btn-label">Search</span>
+    </button>
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
             <div class="suggestions-category mt-16">
@@ -37,9 +40,6 @@ exports[`SearchInput > Renders as expected 1`] = `
         </div>
         <div class="dynamic-suggestions"></div>
     </div>
-    <button class="btn btn-primary" type="submit" id="search-button">
-        <span class="btn-icon"></span>
-        <span class="btn-label">Search</span>
-    </button>
+    
 </div>"
 `;

package/src/components/bs5/searchInput/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/searchInput/searchInput.hbs

@@ -4,7 +4,10 @@
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
         aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
-
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
     {{#if suggestions}}
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
@@ -36,8 +39,5 @@
         <div class="dynamic-suggestions"></div>
     </div>
     {{/if}}
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
-        <span class="btn-label">{{ buttonLabel }}</span>
-    </button>
+    
 </div>

package/src/components/bs5/searchInput/searchInput.scss

@@ -14,6 +14,18 @@
     --qld-focus-color: var(--#{$prefix}dark-focus);
   }
   
+  .suggestions.d-none {
+    display: unset !important; // !important to override bootstrap d-none
+  }
+  .suggestions.d-none {
+    display: none !important; // !important to override bootstrap d-none
+  }
+  &:focus-within {
+    .suggestions.d-none {
+      display: block !important; // !important to override bootstrap d-none
+    }
+  }
+
   // Suggestions variables
   --suggestions-shadow:
     0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
@@ -144,6 +156,7 @@
       top: 50%;
       transform: translateY(-50%);
       left: calc(1rem - 0.125rem);
+      pointer-events: none;
     }
   }
 

package/src/components/bs5/searchInput/searchInput.stories.js

@@ -17,6 +17,14 @@ export default {
       },
       story: { height: "400px" },
     },
+    backgrounds: {
+      disable: false,
+    },
+  },
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
   },
 };
 
@@ -48,12 +56,7 @@ export const Dark = {
   args: {
     ...defaultdata,
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -72,12 +75,7 @@ export const Dark = {
  */
 export const DarkFilled = {
   args: { ...defaultdata, customClass: "is-filled" },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/select/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/sidenav/Sidenav.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as SidenavStories from "./sidenav.stories";
 
 <Meta of={SidenavStories} />

package/src/components/bs5/sidenav/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/sidenav/sidenav.stories.js

@@ -10,8 +10,9 @@ export default {
   },
 
   argTypes: {},
-
+  globals: { backgrounds: { value: "default" } },
   parameters: {
+    backgrounds: { disable: false },
     docs: {
       controls: {
         exclude: ["navlist", "navtitlelink"],
@@ -26,6 +27,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -46,12 +48,7 @@ export const Default = {
  *
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   args: defaultdata,
   decorators: [
     (Story) => {

package/src/components/bs5/sidenavWrapper/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/skiplinks/SkipLinks.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as Stories from "./skipLinks.stories.js";
 
 <Meta of={Stories} />

package/src/components/bs5/spinner/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/table/Table.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as TableStories from "./table.stories";
 
 <Meta of={TableStories} />

package/src/components/bs5/table/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as TabsStories from "./tabs.stories";
 
 <Meta of={TabsStories} />

package/src/components/bs5/tabs/tabs.data.json

@@ -28,8 +28,7 @@
       {
         "tab_text": "Tab label 4",
         "title": "Section Heading Item 4",
-        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        "disabled": true
+        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>"
       },
       {
         "tab_text": "Tab label 5",