@qld-gov-au/qgds-bootstrap5 2.0.12 → 2.1.0

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

@@ -4,7 +4,7 @@ import log from "../helpers/logger.js";
 import svgToMiniDataURI from "mini-svg-data-uri";
 import { parse } from "node-html-parser";
 
-const PREFIX_QGDS = 'qgds-icon-';
+const PREFIX_QGDS = "qgds-icon-";
 
 /**
  * Generate CSS variables of icons from SVG files.
@@ -13,19 +13,18 @@ const PREFIX_QGDS = 'qgds-icon-';
  * @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", 
+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") {
-
+  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)) {
@@ -33,7 +32,9 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
           return;
         }
 
-        const icons = fs.readdirSync(inputDir).filter((file) => file.endsWith(".svg"));
+        const icons = fs
+          .readdirSync(inputDir)
+          .filter((file) => file.endsWith(".svg"));
 
         if (icons.length === 0) {
           log("red", `SVG files not found in ${inputDir}`);
@@ -41,8 +42,8 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
         }
 
         let spriteContent = `<svg xmlns="http://www.w3.org/2000/svg" role="img">\n`;
-        let cssVariables = `:root {\n`;
-        let sassVariables = `$icon-names: (\n`;
+        let cssVariables = `// This file is autogenerated. Do not edit directly!\n:root {\n`;
+        let sassVariables = `// This file is autogenerated. Do not edit directly!\n$icon-names: (\n`;
         let jsVariables = [];
 
         for (const file of icons) {
@@ -62,7 +63,9 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
           }
 
           // Sanitise the name to avoid issues with special characters (and space) on filename
-          const sanitisedName = name.replace(/[^a-zA-Z0-9\-_]/g, '-').toLowerCase();
+          const sanitisedName = name
+            .replace(/[^a-zA-Z0-9\-_]/g, "-")
+            .toLowerCase();
           if (sanitisedName !== name) {
             log("yellow", `  Renaming icon: "${name}" to "${sanitisedName}"`);
           }
@@ -72,7 +75,7 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
 
           cssVariables += `  --${PREFIX_QGDS}${sanitisedName}: url("${dataUri}");\n`;
 
-          sassVariables += `  ${sanitisedName},\n`;
+          sassVariables += `  ${sanitisedName}: '${svgContent.replace(/\n|\r/g, "")}',\n`;
 
           jsVariables.push(sanitisedName);
         }
@@ -83,21 +86,25 @@ export function QGDSgenerateIconAssetsPlugin(inputDir = "./src/img/icons",
         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`);
-
+        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/button/button.hbs

@@ -10,7 +10,7 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

package/dist/assets/components/bs5/footer/customLinks.hbs

@@ -1,5 +1,5 @@
 {{#if customLinks }}
-    <ul class="nav footer-link-list footer-link-list--custom flex-column">      
+    <ul class="nav footer-link-list footer-link-list--custom flex-column">
         {{#each customLinks }}
         <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
         {{/each }}

package/dist/assets/components/bs5/footer/followLinks.hbs

@@ -6,7 +6,7 @@
               <span class="qld-icon qld-icon-md qld-icon-{{icon}} d-lg-none" aria-hidden="true"></span>
               <span class="qld-icon qld-icon-sm qld-icon-{{icon}} d-none d-lg-block" aria-hidden="true"></span>
               <span class="nav-link-label d-none d-lg-block">{{ label }}</span>
-              <span class="sr-only">{{ label }}</span>
+              <span class="sr-only">{{isdefined accessibleLabel label}}</span>
           </a>
       </li>
     {{/each }}

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.0","branch":"HEAD","tag":"v2.1.0","commit":"1610f625e3e2ba5c9420ba3ef0ebb53ed35820f6","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -1,5 +1,13 @@
-<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+<div class="alert {{variantClass}} {{customClass}}" role="alert"
+    {{#if ariaLabel}}
+    aria-label="{{ ariaLabel }}"
+    {{else}}
+    {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
+    {{/if}}
+>
     {{#if heading}}
         {{#if headingTag}}
             <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>

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

@@ -3,38 +3,40 @@
 -->
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
-        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
     <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
         <span class="btn-icon"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
-    <div class="suggestions suggestions__group d-none default">
+    
+    <div class="suggestions suggestions__group default">
         {{#if hasDefaultSuggestions}}
             <div class="default-suggestions">
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.popularServices}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.popularServicesLink}}
-                            <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
-
+                {{#if defaultSuggestions.categories}}
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
-                            <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
+                {{/if}}
             </div>
         {{/if}}
         {{#if hasDynamicSuggestions}}