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

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

@@ -1,22 +1,21 @@
 // ComponentExample.stories.js
 import { Table } from "./Table.js";
 import defaultdata from "./table.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs", "extended"],
   title: "3. Components/Table",
   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.variantClass) === 'string' ) {
-      args.variantClass = args.variantClass.replaceAll(","," ");
-    } else if ( typeof(args.variantClass) === 'object' ) {
+    if (typeof args.variantClass === "string") {
+      args.variantClass = args.variantClass.replaceAll(",", " ");
+    } else if (typeof args.variantClass === "object") {
       args.variantClass = args.variantClass.join(" ");
     }
 
     return new Table(args).html;
-  
   },
 
   //https://storybook.js.org/docs/api/arg-types
@@ -31,10 +30,7 @@ export default {
           "table-striped": "Striped",
         },
       },
-      options: [
-        "table-dark",
-        "table-striped",
-      ],
+      options: ["table-dark", "table-striped"],
     },
 
     caption: {
@@ -52,15 +48,13 @@ export default {
         type: "text",
       },
     },
-
   },
 
   parameters: {
-    // design: {
-    //   name: "QGDS Figma Reference",
-    //   type: "figma",
-    //   url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395552&mode=design&t=qoWXcELpZe1uqHs8-0",
-    // },
+    coderefs: {
+      metadata,
+      partialname: "table", //{{> table }}
+    },
     docs: {
       controls: {
         exclude: ["headers", "rows", "footer"],
@@ -70,12 +64,12 @@ export default {
 };
 
 /**
- * 
+ *
  * For data tables with a small amount of rows use the default table:
  *  - Align text columns and corresponding data cells to the left
  *  - When comparing numbers in a column, align data cells and column headers to the right
  *  - For data tables with more rows, use the striped alternative
- * 
+ *
  * Example full table including headers, rows and footer, caption and subcaption
  */
 export const Default = {
@@ -87,49 +81,44 @@ export const Default = {
  */
 
 export const Striped = {
-  args: { 
+  args: {
     ...defaultdata,
-    ...{variantClass: "table-striped"},
+    ...{ variantClass: "table-striped" },
   },
 };
-  
 
 /**
  * Also known as: Quiet Table
- * 
+ *
  * When seeking to integrate and expand the information that accompanies a text, a borderless table can prove advantageous. It imparts a sense of continuity and cohesion, making the data feel more seamlessly integrated with the surrounding text.
  */
 
 export const Borderless = {
-  args: { 
-	  ...defaultdata,
-	  ...{customClass: "qld-table--borderless"},
+  args: {
+    ...defaultdata,
+    ...{ customClass: "qld-table--borderless" },
   },
 };
 
-
 /**
  * Table with row hover <code>.table-hover</code>
  */
 export const WithHover = {
-  args: { 
-	  ...defaultdata,
-	  ...{variantClass: "table-hover"},
+  args: {
+    ...defaultdata,
+    ...{ variantClass: "table-hover" },
   },
 };
 
-
-
 /**
  * Alternate (Dark) table. <code>.table-dark</code>
  */
 export const Dark = {
   args: {
     ...defaultdata,
-    ...{variantClass: "table-dark"},
-  	},
-}
-
+    ...{ variantClass: "table-dark" },
+  },
+};
 
 /**
  * Alternate (Dark) table. <code>.table-dark .table-hover</code>
@@ -137,10 +126,9 @@ export const Dark = {
 export const DarkWithHover = {
   args: {
     ...defaultdata,
-    ...{ variantClass: ["table-dark","table-hover"] },
-  	},
-}
-
+    ...{ variantClass: ["table-dark", "table-hover"] },
+  },
+};
 
 /**
  * Responsive table example <code>.table-responsive</code>
@@ -159,32 +147,122 @@ export const Responsive = {
   ],
   args: {
     ...defaultdata,
-    ...{ 
-      "headers": [
-        "Header", 
-        "Header", 
-        "Header", 
-        "Header", 
-        "Header", 
-        "Header", 
-        "Header", 
-        "Header", 
+    ...{
+      headers: [
+        "Header",
+        "Header",
+        "Header",
+        "Header",
+        "Header",
+        "Header",
+        "Header",
+        "Header",
         "Header",
         "Header",
         "Header",
         "Header",
       ],
-      "rows": [
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
-        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+      rows: [
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
+        {
+          cells: [
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Longer cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Cell",
+            "Longer Cell",
+            "Cell",
+          ],
+        },
       ],
-      "footer": [
+      footer: [
         {
-          "cells": [
+          cells: [
             "Footer",
             "Footer",
             "Footer",
@@ -201,6 +279,6 @@ export const Responsive = {
         },
       ],
     },
-    ...{ variantClass: ["table-striped","table-hover"] },
-  	},
-}
+    ...{ variantClass: ["table-striped", "table-hover"] },
+  },
+};

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

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

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

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Tabs } from "./tabs.js";
 import defaultdata from "./tabs.data.json";
+import metadata from "./metadata.json";
 
 // Generate argTypes for tab items dynamically
 const generateTabItemArgTypes = () => {
@@ -71,6 +72,13 @@ export default {
     // Dynamically generated tab item controls
     ...generateTabItemArgTypes(),
   },
+
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "tabs", //{{> tabs }}
+    },
+  },
 };
 
 /**

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-tag",
+  "title": "Tags",
+  "title_uikit": "Tags",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5702-89540&t=loDOHfqaVy8bH9Qa-0",
+    "website": "https://www.designsystem.qld.gov.au/components/input-fields-text-box-and-area"
+  }
+}

package/src/components/bs5/tag/tag--large.stories.js

@@ -1,6 +1,7 @@
 // tag--large.stories.js
 import { Tag } from "./Tag.js";
 import defaultdata from "./tag.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -21,6 +22,12 @@ export default {
       options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
     },
   },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "tag", //{{> tag }}
+    },
+  },
 };
 
 // Large Tag story

package/src/components/bs5/tag/tag--standard.stories.js

@@ -1,10 +1,11 @@
 // tag--standard.stories.js
-import { Tag } from './Tag.js';
-import defaultdata from './tag.data.json';
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
+import metadata from "./metadata.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Tag/Standard',
+  tags: ["autodocs"],
+  title: "3. Components/Tag/Standard",
   render: (args) => new Tag(args).html,
   argTypes: {
     variant: {
@@ -21,6 +22,12 @@ export default {
       options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
     },
   },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "tag", //{{> tag }}
+    },
+  },
 };
 
 // Default Tag story
@@ -36,4 +43,4 @@ export const Information = {
 // Action Tag story
 export const Action = {
   args: defaultdata.action,
-};
+};

package/src/components/bs5/tag/tag--status.stories.js

@@ -1,6 +1,7 @@
 // tag--status.stories.js
 import { Tag } from "./Tag.js";
 import defaultdata from "./tag.data.json";
+import metadata from "./metadata.json";
 
 const sizes = {
   "": "Small (Default)",
@@ -94,5 +95,8 @@ export const AllStatusVariantsInDefaultMode = {
     controls: {
       disable: true,
     },
+    coderefs: {
+      show: false,
+    },
   },
 };

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

@@ -1,6 +1,7 @@
 // Tag.stories.js
 import { Tag } from "./Tag.js";
 import defaultdata from "./tag.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -28,6 +29,12 @@ export default {
       ],
     },
   },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "tag", //{{> tag }}
+    },
+  },
 };
 
 // Default Tag story
@@ -106,5 +113,8 @@ export const ParentContextComparison = {
     controls: {
       disable: true,
     },
+    coderefs: {
+      show: false,
+    },
   },
 };

package/src/components/bs5/textarea/Textarea.stories.js

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

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

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

package/src/components/bs5/textbox/Textbox.stories.js

@@ -1,6 +1,7 @@
 // ComponentExample.stories.js
 import { Textbox, argTypes } from "./Textbox.js";
 import defaultdata from "./textbox.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -17,7 +18,16 @@ export default {
 
     return new Textbox(args).html;
   },
-  parameters: { backgrounds: { disable: false } },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "textbox",
+      tabs: {
+        notes: `Note: The partial name for this component is \`textbox\`. Refer the "Use" tab for more.`,
+      },
+    },
+    backgrounds: { disable: false },
+  },
   globals: { backgrounds: { value: "default" } },
   //https://storybook.js.org/docs/api/arg-types
   argTypes,

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-textinput",
+  "title": "Text input",
+  "title_uikit": "Input fields (Text-box and Text-area)",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Forms",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97997&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": ""
+  }
+}

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

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

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

@@ -1,6 +1,7 @@
 // typography.stories.js
 // import { Typography } from "./Typography.js";
 // import defaultdata from "./typography.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -69,6 +70,9 @@ export default {
       },
     ],
     backgrounds: { disable: false },
+    coderefs: {
+      show: false,
+    },
   },
   globals: { backgrounds: { value: "default" } },
 };

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-video",
+  "title": "Video player",
+  "title_uikit": "Video player",
+  "type": "Component",
+  "scope": "Extended",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=13297-214065&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": ""
+  }
+}

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

@@ -1,6 +1,7 @@
 // video.stories.js
 import { Video } from "./Video.js";
 import defaultdata from "./video.data.json";
+import metadata from "./metadata.json";
 
 // include accordion for transcript
 import { Accordion } from "../accordion/Accordion.js";
@@ -76,11 +77,10 @@ export default {
    * @property {string} design.url - URL of the design parameter.
    */
   parameters: {
-    // design: {
-    //   name: "QGDS Figma Reference",
-    //   type: "figma",
-    //   url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=24025-293663&mode=design&t=uf49yHsvyUfA39Lv-4",
-    // },
+    coderefs: {
+      metadata,
+      partialname: "video", //{{> video }}
+    },
     controls: {
       exclude: ["transcriptAccordion"],
     },

package/src/components/common/focus-styles/focusStyles.stories.js

@@ -19,6 +19,16 @@ const cardArgs = cardData.singleAction;
 export default {
   title: "1. Core Styles/Focus Styles",
   tags: ["autodocs"],
+
+  render: (args) => {
+    return `<div class="p-24 ${args.paletteClass || ""}" style="display: flex; gap: 48px; align-items: flex-start">
+<a href=javascript:void()" class="${args.utilityClass || ""}">Here is a link</a>
+${new Button({ ...buttonArgs, variantClass: `${buttonArgs.variantClass} ${args.utilityClass || ""}` }).html}
+${new Card({ ...cardArgs, variantClass: `${args.cardPaletteClass} ${args.utilityClass || ""}` }).html}
+</div>
+`;
+  },
+
   argTypes: {
     utilityClass: {
       description:
@@ -35,15 +45,9 @@ export default {
       options: ["default", "light", "alt", "dark", "dark-alt"],
     },
   },
-  parameters: { layout: "fullscreen" },
-
-  render: (args) => {
-    return `<div class="p-24 ${args.paletteClass || ""}" style="display: flex; gap: 48px; align-items: flex-start">
-<a href=javascript:void()" class="${args.utilityClass || ""}">Here is a link</a>
-${new Button({ ...buttonArgs, variantClass: `${buttonArgs.variantClass} ${args.utilityClass || ""}` }).html}
-${new Card({ ...cardArgs, variantClass: `${args.cardPaletteClass} ${args.utilityClass || ""}` }).html}
-</div>
-`;
+  parameters: {
+    layout: "fullscreen",
+    coderefs: { show: false },
   },
 };
 

package/src/js/QGDSComponent.js

@@ -8,7 +8,6 @@ export default class Component {
    */
 
   constructor(template, data = {}) {
-
     this.template = template;
     this.data = data;
     this.compiled = Handlebars.compile(this.template)(this.data);

package/src/js/handlebars.helpers.js

@@ -60,6 +60,7 @@ function cond(v1, operator, v2) {
 
 export default function handlebarsHelpers(handlebars) {
   // contains - if first object is in collection (second object) to return true
+  // example: {{#contains "needle" "haystack, needle, something"}} do something {{/contains}}
   handlebars.registerHelper("contains", function (needle, haystack, options) {
     needle = handlebars.escapeExpression(needle);
     haystack = handlebars.escapeExpression(haystack);