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

package/src/components/bs5/card/card--multi-action.stories.js

@@ -7,6 +7,8 @@ import { Tag } from "../tag/Tag.js";
 import tagdata from "../tag/tag.data.json";
 import { CallToAction } from "../callToAction/callToAction.js";
 
+import metadata from "./metadata.json";
+
 export default {
   tags: ["autodocs"],
   title: "3. Components/Card/Multi action",
@@ -45,6 +47,10 @@ export default {
         exclude: ["link", "arrow", "iconPosition"],
       },
     },
+    coderefs: {
+      metadata,
+      partialname: "card", //{{> card }}
+    },
   },
 };
 

package/src/components/bs5/card/card--no-action.stories.js

@@ -1,6 +1,7 @@
 // card--no-action.stories.js
 import { Card, argTypes } from "./Card.js";
 import defaultdata from "./card.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -24,6 +25,12 @@ export default {
   },
   args: defaultdata.noAction,
   argTypes,
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "card", //{{> card }}
+    },
+  },
 };
 
 export const Default = {};

package/src/components/bs5/card/card--single-action.stories.js

@@ -1,6 +1,7 @@
 // card--single-action.stories.js
 import { Card, argTypes } from "./Card.js";
 import defaultdata from "./card.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -21,6 +22,12 @@ export default {
   },
   args: defaultdata.singleAction,
   argTypes,
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "card", //{{> card }}
+    },
+  },
 };
 
 export const Default = {};

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

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

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

@@ -1,6 +1,8 @@
 import Handlebars from "handlebars";
 import template from "./containerLayout.hbs?raw";
 
+import metadata from "./metadata.json";
+
 //Mockup Data for each component
 import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
 import menu_state from "../navbar/navbar.variant.menuState.data.json";
@@ -71,6 +73,10 @@ export default {
       controls: {},
     },
     chromatic: { disableSnapshot: true },
+    coderefs: {
+      metadata,
+      partialname: "containerLayout", //{{> containerLayout }}
+    },
   },
 };
 

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

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

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

@@ -1,8 +1,9 @@
 import defaultdata from "./contentFooter.data.json";
 import { ContentFooter } from "./contentFooter.js";
+import metadata from "./metadata.json";
 
 export default {
-  title: "4. Wrappers/Components/Content Footer",
+  title: "3. Components/Content Footer",
   render: (args) => {
     return new ContentFooter(args).html;
   },
@@ -11,22 +12,28 @@ export default {
     lastUpdated: {
       name: "Last updated",
       description: `Date page was Last Updated`,
-      control: { type: 'text'  },
+      control: { type: "text" },
     },
   },
 
   parameters: {
-    docs: {
-      controls: {
-
+    coderefs: {
+      metadata,
+      partialname: "contentFooter", //{{> contentFooter }}
+      tabs: {
+        notes:
+          "\n\nThis Content Footer pattern includes a Back To Top component. Configure Back To Top options via the contentFooter JSON data.",
       },
     },
+    docs: {
+      controls: {},
+    },
   },
 };
 
 /**
  * Default Content Footer
- * 
+ *
  */
 export const Default = {
   args: defaultdata,
@@ -43,17 +50,16 @@ export const Default = {
  * Default empty Content Footer
  *
  */
-export const DefaultEmpty = {
-  args: {
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-  decorators:[Story => {
-    return `
-          ${Story()}
-      `;
-  }],
-};
-
-
+// export const DefaultEmpty = {
+//   args: {},
+//   parameters: {
+//     chromatic: { disableSnapshot: true },
+//   },
+//   decorators: [
+//     (Story) => {
+//       return `
+//           ${Story()}
+//       `;
+//     },
+//   ],
+// };

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-content-footer",
+  "title": "Content Footer",
+  "title_uikit": "",
+  "type": "Pattern",
+  "scope": "",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "",
+    "website": ""
+  }
+}

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

@@ -1,13 +1,21 @@
 // FormcheckCheckbox.stories.js
-import { CorrectIncorrect } from './CorrectIncorrect.js';
+import { CorrectIncorrect } from "./CorrectIncorrect.js";
+import metadata from "./metadata.json";
 
-import { Table } from '../table/Table.js';
+import { Table } from "../table/Table.js";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/CorrectIncorrect',
+  tags: ["autodocs"],
+  title: "3. Components/CorrectIncorrect",
   render: (args) => {
-    return `${new CorrectIncorrect(args).html}`
+    return `${new CorrectIncorrect(args).html}`;
+  },
+
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "correctincorrect", //{{> correctincorrect }}
+    },
   },
 };
 
@@ -22,9 +30,9 @@ export const ShortForm = {
     </span>
     <span class="qg-incorrect">
       <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>.</p>
-    </span>`
+    </span>`;
   },
-}
+};
 
 export const LongForm = {
   render: () => {
@@ -40,47 +48,54 @@ export const LongForm = {
       <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. </p>
       <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. </p>
       <p>Lorem ipsum dolor sit amet, consectetur <a href='#'>adipiscing elit</a>. Fusce dictum efficitur egestas. Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p>
-    </div>`
+    </div>`;
   },
-}
-
+};
 
 export const TableByColumnsForCorrectAndIncorrect = {
   args: {
-    "customClass": "",
-    "variantClass": "qg-correct-incorrect",
-    "headers": ["This", "Not this"],
-    "rows": [
-      { "cells": ["Cell", "Sell"] },
-      { "cells": ["Lorem ipsum dolor", "Lorem ipsum jolor"] },
-      { "cells": ["Lorem ipsum dolor sit", "Lorem ipsum dolor cit"] },
-      { "cells": ["Lorem ipsum dolor sit amet", "Lorem ipsum dolor sit amat"] },
-      { "cells": ["Lorem ipsum dolor sit amet consectetur", "Lorem ipsum dolor sit amet nonsectetur"] },
+    customClass: "",
+    variantClass: "qg-correct-incorrect",
+    headers: ["This", "Not this"],
+    rows: [
+      { cells: ["Cell", "Sell"] },
+      { cells: ["Lorem ipsum dolor", "Lorem ipsum jolor"] },
+      { cells: ["Lorem ipsum dolor sit", "Lorem ipsum dolor cit"] },
+      { cells: ["Lorem ipsum dolor sit amet", "Lorem ipsum dolor sit amat"] },
+      {
+        cells: [
+          "Lorem ipsum dolor sit amet consectetur",
+          "Lorem ipsum dolor sit amet nonsectetur",
+        ],
+      },
     ],
-  }
-  ,
+  },
   render: (args) => {
-    return `${new Table(args).html}`
+    return `${new Table(args).html}`;
   },
-}
+};
 export const TableByColumnsForIncorrectAndCorrect = {
   args: {
-    "customClass": "",
-    "variantClass": "qg-incorrect-correct",
-    "headers": ["Not this", "This"],
-    "rows": [
-      { "cells": ["Sell","Cell"] },
-      { "cells": ["Lorem ipsum jolor", "Lorem ipsum dolor"] },
-      { "cells": ["Lorem ipsum dolor cit", "Lorem ipsum dolor sit"] },
-      { "cells": ["Lorem ipsum dolor sit amat", "Lorem ipsum dolor sit amet"] },
-      { "cells": ["Lorem ipsum dolor sit amet nonsectetur", "Lorem ipsum dolor sit amet consectetur"] },
+    customClass: "",
+    variantClass: "qg-incorrect-correct",
+    headers: ["Not this", "This"],
+    rows: [
+      { cells: ["Sell", "Cell"] },
+      { cells: ["Lorem ipsum jolor", "Lorem ipsum dolor"] },
+      { cells: ["Lorem ipsum dolor cit", "Lorem ipsum dolor sit"] },
+      { cells: ["Lorem ipsum dolor sit amat", "Lorem ipsum dolor sit amet"] },
+      {
+        cells: [
+          "Lorem ipsum dolor sit amet nonsectetur",
+          "Lorem ipsum dolor sit amet consectetur",
+        ],
+      },
     ],
-  }
-  ,
+  },
   render: (args) => {
-    return `${new Table(args).html}`
+    return `${new Table(args).html}`;
   },
-}
+};
 
 export const TableByCell = {
   render: () => {
@@ -112,6 +127,6 @@ export const TableByCell = {
                 </tr>
             </tbody>
         </table>
-      </div>`
+      </div>`;
   },
-}
+};

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

@@ -0,0 +1,14 @@
+{
+"id": "qgds-correct-incorrect",
+"title": "Correct/Incorrect",
+"type": "Pattern",
+"category": "Deprecated",
+"group": "",
+"status": "Published",
+"tags": [""],
+"description": "The correct/incorrect pattern is used to inform responses or actions the user should take.",
+"refs": {
+  "uikit": "",
+  "website": ""
+  }
+}

package/src/components/bs5/dateinput/Dateinput.stories.js

@@ -1,6 +1,7 @@
 import { Dateinput } from "./Dateinput.js";
 import defaultdata from "./dateinput.data.json";
 import { expect } from "storybook/test";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -21,6 +22,11 @@ export default {
   globals: { backgrounds: { value: "default" } },
   parameters: {
     backgrounds: { disable: false },
+    coderefs: {
+      metadata,
+      partialname: "dateinput",
+    },
+    docs: {},
   },
 };
 

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

@@ -0,0 +1,14 @@
+{
+"id": "qgds-input-date",
+"title": "Date Input",
+"type": "Component",
+"category": "Extended",
+"group": "",
+"status": "Published",
+"tags": [""],
+"description": "The date input component consists of 3 separate text fields that accept DD, MM and YYYY values respectively.",
+"refs": {
+  "uikit": "",
+  "website": ""
+  }
+}

package/src/components/bs5/directionLinks/directionLinks.hbs

@@ -5,6 +5,5 @@
     {{~#if target}} target="{{target}}"{{/if~}}
     {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
   {{{label}}}
-  {{!-- <span class="icon" aria-hidden="true"></span> --}}
   <span class="qld-icon qld-icon-md qld-icon-arrow-{{class}}" aria-hidden="true"></span>
 </a>

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

@@ -6,6 +6,7 @@
 
 import { DirectionLinks } from "./directionLinks.js";
 import defaultdata from "./directionLinks.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -58,10 +59,9 @@ export default {
   parameters: {
     backgrounds: { disable: false },
     controls: { disable: true },
-    design: {
-      name: "QGDS Figma Reference",
-      type: "figma",
-      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5624-62902&t=8gBcIy6lPlfZ8NHz-0",
+    coderefs: {
+      metadata,
+      partialname: "directionLinks", //{{> directionLinks }}
     },
   },
 };

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

@@ -0,0 +1,16 @@
+{
+  "id": "qgds-direction-link",
+  "title": "Direction link",
+  "title_uikit": "Direction links",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Navigation",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/direction-links",
+    "storybook": ""
+  }
+}

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

@@ -1,7 +1,7 @@
 // footer.stories.js
 import { Footer } from "./Footer.js";
-
 import defaultdata from "./footer.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -34,6 +34,12 @@ export default {
       control: { type: "object" },
     },
   },
+  parameters: {
+    coderefs: {
+      partialname: "footer", //{{> footer }}
+      metadata,
+    },
+  },
 };
 
 /**

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

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

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-input-formcheck",
+  "title": "Formcheck",
+  "title_uikit": "Radio and checkbox buttons",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Forms",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321348&p=f&t=1PNeXYXdepnDeW4g-0",
+    "website": "https://www.designsystem.qld.gov.au/components/checkboxes"
+  }
+}

package/src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js

@@ -1,6 +1,7 @@
 // FormcheckCheckbox.stories.js
 import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./checkbox.data.json";
+import metadata from "../../metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -9,7 +10,10 @@ export default {
     return `${new Formcheck(args).html}`;
   },
   globals: { backgrounds: { value: "default" } },
-  parameters: { backgrounds: { disable: false } },
+  parameters: {
+    backgrounds: { disable: false },
+    coderefs: { metadata, partialname: "formcheck" },
+  },
   //https://storybook.js.org/docs/api/arg-types
   argTypes,
 };

package/src/components/bs5/formcheck/stories/radio/radio.stories.js

@@ -1,6 +1,7 @@
 // FormcheckRadio.stories.js
 import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./radio.data.json";
+import metadata from "../../metadata.json";
 
 export default {
   tags: ["autodocs"],
@@ -9,7 +10,17 @@ export default {
     return `${new Formcheck(args).html}`;
   },
   globals: { backgrounds: { value: "default" } },
-  parameters: { backgrounds: { disable: false } },
+  parameters: {
+    backgrounds: { disable: false },
+    coderefs: {
+      metadata,
+      partialname: "formcheck",
+      tabs: {
+        notes:
+          "The QGDS formcheck component includes both radio and checkbox buttons. Set the `type` argument to either `radio` or `checkbox` to display the relevant input type.",
+      },
+    },
+  },
   //https://storybook.js.org/docs/api/arg-types
   argTypes,
 };

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

@@ -1,6 +1,7 @@
 // Tag.stories.js
 import { GlobalAlert } from "./GlobalAlert.js";
 import defaultdata from "./globalAlert.data.json";
+import metadata from "./metadata.json";
 
 export default {
   tags: ["autodocs", "extended"],
@@ -41,6 +42,14 @@ export default {
       return Story({ args: { ...args } });
     },
   ],
+
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "globalAlert", //{{> globalAlert }}
+    },
+    docs: {},
+  },
 };
 
 // Critical global alert story

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

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-alert-global",
+  "title": "Global alert",
+  "title_uikit": "Alerts (global)",
+  "type": "Component",
+  "scope": "Core",
+  "group": "Callouts",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97590&p=f&t=GROIooMNoyn7sZDF-0",
+    "website": "https://www.designsystem.qld.gov.au/components/alerts-global"
+  }
+}

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

@@ -12,8 +12,16 @@ export default {
     cdn: {
       name: "CDN",
       description: `CDN prefix or provided text`,
-      control: { type: 'radio' ,
-        labels: { 'DEV': 'DEV', 'TEST' : 'TEST','BETA':'BETA','STAGING':'STAGING','PROD':'PROD','/__data/assets/git_bridge/0026/471752': 'SQUIZ Custom'},
+      control: {
+        type: "radio",
+        labels: {
+          DEV: "DEV",
+          TEST: "TEST",
+          BETA: "BETA",
+          STAGING: "STAGING",
+          PROD: "PROD",
+          "/__data/assets/git_bridge/0026/471752": "SQUIZ Custom",
+        },
       },
       options: [
         "DEV",
@@ -28,8 +36,15 @@ export default {
 
   parameters: {
     docs: {
-      controls: {
-
+      codeReferences: [
+        {
+          label: "HTML",
+          language: "html",
+          content: new Head(defaultdata).html,
+        },
+      ],
+      howToUse: {
+        show: false,
       },
     },
   },
@@ -37,9 +52,10 @@ export default {
 
 /**
  * Default head metadata
- * 
+ *
  */
 export const Default = {
+  tags: ["!dev"],
   args: defaultdata,
   parameters: {
     chromatic: { disableSnapshot: true },
@@ -53,33 +69,36 @@ export const Default = {
   ],
 };
 
-
 export const DEV = {
+  tags: ["!dev"],
   args: {
     cdn: "DEV",
   },
   parameters: {
     chromatic: { disableSnapshot: true },
   },
-  decorators:[Story => {
-    return `
+  decorators: [
+    (Story) => {
+      return `
           ${Story()}
       `;
-  }],
+    },
+  ],
 };
 
 export const SQUIZ = {
+  tags: ["!dev"],
   args: {
     cdn: "/__data/assets/git_bridge/0026/471752",
   },
   parameters: {
     chromatic: { disableSnapshot: true },
   },
-  decorators:[Story => {
-    return `
+  decorators: [
+    (Story) => {
+      return `
           ${Story()}
       `;
-  }],
+    },
+  ],
 };
-
-