@qld-gov-au/qgds-bootstrap5 1.1.41 → 2.0.1

package/.eslintrc.cjs

@@ -1,31 +1,31 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true,
+  env: {
+    browser: true,
+    es2021: true,
   },
-  "extends": ["eslint:recommended", "plugin:json/recommended", "plugin:storybook/recommended"],
-  "overrides": [
+  extends: [
+    "eslint:recommended",
+    "plugin:json/recommended",
+    "plugin:storybook/recommended",
+  ],
+  overrides: [
     {
-      "env": {
-        "node": true,
+      env: {
+        node: true,
       },
-      "files": [
-        ".eslintrc.{js,cjs}",
-      ],
-      "parserOptions": {
-        "sourceType": "script",
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
       },
-    }
+    },
   ],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  "plugins": [
-    "@stylistic/js",
-  ],
-  "rules": {
-    "@stylistic/js/indent": ["warn", 2],
+  plugins: ["@stylistic/js"],
+  rules: {
+    // "@stylistic/js/indent": ["warn", 2],
     "one-var": 0,
     "no-tabs": 0,
     "no-path-concat": 0,
@@ -39,14 +39,14 @@ module.exports = {
     "no-multi-spaces": [
       2,
       {
-        "exceptions": {
-          "Property": true,
-          "VariableDeclarator": true,
-          "ImportDeclaration": true,
-          "ObjectExpression": true,
+        exceptions: {
+          Property: true,
+          VariableDeclarator: true,
+          ImportDeclaration: true,
+          ObjectExpression: true,
         },
       },
     ],
     "no-warning-comments": 1,
   },
-}
+};

package/.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-    "accessibility.voice.keywordActivation": "off",
-    "accessibility.voice.speechTimeout": 800,
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-}
+  "accessibility.voice.keywordActivation": "off",
+  "accessibility.voice.speechTimeout": 800,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

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

@@ -49,13 +49,6 @@
           </div>
           {{/if}}
 
-          {{!-- ~A generic content block for edge cases. Allows any HTML via content variable~ --}}
-          {{#if content}}
-          <div class="banner-extra">
-            {{{ sanitise content }}}
-          </div>
-          {{/if}}
-
         </div>
         {{!-- End banner content --}}
 

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

@@ -1,28 +1,23 @@
 <!-- QGDS Partial: card -->
 
 <div class="col{{#if feature}}-md-12 col-lg-12{{/if}}">
-
     <div class="card card-{{variantClass}} {{variantClass}} {{iconPosition}} card-{{action}}-action{{#if arrow}} card-arrow{{/if}}{{#if equalHeight}} h-100{{/if}}{{#if feature}} card-feature card-feature-{{featureImagePosition}}{{/if}}{{#if video}} card-video{{/if}}">
-
         {{#if image}}
         <div class="card-img ratio ratio-16x9">
             <div class="{{#if feature}}card-img-{{featureImagePosition}}{{else}}card-img-top{{/if}}"
             style="--card-image:url({{image}})" alt="{{imageAlt}}"></div>
-
             {{#if video}}
             <div class="video-overlay">
                 <div class="video-nav">
-                    <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
-
+                    <div class="video-watch"><span class="qld-icon qld-icon-lg qld-icon-video" aria-hidden="true"></span><span>Watch</span></div>
                     {{#if videoDuration}}
-                        <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{videoDuration}}</span></div>
+                        <div title="Video duration" class="video-duration"><span class="qld-icon qld-icon-sm qld-icon-clock" aria-hidden="true"></span><span>{{videoDuration}}</span></div>
                     {{/if}}
                 </div>
             </div>
             {{/if}}
         </div>
         {{/if}}
-
         {{#if iconClasses}}
             {{#ifCond iconPosition '==' 'icon-top'}}
                 <div class="card-icon-background">
@@ -35,14 +30,11 @@
                 </div>
             {{/ifCond}}
         {{/if}}
-
         {{#if feature}}<div class="card-inner">{{/if}}
-
             <div class="card-body">
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-
                 <h3 class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
@@ -50,26 +42,20 @@
                     {{ title }}
                     {{/if }}
                 </h3>
-
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}
                 </div>
                 {{/if}}
-
                 {{#if arrow}}
-                <div class="card-icon icon-arrow"></div>
+                    <div class="qld-icon qld-icon-md qld-icon-arrow-right"></div>
                 {{/if}}
             </div>
-
             {{#if footer}}
             <div class="card-footer">
                 {{{footer}}}
             </div>
             {{/if }}
-
         {{#if feature}}</div>{{/if}}
-
     </div>
-
 </div>

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

@@ -0,0 +1,7 @@
+{{#if customLinks }}
+    <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 }}
+    </ul>
+{{/if}}

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

@@ -0,0 +1,25 @@
+<div class="col-12 col-md-6 col-lg-12">
+        <!-- <h3 class="footer-heading">{{#if feedbackForm.title}}{{feedbackForm.title}}{{else}}Website feedback{{/if}}</h3> -->
+        <p>{{#if feedbackForm.content}}{{feedbackForm.content}}{{else}}Help us improve the content on our website or tell us what is working well.{{/if}}</p>
+    </div>
+    <div class="col-12 col-md-6 col-lg-12">
+        <div id="qg-feedback-toggle" class="qg-footer-feedback-wrap">
+            <a id="btn-footer-feedback" class="btn btn-global-secondary qg-feedback-toggle collapsed" data-bs-toggle="collapse" href="#qg-footer-feedback" role="button" aria-expanded="false" aria-controls="qg-footer-feedback" data-analytics-link-group="qg-feedback">
+                {{#if feedbackForm.btnTitle}}{{feedbackForm.btnTitle}}{{else}}Leave your feedback{{/if}}
+            </a>
+            <div id="qg-footer-feedback" class="qg-footer-feedback__v2 collapse">
+                {{#if feedbackForm.formAttr }}<div id="feedbackFormIO" {{#each feedbackForm.formAttr}}{{#if this}}{{@key}}="{{this}}"{{else}}{{@key}}{{/if}} {{/each}}>
+                {{else}}
+                {{!default if not set}}<div id="feedbackFormIO" data-formio data-formio-project-name="oldkihhcwbdtwye" data-formio-form-name="footerfeedbackcontactus" data-formio-env-url="api.forms.platforms.qld.gov.au" data-formio-createform-options="formioCreateFormOptions" data-formio-createform-controller="formioCreateFormController">
+                {{/if}}
+                    <div class="qg-spinner" role="status">
+                        <div class="spinner-border"></div>
+                        <div class="qg-spinner-label">Loading...</div>
+                    </div>
+                </div>
+                <div class="qg-footer-feedback-footer">
+                    <a class="qg-footer-feedback__close" data-bs-toggle="collapse" href="#qg-footer-feedback" role="button" aria-label="Close Feedback Form" aria-expanded="true" aria-controls="qg-footer-feedback">Close</a>
+                </div>
+            </div>
+        </div>
+    </div>

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

@@ -0,0 +1,14 @@
+{{#if followLinks }}
+    <ul class="nav footer-link-list footer-link-list--social">    
+    {{#each followLinks }}
+      <li>
+          <a  class="nav-link"  href="{{ link }}" {{#if target}}target="{{ target }}"{{/if}}>
+              <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>
+          </a>
+      </li>
+    {{/each }}
+    </ul>
+{{/if}}