npm - @qld-gov-au/qgds-bootstrap5 - Versions diffs - 2.0.7 → 2.0.9 - Mend

@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js +76 -66
package/.storybook/preview.js +1 -1
package/dist/assets/components/bs5/footer/footer.hbs +20 -18
package/dist/assets/components/bs5/head/head.hbs +1 -1
package/dist/assets/components/bs5/header/header.hbs +40 -52
package/dist/assets/components/bs5/header/headerBrand.hbs +9 -10
package/dist/assets/components/bs5/image/image.hbs +8 -5
package/dist/assets/components/bs5/logo/logo.hbs +2 -0
package/dist/assets/components/bs5/logo/logoCOADeliveringForQLD.hbs +49 -0
package/dist/assets/components/bs5/logo/logoCOALandscape.hbs +55 -109
package/dist/assets/components/bs5/logo/logoCOALandscape2Lines.hbs +55 -55
package/dist/assets/components/bs5/pageLayout/templates/contentPageWithForm.hbs +112 -93
package/dist/assets/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +57 -53
package/dist/assets/components/bs5/searchInput/searchInput.hbs +5 -5
package/dist/assets/css/qld.bootstrap.css +1 -1
package/dist/assets/css/qld.bootstrap.css.map +3 -3
package/dist/assets/css/qld.bootstrap.legacy.css +1 -1
package/dist/assets/css/qld.bootstrap.legacy.css.map +3 -3
package/dist/assets/img/coa-delivering-for-qld.svg +47 -0
package/dist/assets/img/coa-delivering-for-qld.svg.old +58 -0
package/dist/assets/img/coa-landscape-2lines.svg +63 -0
package/dist/assets/img/coa-landscape-web.svg +56 -0
package/dist/assets/js/handlebars.helpers.bundle.js +1 -1
package/dist/assets/js/handlebars.helpers.bundle.js.map +3 -3
package/dist/assets/js/handlebars.init.min.js +720 -708
package/dist/assets/js/handlebars.init.min.js.map +4 -4
package/dist/assets/js/handlebars.partials.js +720 -708
package/dist/assets/js/handlebars.partials.js.map +4 -4
package/dist/assets/js/qld.bootstrap.min.js +3 -3
package/dist/assets/js/qld.bootstrap.min.js.map +3 -3
package/dist/assets/node/handlebars.init.min.js +239 -199
package/dist/assets/node/handlebars.init.min.js.map +3 -3
package/dist/components/bs5/footer/footer.hbs +20 -18
package/dist/components/bs5/head/head.hbs +1 -1
package/dist/components/bs5/header/header.hbs +40 -52
package/dist/components/bs5/header/headerBrand.hbs +9 -10
package/dist/components/bs5/image/image.hbs +8 -5
package/dist/components/bs5/logo/logo.hbs +2 -0
package/dist/components/bs5/logo/logoCOADeliveringForQLD.hbs +49 -0
package/dist/components/bs5/logo/logoCOALandscape.hbs +55 -109
package/dist/components/bs5/logo/logoCOALandscape2Lines.hbs +55 -55
package/dist/components/bs5/pageLayout/templates/contentPageWithForm.hbs +112 -93
package/dist/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +57 -53
package/dist/components/bs5/searchInput/searchInput.hbs +5 -5
package/dist/package.json +12 -12
package/dist/sample-data/breadcrumbs/breadcrumbs.data.json +1 -1
package/dist/sample-data/header/header.variant.coBrand.data.json +5 -8
package/dist/sample-data/header/header.variant.endorsed.data.json +3 -6
package/dist/sample-data/header/header.variant.masterBrand.data.json +1 -6
package/dist/sample-data/header/header.variant.standAlone.data.json +3 -6
package/dist/sample-data/header/header.variant.subBrand.data.json +5 -8
package/dist/sample-data/image/image.data.json +4 -2
package/esbuild.js +1 -1
package/package.json +12 -12
package/src/components/bs5/banner/banner.scss +30 -21
package/src/components/bs5/banner/banner.stories.js +25 -16
package/src/components/bs5/breadcrumbs/breadcrumbs.data.json +1 -1
package/src/components/bs5/breadcrumbs/breadcrumbs.scss +7 -2
package/src/components/bs5/card/card.scss +1 -1
package/src/components/bs5/footer/footer.hbs +20 -18
package/src/components/bs5/footer/footer.scss +7 -5
package/src/components/bs5/header/Header.js +25 -0
package/src/components/bs5/header/_header-variables.scss +61 -247
package/src/components/bs5/header/header.functions.js +10 -15
package/src/components/bs5/header/header.hbs +40 -52
package/src/components/bs5/header/header.scss +170 -158
package/src/components/bs5/header/header.stories.js +37 -206
package/src/components/bs5/header/header.variant.coBrand.data.json +5 -8
package/src/components/bs5/header/header.variant.endorsed.data.json +3 -6
package/src/components/bs5/header/header.variant.masterBrand.data.json +1 -6
package/src/components/bs5/header/header.variant.standAlone.data.json +3 -6
package/src/components/bs5/header/header.variant.subBrand.data.json +5 -8
package/src/components/bs5/header/headerBrand.hbs +9 -10
package/src/components/bs5/image/image.data.json +4 -2
package/src/components/bs5/image/image.hbs +8 -5
package/src/components/bs5/image/image.scss +29 -7
package/src/components/bs5/image/image.stories.js +77 -57
package/src/components/bs5/inpageAlert/inpageAlert.scss +107 -120
package/src/components/bs5/linkColumns/linkColumns.scss +18 -25
package/src/components/bs5/logo/logo.hbs +2 -0
package/src/components/bs5/logo/logoCOADeliveringForQLD.hbs +49 -0
package/src/components/bs5/logo/logoCOALandscape.hbs +55 -109
package/src/components/bs5/logo/logoCOALandscape2Lines.hbs +55 -55
package/src/components/bs5/navbar/navbar.scss +36 -14
package/src/components/bs5/pageLayout/pageLayout.stories.js +11 -45
package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs +112 -93
package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +57 -53
package/src/components/bs5/searchInput/SearchInput.js +3 -5
package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +5 -5
package/src/components/bs5/searchInput/searchInput.hbs +5 -5
package/src/components/bs5/searchInput/searchInput.scss +17 -5
package/src/components/bs5/tag/tag--large.stories.js +53 -0
package/src/components/bs5/tag/tag--standard.stories.js +39 -0
package/src/components/bs5/tag/tag--status.stories.js +97 -0
package/src/components/bs5/tag/tag.scss +67 -36
package/src/components/bs5/tag/tag.stories.js +69 -106
package/src/css/main.scss +2 -2
package/src/css/mixins/_index.scss +1 -0
package/src/css/mixins/focusable.scss +6 -5
package/src/css/mixins/make-link.scss +40 -0
package/src/css/qld-theme.scss +16 -8
package/src/css/qld-type.scss +3 -73
package/src/css/variables/animation.scss +5 -0
package/src/img/coa-delivering-for-qld.svg +47 -0
package/src/img/coa-delivering-for-qld.svg.old +58 -0
package/src/img/coa-landscape-2lines.svg +63 -0
package/src/img/coa-landscape-web.svg +56 -0
package/src/js/handlebars.helpers.js +51 -38
package/src/js/handlebars.partials.js +12 -10
package/dist/assets/img/_coa_header-logo-qgov--stacked.svg +0 -171
package/dist/assets/img/_coa_header-logo-qgov-masterbrand.svg +0 -56
package/dist/assets/img/_coa_preheader-logo-qgov.svg +0 -56
package/src/img/_coa_header-logo-qgov--stacked.svg +0 -171
package/src/img/_coa_header-logo-qgov-masterbrand.svg +0 -56
package/src/img/_coa_preheader-logo-qgov.svg +0 -56

package/dist/assets/components/bs5/pageLayout/templates/contentPageWithForm.hbs CHANGED Viewed

@@ -2,108 +2,127 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
 </head>
 <body>
-    {{> globalAlert globalAlert}}
-    {{> header header}}
-    {{> navbar navbar}}
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
-    {{#if banner}}
-    {{> banner banner}}
+  <!-- Header -->
+  {{> header header }}
+  <!-- Navbar -->
+  {{> navbar navbar}}
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
+  <div class="container mt-40 mt-lg-64">
+    {{#if breadcrumbs}}
+    <!-- breadcrumbs -->
+    {{> breadcrumbs breadcrumbs}}
     {{/if}}
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
+    <!-- Start Main Content Body -->
+    <div class="row">
+      <!-- Start Side navigation column (span 3) -->
+      <div class="col-12 col-lg-3">
+        <!-- QGDS Side Navigation Component -->
+        {{> sidenav sidenav}}
+      </div>
+      <!-- End Side navigation column -->
+      <!-- Start Main Column (span 8) -->
+      <div class="col-12 col-lg-8 mt-40 mt-lg-0">
+        <!-- Main Content div, includes a 2rem/32px horizontal padding on large screens and up -->
+        <main class="px-lg-32">
+          <h1 id="section-heading">Single page form (H1)</h1>
+          <p>Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback
+            is confidential.</p>
+          <h2 id="form-heading">Enquiry form (H2)</h2>
+          {{#if inpageAlert}}
+          <!-- Inpage Alert -->
+          <div class="mb-32">
+            {{> inpageAlert inpageAlert}}
+          </div>
+          {{/if}}
+          <!-- Example WYSIWYG content -->
+          <p>Any information submitted using this form will be used in line with our privacy statement.</p>
+          <p>Required fields are marked with an *</p>
+          {{#if form}}
+          <!-- Example Form, with 2rem vertical spacing -->
+          <form class="qld-form my-32">
+            {{#each form.fields1}}
+            <div class="form-group mb-32">
+              {{#ifCond type '==' 'textbox'}}
+              {{> textbox this}}
+              {{else ifCond type '==' 'textarea'}}
+              {{> textarea this}}
+              {{else ifCond type '==' 'radio'}}
+              {{> formcheck this}}
+              {{/ifCond}}
             </div>
-            {{/if}}
+            {{/each}}
+            <h3 id="contact-details">Contact details (H3)</h3>
+            {{#each form.fields2}}
+            <div class="form-group mb-32">
+              {{#ifCond type '==' 'textbox'}}
+              {{> textbox this}}
+              {{else ifCond type '==' 'select'}}
+              {{> select this}}
+              {{else ifCond type '==' 'checkbox'}}
+              {{> formcheck this}}
+              {{/ifCond}}
+            </div>
+            {{/each}}
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                {{/if}}
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-                    <!-- Main Content Sections -->
-                    <div class="content-section mb-5 px-1 px-md-32">
-                        <h1 id="section-heading">Single page form (H1)</h1>
-                        <p>
-                            Your feedback is important to us. It tells us how we can improve and what we’re doing well. Your feedback is confidential.
-                        </p>
-                        <h2 id="form-heading">Enquiry form (H2)</h2>
-                        {{#if inpageAlert}}
-                        <!-- Inpage Alert -->
-                        <div class="mb-32">
-                            {{> inpageAlert inpageAlert}}
-                        </div>
-                        {{/if}}
-                        <div class="mb-32">
-                            <p>Any information submitted using this form will be used in line with our privacy statement.</p>
-                            <p>Required fields are marked with an *</p>
-                        </div>
-                        {{#if form}}
-                        <form class="qld-form mb-5">
-                            {{#each form.fields1}}
-                            <div class="form-group mb-32">
-                                {{#ifCond type '==' 'textbox'}}
-                                {{> textbox this}}
-                                {{else ifCond type '==' 'textarea'}}
-                                {{> textarea this}}
-                                {{else ifCond type '==' 'radio'}}
-                                {{> formcheck this}}
-                                {{/ifCond}}
-                            </div>
-                            {{/each}}
-                            <h3 id="form-heading">Contact details (H3)</h3>
-                            {{#each form.fields2}}
-                            <div class="form-group mb-32">
-                                {{#ifCond type '==' 'textbox'}}
-                                {{> textbox this}}
-                                {{else ifCond type '==' 'select'}}
-                                {{> select this}}
-                                {{else ifCond type '==' 'checkbox'}}
-                                {{> formcheck this}}
-                                {{/ifCond}}
-                            </div>
-                            {{/each}}
-                            {{#if form.buttons}}
-                            <div class="form-actions d-flex mt-5 gap-4">
-                                {{#each form.buttons}}
-                                {{> button this}}
-                                {{/each}}
-                            </div>
-                            {{/if}}
-                        </form>
-                        {{/if}}
-                    </div>
-                </div>
-                {{> contentFooter contentFooter}}
+            {{#if form.buttons}}
+            <div class="form-actions d-flex mt-5 gap-4">
+              {{#each form.buttons}}
+              {{> button this}}
+              {{/each}}
             </div>
-        </div>
-    </main>
-    {{> footer footer}}
+            {{/if}}
+          </form>
+          {{/if}}
+        </main>
+      </div>
+      <!-- End Column (span 8) -->
+    </div>
+    <!-- End Content Row -->
+    <!-- Start QGDS Content Footer -->
+    <div class="mt-64">
+      {{> contentFooter contentFooter}}
+    </div>
+  </div>
+  <!-- End Main .container -->
+  <!-- Start QGDS Footer -->
+  {{> footer footer}}
+  <!-- End QGDS Footer -->
 </body>
 </html>

package/dist/assets/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs CHANGED Viewed

@@ -12,7 +12,7 @@
   {{> globalAlert globalAlert}}
   <!-- Header -->
-  {{> header header }}
+  {{> header header }}
   <!-- Navbar -->
   {{> navbar navbar}}
@@ -21,40 +21,37 @@
   {{> banner banner}}
   {{/if}}
-  <main>
+  <div class="container mt-40 mt-lg-64">
-    <div class="container mt-40 mt-lg-64">
-      {{#if breadcrumbs}}
-      <div class="row">
-        <div class="col-12">
-          <!-- breadcrumbs -->
-          {{> breadcrumbs breadcrumbs}}
-        </div>
-      </div>
-      {{/if}}
+    {{#if breadcrumbs}}
+    <!-- breadcrumbs -->
+    {{> breadcrumbs breadcrumbs}}
+    {{/if}}
+    <!-- Start Main Content Body -->
+    <div class="row">
-      <!-- Main Grid Layout: Side navigation and content -->
-      <div class="row">
+      <!-- Start Side navigation column (span 3) -->
+      <div class="col-12 col-lg-3">
+        <!-- QGDS Side navigation Component -->
+        {{> sidenav sidenav}}
+      </div>
+      <!-- End Side navigation column -->
-        <!-- Side navigation column -->
-        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
-          {{> sidenav sidenav}}
-        </div>
-        <!-- End Side navigation column -->
+      <!-- Start Main Column (span 8) -->
+      <div class="col-12 col-lg-8 mt-40 mt-lg-0">
-        <!-- Content Column -->
-        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
+        <!-- Main Content div, includes a 2rem/32px horizontal padding on large screens and up -->
+        <main class="px-lg-32">
           {{#if inpagenav}}
-          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          <!-- QGDS Inpagenav Component -->
           {{> inpagenav inpagenav}}
           {{/if}}
           <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
           <div class="mt-32 mt-lg-64">
-            <h2 id="section-heading">Section heading (H2)</h2>
+            <h2 id="section-heading">Section heading (H2)</h2>
             <p>
               Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat
               feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum
@@ -67,20 +64,20 @@
           </div>
           <!-- Content Section with top vertical spacer (2rem mobile, 4rem LG and above) -->
           <div class="mt-32 mt-lg-64">
             <h2 id="content-heading">Content heading (H2)</h2>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.</p>
             {{#if calloutdata}}
-            <!-- Callout Component -->
+            <!-- QGDS Callout Component -->
             {{> callout calloutdata}}
             {{/if}}
           </div>
           <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
@@ -90,12 +87,12 @@
             <h4 id="fees-and-charges">Fees and charges (H4)</h4>
             <p>Details about fees and charges for vehicle registration.</p>
             {{#if accordionItems}}
-            <!-- QGDS Accordion Component with 1.5rem vertical spacer -->
+            <!-- QGDS Accordion Component with 24px/1.5rem margin-top -->
             <div class="mt-24">
-            {{> accordion accordionItems}}
+              {{> accordion accordionItems}}
             </div>
             {{/if}}
           </div>
@@ -110,46 +107,53 @@
           <!-- Emphasis Container, with top vertical spacer: 2rem default (mobile), 4rem LG and above -->
           <div class="mt-40 mt-lg-64 bg-light content-emphasis">
             <h2 id="inspection">Section heading (H2) with emphasis</h2>
-            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt
+              ultrices commodo vestibulum non netus. </p>
             <!-- QGDS Call To Action button -->
             {{> callToAction callToAction}}
-          </div>
+          </div>
           <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
           <div class="mt-32 mt-lg-64">
             <h2 id="inspection">Section heading (H2)</h2>
-            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. </p>
+            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt
+              ultrices commodo vestibulum non netus. </p>
             {{#if table}}
-            <!-- Table Component (.my-40 wrapper provides vertical spacing) -->
+            <!-- QGDS Table Component -->
             <div class="mt-24">
-            {{> table table}}
+              {{> table table}}
             </div>
             {{/if}}
           </div>
-        </div>
-        <!-- End Main Content Section -->
+        </main>
+        <!-- End Main Content div -->
       </div>
-      <!-- End Content Column -->
+      <!-- End Column (8) -->
+    </div>
+    <!-- End Row -->
-      <!-- QGDS Content Footer Component -->
-      <div class="mt-64">
+    <!-- Start QGDS Content Footer -->
+    <div class="mt-64">
       {{> contentFooter contentFooter}}
-      </div>
+    </div>
+  </div>
-  </main>
-  <!-- Footer -->
+  <!-- Start QGDS Footer -->
   {{> footer footer}}
+  <!-- End QGDS Footer -->
 </body>
 </html>

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

@@ -4,7 +4,10 @@
 <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}} />
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
     {{#if suggestions}}
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
@@ -36,8 +39,5 @@
         <div class="dynamic-suggestions"></div>
     </div>
     {{/if}}
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
-        <span class="btn-label">{{ buttonLabel }}</span>
-    </button>
 </div>