@qld-gov-au/qgds-bootstrap5 2.1.9 → 2.1.11

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

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

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

@@ -1,6 +1,7 @@
 import { Navbar } from "./Navbar.js";
 import defaultdata from "./navbar.data.json";
 import { breakpoints } from "../../../js/constants.js";
+import metadata from "./metadata.json";
 
 //Default story
 export default {
@@ -304,10 +305,14 @@ export default {
   },
 
   parameters: {
-    design: {
-      name: "QGDS Figma Reference",
-      type: "figma",
-      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97604&p=f&t=LpEqEay1h4fgTRLl-0",
+    coderefs: {
+      metadata,
+      partialname: "navbar", //{{> navbar }}
+      args: defaultdata,
+      tabs: {
+        notes:
+          "The Navbar component is paired with the Header component. Review the Header component documentation for guidance on configuring the navbar within a header.",
+      },
     },
   },
 };

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

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

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/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.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.data.json

@@ -6,7 +6,6 @@
     {
       "link": "https://www.qld.gov.au/transport/registration/register/heavy",
       "label": "Sibling page",
-      "class": "",
       "target": "",
       "children": [
         {
@@ -17,25 +16,21 @@
         },
         {
           "link": "#",
-          "class": "active",
           "label": "Child page",
           "children": []
         },
         {
           "link": "#",
-          "class": "",
-
           "label": "Child page",
           "children": [
             {
               "link": "#",
-              "class": "",
+              "class": "active",
               "label": "Grandchild page",
               "children": []
             },
             {
               "link": "#",
-              "class": "active",
               "label": "Grandchild page",
               "children": []
             }
@@ -52,7 +47,6 @@
     {
       "link": "#",
       "label": "Sibling page",
-      "class": "active",
       "children": []
     },
     {

package/src/components/bs5/sidenav/sidenav.scss

@@ -30,7 +30,7 @@
 
   --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-active-item-color: var(--#{$prefix}light-text-heading);
 
   --#{$prefix}accordion-color: var(--#{$prefix}body-color);
   --#{$prefix}accordion-bg: var(--#{$prefix}body-bg);
@@ -149,7 +149,7 @@
   .nav-link {
     padding: var(--sidenav-navlink-padding);
     font-size: 0.875rem;
-    color: var(--body-color);
+    color: var(--#{$prefix}light-text-text);
     text-decoration: none;
     transition-duration: 0s;
     line-height: 1.25rem;
@@ -223,13 +223,12 @@
         padding-left: var(--sidenav-level-three-padding);
       }
 
-      //li .nav-link.active
+      //li .nav-link.active - use > to only target direct child, not nested nav-links
       &.active {
-        .nav-link {
+        > .nav-link {
           font-weight: 600;
-          color: var(--light-text-heading);
+          color: var(--sidenav-active-item-color);
           text-decoration: none;
-          pointer-events: none;
         }
       }
     }

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"
+  }
+}