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

package/src/components/bs5/navbar/navbar.stories.js

@@ -312,10 +312,15 @@ export default {
 };
 
 export const Default = {
+  parameters: {
+    docs: {
+      story: { height: "80vh" },
+    },
+  },
   args: {
     "Nav alternativeColor": false,
     "Nav verticalOrientation": false,
-    "Nav navbarBrandName": "",
+    "Nav navbarBrandName": "Menu",
     "Add Navigation Item": 0,
     // Initialize base items with iconName
     ...(() => {
@@ -500,8 +505,32 @@ export const Default = {
           align-items: center;
         }
         @media (width <= 992px) {
+          
           #burgerBtn {
+            --nav-header-icon-color: #ffe500;
             display: flex !important;
+            flex-direction: column;
+            gap:0;
+            .qld-icon {
+              background-color: var(--nav-header-icon-color);
+            }
+          }
+          .navbar.show #overlay {
+            position: absolute;
+          }
+          #story--3-components-navbar--default--primary-inner:has(.show) {
+            #storybook-only-header {
+              display:none;
+            }
+          }
+          #storybook-root:has(.show) {
+            #storybook-only-header {
+              display:none;
+            }
+          }
+          .navbar #burgerCloseBtn::before {
+            --nav-header-icon-color: var(--#{$prefix}brand-accent);
+            background-color: var(--nav-header-icon-color, #008635);
           }
         }
         @media (width >= 992px) {
@@ -519,7 +548,7 @@ export const Default = {
         <div id="storybook-only-header">
           <button id="burgerBtn" class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#main-nav" aria-expanded="false" aria-controls="collapseExample">
             <span class="qld-icon qld-icon-xl qld-icon-menu"></span>
-            Menu
+            menu
           </button>
         </div>
       `;

package/src/components/bs5/pageLayout/ThemeShowcase.stories.js

@@ -0,0 +1,249 @@
+export default {
+  title: "5. Templates/Theme Showcase",
+  render: (args) => {
+    return args.content;
+  },
+  argTypes: {
+    themeClass: {
+      control: { type: 'select' },
+      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
+      description: 'Theme class to apply to the content area',
+    },
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+      },
+    },
+  },
+};
+
+/**
+ * Default Theme
+ * The default theme uses the base color scheme without additional background styling
+ */
+export const DefaultTheme = {
+  args: {
+    content: `
+      <div class="default p-4 mb-4 border">
+        <h2>Default Theme</h2>
+        <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Background Utilities</h3>
+        <div class="row g-3">
+          <div class="col-md-4">
+            <div class="bg-default p-3 rounded">
+              <strong>.bg-default</strong><br>
+              Background using default theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light p-3 rounded">
+              <strong>.bg-light</strong><br>
+              Background using light theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light-alt p-3 rounded">
+              <strong>.bg-light-alt</strong><br>
+              Background using light alt color
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Light Theme
+ * The light theme provides a bright, clean appearance
+ */
+export const LightTheme = {
+  args: {
+    content: `
+      <div class="light p-4 mb-4 border">
+        <h2>Light Theme</h2>
+        <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Theme Features</h3>
+        <ul>
+          <li>Automatic color and background-color application</li>
+          <li>Optimized contrast ratios</li>
+          <li>Consistent styling across components</li>
+        </ul>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Alt Theme
+ * The alt theme provides an alternative light styling
+ */
+export const AltTheme = {
+  args: {
+    content: `
+      <div class="alt p-4 mb-4 border">
+        <h2>Alt Theme</h2>
+        <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <blockquote class="blockquote mt-4">
+          <p>"The alt theme provides visual variety while maintaining accessibility standards."</p>
+          <footer class="blockquote-footer">QLD Design System</footer>
+        </blockquote>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Theme
+ * The dark theme provides a bold, high-contrast appearance
+ */
+export const DarkTheme = {
+  args: {
+    content: `
+      <div class="dark p-4 mb-4 border">
+        <h2>Dark Theme</h2>
+        <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <div class="alert alert-info mt-4">
+          <h4 class="alert-heading">Dark Theme Benefits</h4>
+          <p class="mb-0">Reduces eye strain in low-light conditions and provides a sophisticated appearance.</p>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Alt Theme
+ * The dark alt theme provides an alternative dark styling
+ */
+export const DarkAltTheme = {
+  args: {
+    content: `
+      <div class="dark-alt p-4 mb-4 border">
+        <h2>Dark Alt Theme</h2>
+        <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Dark Utility Examples</h3>
+        <div class="row g-3">
+          <div class="col-md-6">
+            <div class="bg-dark p-3 rounded text-white">
+              <strong>.bg-dark</strong><br>
+              Dark background utility
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="bg-dark-alt p-3 rounded text-white">
+              <strong>.bg-dark-alt</strong><br>
+              Dark alt background utility
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Theme Comparison
+ * Shows all themes in a single view for comparison
+ */
+export const ThemeComparison = {
+  args: {
+    content: `
+      <div class="mb-4">
+        <h2>Theme Palette Comparison</h2>
+        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+      </div>
+      
+      <div class="row g-4">
+        <div class="col-lg-6">
+          <div class="default p-3 border">
+            <h3>Default Theme</h3>
+            <p>Base theme with neutral styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="light p-3 border">
+            <h3>Light Theme</h3>
+            <p>Clean, bright appearance.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="alt p-3 border">
+            <h3>Alt Theme</h3>
+            <p>Alternative light styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="dark p-3 border">
+            <h3>Dark Theme</h3>
+            <p>High contrast, modern look.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-12">
+          <div class="dark-alt p-3 border">
+            <h3>Dark Alt Theme</h3>
+            <p>Alternative dark styling with different background treatment.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="mt-5">
+        <h3>Background Utility Classes</h3>
+        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <div class="row g-3">
+          <div class="col-md-3">
+            <div class="bg-default p-2 text-center rounded">.bg-default</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light p-2 text-center rounded">.bg-light</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt p-2 text-center rounded">.bg-light-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark p-2 text-center rounded text-white">.bg-dark</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-default-shade p-2 text-center rounded">.bg-default-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-shade p-2 text-center rounded">.bg-light-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt-shade p-2 text-center rounded">.bg-light-alt-shade</div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};

package/src/components/bs5/pageLayout/pageLayout.stories.js

@@ -3,7 +3,7 @@ import { ContentPageWithSideNavigation } from "./ContentPageWithSideNavigation.j
 import { ContentPageWithForm } from "./ContentPageWithForm.js";
 //Data
 import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
-import menu_state from "../navbar/navbar.variant.menuState.data.json";
+import menu_state from "../navbar/navbar.data.json";
 import globalAlertData from "../globalAlert/globalAlert.data.json";
 import tableData from "../table/table.data.json";
 import footerData from "../footer/footer.data.json";
@@ -70,6 +70,8 @@ const defaultData = {
   },
   contentFooter: contentFooterData,
   sidenav: sideNavData,
+  // Mapping some @root header fields to this pageLayout root object, so template partials can resolve values
+  // assets: masterbrand_variant.assets,
 };
 
 export default {

package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs

@@ -29,7 +29,7 @@
             <div class="row">
                 {{#if sidenav}}
                 <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0 mb-32 mb-lg-0">
                     {{> sidenav sidenav}}
                 </div>
                 {{/if}}

package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs

@@ -2,122 +2,154 @@
 <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>
-    <!-- Global ALert -->
-    {{> globalAlert globalAlert}}
-    <!-- Header -->
-    {{> header header}}
-    <!-- Navbar -->
-    {{> navbar navbar}}
-
-    {{#if banner}}
-    {{> banner banner}}
-    {{/if}}
-
-    <main>
-        <div class="container mt-40 mt-lg-64">
-            {{#if breadcrumbs}}
-            <div class="row">
-                <div class="col-12">
-                    <!-- breadcrumbs -->
-                    {{> breadcrumbs breadcrumbs}}
-                </div>
+  <!-- Global ALert -->
+  {{> globalAlert globalAlert}}
+
+  <!-- Header -->
+  {{> header header }} 
+
+  <!-- Navbar -->
+  {{> navbar navbar}}
+
+  {{#if banner}}
+  {{> banner banner}}
+  {{/if}}
+
+  <main>
+
+    <div class="container mt-40 mt-lg-64">
+      {{#if breadcrumbs}}
+      <div class="row">
+        <div class="col-12">
+          <!-- breadcrumbs -->
+          {{> breadcrumbs breadcrumbs}}
+        </div>
+      </div>
+      {{/if}}
+
+      <!-- Main Grid Layout: Side navigation and content -->
+      <div class="row">
+
+        <!-- Side navigation column -->
+        <div class="col-12 col-lg-3 mt-0 pe-lg-0">
+          {{> sidenav sidenav}}
+        </div>
+        <!-- End Side navigation column -->
+
+        <!-- Content Column -->
+        <div class="col-lg-8 mt-40 mt-lg-0 ms-lg-32 ps-lg-32">
+
+          {{#if inpagenav}}
+          <!-- Inpagenav Component (.mb-64 provides vertical spacing) -->
+          {{> 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>      
+            <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
+              libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
+            </p>
+            <p>
+              Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae
+              amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
+            </p>
+          </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>
+
+            {{#if calloutdata}}
+            <!-- Callout Component -->
+            {{> callout calloutdata}}
+            {{/if}}
+          </div>
+          
+
+
+          <!-- Content Section with top vertical spacer (2rem mobile, 2.5rem LG and above) -->
+          <div class="mt-32 mt-lg-40">
+            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+            <p>Information about pre-registration inspection requirements.</p>
+
+            <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 -->
+            <div class="mt-24">
+            {{> accordion accordionItems}}
             </div>
             {{/if}}
+          </div>
 
-            <!-- Main Grid Layout: Side navigation and content -->
-            <div class="row">
-                {{#if sidenav}}
-                <!-- Side navigation Col -->
-                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
-                    {{> sidenav sidenav}}
-                </div>
-                <!-- Content Col -->
-                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
-                    {{else}}
-                    <div class="col-12">
-                        {{/if}}
-
-                        <!-- Main Content Sections -->
-                        <div class="content-section mb-5 px-1 px-md-32">
-
-                            {{#if inpagenav}}
-                            <!-- inpagenav Section -->
-                            {{> inpagenav inpagenav}}
-                            {{/if}}
-
-                            <h1 id="section-heading">Section heading (H1)</h1>
-                            <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 libero ut. Luctus diam pellentesque ipsum accumsan amet commodo. 
-                            </p> 
-                            <p>
-                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis. 
-                            </p>
-
-                            <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>
-
-                            {{#if calloutdata}}
-                            <!-- callout Section -->
-                            {{> callout calloutdata}}
-                            {{/if}}
-
-                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                            <p>Information about pre-registration inspection requirements.</p>
-
-                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                            <p>Details about fees and charges for vehicle registration.</p>
-
-                        </div>
-
-                        {{#if accordionItems}}
-                        <!-- accordion Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> accordion accordionItems}}
-                        </div>
-                        {{/if}} 
-
-                        {{#if video}}
-                        <!-- video Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> video video}}
-                        </div>
-                        {{/if}}
-
-                        <div class="my-5 p-1 p-md-32 bg-light">
-                            <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>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
-                                condimentum adipiscing augue quisque eu.</p>
-
-                            {{> callToAction callToAction}}
-                        </div>
-
-                        {{#if table}}
-                        <!-- table Section -->
-                        <div class="my-5 px-1 px-md-32">
-                            {{> table table}}
-                        </div>
-                        {{/if}}
-
-                    </div>
-                </div>
-
-                <!-- Content Footer -->
-                {{> contentFooter contentFooter}}
+          <!-- Top vertical spacer: 2rem default (mobile), 4rem LG and above -->
+          <div class="mt-32 mt-lg-64">
+            {{#if video}}
+            <!-- QGDS Video Component -->
+            {{> video video}}
+            {{/if}}
+          </div>
+
+          <!-- 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>
+            
+            <!-- QGDS Call To Action button -->
+            {{> callToAction callToAction}}
+        
+          </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>
+            
+            {{#if table}}
+            <!-- Table Component (.my-40 wrapper provides vertical spacing) -->
+            <div class="mt-24">
+            {{> table table}}
             </div>
+            {{/if}}
+          </div>
+
         </div>
-    </main>
-    <!-- Footer -->
-    {{> footer footer}}
+        <!-- End Main Content Section -->
+
+      </div>
+      <!-- End Content Column -->
+      
+
+      <!-- QGDS Content Footer Component -->
+      <div class="mt-64">
+      {{> contentFooter contentFooter}}
+      </div>
+
+  </main>
+  <!-- Footer -->
+  {{> footer footer}}
 </body>
 
 </html>

package/src/components/bs5/pageLayout/templates/homePage.hbs

@@ -83,7 +83,7 @@
 
             {{#if promotionalPanel}}
             <section class="pt-5 bg-light">
-                <div class="container">
+                <div class="container is-extended">
                     {{> promotionalPanel promotionalPanel}}
                 </div>
             </section>

package/src/components/bs5/pagination/Pagination.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as PaginationStories from "./pagination.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as PaginationStories from "./pagination.stories";
 
 <Meta of={PaginationStories} />
 
 # Pagination
-<Canvas>
-  <Story of={PaginationStories.Default} />
-</Canvas>
+
+<Canvas of={PaginationStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/pagination/pagination.data.json

@@ -1,21 +1,21 @@
 {
-    "arialabel" : "Pagination for search results",
-	"previous": {
-        "href": "#",
-        "linktext": "Back",
-        "arialabel": "Previous page"
-    },
-    "next": {
-        "href": "#",
-        "linktext": "Next",
-        "arialabel": "Next page"
-    },
-    
-	"pages": [
-        { "href": "#", "linktext": "1", "customClasses": "" },
-        { "href": "#", "linktext": "2", "customClasses": "active" },
-        { "href": "#", "linktext": "", "customClasses": "more", "more": true },
-        { "href": "#", "linktext": "6", "customClasses": "" },
-        { "href": "#", "linktext": "7", "customClasses": "" }
-    ]
+  "arialabel": "Pagination for search results",
+  "previous": {
+    "href": "#",
+    "linktext": "Back",
+    "arialabel": "Previous page"
+  },
+  "next": {
+    "href": "#",
+    "linktext": "Next",
+    "arialabel": "Next page"
+  },
+
+  "pages": [
+    { "href": "#", "linktext": "1", "customClasses": "" },
+    { "href": "#", "linktext": "2", "customClasses": "active" },
+    { "href": "#", "linktext": "3", "customClasses": "" },
+    { "href": "#", "linktext": "", "customClasses": "more", "more": true },
+    { "href": "#", "linktext": "7", "customClasses": "" }
+  ]
 }