@qld-gov-au/qgds-bootstrap5 1.1.19 → 1.1.21

package/dist/components/bs5/callToAction/callToAction.hbs

@@ -0,0 +1,9 @@
+<a class="qld-cta-link {{getClassNames "small, view-all" class}}"
+    {{#if id}}id="{{id}}"{{/if}}
+    href="{{href}}" 
+    target="{{target}}" 
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    >
+     {{label}}
+    <span class="icon" aria-hidden="true"></span>
+</a>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.19","branch":"HEAD","tag":"v1.1.19","commit":"8fb1149b14ce5f62d555b91e2ff4daf15f3a967f","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.21","branch":"HEAD","tag":"v1.1.21","commit":"a3f1a8cf0304d6c7f562866d133b170b491e720c","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/handlebars.helpers.js

@@ -181,6 +181,39 @@ export default function handlebarsHelpers(handlebars) {
     }
     return durationString;
   });
+
+  /**
+   * Used to get class names added to an element based on their boolean values in an array
+   * @param {string} names - Comma-separated list of class names to check for
+   * @param {array} array - Array of objects to check for true values
+   * @returns {string} - Space-separated list of class names that have true values
+   */
+  handlebars.registerHelper('getClassNames', function(names, array) {
+    // Split the comma-separated string of names into an array
+    let nameList = names.split(',').map(name => name.trim());
+
+    // Create an array to hold the names that have true values
+    let matchedItems = [];
+
+    for (let i = 0; i < nameList.length; i++) {
+      let name = nameList[i];
+      // Check if any item in the array matches the name and is true
+      for (let j = 0; j < array.length; j++) {
+        if (array[j][name] === true) {
+          matchedItems.push(name); // Add to matchedItems if found and true
+          break;
+        }
+      }
+    }
+
+    // If we found any matched items, return them as a space-separated string
+    if (matchedItems.length > 0) {
+      return matchedItems.join(' ');
+    } else {
+      return "";
+    }
+  });
+  
 }
 
 if(typeof(Handlebars) !== 'undefined') {

package/dist/components/handlebars.partials.js

@@ -7,6 +7,7 @@ import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw";
 import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw";
 import breadcrumbsWrapper from "../components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs?raw";
 import button from "../components/bs5/button/button.hbs?raw";
+import callToAction from "../components/bs5/callToAction/callToAction.hbs?raw";
 import callout from "../components/bs5/callout/callout.hbs?raw";
 import card from "../components/bs5/card/card.hbs?raw";
 import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw";
@@ -55,6 +56,7 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("breadcrumbs", breadcrumbs);
   handlebars.registerPartial("breadcrumbsWrapper", breadcrumbsWrapper);
   handlebars.registerPartial("button", button);
+  handlebars.registerPartial("callToAction", callToAction);
   handlebars.registerPartial("callout", callout);
   handlebars.registerPartial("card", card);
   handlebars.registerPartial("contentFooter", contentFooter);

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.23.0"
+    "material-symbols": "^0.28.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -61,13 +61,12 @@
     "@storybook/test": "^8.4.2",
     "@storybook/theming": "^8.4.2",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.1.3",
-    "@whitespace/storybook-addon-html": "^6.1.1",
+    "@vitejs/plugin-vue": "5.2.1",
     "autoprefixer": "^10.4.20",
-    "chai": "^5.1.1",
+    "chai": "^5.2.0",
     "chalk": "^5.3.0",
     "chromatic": "^11.5.5",
-    "esbuild": "0.23.1",
+    "esbuild": "0.25.0",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
@@ -88,8 +87,9 @@
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.80.4",
-    "selenium-webdriver": "^4.24.1",
+    "selenium-webdriver": "^4.29.0",
     "storybook": "^8.4.2",
+    "storybook-addon-deep-controls": "^0.9.2",
     "vite": "^5.4.6",
     "watch": "^0.13.0"
   },

package/dist/sample-data/callToAction/callToAction.data.json

@@ -0,0 +1,10 @@
+{
+	"id": "",
+	"label": "Label",
+	"href": "#123",
+	"target": "_blank",
+	"class": [
+		{"small": false}, 
+		{"view-all": true}
+	]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.23.0"
+    "material-symbols": "^0.28.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -61,13 +61,12 @@
     "@storybook/test": "^8.4.2",
     "@storybook/theming": "^8.4.2",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.1.3",
-    "@whitespace/storybook-addon-html": "^6.1.1",
+    "@vitejs/plugin-vue": "5.2.1",
     "autoprefixer": "^10.4.20",
-    "chai": "^5.1.1",
+    "chai": "^5.2.0",
     "chalk": "^5.3.0",
     "chromatic": "^11.5.5",
-    "esbuild": "0.23.1",
+    "esbuild": "0.25.0",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
@@ -88,8 +87,9 @@
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.80.4",
-    "selenium-webdriver": "^4.24.1",
+    "selenium-webdriver": "^4.29.0",
     "storybook": "^8.4.2",
+    "storybook-addon-deep-controls": "^0.9.2",
     "vite": "^5.4.6",
     "watch": "^0.13.0"
   },

package/src/components/bs5/callToAction/callToAction.data.json

@@ -0,0 +1,10 @@
+{
+	"id": "",
+	"label": "Label",
+	"href": "#123",
+	"target": "_blank",
+	"class": [
+		{"small": false}, 
+		{"view-all": true}
+	]
+}

package/src/components/bs5/callToAction/callToAction.hbs

@@ -0,0 +1,9 @@
+<a class="qld-cta-link {{getClassNames "small, view-all" class}}"
+    {{#if id}}id="{{id}}"{{/if}}
+    href="{{href}}" 
+    target="{{target}}" 
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    >
+     {{label}}
+    <span class="icon" aria-hidden="true"></span>
+</a>

package/src/components/bs5/callToAction/callToAction.js

@@ -0,0 +1,12 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./callToAction.hbs?raw";
+
+export class CallToAction {
+  // Use the global Component class to create a new instance of the Accordion component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+
+  
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

package/src/components/bs5/callToAction/callToAction.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as CallToActionStories from "./callToAction.stories"
+
+<Meta of={CallToActionStories} />
+
+# CallToAction
+<Canvas>
+  <Story of={CallToActionStories.Default} />
+</Canvas>
+
+## Design resources
+
+
+- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395565&t=TIV8Ku0uZZw4wtEa-0)
+- [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=PtLTzZO7iSzsq4Qn-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/call-to-action-cta)

package/src/components/bs5/callToAction/callToAction.scss

@@ -0,0 +1,93 @@
+// QGDS QOL CallTOAction
+
+.qld-cta-link {
+    --cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z'/%3E%3C/svg%3E");
+    --link-colour: var(--qld-light-action-primary );
+    --icon-colour: var(--qld-light-action-secondary);
+    --icon-colour-hover: var(--qld-light-action-secondary-hover);
+
+    color: var(--link-colour);
+    text-decoration-color: var(--link-colour);
+    display: flex;
+    width: fit-content;
+    justify-content: space-between;
+    align-self: flex-start;
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 2rem;
+
+    &.small {
+        font-size: .875rem;
+        line-height: 1rem;
+        .icon{
+            &::after{
+                zoom: .7;
+                mask-position: 0;
+            }
+        }
+    }
+
+    .icon {
+        &::after {
+            content: "";
+            display: inline-block;
+            width: 1.25rem;
+            height: 1.5rem;
+            mask-image: var(--cta-icon);
+            mask-repeat: no-repeat;
+            mask-position: 0 .25rem;
+            background-color: var(--icon-colour);
+            margin-inline: .5rem;
+            transition: margin 0.3s ease;
+        }
+    }
+
+    &:hover {
+        .icon {
+            &::after {
+                background-color: var(--icon-colour-hover);
+                margin-inline-start: 1rem;
+                margin-inline-end: 0;
+                transition: margin 0.3s ease;
+            }
+        }
+    }
+}
+
+.view-all {
+    .icon {
+        &::after {
+            --cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.3 148.7c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62L329.4 240H144C135.2 240 128 247.2 128 256s7.156 16 16 16h185.4l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0l96-96C382.4 264.2 384 260.1 384 256s-1.562-8.188-4.688-11.31L283.3 148.7zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 480c-123.5 0-224-100.5-224-224s100.5-224 224-224s224 100.5 224 224S379.5 480 256 480z'/%3E%3C/svg%3E");
+        }
+    }
+}
+
+.light, .alt {
+    .qld-cta-link { 
+        --link-colour: var(--qld-light-action-primary);
+        --icon-colour: var(--qld-light-action-secondary);
+        --icon-colour-hover: var(--qld-light-action-secondary-hover);
+    }
+}
+
+.dark, .dark-alt {
+    .qld-cta-link { 
+        --link-colour: var(--qld-dark-text);
+        --icon-colour: var(--qld-dark-action-secondary);
+        --icon-colour-hover: var(--qld-dark-action-secondary-hover);
+    }
+}
+
+li .qld-cta-link {
+    width: auto;
+}
+
+a[aria-disabled="true"] {
+    pointer-events: none;
+    color: var(--qld-dark-grey-muted);
+    .icon {
+        &::after {
+            background-color: var(--qld-dark-grey-muted);
+        }
+    }
+}

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

@@ -0,0 +1,134 @@
+/**
+ * @file callToAction.stories.js
+ * @description Storybook configuration file for the CallToAction component.
+ * @module callToAction.stories
+ */
+
+import { CallToAction } from "./callToAction.js";
+import defaultdata from "./callToAction.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/CallToAction",
+  args: defaultdata,
+  render: (args) => {
+    return `
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          ${new CallToAction({...args, label: 'View All'}).html}
+        </div>
+        <div class="col">
+          ${new CallToAction({...args, label: 'Label', "class": [{"small": false}, {"view-all": false}]}).html}
+        </div>
+      </div>
+    </div>
+    `
+  },
+  parameters: {
+    design: {
+      name: "QGDS Figma Reference",
+      type: "figma",
+      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=v3sxViBgYUUmwplL-0",
+    },
+  },
+};
+
+/**
+ * Call To Action - Default
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Call To Action - Light
+ * */
+export const Light = {
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        { name: 'Light', value: 'var(--qld-light-background)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="light">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Call To Action - Light-Alt
+ * */
+export const LightAlt = {
+  parameters: {
+    backgrounds: {
+      default: 'LightAlt',
+      values: [
+        { name: 'LightAlt', value: 'var(--qld-light-alt-background)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="light-alt">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Call To Action - Dark
+ * */
+export const Dark = {
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-dark-background)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Call To Action - Dark-Alt
+ * */
+export const DarkAlt = {
+  parameters: {
+    backgrounds: {
+      default: 'DarkAlt',
+      values: [
+        { name: 'DarkAlt', value: 'var(--qld-dark-alt-background)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark-alt">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

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

@@ -1,11 +1,11 @@
 // video.stories.js
-import { Video } from './Video.js';
-import defaultdata from './video.data.json';
+import { Video } from "./Video.js";
+import defaultdata from "./video.data.json";
 
 // include accordion for transcript
 import { Accordion } from "../accordion/Accordion.js";
 
-/** 
+/**
  * Set default arguments for the Video component,
  * which is based on YouTube arguments.
  */
@@ -50,9 +50,18 @@ export default {
         "Half page": "col-6",
       },
     },
-    urlParams: {
+
+    "urlParams.autoplay": {
+      name: "Autoplay",
+      control: {
+        type: "boolean",
+      },
+    },
+
+    "urlParams.controls": {
+      name: "Video controls",
       control: {
-        type: "object",
+        type: "boolean",
       },
     },
   },
@@ -92,7 +101,7 @@ export const Vimeo = {
 
 /**
  * Custom video
-*/
+ */
 export const Custom = {
   args: defaultdata.custom,
 };
@@ -103,10 +112,8 @@ export const Custom = {
 export const Light = {
   parameters: {
     backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
     },
   },
   decorators: [
@@ -126,10 +133,8 @@ export const Light = {
 export const Alternative = {
   parameters: {
     backgrounds: {
-      default: 'Alternative',
-      values: [
-        { name: 'Alternative', value: 'var(--qld-light-grey-alt)' },
-      ],
+      default: "Alternative",
+      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
     },
   },
   decorators: [
@@ -149,10 +154,8 @@ export const Alternative = {
 export const Dark = {
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [
@@ -172,10 +175,8 @@ export const Dark = {
 export const DarkAlternative = {
   parameters: {
     backgrounds: {
-      default: 'Dark alternative',
-      values: [
-        { name: 'Dark alternative', value: 'var(--qld-dark-blue)' },
-      ],
+      default: "Dark alternative",
+      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
     },
   },
   decorators: [

package/src/css/main.scss

@@ -84,6 +84,7 @@ $enable-dark-mode: true;
 @import "../components/bs5/button/button";
 @import "../components/bs5/callout/callout";
 @import "../components/bs5/card/card";
+@import "../components/bs5/callToAction/callToAction";
 @import "../components/bs5/correctincorrect/correctincorrect";
 @import "../components/bs5/dateinput/dateinput";
 @import "../components/bs5/formcheck/formcheck";

package/src/css/qld-print.scss

@@ -380,4 +380,17 @@
   
   .no-print {
     @extend .d-print-none;
+  }
+
+  @media only print {
+    .qld-cta-link {
+      color: #000 !important;
+  
+      .icon::after {
+        background-image: none !important;
+        content: " > " !important;
+        border: none !important;
+        transform: rotate(0deg) !important;
+      }
+    }
   }

package/src/js/handlebars.helpers.js

@@ -181,6 +181,39 @@ export default function handlebarsHelpers(handlebars) {
     }
     return durationString;
   });
+
+  /**
+   * Used to get class names added to an element based on their boolean values in an array
+   * @param {string} names - Comma-separated list of class names to check for
+   * @param {array} array - Array of objects to check for true values
+   * @returns {string} - Space-separated list of class names that have true values
+   */
+  handlebars.registerHelper('getClassNames', function(names, array) {
+    // Split the comma-separated string of names into an array
+    let nameList = names.split(',').map(name => name.trim());
+
+    // Create an array to hold the names that have true values
+    let matchedItems = [];
+
+    for (let i = 0; i < nameList.length; i++) {
+      let name = nameList[i];
+      // Check if any item in the array matches the name and is true
+      for (let j = 0; j < array.length; j++) {
+        if (array[j][name] === true) {
+          matchedItems.push(name); // Add to matchedItems if found and true
+          break;
+        }
+      }
+    }
+
+    // If we found any matched items, return them as a space-separated string
+    if (matchedItems.length > 0) {
+      return matchedItems.join(' ');
+    } else {
+      return "";
+    }
+  });
+  
 }
 
 if(typeof(Handlebars) !== 'undefined') {

package/src/js/handlebars.partials.js

@@ -7,6 +7,7 @@ import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw";
 import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw";
 import breadcrumbsWrapper from "../components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs?raw";
 import button from "../components/bs5/button/button.hbs?raw";
+import callToAction from "../components/bs5/callToAction/callToAction.hbs?raw";
 import callout from "../components/bs5/callout/callout.hbs?raw";
 import card from "../components/bs5/card/card.hbs?raw";
 import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw";
@@ -55,6 +56,7 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("breadcrumbs", breadcrumbs);
   handlebars.registerPartial("breadcrumbsWrapper", breadcrumbsWrapper);
   handlebars.registerPartial("button", button);
+  handlebars.registerPartial("callToAction", callToAction);
   handlebars.registerPartial("callout", callout);
   handlebars.registerPartial("card", card);
   handlebars.registerPartial("contentFooter", contentFooter);