@qld-gov-au/qgds-bootstrap5 2.1.2 → 2.1.4

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

@@ -11,33 +11,34 @@ import defaultdata from "./promotionalPanel.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Promotional Panel",
-  
+
   render: (args) => new PromotionalPanel(args).html,
   args: defaultdata,
   argTypes: {
     type: {
-      description: 'The types of layouts that this component supports',
+      description: "The types of layouts that this component supports",
       control: "select",
       options: ["promo", "contained", "indent-text", "indent-img"],
     },
     variantClass: {
-      description: 'The types of themes that this component supports',
+      description: "The types of themes that this component supports",
       control: "select",
       options: ["light", "alt", "dark", "dark-alt"],
-    },  
+    },
     promoImage: {
       control: "text",
       description: "The image to be displayed in the promotional panel.",
-      defaultValue:"./assets/img/banner-example-3-to-2.jpg",
+      defaultValue: "./assets/img/banner-example-3-to-2.jpg",
     },
     contentAlignment: {
-      description: 'Position of the content in the panel within this component',
+      description: "Position of the content in the panel within this component",
       control: "select",
-      options: ["content-left","content-right"],
+      options: ["content-left", "content-right"],
     },
     icon: {
       control: "select",
-      description: "Current list of usable icons available in the icon component.",
+      description:
+        "Current list of usable icons available in the icon component.",
       options: ["icon-dot-grid", "icon-phone", "icon-email", "icon-search"],
     },
     title: {
@@ -48,20 +49,22 @@ export default {
     abstract: {
       control: "text",
       description: "The abstract of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
     },
     body: {
       control: "text",
       description: "The body of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
     },
     cta: {
-      description: 'The call to action objects for the promotional panel.',
-      control: 'object',
+      description: "The call to action objects for the promotional panel.",
+      control: "object",
     },
     btn: {
-      description: 'The button objects for the promotional panel.',
-      control: 'object',
+      description: "The button objects for the promotional panel.",
+      control: "object",
     },
   },
 
@@ -120,4 +123,3 @@ export const DarkAlternative = {
     variantClass: "dark-alt",
   },
 };
-

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

@@ -3,7 +3,7 @@ import { Quickexit } from "./Quickexit.js";
 import defaultdata from "./quickexit.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Quickexit",
   render: (args) => {
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.

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

@@ -9,4 +9,4 @@ import * as SearchInputStories from "./searchInput.stories";
 
 ## Design resources
 
-- [Component library(Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)
+- [Component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)

package/src/components/bs5/searchInput/search.functions.js

@@ -145,7 +145,30 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.textContent, form);
+
+              // Check if the link has a valid absolute URL
+              const href = linkItem.getAttribute("href");
+              const isValidUrl =
+                href &&
+                href !== "#" &&
+                (() => {
+                  try {
+                    const url = new URL(href, window.location.origin);
+                    return (
+                      url.protocol === "http:" || url.protocol === "https:"
+                    );
+                  } catch {
+                    return false;
+                  }
+                })();
+
+              if (isValidUrl) {
+                // Navigate directly to the URL
+                window.location.href = href;
+              } else {
+                // Use the search suggestion flow
+                selectDynamicSuggestion(linkItem.textContent, form);
+              }
             }
           });
       } else {
@@ -200,7 +223,30 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             let linkItem = event.target.closest("a");
             if (linkItem) {
               event.preventDefault();
-              selectDynamicSuggestion(linkItem.textContent, form);
+
+              // Check if the link has a valid absolute URL
+              const href = linkItem.getAttribute("href");
+              const isValidUrl =
+                href &&
+                href !== "#" &&
+                (() => {
+                  try {
+                    const url = new URL(href, window.location.origin);
+                    return (
+                      url.protocol === "http:" || url.protocol === "https:"
+                    );
+                  } catch {
+                    return false;
+                  }
+                })();
+
+              if (isValidUrl) {
+                // Navigate directly to the URL
+                window.location.href = href;
+              } else {
+                // Use the search suggestion flow
+                selectDynamicSuggestion(linkItem.textContent, form);
+              }
             }
           });
       }

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

@@ -6,7 +6,7 @@ import defaultdata from "./searchInput.data.json";
 const initData = defaultdata.defaultSuggestions || null;
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Search Input",
   render: (args) => {
     return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search p-3">${new SearchInput(args).html}</form>`;

package/src/components/bs5/spinner/Spinner.stories.js

@@ -6,18 +6,16 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Spinner",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Spinner(args).html;
-  
   },
 };
 
@@ -32,15 +30,13 @@ export const Default = {
  * Dark themed Loading Spinner
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
+  args: {
+    ...defaultdata,
   },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [
@@ -59,8 +55,8 @@ export const Dark = {
  */
 export const Minimal = {
   args: {
-	  ...defaultdata,
-	  ...{minimal: true},
+    ...defaultdata,
+    ...{ minimal: true },
   },
 };
 
@@ -68,9 +64,8 @@ export const Minimal = {
  * Stacked Loading Spinner
  */
 export const Stacked = {
-  args: { 
-	  ...defaultdata,
-	  ...{stacked: true},
+  args: {
+    ...defaultdata,
+    ...{ stacked: true },
   },
 };
-

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

@@ -9,7 +9,6 @@ import * as TableStories from "./table.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395552&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97592&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tables)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/content/tables/)

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

@@ -3,7 +3,7 @@ import { Table } from "./Table.js";
 import defaultdata from "./table.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Table",
   render: (args) => {
     

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

@@ -9,7 +9,6 @@ import * as TabsStories from "./tabs.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=6247-38705&p=f&t=AHTplcCqsKKRWGvc-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=25951-236134&p=f&t=GBRfQxrdnGxAh30j-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tabs)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/navs-tabs/)

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

@@ -9,6 +9,5 @@ import * as TagStories from "./tag.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395550&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97596&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/tags)

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

@@ -9,5 +9,4 @@ import * as VideoStories from "./video.stories";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23203-295341&mode=design&t=eRH1gEfJNDna1ovz-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=13297-214065&mode=design&t=YLfxdziHdqD2Ty0o-0)

package/src/components/bs5/video/video.scss

@@ -256,7 +256,7 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   }
 
   .accordion {
-    margin-bottom: 0;
+    margin: 0;
     grid-area: transcript;
     &-item {
       &,

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

@@ -10,7 +10,7 @@ import { Accordion } from "../accordion/Accordion.js";
  * which is based on YouTube arguments.
  */
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Video",
   args: defaultdata.youtube,
   render: (args) => {

package/src/css/mixins/focusable.scss

@@ -18,7 +18,7 @@
   @if $offsetOutline == true {
     $offsetOutline: 2px;
   } @else if $offsetOutline == false {
-    $offsetOutline: $initial-offset;
+    $offsetOutline: 0px;
   }
 
   outline: $outlineWidth solid transparent;

package/src/stories/Introduction.mdx

@@ -1,14 +1,23 @@
 import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 
-import Readme from "../../README.md?raw"
+import Readme from "../../README.md?raw";
 
 <Meta title="Welcome" />
 
-[//]: # (# Welcome to QGDS QOL BS MVP Storybook)
+[//]: # "# Welcome to QGDS QOL BS MVP Storybook"
+[//]: #
+[//]: # "Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes."
+[//]: # "For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe."
 
-[//]: # ()
-[//]: # (Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes.)
+<Markdown>{Readme}</Markdown>
 
-[//]: # (For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe.)
+---
 
-<Markdown>{Readme}</Markdown>
+## Component Badges
+
+Components are labelled as:
+
+- **Core** — Essential, broadly applicable components that serve as the single source of truth for the Queensland Government design system.
+- **Extended** — Specialised components for needs not covered by the core set.
+
+Further information is available in the [QGDS UI Kit](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=8701-244248&m=dev).