@qld-gov-au/qgds-bootstrap5 1.1.27 → 1.1.29

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.27","branch":"HEAD","tag":"v1.1.27","commit":"d01a4424bef0f0bf5aa086623640ca63e663d51f","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.29","branch":"HEAD","tag":"v1.1.29","commit":"f2f3e090dd7e555afd45234038e59cecd493a149","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

@@ -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>