@qld-gov-au/qgds-bootstrap5 1.1.26 → 1.1.28

package/.storybook/main.js

@@ -1,56 +1,74 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
+
+import path from "path";
+import fs from "fs";
+
 const config = {
-	stories: [
-		'../src/stories/Introduction.mdx',
-		// Include all stories found under the src/components directory ( For example: alert/alert.stories.js )
-		// Exlude any stories starting with an underscore ( For example: _exludeme.stories.js )
-		'../src/**/!(*_)*.mdx',
-		'../src/**/!(*_)*.stories.js',
-	],
-	staticDirs: [{ from: '../dist', to: '/' }], //Bring dist in statically instead of having it minified
-	addons: [
-		//Storybook addons
-		//https://storybook.js.org/addons/
-		'@storybook/addon-a11y',
-		'@storybook/addon-themes',
-		'@storybook/addon-essentials',
-		'@storybook/addon-interactions',
-		'@storybook/addon-links',
-		'@chromatic-com/storybook',
-		'storybook-addon-deep-controls',
-	],
-
-	framework: {
-		//Build the storybook with html-vite rendered - faster than webpack
-		//https://www.npmjs.com/package/@storybook/html-vite
-		name: '@storybook/html-vite',
-		options: {},
-	},
-
-	//Autodocs for each component
-	//https://storybook.js.org/docs/writing-docs/autodocs
-	docs: {
-		defaultName: 'Overview',
-	},
-
-	//Each component's JS module, for example Alert.js, imports a HTML string to use for it's template.
-	//We add a plugin to handle these .hbs extensions. (Or .mustache, .html etc)
-	//https://storybook.js.org/docs/api/main-config-vite-final
-
-	viteFinal: async (config, { configType }) => {
-		config.root = './dist';
-		// config.plugins.push({
-		//     name: "html-transform",
-		//     transform(src, id) {
-		//         if (id.endsWith(".mustache") || id.endsWith(".html") || id.endsWith(".hbs")) {
-		//             // Transform your HTML files here (src is the file content as a string)
-		//             return src;
-		//         }
-		//     },
-		// });
-
-		return config;
-	},
+  stories: [
+    "../src/stories/Introduction.mdx",
+    // Include all stories found under the src/components directory ( For example: alert/alert.stories.js )
+    // Exlude any stories starting with an underscore ( For example: _exludeme.stories.js )
+    "../src/**/!(*_)*.mdx",
+    "../src/**/!(*_)*.stories.js",
+  ],
+  staticDirs: [{ from: "../dist", to: "/" }], //Bring dist in statically instead of having it minified
+  addons: [
+    //Storybook addons
+    //https://storybook.js.org/addons/
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-links",
+    "@chromatic-com/storybook",
+    "storybook-addon-deep-controls",
+  ],
+
+  framework: {
+    //Build the storybook with html-vite rendered - faster than webpack
+    //https://www.npmjs.com/package/@storybook/html-vite
+    name: "@storybook/html-vite",
+    options: {},
+  },
+
+  //Autodocs for each component
+  //https://storybook.js.org/docs/writing-docs/autodocs
+  docs: {
+    defaultName: "Overview",
+  },
+
+  //Each component's JS module, for example Alert.js, imports a HTML string to use for it's template.
+  //We add a plugin to handle these .hbs extensions. (Or .mustache, .html etc)
+  //https://storybook.js.org/docs/api/main-config-vite-final
+  //Each component's JS module, for example Alert.js, imports a HTML string to use for it's template.
+  //We add a plugin to handle these .hbs extensions. (Or .mustache, .html etc)
+  //https://storybook.js.org/docs/api/main-config-vite-final
+
+  viteFinal: async (config, { configType }) => {
+    config.root = "./dist";
+    // config.plugins.push({
+    //     name: "html-transform",
+    //     transform(src, id) {
+    //         if (id.endsWith(".mustache") || id.endsWith(".html") || id.endsWith(".hbs")) {
+    //             // Transform your HTML files here (src is the file content as a string)
+    //             return src;
+    //         }
+    //     },
+    // });
+
+    config.server = {
+      ...config.server,
+      fs: {
+        allow: [
+          // Allow access to assets
+          path.resolve(__dirname, "../src/assets"),
+          path.resolve(__dirname, "../src/img"),
+        ],
+      },
+    };
+
+    return config;
+  },
 };
 
 export default config;

package/.storybook/preview.js

@@ -1,109 +1,118 @@
-import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
-import '../src/js/qld.bootstrap.js';
-import '../src/css/main.scss';
-import { withThemeByClassName } from '@storybook/addon-themes';
-import { allBackgrounds } from './modes.js';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import init from '../src/js/handlebars.init.js';
-import Handlebars from 'handlebars';
+import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
+import "../src/js/qld.bootstrap.js";
+import "../src/css/main.scss";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { allBackgrounds } from "./modes.js";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import init from "../src/js/handlebars.init.js";
+import Handlebars from "handlebars";
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
-	parameters: {
-		//actions: { argTypesRegex: "^on[A-Z].*" },
-		chromatic: {
-			//🔶 Test each story for ArticleCard in two modes
-			modes: {
-				// Light: allModes["Light"],
-				// "Light alternative": allModes["Light alternative"],
-				// Dark: allModes["Dark"],
-				// "Dark alternative": allModes["Dark alternative"],
-				//mobile: allModes["mobile"],
-				//desktop: allModes["desktop"],
-				//"1200px": {viewport: 1200}, //original non-modes based baseline
-			},
-		},
-		viewport: {
-			viewports: {
-				//QLD-media Breakpoints
-				small: { name: 'Small', styles: { width: '400px', height: '800px' } },
-				medium: { name: 'Medium', styles: { width: '700px', height: '800px' } },
-				large: { name: 'Large', styles: { width: '992px', height: '800px' } },
-				xlarge: { name: 'Extra Large', styles: { width: '1312px', height: '1000px' } },
-				xxlarge: { name: 'Extra Extra Large', styles: { width: '1599px', height: '1000px' } },
-				navbreakpoint: { name: 'Nave Breakpoint', styles: { width: '992px', height: '800px' } },
-				...INITIAL_VIEWPORTS,
-			},
-		},
-		hideNoControlsWarning: true,
-		expanded: true,
-		controls: {
-			matchers: {
-				color: /(background|color)$/i,
-				date: /Date$/i,
-			},
-		},
-		deepControls: { enabled: true },
-		html: {
-			highlighter: {
-				wrapLines: false,
-			},
-		},
-		docs: {
-			source: {
-				excludeDecorators: true,
-			},
-		},
-		backgrounds: {
-			//default: 'default',
-			values: [
-				allBackgrounds['default'],
-				allBackgrounds['Light'],
-				allBackgrounds['Light alternative'],
-				allBackgrounds['Dark'],
-				allBackgrounds['Dark alternative'],
-			],
-		},
-		options: {
-			storySort: {
-				method: 'alphabetical',
-				// Set order of components in the Layout category
-				order: ['*', ['Header', 'Footer', 'Breadcrumbs', 'Side navigation']],
-			},
-		},
-		a11y: {
-			// Optional configuration for the a11y addon
-			config: {},
-			options: {
-				checks: { 'color-contrast': { options: { noScroll: true } } },
-				restoreScroll: true,
-			},
-		},
-	},
+  parameters: {
+    //actions: { argTypesRegex: "^on[A-Z].*" },
+    chromatic: {
+      //🔶 Test each story for ArticleCard in two modes
+      modes: {
+        // Light: allModes["Light"],
+        // "Light alternative": allModes["Light alternative"],
+        // Dark: allModes["Dark"],
+        // "Dark alternative": allModes["Dark alternative"],
+        //mobile: allModes["mobile"],
+        //desktop: allModes["desktop"],
+        //"1200px": {viewport: 1200}, //original non-modes based baseline
+      },
+    },
+    viewport: {
+      viewports: {
+        //QLD-media Breakpoints
+        small: { name: "Small", styles: { width: "400px", height: "800px" } },
+        medium: { name: "Medium", styles: { width: "700px", height: "800px" } },
+        large: { name: "Large", styles: { width: "992px", height: "800px" } },
+        xlarge: {
+          name: "Extra Large",
+          styles: { width: "1312px", height: "1000px" },
+        },
+        xxlarge: {
+          name: "Extra Extra Large",
+          styles: { width: "1599px", height: "1000px" },
+        },
+        navbreakpoint: {
+          name: "Nave Breakpoint",
+          styles: { width: "992px", height: "800px" },
+        },
+        ...INITIAL_VIEWPORTS,
+      },
+    },
+    hideNoControlsWarning: true,
+    expanded: true,
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    deepControls: { enabled: true },
+    html: {
+      highlighter: {
+        wrapLines: false,
+      },
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+    backgrounds: {
+      //default: 'default',
+      values: [
+        allBackgrounds["default"],
+        allBackgrounds["Light"],
+        allBackgrounds["Light alternative"],
+        allBackgrounds["Dark"],
+        allBackgrounds["Dark alternative"],
+      ],
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        // Set order of components in the Layout category
+        order: ["*", ["Header", "Footer", "Breadcrumbs", "Side navigation"]],
+      },
+    },
+    a11y: {
+      // Optional configuration for the a11y addon
+      config: {},
+      options: {
+        checks: { "color-contrast": { options: { noScroll: true } } },
+        restoreScroll: true,
+      },
+    },
+  },
 
-	decorators: [
-		// data-bs-theme="dark" won't be used
-		withThemeByClassName({
-			themes: {
-				None: '',
-				Light: 'light',
-				'Light alternative': 'alt',
-				Dark: 'dark',
-				'Dark alternative': 'dark-alt',
-			},
-			defaultTheme: 'None',
-		}),
-		(Story) => {
-			init(Handlebars);
-			return `
+  decorators: [
+    // data-bs-theme="dark" won't be used
+    withThemeByClassName({
+      themes: {
+        None: "",
+        Light: "light",
+        "Light alternative": "alt",
+        Dark: "dark",
+        "Dark alternative": "dark-alt",
+      },
+      defaultTheme: "None",
+    }),
+    (Story) => {
+      init(Handlebars);
+      return `
 			
 					${Story()}
 			
       		`;
-		},
-	],
+    },
+  ],
 
-	tags: ['autodocs'],
+  tags: ["autodocs"],
 };
 
 export default preview;

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

@@ -1,29 +1,72 @@
-<!-- QGDS Partial: banner -->
+<!-- QGDS Banner Component -->
+  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" role="banner">
+    <div class="container-fluid">
+      <div class="banner-inner">
 
-<div class="container-fluid qld-banner {{variantClass}}">
+        <div class="banner-breadcrumbs">
+          {{> breadcrumbs breadcrumbs }}
+        </div>
+
+        <div class="banner-content">
 
-    <div class="container">
-        <div class="row">
-            
-            <div class="col-12 col-md-7">
+          {{#if title}}
 
-                {{{breadcrumbs}}}
+          {{!-- titleClasses accepts a "title-block" class --}}
+          <h1 class="banner-title-wrap {{ join titleClasses }}">
+            <span class="banner-title">{{~title~}}</span>
+            {{#if subtitle }}
+            <span class="banner-subtitle">{{~subtitle~}}</span>
+            {{/if}}
+          </h1>
+          {{/if}}
 
-                <h1 class="banner-title">{{{title}}}</h1>
-                <p class="banner-lead">{{{content}}}</p>
 
-                {{#if ctabuttons}}
-                <div class="banner-cta btn-toolbar">
-                    {{#each ctabuttons}}
-                    <a href="{{link}}" class="btn {{class}}" target="{{target}}">{{label}}</a>
-                    {{/each}}
-                </div>
-                {{/if}}
+          {{#if abstract}}
+          <div class="banner-abstract">
+            {{abstract}}
+          </div>
+          {{/if}}
 
+          {{!-- CTA Buttons block. Pass an array of button data objects --}}
+          {{#if buttons}}
+          <div class="banner-cta" role="group" aria-label="Available options">
+            <div class="cta-buttons">
+              {{#each buttons}}
+              {{> button this }}
+              {{/each}}
             </div>
+          </div>
+          {{/if}}
+
+          {{!-- CTA Cards block. Pass an array of card data objects --}}
+          {{#if cards}}
+          <div class="banner-cta" role="group" aria-label="Available options">
+            <div class="cta-cards">
+              {{#each cards }}
+              {{> card this }}
+              {{/each }}
+            </div>
+          </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>
-    </div>
+        {{!-- End banner content --}}
 
-    <div class="banner-image {{image.classes}}" style="--banner-background-img:url({{image.url}})"></div>
+        {{#if image }}
+        <div class="banner-image {{ join image.classes }}">
+          <div class="banner-image-inner" style="background-image:url({{image.url}})" role="img"
+            aria-label="{{ image.alt }}"></div>
+        </div>
+        {{/if}}
 
-</div>
+      </div>
+
+    </div>
+  </div>

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.26","branch":"HEAD","tag":"v1.1.26","commit":"1b08913a5decb0d3d84229b3e875c57796d0ca41","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.28","branch":"HEAD","tag":"v1.1.28","commit":"8aaf13f483f36f9f1f0bf4b2e367fa070b5cd76d","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -0,0 +1,48 @@
+{{#if data}}
+    <section class="link-column {{theme}}">
+        <ul class="nav {{#if items_flow_vert}}col-vert-{{columns}}{{else}}col-{{columns}}{{/if}}">
+            {{#ifCond items_flow '==' 'horizontal'}}
+                <li class="nav-item all-link">
+                    {{> callToAction 
+                        label=(isdefined all_link.value "View all")
+                        href=all_link.url 
+                        target=all_link.target 
+                        class=all_link.class 
+                        arialabel=all_link.value 
+                        id=all_link.id}}
+                </li>
+            {{/ifCond}}
+            {{> linkColBase data}}
+        </ul>
+    </section>
+{{else}}
+    <section class="link-column {{theme}}">
+        <!-- There are no items available -->
+    </section>
+{{/if}}
+
+
+{{#*inline "linkColBase"}}              
+    {{#each items}}
+        {{> navItem}}
+    {{/each}}
+    {{#if all_link}}
+        <li class="nav-item all-link">
+            {{> callToAction 
+                label=(isdefined all_link.value "View all")
+                href=all_link.url 
+                target=all_link.target 
+                class=all_link.class 
+                arialabel=all_link.value 
+                id=all_link.id}}
+        </li>
+    {{/if}}
+{{/inline}}
+
+{{#*inline "navItem"}}
+    <li class="nav-item">
+        <a class="nav-link"{{~#if id}} id="{{id}}"{{/if~}}{{~#if target}} target="{{target}}"{{/if~}} href="{{url}}">
+            {{~{value}~}}
+        </a>
+    </li>
+{{/inline}}

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

@@ -0,0 +1,52 @@
+<section class="qld-promo-panel {{#ifCond type '==' 'indent-text'}}indent{{/ifCond}} {{#ifCond type '==' 'indent-img'}}indent{{/ifCond}} {{type}}">
+    <div class="row {{#ifCond type '==' 'promo'}}bg-img{{else}}{{variantClass}}{{/ifCond}} {{contentAlignment}}" 
+        {{#ifCond type '==' 'promo'}}
+            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>
+        </div>
+        <div class="content-panel {{variantClass}}">      
+            {{#if icon}}
+                <div class="icon-container">
+                    <div class="icon-body">
+                        <i class="qld-icon {{icon}}"></i>
+                    </div>
+                </div>
+            {{/if}}
+            <div class="main">
+                {{#if title}}
+                    <h2>{{~{title}~}}</h2>
+                {{/if}}
+                {{#if abstract}}
+                    <div class="promo-abstract">
+                        {{~{abstract}~}}
+                    </div>
+                {{/if}}
+                {{#if body}}
+                    {{~{body}~}}
+                {{/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>
+                    {{/each}}                            
+                </ul>
+            {{/if}}
+            {{#if btn.items}}
+                <ul class="btn-container">
+                    {{#each btn.items}}
+                        <li>{{> button islink=islink variantClass=variantClass label=label href=href target=target dataatts="data-type='class'"}}</li>
+                    {{/each}}
+                </ul>
+            {{/if}}
+        </div>
+    </div>
+</section>

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

@@ -0,0 +1,47 @@
+
+{{#ifCond type_variant '==' 'tab-section'}}
+    <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>
+            {{{sibling_section_content}}}
+        </div>
+    </section>
+{{/ifCond}}
+
+<!-- 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">
+            {{#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}}
+                        </span>
+                    </button>
+                </li>
+            {{/each }}
+        </ul>
+        <button class="scroll scroll-left" aria-hidden="true" aria-label="Scroll tab buttons left" tabindex="-1">
+            <i></i>
+        </button>
+        <button class="scroll scroll-right" aria-hidden="true" aria-label="Scroll tab buttons right" tabindex="-1">
+            <i></i>
+        </button>
+    </div>
+    <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'}}
+                    <h2>{{this.title}}</h2>
+                {{else}}
+                    <h3>{{this.title}}</h3>
+                {{/ifCond}}
+                {{{this.content}}}
+            </section>
+        {{/each }}
+    </div>
+</section>