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

package/src/components/bs5/pagination/pagination.scss

@@ -1,6 +1,8 @@
 // QGDS QOL Pagination
 // extends https://getbootstrap.com/docs/5.3/components/pagination/#variables
 
+@use "../../../css/mixins" as m;
+
 //PREV NEXT ARROW on default background
 $pagination-icon-prevnext-color: var(--#{$prefix}light-action-secondary);
 $pagination-icon-prevnext-hover-color: var(
@@ -45,7 +47,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}light-link);
+  --#{$prefix}focus-color: var(--#{$prefix}light-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -99,7 +101,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
   --#{$prefix}pagination-focus-border-color: var(
     --#{$prefix}dark-action-secondary
   );
-  --#{$prefix}pagination-focus-outline-color: var(--#{$prefix}dark-focus);
+  --#{$prefix}focus-color: var(--#{$prefix}dark-focus);
   --#{$prefix}pagination-focus-bg: transparent;
 
   //Hover
@@ -171,9 +173,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
         background-color: var(--#{$prefix}pagination-hover-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
+      @include m.focusable($offsetOutline: 2px) {
         border-color: var(--#{$prefix}pagination-hover-border-color);
         box-shadow: inset 0 0 0 1px
           var(--#{$prefix}pagination-hover-border-color);
@@ -245,9 +245,7 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
           box-shadow: none;
         }
 
-        &:focus {
-          outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-          outline-offset: 2px;
+        @include m.focusable($offsetOutline: 2px) {
           border: none;
           box-shadow: none;
         }
@@ -260,18 +258,16 @@ $pagination-icon-more-dark-hover-color: var(--#{$prefix}dark-action-secondary);
       background-color: var(--#{$prefix}pagination-active-bg);
       border-color: var(--#{$prefix}pagination-active-border-color);
 
-      &:hover {
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-hover-bg);
+      @include m.focusable($offsetOutline: 2px) {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-focus-bg);
+        background-color: var(--#{$prefix}pagination-active-focus-bg);
       }
 
-      &:focus {
-        outline: 2px solid var(--#{$prefix}pagination-focus-outline-color);
-        outline-offset: 2px;
-        border-color: var(--#{$prefix}pagination-active-bg);
-        box-shadow: var(--#{$prefix}pagination-active-dropshadow);
-        background-color: var(--#{$prefix}pagination-active-focus-bg);
+      &:hover {
+        box-shadow: none;
+        border-color: var(--#{$prefix}pagination-active-hover-bg);
+        background-color: var(--#{$prefix}pagination-active-hover-bg);
       }
     }
 

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

@@ -10,7 +10,6 @@ import defaultdata from "./promotionalPanel.data.json";
 
 ## Design resources
 
-- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=SY0WW7uiwAl3ioEj-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=nVLTSHpRu8jvVSar-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/promotional-panel)
 

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/select/select.hbs

@@ -26,7 +26,7 @@
 {{/if}}{{/contains}}
 
 <select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" 
-    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
+    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
     <option selected value="">{{placeholder}}</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>

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/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/textarea/textarea.hbs

@@ -28,5 +28,5 @@
 
 <!-- First text input field, described by the hint text above -->
 <textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
+    placeholder="{{placeholder}}" rows="{{rows}}" tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
     {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>

package/src/components/bs5/textbox/textbox.hbs

@@ -27,5 +27,5 @@
 {{/if}}{{/contains}}
 
 <input id={{id}} {{#if value}}value="{{value}}"{{/if}}  class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
+    type="text" placeholder="{{placeholder}}" tabindex="0" {{#if isDisabled}}disabled{{/if}} {{#if
     isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />

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/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;