@qld-gov-au/qgds-bootstrap5 1.1.30 → 1.1.32

package/.esbuild/plugins/qgds-plugin-generate-icon-assets.js

@@ -0,0 +1,103 @@
+import fs from "fs";
+import path from "path";
+import log from "../helpers/logger.js";
+import svgToMiniDataURI from "mini-svg-data-uri";
+import { parse } from "node-html-parser";
+
+const PREFIX_QGDS = 'qgds-icon-';
+
+/**
+ * Generate CSS variables of icons from SVG files.
+ * @param {string} inputDir - Directory containing SVG icon files
+ * @param {string} outputIconVars - Output SASS file for the generated CSS variables
+ * @param {string} outputIconNames - Output SASS file for the generated icon names - to build icon utility classes
+ * @param {string} outputIconJs - Output JS file for the generated icon names - to be used in Storybook
+ */
+export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons", 
+  outputIconSprite = "./src/img/icons-sprite.svg",
+  outputIconVars = "./src/components/bs5/icons/_icons.variables.scss", 
+  outputIconNames = "./src/components/bs5/icons/_icons.list.scss", 
+  outputIconJs = "./src/components/bs5/icons/_icons.list.js") {
+
+  return {
+    name: "qgds-generate-icon-variables",
+
+    setup(build) {
+
+      const regenerate = () => {
+        
+        log("yellow", "\n Start generating icons assets... \n");
+
+        if (!fs.existsSync(inputDir)) {
+          console.error(`Input directory not found: ${inputDir}`);
+          return;
+        }
+
+        const icons = fs.readdirSync(inputDir).filter((file) => file.endsWith(".svg"));
+
+        if (icons.length === 0) {
+          log("red", `SVG files not found in ${inputDir}`);
+          return;
+        }
+
+        let spriteContent = `<svg xmlns="http://www.w3.org/2000/svg" role="img">\n`;
+        let cssVariables = `:root {\n`;
+        let sassVariables = `$icon-names: (\n`;
+        let jsVariables = [];
+
+        for (const file of icons) {
+          const name = path.basename(file, ".svg");
+          const fullPath = path.join(inputDir, file);
+          const svgContent = fs.readFileSync(fullPath, "utf8");
+          const root = parse(svgContent);
+          const svg = root.querySelector("svg");
+          const viewBox = svg.getAttribute("viewBox") || "0 0 32 32";
+          const innerContent = svg.innerHTML.trim();
+          const dataUri = svgToMiniDataURI(svgContent);
+
+          log("blue", `  Processing icon: ${name} (${fullPath})`);
+          if (!svg) {
+            log("red", `  Invalid SVG on file - ${file}`);
+            continue;
+          }
+
+          // Sanitise the name to avoid issues with special characters (and space) on filename
+          const sanitisedName = name.replace(/[^a-zA-Z0-9\-_]/g, '-').toLowerCase();
+          if (sanitisedName !== name) {
+            log("yellow", `  Renaming icon: "${name}" to "${sanitisedName}"`);
+          }
+          spriteContent += `  <symbol id="${PREFIX_QGDS}${sanitisedName}" viewBox="${viewBox}">\n`;
+          spriteContent += `    ${innerContent}\n`;
+          spriteContent += `  </symbol>\n\n`;
+
+          cssVariables += `  --${PREFIX_QGDS}${sanitisedName}: url("${dataUri}");\n`;
+
+          sassVariables += `  ${sanitisedName},\n`;
+
+          jsVariables.push(sanitisedName);
+        }
+        spriteContent += `</svg>\n`;
+        cssVariables += `}\n`;
+        sassVariables += `);\n`;
+
+        fs.writeFileSync(outputIconSprite, spriteContent);
+        fs.writeFileSync(outputIconVars, cssVariables);
+        fs.writeFileSync(outputIconNames, sassVariables);
+        fs.writeFileSync(outputIconJs, `export default ${JSON.stringify(jsVariables, null, 2)};\n`);
+
+        log("magenta", `Successfully generated icons assets:
+                         - Sprite file   ${outputIconSprite}
+                         - CSS variables ${outputIconVars}
+                         - SASS names    ${outputIconNames}
+                         - JS names      ${outputIconJs}
+                         \n\n`);
+
+      };
+
+      build.onStart(() => {
+        regenerate();
+      });
+
+    },
+  };
+}

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.30","branch":"HEAD","tag":"v1.1.30","commit":"9b87104fe864732b4cd0b157cd4f375c79cdfba9","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.32","branch":"HEAD","tag":"v1.1.32","commit":"1d55b56ad069b4146612bbea841bb366a02dc355","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/assets/components/bs5/image/image.hbs

@@ -0,0 +1,24 @@
+{{! Image template }}
+{{#*inline "imageTag"}}
+  <img class="{{ ratioClass }} {{ otherClass }} {{ positionX }} {{ positionY }}"
+    src="{{ src }}"
+    alt="{{ alt }}"
+    {{~#if width}} width="{{ width }}{{ widthUnit }}"{{/if~}}
+    {{~#if height}} height="{{ height }}{{ heightUnit }}"{{/if~}}
+    {{~#if lazy}} loading="lazy"{{/if~}}
+    {{~#if style}} style="{{ style }}"{{/if~}}
+    {{~#if tabindex}} tabindex="{{ tabindex }}"{{/if~}}
+    {{~#if role}} role="{{ role }}"{{/if~}}
+  />
+{{/inline}}
+
+{{#if src}}
+  {{#if caption}}
+    <figure class="{{ figureClass }}" {{#if width}}style="width:{{ width }}{{ widthUnit }}"{{/if}}>
+      {{> imageTag}}
+      <figcaption>{{ caption }}</figcaption>
+    </figure>
+  {{else}}
+    {{> imageTag}}
+  {{/if}}
+{{/if}}