@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

package/dist/components/handlebars.init.js

@@ -0,0 +1,6 @@
+import handlebarsHelpers from "./handlebars.helpers.js";
+import Handlebars from "handlebars";
+export * from "./handlebars.helpers.js";
+
+export const init = () => handlebarsHelpers(Handlebars);
+

package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json

@@ -10,7 +10,7 @@
             "name": "checkboxOption",
             "label": "Option 1",
             "value": "1",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "checkbox",
@@ -18,7 +18,7 @@
             "name": "checkboxOption",
             "label": "Option 2",
             "value": "2",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "checkbox",
@@ -26,7 +26,7 @@
             "name": "checkboxOption",
             "label": "Option 3",
             "value": "3",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "checkbox",
@@ -34,7 +34,7 @@
             "name": "checkboxOption",
             "label": "Option 4",
             "value": "4",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "checkbox",
@@ -42,7 +42,7 @@
             "name": "checkboxOption",
             "label": "Disabled",
             "value": "",
-            "state": "disabled"
+            "isDisabled": true
         }
     ]
 }

package/dist/sample-data/formcheck/stories/radio/radio.data.json

@@ -10,7 +10,7 @@
             "name": "radioOption",
             "label": "Option 1",
             "value": "1",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "radio",
@@ -18,7 +18,7 @@
             "name": "radioOption",
             "label": "Option 2",
             "value": "2",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "radio",
@@ -26,7 +26,7 @@
             "name": "radioOption",
             "label": "Option 3",
             "value": "3",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "radio",
@@ -34,7 +34,7 @@
             "name": "radioOption",
             "label": "Option 4",
             "value": "4",
-            "state": ""
+            "isDisabled": false
         },
         {
             "type": "radio",
@@ -42,7 +42,7 @@
             "name": "radioOption",
             "label": "Disabled",
             "value": "",
-            "state": "disabled"
+            "isDisabled": true
         }
     ]
 }

package/esbuild.js

@@ -0,0 +1,89 @@
+/* global process */
+// ESBUILD PROJECT DEPENDENCIES
+import * as esbuild from "esbuild";
+
+//Local ESBUILD PLUGINS
+import QGDSrawLoader from "./.esbuild/plugins/qgds-plugin-raw-loader.js";
+import QDGScleanFolders from "./.esbuild/plugins/qgds-plugin-clean-output-folders.js";
+import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js";
+import QDGScopy from "./.esbuild/plugins/qgds-plugin-copy-assets.js";
+
+//Open source ESBUILD PLUGINS
+import { sassPlugin } from "esbuild-sass-plugin";
+import handlebarsPlugin from "esbuild-plugin-handlebars";
+
+//Command line arguments are available via argv object
+import minimist from "minimist";
+const argv = minimist(process.argv.slice(2));
+
+
+// https://esbuild.github.io/getting-started/#build-scripts
+const buildConfig = {
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  target: ["es6"],
+  logLevel: "info",
+  outdir: "./dist/",
+  external: ["fs", "path", "../img/*"],
+
+  entryPoints: [
+    {
+      in: "./node_modules/bootstrap/dist/js/bootstrap.min.js",
+      out: "./assets/js/bootstrap.min",
+    },
+    {
+      in: "./src/main.js",
+      out: "./assets/js/qld.bootstrap.min",
+    },
+    {
+      in: "./src/main.scss",
+      out: "./assets/css/qld.bootstrap",
+    },
+    {
+      in: "./src/js/handlebars.init.js",
+      out: "./assets/js/handlebars.helpers.bundle",
+    },
+    {
+      in: "./src/js/handlebars.init.js",
+      out: "./components/handlebars.helpers.bundle",
+    },
+  ],
+
+  loader: {
+    ".html": "text",
+    ".hbs": "text",
+    ".js": "jsx",
+    ".jpg": "file",
+    ".png": "file",
+  },
+
+  plugins: [
+    QDGScopy(),
+    QDGSbuildLog(),
+    QGDSrawLoader(),
+    QDGScleanFolders(),
+    handlebarsPlugin(),
+    sassPlugin(),
+    // eslint({}), //todo: configure eslint
+  ],
+};
+
+async function StartBuild() {
+  let ctx = await esbuild.context(buildConfig);
+
+  if (argv.watch === true) {
+    // "npm run watch"
+    await ctx.watch();
+
+  } else {
+    // "npm run build" or "node build.js"
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+
+
+}
+
+//Initate the project build...
+StartBuild();

package/jsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "lib": ["ES6"],
+    "target": "ES6",
+    "module": "ES2015",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "composite": true,
+    "strict": true,
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowJs": true
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -20,8 +20,17 @@
   "license": "ISC",
   "type": "module",
   "files": [
+    ".esbuild",
+    ".storybook",
+    ".vscode",
     "dist",
-    "docs"
+    "src",
+    ".eslintrc.cjs",
+    "esbuild.js",
+    "jsconfig.json",
+    "pom.xml",
+    "README.md",
+    "vite.config.js"
   ],
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
@@ -29,6 +38,7 @@
     "material-symbols": "^0.17.4"
   },
   "devDependencies": {
+    "handlebars": "4.7.8",
     "@chromatic-com/storybook": "^1.3.5",
     "@storybook/addon-essentials": "^8.1.0",
     "@storybook/addon-interactions": "^8.1.0",
@@ -75,6 +85,8 @@
   "exports": {
     "qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js",
     "qld.bootstrap.css": "./dist/assets/css/qld.bootstrap.css",
+    "handlebars.helpers.bundle.js": "./dist/components/handlebars.helpers.bundle.js",
+    "handlebars.init.js": "./dist/components/handlebars.init.js",
     "bootstrap.min.js": "./dist/assets/js/boostrap.min.js"
   }
 }

package/pom.xml

@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+
+    <groupId>au.gov.qld.ssq</groupId>
+    <version>1.0.0-SNAPSHOT</version>
+    <artifactId>qgds-qol-bootstrap</artifactId>
+    <packaging>pom</packaging>
+
+    <properties>
+        <frontend-maven-plugin.version>1.15.0</frontend-maven-plugin.version>
+        <node.version>v20.12.0</node.version>
+        <npm.version>10.5.0</npm.version>
+    </properties>
+
+    <build>
+        <plugins>
+            <plugin>
+                <artifactId>maven-clean-plugin</artifactId>
+                <version>3.3.2</version>
+                <configuration>
+                    <filesets>
+                        <fileset>
+                            <directory>${basedir}/dist</directory>
+                            <followSymlinks>true</followSymlinks>
+                            <includes>
+                                <include>**/*</include>
+                            </includes>
+                        </fileset>
+                        <fileset>
+                            <directory>${basedir}/storybook-static</directory>
+                            <followSymlinks>true</followSymlinks>
+                            <includes>
+                                <include>**/*</include>
+                            </includes>
+                        </fileset>
+                        <fileset>
+                            <directory>${basedir}/docs</directory>
+                            <followSymlinks>true</followSymlinks>
+                            <includes>
+                                <include>**/*</include>
+                            </includes>
+                        </fileset>
+                    </filesets>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>${frontend-maven-plugin.version}</version>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <configuration>
+                            <nodeVersion>${node.version}</nodeVersion>
+                            <npmVersion>${npm.version}</npmVersion>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm install</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <arguments>install</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm lint</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <arguments>run lint</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>npm test</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>test</phase>
+                        <configuration>
+                            <arguments>run test</arguments>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>storybook</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>storybook</phase>
+                        <configuration>
+                            <arguments>run build-storybook</arguments>
+                        </configuration>
+                    </execution>
+
+<!--                    <execution>-->
+<!--                        <id>npm integration</id>-->
+<!--                        <goals>-->
+<!--                            <goal>npm</goal>-->
+<!--                        </goals>-->
+<!--                        <phase>integration-test</phase>-->
+<!--                        <configuration>-->
+<!--                            <arguments>run test:e2e</arguments>-->
+<!--                        </configuration>-->
+<!--                    </execution>-->
+                    <execution>
+                        <id>npm package</id>
+                        <goals>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>package</phase>
+                        <configuration>
+                            <arguments>run build</arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+</project>

package/src/components/bs5/accordion/Accordion.js

@@ -0,0 +1,11 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./accordion.hbs?raw";
+
+export class Accordion {
+  // 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/accordion/Accordion.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as AccordionStories from "./accordion.stories"
+
+<Meta of={AccordionStories} />
+
+# Accordion
+<Canvas>
+  <Story of={AccordionStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6276-45691&mode=design&t=chjWFr1CLu6KQXzg-4)
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98109&mode=design&t=ORVHLonASEFQzPeD-0)
+- [Design System website](https://www.design-system.health.qld.gov.au/components/accordions)
+- [Bootstrap component](https://getbootstrap.com/docs/5.3/components/accordion/)

package/src/components/bs5/accordion/accordion.functions.js

@@ -0,0 +1,135 @@
+/**
+ * Toggle all accordion elements
+ *
+ * @memberof module:Accordion
+ *
+ * @param  {Object}  event - The event that triggered this function.
+ * @returns {void}
+ */
+export function accordionToggleAll(event) {
+  // stop event propagation
+  try {
+    window.event.cancelBubble = true;
+    event.stopPropagation();
+  } catch (error) {
+    //error message
+  }
+
+  let toggleAllButton = event.target;
+  // find the accordion wrapper
+  let wrapper = toggleAllButton.closest(".accordion-group");
+  // get all the accordion buttons
+  let accordionButtons = wrapper.querySelectorAll(".accordion-button");
+
+  // Check if opened or closed
+  if (toggleAllButton.classList.contains("accordion-toggle-btn--closed")) {
+    toggleAllButton.classList.remove("accordion-toggle-btn--closed");
+    toggleAllButton.classList.add("accordion-toggle-btn--open");
+    toggleAllButton.textContent = "Close all";
+    accordionButtons.forEach((button) => {
+      if (button.matches(".collapsed")) button.click();
+    });
+  } else if (toggleAllButton.classList.contains("accordion-toggle-btn--open")) {
+    toggleAllButton.classList.remove("accordion-toggle-btn--open");
+    toggleAllButton.classList.add("accordion-toggle-btn--closed");
+    toggleAllButton.textContent = "Open all";
+    accordionButtons.forEach((button) => {
+      if (button.matches(":not(.collapsed)")) button.click();
+    });
+  }
+}
+
+/**
+ * Updates toggle all button if all panels are open/closed individually.
+ *
+ * @memberof module:Accordion
+ *
+ * @param {Object} event - The event that triggered this function.
+ * @returns {void}
+ */
+export function accordionToggleAllButtonState(event) {
+  // stop event propagation
+  try {
+    window.event.cancelBubble = true;
+    event.stopPropagation();
+  } catch (error) {
+    //error message
+  }
+
+  let accordionGroup = event.target.closest(".accordion-group"),
+    toggleAllButton = accordionGroup.querySelector(".accordion-toggle-btn");
+
+  if (
+    toggleAllButton.classList.contains("accordion-toggle-btn--closed") &&
+    accordionGroup.querySelectorAll(".accordion-button.collapsed").length == 0
+  ) {
+    toggleAllButton.classList.remove("accordion-toggle-btn--closed");
+    toggleAllButton.classList.add("accordion-toggle-btn--open");
+    toggleAllButton.textContent = "Close all";
+  } else if (
+    toggleAllButton.classList.contains("accordion-toggle-btn--open") &&
+    accordionGroup.querySelectorAll(".accordion-button.collapsed").length > 0
+  ) {
+    toggleAllButton.classList.remove("accordion-toggle-btn--open");
+    toggleAllButton.classList.add("accordion-toggle-btn--closed");
+    toggleAllButton.textContent = "Open all";
+  }
+}
+
+/**
+ * Open and scroll to an accordion panel specified via URL hash.
+ *
+ * @memberof module:Accordion
+ *
+ * @param {Object} event - (optional) The event that triggered this function.
+ * @returns {void}
+ */
+export function accordionHashLinks (event) {
+  let urlHash = window.location.hash,
+    urlHashId = urlHash.substring(1),
+    cleanHash = filterSpecialChar(urlHash);
+
+  if (cleanHash.length > 0) {
+    let targetElement = document.querySelector(`#collapse-${urlHashId}`),
+      targetPanelButton = false;
+
+    // Stop default hash link behaviour if target matches current hash location.
+    if (event &&
+      ((event.type === 'hashchange' && event.newURL === event.oldURL) ||
+      (event.type === 'click' && event.target.hash === urlHash))
+    ) {
+      event.preventDefault();
+    }
+
+    // ID matching
+    if (targetElement && targetElement.closest('.accordion-item')) {
+      targetPanelButton = targetElement.closest(".accordion-item").querySelector(".accordion-button");
+    }
+    // Title matching
+    else {
+      let accordionButtons = document.querySelectorAll(".accordion-button");
+
+      if (event && event.type === 'click') {
+        cleanHash = filterSpecialChar(event.target.hash);
+      }
+
+      targetPanelButton = Array.from(accordionButtons).find((button) => filterSpecialChar(button.innerText) === cleanHash);
+    }
+
+    if (targetPanelButton){
+      if (targetPanelButton.matches(".collapsed")) targetPanelButton.click();
+
+      window.scrollTo(0, targetPanelButton.getBoundingClientRect().top +
+      document.documentElement.scrollTop);
+    }
+  }
+}
+
+/**
+ * filterSpecialChar
+ * @param {string} value - value to filter
+ * @return {undefined}
+ **/
+function filterSpecialChar(value) {
+  return decodeURI(value.toLowerCase().replace(/[^a-zA-Z0-9/]/g, ''));
+}