@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/dist/components/bs5/button/button.hbs

@@ -3,40 +3,58 @@
 <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
 
+{{!-- Progress spinner partial --}}
+{{#*inline "progressSpinner"~}}
+<div class="spinner-border"></div>
+{{~/inline}}
+
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'leading'}}
-      {{~>buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  
-  {{~label~}}
-  
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'trailing'}}
-      {{>buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
+  <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}}>
+    {{#if isprogress}}
+      {{~>progressSpinner~}}
+    {{else}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'leading'}}
+          {{~>buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/if}}
+    
+    <span class="btn-label-default">{{~label~}}</span>
+    {{#if isprogress}}
+      <span class="btn-label-progress">{{~progressLabel~}}</span>
+    {{/if}}
+    {{#unless isprogress}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+          {{~>buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/unless}}
   </button>
 
 {{else}}
+  <a class="btn {{variantClass}} {{#if isdisabled}}disabled {{/if}}{{#if isprogress}}disabled btn-progress{{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} {{#if isprogress}}aria-live="polite"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}} {{{dataatts}}}>
+    {{#if isprogress}}
+      {{~>progressSpinner~}}
+    {{else}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'leading'}}
+          {{~> buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/if}}
+    
+    <span class="btn-label-default">{{~label~}}</span>
+    <span class="btn-label-progress">{{~progressLabel~}}</span>
 
-  <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'leading'}}
-      {{~> buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  
-  {{~label~}}
-
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'trailing'}}
-      {{~> buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  </a>
-
+    {{#unless isprogress}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+          {{~> buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/unless}}
+    </a>
 {{/unless}}

package/dist/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/components/bs5/containerLayout/containerLayout.hbs

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+
+  <link rel="stylesheet" href="/assets/css/qld.bootstrap.css">
+  <script type="text/javascript" async src="/assets/js/bootstrap.min.js"></script>
+  <script type="text/javascript" async src="/assets/js/qld.bootstrap.min.js"></script>
+
+</head>
+
+<body>
+
+  <div class="{{wrapperClasses}} {{join debugClasses }}">
+
+    {{> globalAlert globalAlert }}
+    {{> header header}}
+    {{> navbar navbar}}
+    
+    <main id="content">
+
+        <!-- breadcrumbs-->
+        {{#if breadcrumbsData }}
+        <div class="alt px-0">
+            <div class="container">
+              {{> breadcrumbs breadcrumbsData }}        
+            </div>
+        </div>
+        {{/if}}
+
+        <!-- Content Wrapper -->
+        <div class="container mt-40 mt-lg-64">
+          <div class="row">
+          
+          <!-- Side Navigation -->
+          {{#if sidenavData }}
+          <div class="col-12 col-lg-3 order-last order-lg-first mt-5 mt-lg-0">
+          {{> sidenav sidenavData }}
+          </div>
+          {{/if}}
+
+
+          <!-- Content body -->
+          <div class="col-12 col-lg-8">
+
+            <!-- Content has an additional 2rem padding-x -->  
+            <div class="qld-content-body px-32">
+
+              {{!-- Main content area --}}
+              <h1>{{title}}</h1>
+
+              {{#if abstract}}
+              <div class="qld-abstract">
+                {{{ abstract }}}
+              </div>
+              {{/if}}
+
+              {{> inpagenav inpageNavData }}
+
+              <h2 id="section-one">Section heading</h2>
+              <p>This is the main content inside the wrapper.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam impedit repudiandae nulla recusandae soluta officia possimus, nostrum nisi fuga laboriosam provident, est molestiae alias blanditiis explicabo consequuntur ullam expedita! Ab.</p>
+
+
+              <h3>Content heading</h3>
+              <p>This is the main content inside the wrapper.</p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+
+
+              <h2 id="section-two">Section heading</h2>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>  
+
+
+              <section class="emphasis light">
+                <h2>Section heading (h2)</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
+              </section>
+
+            </div><!-- // content-body -->
+          </div><!-- // content-body-column -->
+
+          </div>
+
+          <!-- Content Footer -->
+          {{>contentFooter contentFooterData }}
+        </div>
+
+
+        
+    {{> footer footer}}
+
+  </div>
+
+
+
+</body>
+</html>

package/dist/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/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/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}}