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

package/.storybook/preview.js

@@ -102,13 +102,21 @@ const preview = {
       },
       defaultTheme: "None",
     }),
-    (Story) => {
+    (Story, { parameters }) => {      
       init(Handlebars);
-      return `
-			
-					${Story()}
-			
-      		`;
+      const { pageLayout, wrapperClasses} = parameters;
+      switch (pageLayout) {
+        case 'with-wrapper':
+          return `
+            <div class="${wrapperClasses}">
+              ${Story()}	
+            </div>
+          `;
+        default:
+          return `			
+              ${Story()}			
+              `;
+      }
     },
   ],
 

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

@@ -1,6 +1,6 @@
 {{!-- Button icon partial --}}
 {{#*inline "buttonIcon"~}}
-<span class="btn-icon {{iconClass}} {{iconPosition}}"></span>
+<span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
 
 {{#unless islink}}

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

@@ -24,7 +24,16 @@
         {{/if}}
 
         {{#if iconClasses}}
-        <div class="card-icon {{iconPosition}} {{iconClasses}}"></div>
+            {{#ifCond iconPosition '==' 'icon-top'}}
+                <div class="card-icon-background">
+                    <span class="qld-icon qld-icon-xxl {{iconClasses}} {{iconPosition}}" aria-hidden="true"></span>
+                </div>
+            {{/ifCond}}
+            {{#ifCond iconPosition '==' 'icon-left'}}
+                <div class="card-icon-background">
+                    <span class="qld-icon qld-icon-lg {{iconClasses}} {{iconPosition}}" aria-hidden="true"></span>
+                </div>
+            {{/ifCond}}
         {{/if}}
 
         {{#if feature}}<div class="card-inner">{{/if}}

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

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

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

@@ -4,11 +4,11 @@
             style="background-image: url({{promoImage}});"
         {{/ifCond}}>
         <div class="image-panel">
-            <div class="promo-panel-image" 
-                {{#ifCond type '!=' 'promo'}}
-                    style="background-image: url({{promoImage}})"
-                {{/ifCond}}>
-            </div>
+            {{#ifCond type '!=' 'promo'}}
+            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            {{else}}
+                <div class="promo-panel-image"></div>
+            {{/ifCond}}
         </div>
         <div class="content-panel {{variantClass}}">      
             {{#if icon}}
@@ -32,20 +32,18 @@
                 {{/if}}
             </div>
             {{#if cta.items}}
-                <ul class="cta-container">                            
-                    {{#each cta.items}}
-                        <li>
-                            {{> callToAction label=value href=url target=target class=class arialabel=value id=id}}
-                        </li>
+                <div class="cta-container">                            
+                    {{#each cta.items}}                        
+                        {{> callToAction label=value href=url target=target class=class arialabel=value id=id}}                        
                     {{/each}}                            
-                </ul>
+                </div>
             {{/if}}
             {{#if btn.items}}
-                <ul class="btn-container">
+                <div class="btn-container">
                     {{#each btn.items}}
-                        <li>{{> button islink=islink variantClass=variantClass label=label href=href target=target dataatts="data-type='class'"}}</li>
+                        {{> button islink=islink variantClass=variantClass label=label href=href target=target dataatts="data-type='class'"}}
                     {{/each}}
-                </ul>
+                </div>
             {{/if}}
         </div>
     </div>

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

@@ -1,5 +1,5 @@
 
-{{#ifCond type_variant '==' 'tab-section'}}
+{{#ifCond type_variant '==' 'section-tabs'}}
     <section class="container tab-content pb-5 pt-5 mb-0 {{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}">
         <div class="row" style="padding-inline: 2.5rem;">
             <h2>{{sibiling_section_title}}</h2>
@@ -11,15 +11,14 @@
 <!-- QGDS Tabs -->    
 <section class="qld-tabs {{~#if type_variant}} {{type_variant}}{{/if~}} {{~#if variant}} {{variant}}{{else}} default{{/if~}}">        
     <div class="tabs-area container">
-        <ul class="nav nav-tabs {{#ifCond type_variant '==' 'tab-section'}}{{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}{{/ifCond}}"  role="tablist">
+        <ul class="nav nav-tabs {{#ifCond type_variant '==' 'section-tabs'}}{{~#if tab_variant}} {{tab_variant}} {{else}} default{{/if~}}{{/ifCond}}"  role="tablist">
             {{#each data.items }}
                 <li class="nav-item" role="presentation">
                     <button class="nav-link {{#if @first}}active{{/if}}" id="{{toCamelCase this.tab_text}}-tab" data-bs-toggle="tab" data-bs-target="#{{toCamelCase this.tab_text}}-{{../unique_id}}-tab-pane" type="button" role="tab" aria-controls="#{{this.tab_text}}-tab-pane" aria-selected="{{#if @first}}true{{else}}false{{/if}}" {{#if this.disabled}}disabled{{/if}}>
                         <span>
                             {{#if this.icon}}
                                 <i class="{{this.icon}}"></i>
-                            {{/if}}
-                            {{this.tab_text}}
+                            {{/if}}{{~this.tab_text~}}
                         </span>
                     </button>
                 </li>
@@ -35,7 +34,7 @@
     <div class="tab-content container">
         {{#each data.items }}
             <section class="tab-pane fade {{#if @first}}show active{{/if}}" id="{{toCamelCase this.tab_text}}-{{../unique_id}}-tab-pane" role="tabpanel" aria-labelledby="{{this.tab_text}}-tab" tabindex="0">
-                {{#ifCond ../type_variant '==' 'tab-section'}}
+                {{#ifCond ../type_variant '==' 'section-tabs'}}
                     <h2>{{this.title}}</h2>
                 {{else}}
                     <h3>{{this.title}}</h3>

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

@@ -8,18 +8,20 @@
 {{! By default, 'not-ready' class is added and will be removed by javascript event handler.
     When thumbnail attribute is empty / does not exist, 'empty-thumbnail' css class is added. }}
 <section class="video not-ready {{#unless thumbnail}}empty-thumbnail{{/unless}} {{videoSize}}">
+    <div class="video-description">
+        {{{ description }}}
+    </div>
+    {{#if transcriptContent}}
+        {{{ transcriptAccordion }}}
+    {{/if}}
     <div class="video-player ratio ratio-{{aspectRatio}}">
-
         <a href="#" class="video-thumbnail video-controls" title="Play Video" 
             aria-label="Watch video {{#if duration}}- duration {{formatDuration duration "long"}}{{/if}}">
-
             <div class="video-thumbnail-image" style="--thumbnail:url({{thumbnail}})"></div>
-
             <div class="video-nav">
                 <div class="video-watch">
                     <span class="icon"></span><span>Watch</span>
                 </div>
-
                 {{#if duration}}
                     <div title="Video duration" class="video-duration">
                         <span class="icon"></span><span>{{formatDuration duration}}</span>
@@ -27,32 +29,18 @@
                 {{/if}}
             </div>
         </a>
-
         <div class="video-embed ratio ratio-{{aspectRatio}}">
             {{#ifCond source '===' 'vimeo'}}
                 <iframe title="Vimeo video" class="embed-responsive-item video-vimeo" allow="autoplay; fullscreen" allowfullscreen muted="muted" src="https://player.vimeo.com/video/{{videoId}}?rel=0&autoplay={{urlParams.autoplay}}&background={{urlParams.background}}&controls={{urlParams.controls}}"></iframe>
-
             {{else ifCond source '===' 'youtube'}}
                 <iframe title="YouTube video" class="embed-responsive-item video-youtube" allow="autoplay; fullscreen" allowfullscreen src="https://www.youtube.com/embed/{{videoId}}?rel=0&autoplay={{urlParams.autoplay}}&controls={{urlParams.controls}}"></iframe>
-
             {{else ifCond source '===' 'custom'}}
                 <iframe title="Custom video" class="embed-responsive-item video-custom" allow="autoplay; fullscreen" allowfullscreen
                 src="{{videoId}}"></iframe>
-
             {{else}}
                 <p class="text-center position-absolute top-50">A video has not been provided.</p>
-
             {{/ifCond}}
         </div>
     </div>
-
-    <div class="video-description">
-        {{{ description }}}
-    </div>
-
     {{! Render the transcript content in an accordion template }}
-    {{#if transcriptContent}}
-        {{{ transcriptAccordion }}}
-    {{/if}}
-
 </section>