@qld-gov-au/qgds-bootstrap5 1.1.20 → 1.1.21

package/.storybook/main.js

@@ -1,51 +1,56 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 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"],
+	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: {},
-    },
+	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'
-    },
+	//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;
+		//         }
+		//     },
+		// });
 
-    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;
-    },
+		return config;
+	},
 };
 
 export default config;

package/.storybook/preview.js

@@ -1,107 +1,109 @@
-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 '../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 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,
-            },
-        },
-        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/callToAction/callToAction.hbs

@@ -0,0 +1,9 @@
+<a class="qld-cta-link {{getClassNames "small, view-all" class}}"
+    {{#if id}}id="{{id}}"{{/if}}
+    href="{{href}}" 
+    target="{{target}}" 
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    >
+     {{label}}
+    <span class="icon" aria-hidden="true"></span>
+</a>

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.20","branch":"HEAD","tag":"v1.1.20","commit":"b27a477e05c7f21407637ba309ea30e4480fa5f3","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.21","branch":"HEAD","tag":"v1.1.21","commit":"a3f1a8cf0304d6c7f562866d133b170b491e720c","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???