@qld-gov-au/qgds-bootstrap5 2.1.10 → 2.1.12

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

@@ -83,6 +83,7 @@ export default {
   parameters: {
     layout: "fullscreen",
     docs: {
+      page: null, //null overrides our custom DocumentationTemplate, forces the autodocs default instead
       controls: {},
     },
   },

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-pagination",
+  "title": "Pagination",
+  "title_uikit": "Pagination",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321779&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/promotional-panel"
+  }
+}

package/src/components/bs5/pagination/pagination.hbs

@@ -1,10 +1,3 @@
-{{!
-Component Name: QGDS QOL Pagination
-Component Version: 1.0
-Framework: Bootstrap 5.3
-Reference: https://getbootstrap.com/docs/5.0/components/pagination/
-}}
-
 <nav aria-label="{{ arialabel }}">
 
     <ul class="pagination">

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

@@ -1,6 +1,7 @@
 // Blockquote.stories.js
 import { Pagination } from "./Pagination.js";
 import defaultdata from "./pagination.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -8,6 +9,10 @@ export default {
   render: (args) => new Pagination(args).html,
 
   parameters: {
+    coderefs: {
+      metadata,
+      partialname: "pagination", //{{> pagination }}
+    },
     docs: {
       controls: {
         exclude: ["previous", "next", "pages"],

package/src/components/bs5/promotionalPanel/metadata.json

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-promotional-panel",
+  "title": "Promotional panel",
+  "title_uikit": "Promo panels",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": ""
+  }
+}

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

@@ -7,6 +7,7 @@
 
 import { PromotionalPanel } from "./promotionalPanel.js";
 import defaultdata from "./promotionalPanel.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -78,10 +79,9 @@ export default {
    * @property {string} design.url - URL of the design parameter.
    */
   parameters: {
-    design: {
-      name: "QGDS Figma Reference",
-      type: "figma",
-      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=oML8wlVSAg2496sB-0",
+    coderefs: {
+      metadata,
+      partialname: "promotionalPanel", //{{> promotionalPanel }}
     },
   },
 };

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-quick-exit",
+  "title": "Quick exit",
+  "title_uikit": "Quick exit",
+  "type": "Pattern",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321318&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/radio-buttons"
+  }
+}

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

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Quickexit } from "./Quickexit.js";
 import defaultdata from "./quickexit.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs", "extended"],
@@ -17,6 +18,12 @@ export default {
 
     return new Quickexit(args).html;
   },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "quickexit", //{{> quickexit }}
+    },
+  },
 };
 
 /**

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

@@ -27,10 +27,10 @@ exports[`SearchInput > Renders as expected 1`] = `
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">Collection</strong>
                     <ul>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                        <li><a tabindex="0"href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                        <li><a tabindex="0" href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
                             <li><a tabindex="0" href="/queenslanders" class="view-more">View all</a></li>
                     </ul>
                 </div>

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-search-input",
+  "title": "Search input",
+  "title_uikit": "Input field (Search-box)",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Forms",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97871&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/input-fields-select-box"
+  }
+}

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

@@ -29,7 +29,7 @@
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
                             <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>

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

@@ -17,6 +17,10 @@
   --border-radius: 0.25rem;
   --hover-background-color: var(--#{$prefix}neutral-light);
   --_size: 3rem;
+  container-type: inline-size;
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius);
 
   .dark &,
   .dark-alt & {
@@ -40,11 +44,7 @@
       --text-color: var(--#{$prefix}light-text-text);
     }
   }
-
-  display: flex;
-  position: relative;
-  border-radius: var(--border-radius);
-
+  
   .suggestions {
     transition-behavior: allow-discrete;
     opacity: 0;
@@ -106,6 +106,7 @@
       --background-color: var(--#{$prefix}white);
       outline: none;
     }
+    
   }
 
   > button {
@@ -133,10 +134,40 @@
       --qld-icon-color: currentColor;
     }
   }
+  
 
+  // Fallback for browsers that don't support container queries
   @include media-breakpoint-up(md) {
     --_size: 3.25rem;
 
+    &:before {
+      content: "";
+      mask-image: var(--qgds-icon-search);
+      mask-repeat: no-repeat;
+      mask-position: left;
+      background-color: var(--text-color);
+      width: 1.25rem;
+      aspect-ratio: 1 / 1;
+      position: absolute;
+      margin-inline-start: .5rem;
+      left: .5rem;
+      height: 100%;
+    }
+    .form-control {
+      padding-inline-start: 2.5rem;
+    }
+    .dark &,
+    .dark-alt & {
+      &:has(.form-control:focus) {
+        &:before {
+          background-color: var(--#{$prefix}light-text-text);
+        }
+      }
+      &:before {
+        background-color: var(--#{$prefix}dark-text-text);
+      }
+    }
+
     > button {
       padding-block: calc(0.75rem - 0.125rem);
       padding-inline: var(--qld-btn-padding-x);
@@ -154,6 +185,58 @@
     }
   }
 
+  // Container query for browsers that support it (overrides @media)
+  @supports (container-type: inline-size) {
+    @container (width > 450px) {
+      --_size: 3.25rem;
+
+      &:before {
+        content: "";
+        mask-image: var(--qgds-icon-search);
+        mask-repeat: no-repeat;
+        mask-position: left;
+        background-color: var(--text-color);
+        width: 1.25rem;
+        aspect-ratio: 1 / 1;
+        position: absolute;
+        margin-inline-start: .5rem;
+        left: .5rem;
+        height: 100%;
+      }
+      .form-control {
+        padding-inline-start: 2.5rem;
+      }
+      .dark &,
+      .dark-alt & {
+        &:has(.form-control:focus) {
+          &:before {
+            background-color: var(--#{$prefix}light-text-text);
+          }
+        }
+        &:before {
+          background-color: var(--#{$prefix}dark-text-text);
+        }
+      }
+
+      > button {
+        padding-block: calc(0.75rem - 0.125rem);
+        padding-inline: var(--qld-btn-padding-x);
+        margin: 0;
+        width: auto;
+
+        .btn-label {
+          display: block;
+        }
+
+        .btn-icon {
+          display: none;
+          margin-inline-start: 0;
+        }
+      }
+    }
+  }
+  
+
   //Search dropdown
   .suggestions {
     position: absolute;

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

@@ -1,6 +1,7 @@
 // SearchInput.stories.js
 import { SearchInput } from "./SearchInput.js";
 import defaultdata from "./searchInput.data.json";
+import metadata from "./metadata.json";
 
 // Save the initial defaultSuggestions data with fallback
 const initData = defaultdata.defaultSuggestions || null;
@@ -31,6 +32,10 @@ export default {
     },
   },
   parameters: {
+    coderefs: {
+      metadata,
+      partialname: "searchInput", //{{> searchInput }}
+    },
     docs: {
       controls: {
         include: [

package/src/components/bs5/select/Select.stories.js

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Select, argTypes } from "./Select.js";
 import defaultdata from "./select.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -17,7 +18,13 @@ export default {
 
     return new Select(args).html;
   },
-  parameters: { backgrounds: { disable: false } },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "select", //{{> select }}
+    },
+    backgrounds: { disable: false },
+  },
   globals: { backgrounds: { value: "default" } },
 
   //https://storybook.js.org/docs/api/arg-types

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-input-select",
+  "title": "Select input",
+  "title_uikit": "Input field (Select/Dropdown)",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Forms",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321345&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/side-navigation"
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-side-navigation",
+  "title": "Side navigation",
+  "title_uikit": "Navigation (Side Navigation)",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Navigation",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321787&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/tables"
+  }
+}

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

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Sidenav } from "./Sidenav.js";
 import defaultdata from "./sidenav.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -12,6 +13,10 @@ export default {
   argTypes: {},
   globals: { backgrounds: { value: "default" } },
   parameters: {
+    coderefs: {
+      metadata,
+      partialname: "sidenav", //{{> sidenav }}
+    },
     backgrounds: { disable: false },
     docs: {
       controls: {

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

@@ -5,6 +5,11 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/SkipLinks",
   render: (args) => new SkipLinks(args).html,
+  parameters: {
+    coderefs: {
+      partialname: "skipLinks",
+    },
+  },
 };
 
 export const Default = {

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

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Spinner } from "./Spinner.js";
 import defaultdata from "./spinner.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -17,6 +18,13 @@ export default {
 
     return new Spinner(args).html;
   },
+
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "spinner", //{{> spinner }}
+    },
+  },
 };
 
 /**

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-loading-spinner",
+  "title": "Loading spinner",
+  "title_uikit": "Loading spinner",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=49314-16705&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/loading-spinner"
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-table",
+  "title": "Table",
+  "title_uikit": "Tables",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97592&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/tabs"
+  }
+}