diff --git a/.esbuild/plugins/qgds-plugin-copy-assets.js b/.esbuild/plugins/qgds-plugin-copy-assets.js index 02ed14c6..98fefea2 100644 --- a/.esbuild/plugins/qgds-plugin-copy-assets.js +++ b/.esbuild/plugins/qgds-plugin-copy-assets.js @@ -18,13 +18,14 @@ export default function copyPlugin() { to: ["./dist/sample-data/"], }, { - from: ["./src/js/handlebars*"], - to: ["./dist/assets/js"], + from: ["./src/js/handlebars.helpers.js"], + to: ["./dist/assets/js/handlebars.helpers.js"], }, { - from: ["./src/js/handlebars*"], + from: ["./src/js/handlebars.*"], to: ["./dist/components/"], }, + { from: ["./src/assets/img/*"], to: ["./dist/assets/img"] }, ], }); diff --git a/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js b/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js new file mode 100644 index 00000000..ca18399b --- /dev/null +++ b/.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js @@ -0,0 +1,87 @@ +// updateHandlebarsPartialsPlugin.js +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import { build } from 'esbuild'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const COMPONENTS_DIR = path.resolve(__dirname, './../../src/components'); +const PARTIALS_JS_FILE = path.resolve(__dirname, '../../src/js/handlebars.partials.js'); + + +function getAllFiles(dirPath, arrayOfFiles) { + const files = fs.readdirSync(dirPath, { withFileTypes: true }); + + arrayOfFiles = arrayOfFiles || []; + + files.forEach((file) => { + //console.log(file); + if (file.isDirectory()) { + arrayOfFiles = getAllFiles(path.join(dirPath, file.name), arrayOfFiles); + } else if (file.isFile() && (file.name.endsWith('.hbs') && !file.name.endsWith('.test.hbs'))) { + arrayOfFiles.push(path.join(dirPath, file.name)); + } + }); + + return arrayOfFiles; +} + +export default function QGDSupdateHandlebarsPartialsPlugin() { + return { + name: 'update-handlebars-partials', + setup(build) { + build.onStart(async () => { + + const files = getAllFiles(COMPONENTS_DIR); + //console.log(files); + const fileNames = new Map(); + let duplicateFound = false; + + let importLines = ''; + let registerLines = ''; + + for (const file of files) { + //console.log(file); + const componentName = path.basename(file, '.hbs') + //console.log(componentName); + // Duplicate check + if (fileNames.has(componentName)) { + console.error(`Error: Duplicate component name found: "${componentName}" second partial located at ${file} and ${fileNames.get(componentName)}`); + duplicateFound = true; + continue; + } + fileNames.set(componentName, file); + + const importName = componentName.replace(/-/g, ''); + const componentPath = path.relative(path.dirname(PARTIALS_JS_FILE), file).replace(/\\/g, '/'); + + importLines += `import ${importName} from "${componentPath}?raw";\n`; + registerLines += ` handlebars.registerPartial("${componentName}", ${importName});\n`; + } + + if (duplicateFound) { + process.exit(1); + } + + const newContent = `/** THIS IS A GENERATED FILE **/ + +${importLines} + +/** + * Registers Handlebars Partials + * @param {Handlebars} handlebars Templating engine + * @returns {void} Result of the helper operation + */ +export default function handlebarsPartials(handlebars) { +${registerLines} +} +`; + + fs.writeFileSync(PARTIALS_JS_FILE, newContent); + console.log('handlebar.partials.js has been updated.'); + }); + }, + } +}; \ No newline at end of file diff --git a/.esbuild/plugins/qgds-plugin-version.js b/.esbuild/plugins/qgds-plugin-version.js index a6cbefa0..ed1ca5be 100644 --- a/.esbuild/plugins/qgds-plugin-version.js +++ b/.esbuild/plugins/qgds-plugin-version.js @@ -67,7 +67,7 @@ const versionPlugin = () => ({ // Replace placeholders in HTML, Mustache, and Handlebars files build.onEnd(async (result) => { - console.log('version update starting'); + console.log('version update starting...'); //List new components const root = process.cwd(); @@ -85,11 +85,12 @@ const versionPlugin = () => ({ // Check if the content has changed if (source !== newSource) { - console.log(`Placeholder replaced in: ${file}, ${newSource}`); + // console.log(`Placeholder replaced in: ${file}, ${newSource}`); await fs.writeFile(file, newSource); } } } + console.log('version update Completed'); }); diff --git a/.storybook/preview.js b/.storybook/preview.js index addbd933..e6784aa7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -96,7 +96,7 @@ const preview = { }, ], - tags: ["autodocs", "autodocs"] + tags: ["autodocs"] }; export default preview; diff --git a/esbuild.js b/esbuild.js index bdfb9d9c..3c6c9305 100644 --- a/esbuild.js +++ b/esbuild.js @@ -3,6 +3,7 @@ import * as esbuild from "esbuild"; //Local ESBUILD PLUGINS +import QGDSupdateHandlebarsPartialsPlugin from "./.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js"; import QGDSrawLoader from "./.esbuild/plugins/qgds-plugin-raw-loader.js"; import QDGScleanFolders from "./.esbuild/plugins/qgds-plugin-clean-output-folders.js"; import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js"; @@ -47,7 +48,11 @@ const buildConfig = { }, { in: "./src/js/handlebars.init.js", - out: "./components/handlebars.init.bundle", + out: "./components/handlebars.init.min", + }, + { + in: "./src/js/handlebars.init.js", + out: "./assets/js/handlebars.init.min", }, ], @@ -60,14 +65,15 @@ const buildConfig = { }, plugins: [ + QGDSupdateHandlebarsPartialsPlugin(), QDGScopy(), QDGSbuildLog(), QGDSrawLoader(), versionPlugin(), QDGScleanFolders(), handlebarsPlugin(), - sassPlugin() - ] + sassPlugin(), + ], }; async function StartBuild() { diff --git a/package-lock.json b/package-lock.json index 7fd8e3fd..72449494 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,18 @@ { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "license": "ISC", "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "bootstrap": "^5.3.1", - "material-symbols": "^0.20.0" + "material-symbols": "^0.20.0", + "run-parallel": "^1.2.0" }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", @@ -17212,7 +17213,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true, "funding": [ { "type": "github", @@ -18042,7 +18042,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "dev": true, "funding": [ { "type": "github", diff --git a/package.json b/package.json index 032e22f9..9e4547f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@qld-gov-au/qgds-bootstrap5", - "version": "1.0.18", + "version": "1.0.19", "description": "", "repository": { "type": "git", @@ -39,7 +39,8 @@ "dependencies": { "@fortawesome/fontawesome-free": "^6.5.2", "bootstrap": "^5.3.1", - "material-symbols": "^0.20.0" + "material-symbols": "^0.20.0", + "run-parallel": "^1.2.0" }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", @@ -92,7 +93,7 @@ "qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js", "qld.bootstrap.css": "./dist/assets/css/qld.bootstrap.css", "handlebars.helpers.bundle.js": "./dist/components/handlebars.helpers.bundle.js", - "handlebars.init.js": "./dist/components/handlebars.init.js", + "handlebars.init.min.js": "./dist/components/handlebars.init.min.js", "bootstrap.min.js": "./dist/assets/js/boostrap.min.js" } } diff --git a/src/components/bs5/accordion/accordion.scss b/src/components/bs5/accordion/accordion.scss index ec7eb86b..451ccd8b 100644 --- a/src/components/bs5/accordion/accordion.scss +++ b/src/components/bs5/accordion/accordion.scss @@ -81,7 +81,6 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml, +
+
+
+
+ + {{> @partial-block }} +
+
+
+
\ No newline at end of file diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js new file mode 100644 index 00000000..2a6f1925 --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js @@ -0,0 +1,38 @@ +import { forGov } from "../breadcrumbs/breadcrumbs.data.json"; +import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js"; +// eslint-disable-next-line no-unused-vars +import init from "../../../js/handlebars.init.js"; //self init's when loaded + +const defaultData = { breadcrumbs: forGov }; + +export default { + title: "!Layout/Components/Breadcrumbs Wrapper", + render: (args) => { + + return new BreadcrumbsWrapperTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + docs: { + controls: { + + }, + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs new file mode 100644 index 00000000..26939fcb --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs @@ -0,0 +1,7 @@ +header before +
+{{#>breadcrumbsWrapper}} + {{> breadcrumbs breadcrumbs }} +{{/breadcrumbsWrapper}} +content after +
diff --git a/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js new file mode 100644 index 00000000..9ff7a7c0 --- /dev/null +++ b/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./breadcrumbsWrapper.test.hbs?raw"; + +export class BreadcrumbsWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/breadcumbsWrapper/manifest.json b/src/components/bs5/breadcumbsWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/card/card.scss b/src/components/bs5/card/card.scss index 5c2e4176..d7c29643 100644 --- a/src/components/bs5/card/card.scss +++ b/src/components/bs5/card/card.scss @@ -229,15 +229,7 @@ $view-all-icon-dark: url("data:image/svg+xml, +
Last updated:
+
{{formatDateOrToday lastUpdated }}
+ \ No newline at end of file diff --git a/src/components/bs5/contentFooter/contentFooter.js b/src/components/bs5/contentFooter/contentFooter.js new file mode 100644 index 00000000..9ac20a83 --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentFooter.hbs?raw"; + +export class ContentFooter { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/contentFooter/contentFooter.stories.js b/src/components/bs5/contentFooter/contentFooter.stories.js new file mode 100644 index 00000000..54c2ad8e --- /dev/null +++ b/src/components/bs5/contentFooter/contentFooter.stories.js @@ -0,0 +1,68 @@ +import defaultdata from "./contentFooter.data.json"; +import { ContentFooter } from "./contentFooter.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Footer", + render: (args) => { + init(Handlebars) + return new ContentFooter(args).html; + }, + + argTypes: { + lastUpdated: { + name: "Last Updated", + description: `Date page was Last Updated`, + control: { type: 'text' }, + }, + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + + +export const DEV = { + args: { + cdn: "DEV", + }, + decorators:[Story => { + return ` + ${Story()} + `; + }], +}; + +export const SQUIZ = { + args: { + cdn: "/__data/assets/git_bridge/0026/471752", + }, + decorators:[Story => { + return ` + ${Story()} + `; + }], +}; + + diff --git a/src/components/bs5/contentFooter/manifest.json b/src/components/bs5/contentFooter/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs new file mode 100644 index 00000000..21642e24 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs @@ -0,0 +1,5 @@ +
+
+ {{> @partial-block }} +
+
\ No newline at end of file diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js new file mode 100644 index 00000000..d9fa4c89 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js @@ -0,0 +1,39 @@ +import defaultdata from "./../contentFooter/contentFooter.data.json"; +import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Footer Wrapper", + render: (args) => { + init(Handlebars) + return new ContentFooterWrapperTest(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs new file mode 100644 index 00000000..b6523550 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs @@ -0,0 +1,13 @@ + +
+
+ {{#>contentFooterWrapper}} + {{> contentFooter }} +

inner contentFooterWrapper data

+ {{/contentFooterWrapper}} +
+
+ + diff --git a/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js new file mode 100644 index 00000000..731a2ef8 --- /dev/null +++ b/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentFooterWrapper.test.hbs?raw"; + +export class ContentFooterWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/contentFooterWrapper/manifest.json b/src/components/bs5/contentFooterWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/contentWrapper/ContentWrapper.test.js b/src/components/bs5/contentWrapper/ContentWrapper.test.js new file mode 100644 index 00000000..34456d07 --- /dev/null +++ b/src/components/bs5/contentWrapper/ContentWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./contentWrapper.test.hbs?raw"; + +export class ContentWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/contentWrapper/contentWrapper.data.json b/src/components/bs5/contentWrapper/contentWrapper.data.json new file mode 100644 index 00000000..d92ed276 --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.data.json @@ -0,0 +1,3 @@ +{ + "title": "this is my title" +} diff --git a/src/components/bs5/contentWrapper/contentWrapper.hbs b/src/components/bs5/contentWrapper/contentWrapper.hbs new file mode 100644 index 00000000..06b79ecf --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.hbs @@ -0,0 +1,5 @@ + +
+ {{#if title}}

{{title}}

{{/if}} + {{> @partial-block }} +
diff --git a/src/components/bs5/contentWrapper/contentWrapper.stories.js b/src/components/bs5/contentWrapper/contentWrapper.stories.js new file mode 100644 index 00000000..dc046305 --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.stories.js @@ -0,0 +1,68 @@ +// ComponentExample.stories.js +import { ContentWrapperTest } from "./ContentWrapper.test.js"; +import defaultdata from "./contentWrapper.data.json"; +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; + +export default { + title: "!Layout/Components/Content Wrapper", + render: (args) => { + init(Handlebars); + return new ContentWrapperTest(args).html; + }, + + argTypes: { + title: { control: 'text' }, + }, + parameters: { + docs: { + description: { + component: ` +This is a partial-block to embed more content inside another partial. See [Handlebars Partial Blocks](https://handlebarsjs.com/guide/partials.html#partial-blocks) for more details. +pass "title" to set title at top content block. + `, + }, + }, + }, +}; + +/** + * Default Content Wrapper + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
+
+ ${Story()} +
+
+ `; + }, + ], +}; + + +/** + * Dark Content Wrapper + */ +export const Dark = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
+
+
+
+ ${Story()} +
+
+
+
+ `; + }, + ], +}; diff --git a/src/components/bs5/contentWrapper/contentWrapper.test.hbs b/src/components/bs5/contentWrapper/contentWrapper.test.hbs new file mode 100644 index 00000000..8ecbae7c --- /dev/null +++ b/src/components/bs5/contentWrapper/contentWrapper.test.hbs @@ -0,0 +1,12 @@ + +
+
+

pre contentWrapper prefix

+
+
+{{#>contentWrapper}} +

inner contentWrapper data

+{{/contentWrapper}} +
+

post contentWrapper suffix

+
diff --git a/src/components/bs5/contentWrapper/manifest.json b/src/components/bs5/contentWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/footer/_colours.scss b/src/components/bs5/footer/_colours.scss index ac014d8e..63594b1e 100644 --- a/src/components/bs5/footer/_colours.scss +++ b/src/components/bs5/footer/_colours.scss @@ -26,7 +26,7 @@ --#{$prefix}formIO-bg-colour: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}formIO-callout-bg-colour: var(--#{$prefix}core-default-color-neutral-lighter); --#{$prefix}formIO-hr-colour: var(--#{$prefix}core-default-color-neutral-lighter); - --#{$prefix}formIO-formio-colour: var(--#{$prefix}core-default-color-neutral-black); + --#{$prefix}formIO-formio-colour: var(--#{$prefix}color-default-color-light-text-default); --#{$prefix}formIO-input-border: var(--#{$prefix}color-default-color-light-border-alt); --#{$prefix}formIO-btn-disabled-colour: var(--#{$prefix}core-default-color-neutral-light); --#{$prefix}formIO-btn-close-colour: var(--#{$prefix}color-default-color-light-action-secondary); @@ -40,7 +40,8 @@ --#{$prefix}formIO-border-notify-invalid: var(--#{$prefix}core-default-color-status-error-default); --#{$prefix}formIO-border-notify-success: var(--#{$prefix}core-default-color-status-success-default); --#{$prefix}formIO-callout-border-colour: var(--#{$prefix}core-default-color-brand-primary-light-green); - @media (max-width: 991.98px) { + --#{$prefix}formIO-error: var(--#{$prefix}core-default-color-status-error-default); + @include media-breakpoint-down(lg) { --qld-footer-column-border-color: transparent; } diff --git a/src/components/bs5/footer/_measurements.scss b/src/components/bs5/footer/_measurements.scss index 596902bf..fdd9f516 100644 --- a/src/components/bs5/footer/_measurements.scss +++ b/src/components/bs5/footer/_measurements.scss @@ -3,6 +3,7 @@ // Measurements // -text --#{$prefix}footer-font-size: 0.875rem; + --#{$prefix}footer-title-font-size: 1.25rem; --#{$prefix}footer-text-underline-offset: 0.3em; --#{$prefix}footer-font-underline-boarder: 2px; @@ -23,8 +24,9 @@ --#{$prefix}footer-crest-max-width: 252px; // Form IO - --#{$prefix}formIO-feeback-font-weight: 700; + --#{$prefix}formIO-feeback-font-weight: normal; --#{$prefix}formIO-border-outline-width: 2px; --#{$prefix}formIO-form-control-border-width: 2px; --#{$prefix}formIO-callout-heading-line-height: 24px; + --#{$prefix}formIO-spacing: 1rem; } diff --git a/src/components/bs5/footer/footer.data.json b/src/components/bs5/footer/footer.data.json index cd1130ee..38b17762 100644 --- a/src/components/bs5/footer/footer.data.json +++ b/src/components/bs5/footer/footer.data.json @@ -14,11 +14,11 @@ "list": [ { "icon": "icon-phone", - "label": "Phone: 13 QGOV (13 74 68)" + "label": "Phone: 13 QGOV (13 74 68)" }, { "icon": "icon-email", - "label": "Email: email@qld.gov.au" + "label": "Email: email@qld.gov.au" } ], "buttonLabel": "Contact us", diff --git a/src/components/bs5/footer/footer.scss b/src/components/bs5/footer/footer.scss index ee3262ce..7ac0835c 100644 --- a/src/components/bs5/footer/footer.scss +++ b/src/components/bs5/footer/footer.scss @@ -23,7 +23,7 @@ } } .footer-site-name { - font-size: calc(var(--#{$prefix}footer-spacing) * 1.25); + font-size: var(--#{$prefix}footer-title-font-size); line-height: 1.5; font-weight: 600; margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2); @@ -40,8 +40,6 @@ margin-block-start: calc(var(--#{$prefix}footer-spacing) * 2); } } - - //Bordered columns in the footer should only show above medium breakpoint .border-column { height: 100%; position: relative; @@ -57,7 +55,7 @@ } .footer-heading { color: var(--#{$prefix}footer-color-title); - font-size: calc(var(--#{$prefix}footer-font-size) * 1.25); + font-size: var(--#{$prefix}footer-title-font-size); margin-block-end: var(--#{$prefix}footer-spacing); line-height: 1.5; font-weight: 600; @@ -78,6 +76,9 @@ --qld-brand-accent: var(--#{$prefix}footer-color-alt-button__hover); } } + b { + margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.5); + } } .footer-crest { display: block; @@ -88,8 +89,6 @@ width: 100%; } } - - //Footer Nav classes .nav { --#{$prefix}nav-link-color: var(--#{$prefix}footer-color-link); &.footer-link-list { @@ -106,6 +105,9 @@ &:focus-visible { box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border); } + span { + display: block; + } } &--social .nav-link { display: flex; @@ -136,8 +138,8 @@ } .footer-contact { .btn { - min-width: 200px; // magic number - margin-block-start: calc(var(--#{$prefix}footer-spacing) * 0.5); + min-width: 200px; + margin-block-start: var(--#{$prefix}footer-spacing); } } .container > .row > div { @@ -146,7 +148,7 @@ .btn-global-secondary { white-space: normal; } - @media (max-width: 991.98px) { + @include media-breakpoint-down(lg) { --#{$prefix}last-para-margin: 24px; --qld-footer-padding-y: 0; @@ -156,11 +158,13 @@ } .container { > .row { - --qld-gutter-x: calc(var(--#{$prefix}footer-gap) * 2); + margin-inline: calc(var(--#{$prefix}footer-gap) * -1); + --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2); & > * { padding-inline: 0; } > .col-md-12 { + --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2); border-top: calc(var(--#{$prefix}footer-special-border-width) - 2px) solid var(--#{$prefix}footer-color-border); @@ -194,6 +198,9 @@ padding-inline: var(--qld-gutter-x); margin-inline: 0; width: 100%; + .footer-column { + margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2); + } } p:last-child { margin-block-end: 0; @@ -214,18 +221,21 @@ } } } - @media (max-width: 767.98px) { + @include media-breakpoint-down(md) { .container { > .row { > .col-md-12 { - margin-inline-start: var(--qld-gutter-x); - width: calc(100% - calc(var(--qld-gutter-x) * 2)); + margin-inline-start: var(--#{$prefix}footer-spacing); + width: calc(100% - calc(var(--#{$prefix}footer-spacing) * 2)); } > .title, > .crest { - padding-inline: var(--qld-gutter-x); + padding-inline: var(--qld-footer-spacing); margin-inline: 0; width: 100%; + .footer-column { + margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2.5); + } } p:last-child { margin-block-end: var(--#{$prefix}last-para-margin); @@ -236,6 +246,10 @@ column-count: 2; width: 100%; } + .footer-site-name, + .footer-heading { + font-size: calc(var(--#{$prefix}footer-title-font-size) - 0.25rem); + } } } @@ -249,6 +263,7 @@ border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}footer-color-alt-button); width: 100%; font-weight: normal; + margin-block-start: var(--#{$prefix}footer-spacing); &:active { color: var(--#{$prefix}formIO-formio-colour); } @@ -262,7 +277,8 @@ width: 100%; text-align: start; background-color: var(--#{$prefix}formIO-bg-colour); - color: var(--#{$prefix}formIO-formio-colour); + color: var(--#{$prefix}light-text-heading); + font-weight: 700; border-color: var(--#{$prefix}formIO-bg-colour); border-start-start-radius: var(--#{$prefix}footer-border-radius); border-start-end-radius: var(--#{$prefix}footer-border-radius); @@ -271,8 +287,9 @@ font-weight: bold; } } - #qg-footer-feedback { + --qld-footer-bootstrap-default-padding: 1.5rem; + background-color: var(--#{$prefix}formIO-bg-colour); a { color: var(--#{$prefix}formIO-link-colour); @@ -288,14 +305,14 @@ .qg-footer-feedback-footer { border-block-start: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour); - padding-block-start: var(--#{$prefix}footer-spacing); + padding-block-start: calc(var(--#{$prefix}footer-spacing) + 4px); a.qg-footer-feedback__close { border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}formIO-btn-close-colour); width: 100%; display: block; border-radius: var(--#{$prefix}footer-border-radius); - padding: 9px 24px; // magic numbers + padding: 9px 24px; text-align: center; text-decoration: none; &:hover { @@ -324,8 +341,17 @@ margin-block-end: 0; } .col-form-label { - margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5); - font-weight: bold; + margin-block-end: var(--#{$prefix}footer-spacing); + padding-block-end: 4px; + font-weight: 600; + padding-block-start: var(--#{$prefix}formIO-spacing); + color: var(--#{$prefix}formIO-formio-colour); + display: block; + } + .has-feedback { + label.col-form-label { + border-block-start: var(--qld-footer-border-width) solid var(--qld-formIO-hr-colour); + } } .formio-component-submit { margin-block-start: var(--#{$prefix}footer-spacing); @@ -333,11 +359,6 @@ .form-check { align-items: flex-start; } - .formio-modified .form-check-input, - .formio-modified .form-control { - border-color: var(--#{$prefix}formIO-border-notify-success); - outline: var(--#{$prefix}formIO-border-outline-width) solid var(--#{$prefix}formIO-border-notify-success); - } .formio-component-submit .btn, .formio-component-submit .btn-primary { --qld-btn-active-bg: var(--#{$prefix}formIO-submit-btn); @@ -366,13 +387,17 @@ margin: 0; .form-check-label { display: flex; - align-items: center; - margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5); + align-items: start; + margin-block-end: var(--#{$prefix}footer-spacing); margin-inline-start: 0; span { margin-inline-start: calc(var(--#{$prefix}footer-spacing) - 4px); } + &:last-of-type { + margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px); + } } + .form-check-input { margin-left: 0; } @@ -381,6 +406,7 @@ .formio-component-howSatisfiedAreYouWithYourExperienceToday { flex-direction: column; padding-inline-start: 0; + margin-block-end: 0; label.col-form-label { margin-inline-start: 0; @@ -404,8 +430,9 @@ outline-offset: 0; } .callout { - margin-block: var(--#{$prefix}footer-spacing); - background-color: var(--#{$prefix}formIO-callout-bg-colour); + margin-block-start: 0; + margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px); + background-color: var(--#{$prefix}core-default-color-neutral-lightest); border-left: none; border-inline-start: calc(var(--#{$prefix}formIO-form-control-border-width) * 2) solid var(--#{$prefix}formIO-callout-border-colour); @@ -440,7 +467,7 @@ &:first-of-type { border-block-end: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour); - padding-block-end: 13px; // magic number + padding-block-end: 13px; } } p:last-of-type { @@ -456,12 +483,13 @@ .formio-errors .error { margin-block-end: var(--#{$prefix}footer-spacing); } - } -} - -@media (max-width: 300px) { - // This is the min width where the content is still usable. - .qld-footer { - width: 300px; + .field-required:after { + content: none; + content: ""; + } + .field-required:before { + content: " *"; + color: var(--#{$prefix}formIO-error); + } } } diff --git a/src/components/bs5/fullPageWrapper/fullPage.hbs b/src/components/bs5/fullPageWrapper/fullPage.hbs new file mode 100644 index 00000000..c79173e5 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.hbs @@ -0,0 +1,16 @@ + + + + + + {{title}} + {{> metaDcTerms title=title description=description uri=uri dcTerms=dcTerms }} + {{> metaOpenGraph title=title description=description uri=uri seo=seo og=og }} + {{> head }} + + +{{#> mainContainerWrapper }} + {{> @partial-block }} +{{/mainContainerWrapper}} + + \ No newline at end of file diff --git a/src/components/bs5/fullPageWrapper/fullPage.stories.js b/src/components/bs5/fullPageWrapper/fullPage.stories.js new file mode 100644 index 00000000..6a405cd1 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.stories.js @@ -0,0 +1,65 @@ +import { FullPageTest } from "./fullPage.test.js"; +import init from "../../../js/handlebars.init.js"; +import Handlebars from "handlebars"; + +import { dcTerms } from '../metaDcTerms/MetaDcTerms.data.json'; +import metaOpenGraphData from '../metaOpenGraph/MetaOpenGraph.data.json'; +import { masterbrand_variant } from '../header/header.data.json'; +import { menu_state } from "../navbar/navbar.data.json"; +import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json"; +import searchData from "../searchInput/searchInput.data.json"; +import globalAlertData from "../globalAlert/globalAlert.data.json"; +import sidenavData from "../sidenav/sidenav.data.json"; +import contentFooterData from "../contentFooter/contentFooter.data.json"; +import footerData from "../footer/footer.data.json"; + +const defaultData = { + cdn: ".", //for StoryBook it's ., for normal usage "PROD" + title: "title goes here", + description: "my description", + uri: "http://localhost/uri/here", + dcTerms: dcTerms, + seo: metaOpenGraphData.seo, + og: metaOpenGraphData.og, + header: masterbrand_variant, + search: searchData, + navbar: menu_state, + breadcrumbs: breadcrumbsData.forGov, + globalAlert: globalAlertData.critical, + sidenav: sidenavData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: "!Layout/Full Page", + render: (args) => { + init(Handlebars) + return new FullPageTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + layout: 'fullscreen', + docs: { + controls: { + + }, + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +/** + * Default + * + */ +export const Default = {}; + diff --git a/src/components/bs5/fullPageWrapper/fullPage.test.hbs b/src/components/bs5/fullPageWrapper/fullPage.test.hbs new file mode 100644 index 00000000..c4cc5bc9 --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.test.hbs @@ -0,0 +1,4 @@ +{{#>fullPage}} + my main content goes here +{{/fullPage}} + diff --git a/src/components/bs5/fullPageWrapper/fullPage.test.js b/src/components/bs5/fullPageWrapper/fullPage.test.js new file mode 100644 index 00000000..8e17461a --- /dev/null +++ b/src/components/bs5/fullPageWrapper/fullPage.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./fullPage.test.hbs?raw"; + +export class FullPageTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/fullPageWrapper/manifest.json b/src/components/bs5/fullPageWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/globalAlert/globalAlert.scss b/src/components/bs5/globalAlert/globalAlert.scss index 1fa2ca2b..f6e8f92f 100644 --- a/src/components/bs5/globalAlert/globalAlert.scss +++ b/src/components/bs5/globalAlert/globalAlert.scss @@ -1,6 +1,4 @@ .global-alert { - padding: 5px 0 5px 0; - $chevron-icon-white: url('data:image/svg+xml,'); $chevron-icon-grey: url('data:image/svg+xml,'); @@ -9,25 +7,20 @@ .qld-global-alert-main { display: flex; - // align-items: center; // this was affecting the close button - margin: 6px 0; + .global-alert-icon { - position: absolute; line-height: 1; - margin-top: 2px; - width: 2em; - height: 1em; + width: 22px; + height: 22px; display: inline-block; transition: fill 0.3s ease; - // align-self: center; - // vertical-align: middle; + vertical-align: middle; font-size: 1.5rem; + padding-left: 1.5rem; // padding between icon and text. Added due to bug when content has 3 lines of text. + } .global-alert-content { - padding: 0 20px 0 16px; - display: flex; - flex-direction: column; - align-items: center; + padding: 0 1.25rem 0 1rem; .global-alert-action a { display: flex; align-items: center; @@ -45,21 +38,32 @@ margin-left: auto; .btn-close { height: 2rem; - width: 2rem; - background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23F5F5F5'/%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%231D1D1D'/%3E%3C/svg%3E") no-repeat center center; + width: 2rem; + --#{$prefix}btn-close-opacity: 1; + background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23131212' fill-opacity='0.1' /%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%23131212'/%3E%3C/svg%3E") no-repeat center center; } } } &.global-alert-critical { background-color: $qld-notify-warning; color: $qld-white; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8.0001V13.0001M12 16.0001H12.01M8.84751 20.6604H15.1525C15.8255 20.6604 16.1621 20.6604 16.4633 20.5625C16.7299 20.4759 16.9753 20.3342 17.1835 20.1466C17.419 19.9347 17.5872 19.6432 17.9237 19.0604L21.0762 13.6001C21.4128 13.0172 21.581 12.7258 21.6469 12.4159C21.7052 12.1418 21.7052 11.8584 21.6469 11.5843C21.581 11.2744 21.4128 10.983 21.0762 10.4001L17.9237 4.93984C17.5872 4.35696 17.419 4.06551 17.1835 3.85355C16.9753 3.66601 16.7299 3.52434 16.4633 3.43773C16.1621 3.33984 15.8255 3.33984 15.1525 3.33984H8.84751C8.17445 3.33984 7.83792 3.33984 7.53665 3.43773C7.27009 3.52434 7.02471 3.66601 6.81643 3.85355C6.58102 4.06551 6.41276 4.35696 6.07623 4.93984L2.92375 10.4001C2.58722 10.983 2.41895 11.2744 2.35309 11.5843C2.29482 11.8584 2.29482 12.1418 2.35309 12.4159C2.41895 12.7258 2.58722 13.0172 2.92375 13.6001L6.07623 19.0604C6.41276 19.6432 6.58102 19.9347 6.81643 20.1466C7.02471 20.3342 7.27009 20.4759 7.53665 20.5625C7.83792 20.6604 8.17445 20.6604 8.84751 20.6604Z' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } + .global-alert-close { + margin-left: auto; + .btn-close { + height: 2rem; + width: 2rem; + --#{$prefix}btn-close-opacity: 1; + background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='mix-blend-mode:multiply'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23131212' fill-opacity='0.1' /%3E%3C/g%3E%3Cpath d='M17.2871 15.9004L21.3105 11.916L22.1309 11.0957C22.248 10.9785 22.248 10.7832 22.1309 10.627L21.2715 9.76758C21.1152 9.65039 20.9199 9.65039 20.8027 9.76758L15.998 14.6113L11.1543 9.76758C11.0371 9.65039 10.8418 9.65039 10.6855 9.76758L9.82617 10.627C9.70898 10.7832 9.70898 10.9785 9.82617 11.0957L14.6699 15.9004L9.82617 20.7441C9.70898 20.8613 9.70898 21.0566 9.82617 21.2129L10.6855 22.0723C10.8418 22.1895 11.0371 22.1895 11.1543 22.0723L15.998 17.2285L19.9824 21.252L20.8027 22.0723C20.9199 22.1895 21.1152 22.1895 21.2715 22.0723L22.1309 21.2129C22.248 21.0566 22.248 20.8613 22.1309 20.7441L17.2871 15.9004Z' fill='%23F5F5F5'/%3E%3C/svg%3E") no-repeat center center; + } + } .global-alert-action a { color: $qld-white; + text-decoration-color: $qld-white; &:after { background: var(--chevron-icon-white); } @@ -71,7 +75,7 @@ &.global-alert-warning { background-color: $qld-notify-alert; color: $qld-text-grey; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_80802' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='2' width='20' height='17'%3E%3Cpath d='M10 13.9062C10.457 13.9062 10.8438 14.293 10.8086 14.75C10.8086 15.2422 10.457 15.5938 10 15.5938C9.54297 15.5938 9.15625 15.2422 9.15625 14.75C9.15625 14.293 9.50781 13.9062 10 13.9062ZM10 12.5C9.68359 12.5 9.4375 12.2539 9.4375 11.9375V6.875C9.4375 6.59375 9.71875 6.3125 10 6.3125C10.2461 6.3125 10.5273 6.59375 10.5273 6.875V11.9375C10.5273 12.2539 10.2812 12.5 10 12.5ZM18.7188 15.2422C19.0703 15.8398 19.0703 16.543 18.7188 17.1406C18.3672 17.7734 17.7344 18.125 17.0312 18.125H2.96875C2.23047 18.125 1.59766 17.7734 1.24609 17.1406C0.894531 16.543 0.894531 15.8398 1.24609 15.2422L8.27734 3.35938C8.62891 2.76172 9.26172 2.375 10 2.375C10.7031 2.41016 11.3359 2.76172 11.6875 3.35938L18.7188 15.2422ZM17.7344 16.5781C17.9102 16.332 17.875 16.0508 17.7344 15.8047L10.7031 3.92188C10.5625 3.67578 10.2812 3.53516 10 3.5C9.96484 3.5 10 3.5 10 3.5C9.68359 3.5 9.40234 3.67578 9.26172 3.92188L2.23047 15.8047C2.08984 16.0508 2.05469 16.332 2.23047 16.5781C2.37109 16.8594 2.65234 17 2.96875 17H16.9961C17.3125 17 17.5938 16.8594 17.7344 16.5781Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_80802)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A"); @@ -89,7 +93,7 @@ &.global-alert-info { background-color: $qld-general-info-alert; color: $qld-text-grey; - font-size: 0.8125em; + font-size: 0.875em; .global-alert-icon { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_5702_82508' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='1' y='1' width='18' height='18'%3E%3Cpath d='M10 7.20312C9.48047 7.20312 9.10938 6.83203 9.10938 6.3125C9.10938 5.83008 9.48047 5.42188 10 5.42188C10.4824 5.42188 10.8906 5.83008 10.8906 6.3125C10.8906 6.83203 10.4824 7.20312 10 7.20312ZM15.9375 1.5625C17.2363 1.5625 18.3125 2.63867 18.3125 3.9375V15.8125C18.3125 17.1484 17.2363 18.1875 15.9375 18.1875H4.0625C2.72656 18.1875 1.6875 17.1484 1.6875 15.8125V3.9375C1.6875 2.63867 2.72656 1.5625 4.0625 1.5625H15.9375ZM17.125 15.8125V3.9375C17.125 3.30664 16.5684 2.75 15.9375 2.75H4.0625C3.39453 2.75 2.875 3.30664 2.875 3.9375V15.8125C2.875 16.4805 3.39453 17 4.0625 17H15.9375C16.5684 17 17.125 16.4805 17.125 15.8125ZM11.7812 13.4375C12.0781 13.4375 12.375 13.7344 12.375 14.0312C12.375 14.3652 12.0781 14.625 11.7812 14.625H8.21875C7.88477 14.625 7.625 14.3652 7.625 14.0312C7.625 13.7344 7.88477 13.4375 8.21875 13.4375H9.40625V9.875H8.8125C8.47852 9.875 8.21875 9.61523 8.21875 9.28125C8.21875 8.98438 8.47852 8.6875 8.8125 8.6875H10C10.2969 8.6875 10.5938 8.98438 10.5938 9.28125V13.4375H11.7812Z' fill='%2303213F'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_5702_82508)'%3E%3Crect width='20' height='20' fill='%231D1D1D'/%3E%3C/g%3E%3C/svg%3E%0A"); @@ -106,11 +110,75 @@ } } -@media (min-width: 768px) { - .global-alert-content { - flex-direction: row !important; +@media (min-width: 768px) { // md and above + .global-alert { + .qld-global-alert-main { + padding: 1rem 1rem; + .global-alert-content { + padding-left: 1rem; + display: flex; + align-items: center; + } + } + .global-alert-message { + padding: 0 3rem 0 1rem; // Also: 0 48px 0 16px, according to Health DS + max-width: 80%;// Added to prevent Label from collapsing + } + .global-alert-icon { + // temporary change to align icon with content + align-self: center; + } + .global-alert-content { + flex-direction: row !important; + } + .global-alert-action { + margin-left: 2rem; + } + } + +} + +@media (max-width: 767.98px) { // sm and below + .global-alert { + .qld-global-alert-main { + padding: 0.75rem 1rem; // Also 12px 16px + } + .global-alert-content { + padding: 0 1rem 0 0.75rem; // Also 0 16px 0 12px + } } - .global-alert-action { - margin-left: 2rem; + + .global-alert-icon { + // aligning with text + padding-top: 0.75rem; } } + +@include media-breakpoint-up(lg) { // 992px and above + + .global-alert { + &.global-alert-critical { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-error-darker); + } + &.global-alert-warning { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-caution-darker); + } + &.global-alert-info { + border-top: 0.063rem solid var(--#{$prefix}core-default-color-status-info-darker); + } + .global-alert-icon { + // aligning with text + padding-top: 1.375rem; + // temporary change to align icon to center + align-self: center; + } + .qld-global-alert-main { + // Padding requires 64px in space between alert icon and left border; minus (24px(1.5rem) gutter + 16px padding) = 24px (1.5rem) + padding-left: 1.5rem; + .global-alert-content { + padding-left: 1rem; // Also: 16px + } + } + + } +} \ No newline at end of file diff --git a/src/components/bs5/head/head.stories.js b/src/components/bs5/head/head.stories.js index 476f9e71..1dcf64e0 100644 --- a/src/components/bs5/head/head.stories.js +++ b/src/components/bs5/head/head.stories.js @@ -3,7 +3,7 @@ import { Head } from "./Head.js"; export default { tags: ["autodocs"], - title: "!Core/HeadMeta", + title: "!Core/Head/Includes CDN or Local", render: (args) => { return new Head(args).html; }, @@ -23,7 +23,7 @@ export default { "PROD", "/__data/assets/git_bridge/0026/471752", ], - } + }, }, parameters: { @@ -53,24 +53,24 @@ export const Default = { export const DEV = { args: { - cdn: "DEV" + cdn: "DEV", }, decorators:[Story => { return ` ${Story()} `; - }] + }], }; export const SQUIZ = { args: { - cdn: "/__data/assets/git_bridge/0026/471752" + cdn: "/__data/assets/git_bridge/0026/471752", }, decorators:[Story => { return ` ${Story()} `; - }] + }], }; diff --git a/src/components/bs5/header/header.scss b/src/components/bs5/header/header.scss index 1954003a..cbb85421 100644 --- a/src/components/bs5/header/header.scss +++ b/src/components/bs5/header/header.scss @@ -507,10 +507,6 @@ &__main--masterbrand--true { @include media-breakpoint-down(lg) { height: 0; - - .qld__header__site-search--open { - margin-top: 3rem; - } } } @@ -531,7 +527,8 @@ position: absolute; left: 0; right: 0; - padding: 1rem; + top: 0.4rem; + padding: 1rem 0; background-color: var(--#{$prefix}header_bg); } &--closed { diff --git a/src/components/bs5/header/header.stories.js b/src/components/bs5/header/header.stories.js index d478fc83..e5d82e56 100644 --- a/src/components/bs5/header/header.stories.js +++ b/src/components/bs5/header/header.stories.js @@ -280,10 +280,7 @@ export const EndorsedBrand = { ${Story()}
- ${new Banner(bannerDataWithOverride).html} -
- ${new SearchInput(searchData).html} -
+ ${new Banner(bannerDataWithOverride).html} ${new Footer(footerDataWithOverride).html}
`; @@ -326,9 +323,6 @@ export const StandaloneBrand = {
${new Banner(bannerDataWithOverride).html} -
- ${new SearchInput(searchData).html} -
${new Footer(footerDataWithOverride).html}
`; diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs new file mode 100644 index 00000000..3808dc70 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs @@ -0,0 +1,28 @@ +{{> header header}} +{{> navbar navbar}} +{{> globalAlert globalAlert}} +
+ {{#> breadcrumbsWrapper}} + {{> breadcrumbs breadcrumbs}} + {{/breadcrumbsWrapper}} + +
+
+
+ + {{#> sidenavWrapper}} + {{> sidenav sidenav}} + {{/sidenavWrapper}} + {{#> contentWrapper}} + {{> @partial-block }} + {{/contentWrapper}} +
+
+ + {{#>contentFooterWrapper}} + {{> contentFooter contentFooter }} + {{/contentFooterWrapper}} + +
+
+{{> footer footer}} \ No newline at end of file diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js new file mode 100644 index 00000000..c80e7a54 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js @@ -0,0 +1,51 @@ +import { MainContainerWrapperTest } from "./mainContainerWrapper.test.js"; + +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; +//Data +import { masterbrand_variant } from '../header/header.data.json'; +import { menu_state } from "../navbar/navbar.data.json"; +import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json"; +import searchData from "../searchInput/searchInput.data.json"; +import globalAlertData from "../globalAlert/globalAlert.data.json"; +import sidenavData from "../sidenav/sidenav.data.json"; +import contentFooterData from "../contentFooter/contentFooter.data.json"; +import footerData from "../footer/footer.data.json"; + +const defaultData = { + cdn: ".", //for storybook it's ., for normal usage "PROD" + title: "title goes here", + header: masterbrand_variant, + search: searchData, + navbar: menu_state, + breadcrumbs: breadcrumbsData.forGov, + globalAlert: globalAlertData.critical, + sidenav: sidenavData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: "!Layout/Main Container Wrapper", + render: (args) => { + init(Handlebars) + return new MainContainerWrapperTest(args).html; + }, + args: defaultData, + argTypes: { + }, + parameters: { + layout: 'fullscreen', + docs: { + controls: { + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs new file mode 100644 index 00000000..abac4314 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs @@ -0,0 +1,6 @@ +{{#> mainContainerWrapper}} +

inner mainContainerWrapper data

+

content goes here dd

+{{/mainContainerWrapper}} + + diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js new file mode 100644 index 00000000..da0ca325 --- /dev/null +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./mainContainerWrapper.test.hbs?raw"; + +export class MainContainerWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/mainContainerWrapper/manifest.json b/src/components/bs5/mainContainerWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaDcTerms/MetaDcTerms.data.json b/src/components/bs5/metaDcTerms/MetaDcTerms.data.json new file mode 100644 index 00000000..e8268e15 --- /dev/null +++ b/src/components/bs5/metaDcTerms/MetaDcTerms.data.json @@ -0,0 +1,12 @@ +{ + "dcTerms": { + "created": "2021-06-02", + "modified": "2024-02-26", + "type": "Text|Collection", + "aggregationLevel": "null|collection", + "documentType": "guidelines|index", + "audience": "AGLSTERMS.agls-audience", + "subject": "", + "licenseUri": "https://creativecommons.org/licenses/by/4.0/" + } +} \ No newline at end of file diff --git a/src/components/bs5/metaDcTerms/MetaDcTerms.js b/src/components/bs5/metaDcTerms/MetaDcTerms.js new file mode 100644 index 00000000..456f3305 --- /dev/null +++ b/src/components/bs5/metaDcTerms/MetaDcTerms.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./metaDcTerms.hbs?raw"; + +export class MetaDcTerms { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/metaDcTerms/manifest.json b/src/components/bs5/metaDcTerms/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaDcTerms/metaDcTerms.hbs b/src/components/bs5/metaDcTerms/metaDcTerms.hbs new file mode 100644 index 00000000..9bdc5dca --- /dev/null +++ b/src/components/bs5/metaDcTerms/metaDcTerms.hbs @@ -0,0 +1,17 @@ + +{{#if dcTerms}} + + + +{{#if dcTerms.created}}{{/if}} +{{#if dcTerms.modified}}{{/if}} +{{#if description}}{{/if}} +{{#if uri}}{{/if}} + +{{#if dcTerms.type}}{{/if}} +{{#if dcTerms.aggregationLevel}}{{/if}} +{{#if dcTerms.documentType}}{{/if}} +{{#if dcTerms.subject}}{{/if}} +{{#if dcTerms.audience}}{{/if}} +{{#if dcTerms.licenseUri}}{{/if}} +{{/if}} \ No newline at end of file diff --git a/src/components/bs5/metaDcTerms/metaDcTerms.stories.js b/src/components/bs5/metaDcTerms/metaDcTerms.stories.js new file mode 100644 index 00000000..6fc70472 --- /dev/null +++ b/src/components/bs5/metaDcTerms/metaDcTerms.stories.js @@ -0,0 +1,38 @@ +import MetaDcTermsData from "./MetaDcTerms.data.json"; +import { MetaDcTerms } from "./MetaDcTerms.js"; + +const defaultData = { + ...MetaDcTermsData, + uri: "https://forgov.qld.gov.au/projects-and-initiatives/search-for-projects-and-initiatives", + description: "description goes here", + title: "this is my title", +} + +export default { + tags: ["autodocs"], + title: "!Core/Head/Meta Dublin Core Terms (DCTERMS)", + args: defaultData, + render: (args) => { + return new MetaDcTerms(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + + + diff --git a/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json b/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json new file mode 100644 index 00000000..a35d6ffe --- /dev/null +++ b/src/components/bs5/metaOpenGraph/MetaOpenGraph.data.json @@ -0,0 +1,14 @@ +{ + "seo": { + "pageSnippet": "10", + "keywords": "keywords go here", + "department": "None" + }, + "og": { + "type": "article", + "image": "https://oss-uat.clients.squiz.net/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png", + "twitter_image": "https://oss-uat.clients.squiz.net/__data/assets/image/0012/110460/Opengraph-default-thumbnail.png", + "twitter_description": "if not set, will use description" + } +} + diff --git a/src/components/bs5/metaOpenGraph/MetaOpenGraph.js b/src/components/bs5/metaOpenGraph/MetaOpenGraph.js new file mode 100644 index 00000000..e9629f7b --- /dev/null +++ b/src/components/bs5/metaOpenGraph/MetaOpenGraph.js @@ -0,0 +1,10 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./metaOpenGraph.hbs?raw"; + +export class MetaOpenGraph { + + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + constructor(data = {}) { + return new Component(template, data); + } +} diff --git a/src/components/bs5/metaOpenGraph/manifest.json b/src/components/bs5/metaOpenGraph/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs b/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs new file mode 100644 index 00000000..b176cb78 --- /dev/null +++ b/src/components/bs5/metaOpenGraph/metaOpenGraph.hbs @@ -0,0 +1,18 @@ + + +{{#if description }}{{/if}} +{{#if seo.pageSnippet }}{{/if}} + + +{{#if seo.keywords }}{{/if}} +{{#if seo.department }}{{/if}} + + + + +{{#if description }}{{/if}} +{{#ifAny og.twitter_description description }}{{/ifAny}} +{{#if og.image }}{{/if}} +{{#ifAny og.twitter_image og.image }}{{/ifAny}} +{{#if uri }}{{/if}} +{{#if og.type }}{{/if}} \ No newline at end of file diff --git a/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js b/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js new file mode 100644 index 00000000..81bbb1e1 --- /dev/null +++ b/src/components/bs5/metaOpenGraph/metaOpenGraph.stories.js @@ -0,0 +1,38 @@ +import MetaDcTermsData from "./MetaOpenGraph.data.json"; +import { MetaOpenGraph } from "./MetaOpenGraph.js"; + +const defaultData = { + ...MetaDcTermsData, + title: "this is my title", + uri: "https://forgov.qld.gov.au/projects-and-initiatives/search-for-projects-and-initiatives", + description: "this is my description", +} + +export default { + tags: ["autodocs"], + title: "!Core/Head/Meta OpenGraph and SEO", + args: defaultData, + render: (args) => { + return new MetaOpenGraph(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + + }, + }, + }, +}; + +/** + * Default head metadata + * + */ +export const Default = {}; + + + diff --git a/src/components/bs5/navbar/_colours.scss b/src/components/bs5/navbar/_colours.scss index 4b4f2711..46443aa5 100644 --- a/src/components/bs5/navbar/_colours.scss +++ b/src/components/bs5/navbar/_colours.scss @@ -30,6 +30,9 @@ --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default); --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade); + --#{$prefix}navbar-mobile-bg-color: var(--#{$prefix}color-default-color-dark-background-default); + --#{$prefix}navbar-mobile-cta-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade); + --#{$prefix}navbar-mobile-cta-bg-color-open: var(--#{$prefix}color-default-color-dark-background-default); // Toggle icons for mobile --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1); @@ -64,8 +67,15 @@ --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white); --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-dark-text-heading); + --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover); + --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-link-color-hover: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default); + --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white); + --#{$prefix}navbar-menuitem-active: var(--#{$prefix}color-default-color-dark-background-alt); --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover); --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary); --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default); diff --git a/src/components/bs5/navbar/_icons.scss b/src/components/bs5/navbar/_icons.scss index abc02d1d..12b7e010 100644 --- a/src/components/bs5/navbar/_icons.scss +++ b/src/components/bs5/navbar/_icons.scss @@ -4,7 +4,7 @@ .navbar { .dropdown-toggle { .toggle_icon { - color: var(--qld-navbar-svg-color); + color: var(--#{$prefix}navbar-svg-color); height: 1rem; width: 1rem; margin-left: .25rem; @@ -46,8 +46,11 @@ } a.dropdown-item { + position: relative; .chevron__icon { - float: right; + position: absolute; + top: 1.15rem; + right: 0; } } } diff --git a/src/components/bs5/navbar/navbar.data.json b/src/components/bs5/navbar/navbar.data.json index 285bd0cd..f6c5f704 100644 --- a/src/components/bs5/navbar/navbar.data.json +++ b/src/components/bs5/navbar/navbar.data.json @@ -145,7 +145,7 @@ "CTA": [ { "id": "CTAone", - "target_url": "index.html", + "target_url": "#", "label": "Business and Industry", "dropdown_enabled": true, "dropdown_options": { @@ -196,7 +196,7 @@ }, { "id": "CTAtwo", - "target_url": "index.html", + "target_url": "#", "label": "For government", "dropdown_enabled": true, "dropdown_options": { @@ -247,7 +247,7 @@ }, { "id": "CTAthree", - "target_url": "login.html", + "target_url": "#", "label": "Login", "dropdown_enabled": true, "dropdown_options": { diff --git a/src/components/bs5/navbar/navbar.hbs b/src/components/bs5/navbar/navbar.hbs index 003c94f3..3e640d10 100644 --- a/src/components/bs5/navbar/navbar.hbs +++ b/src/components/bs5/navbar/navbar.hbs @@ -64,7 +64,7 @@ {{#each navigation_items}}
  • - {{title}} + {{title}} @@ -168,7 +168,7 @@ {{/if}} {{/each }} {{#each CTA}} -
  • +
  • diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss index 79c50196..bfa80fc8 100644 --- a/src/components/bs5/navbar/navbar.scss +++ b/src/components/bs5/navbar/navbar.scss @@ -82,6 +82,7 @@ &-collapse { + position: relative; @include media-breakpoint-down(md) { width: 20rem; @@ -98,7 +99,7 @@ top: 0; bottom: 0; overflow-x: hidden; - background-color: var(--#{$prefix}navbar-bg-color); + background-color: var(--#{$prefix}navbar-mobile-bg-color); /* Initially positioned off-screen to the right */ transition: transform .25s ease-in-out; @@ -286,14 +287,53 @@ @include media-breakpoint-down(lg) { border-left: 4px solid var(--#{$prefix}navbar-border-accent); + background-color: var(--#{$prefix}navbar-bg-color); } .dropdown-container { display: flex; } + + .nav-item.CTA_feature { + + color: var(--#{$prefix}navbar-mobile-text-color); + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color); + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + + .mobile-only { + + .dropdown-menu.show { + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + border-left: solid .25rem var(--#{$prefix}navbar-mobile-cta-bg-color-open); + + .dropdown-item { + color: var(--#{$prefix}navbar-mobile-text-color); + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + } + } + + .first-element { + color: var(--#{$prefix}navbar-mobile-text-color) !important; //TO DO: resolve, caused by qld-type overrides + &.show { + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + .dropdown-item { + border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color); + } + } + &:hover { + color: var(--#{$prefix}navbar-mobile-text-color); + background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open); + } + } + + + } + } } - .dropdown { + .dropdown { + position: static; + &-menu { background-color: var(--#{$prefix}navbar-dropdown-bg-color); @@ -305,7 +345,7 @@ @include media-breakpoint-up(lg) { left: 0; right: 0; - width: 1320px; //TO DO: FIX + width: 100%; padding: 3rem 4rem; margin-top: 0.5rem; margin-left: -4rem; @@ -331,8 +371,6 @@ } } - - @include media-breakpoint-down(lg) { border-radius: 0; box-shadow: none; @@ -402,6 +440,12 @@ padding: 1rem 0; color: var(--#{$prefix}navbar-link-color); border-bottom: solid 1px var(--#{$prefix}navbar-border-color); + white-space: normal; + + .dropdown-item__text { + display: inline-block; + margin-right: 1.5rem; + } &:active { background-color: transparent; @@ -438,7 +482,6 @@ @include media-breakpoint-down(lg) { padding: 1rem; - white-space: normal; overflow-wrap: break-word; } } @@ -498,7 +541,7 @@ } .nav-link { - color: var(--#{$prefix}navbar-nav-text-color); + color: var(--#{$prefix}navbar-nav-text-color) !important; //To do: Due to qld-type.scss needing refractor. Remove later. text-decoration: none; line-height: 2rem; width: 100%; diff --git a/src/components/bs5/quickexit/quickexit.scss b/src/components/bs5/quickexit/quickexit.scss index 3682c2fb..8ef5cf8f 100644 --- a/src/components/bs5/quickexit/quickexit.scss +++ b/src/components/bs5/quickexit/quickexit.scss @@ -10,7 +10,6 @@ --#{$prefix}quick-exit-gaps: 25px; --#{$prefix}quick-exit-text-outline: 2px; --#{$prefix}quick-exit-text-outline-offset: 2px; - --#{$prefix}tooltip-width: 190px; --#{$prefix}tooltip-arrow: 8px; --#{$prefix}tooltip-desktop-top-offset: 40px; @@ -28,7 +27,6 @@ z-index: 200; &-inner { - display: -ms-flexbox; display: flex; align-items: center; height: 100%; @@ -72,7 +70,6 @@ } .qld-quick-exit-item.qld-tooltip-container { text-decoration: underline; - margin-inline-end: var(--#{$prefix}quick-exit-gaps); &:focus, &:active, &:focus-within { @@ -106,6 +103,7 @@ height: 100%; -ms-flex-pack: distribute; justify-content: space-around; + gap: var(--#{$prefix}quick-exit-gaps); } .qld-quick-exit-actions { -ms-flex-positive: 1; @@ -124,24 +122,32 @@ background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover); } } - .qld-quick-exit-tip-link { + a.qld-quick-exit-tip-link { color: var(--#{$prefix}quick-exit-link-text-colour); + &:visited { + text-decoration-color: var(--#{$prefix}quick-exit-text-colour); + } + &:hover, + &:focus { + text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover); + } } .qg-quick-exit__tips { flex-grow: 1; } &.has-icon-info .qg-quick-exit__tips { + position: relative; display: block; - padding-inline-start: var(--#{$prefix}icon-info-spacing); } } -} - -/* - * Desktop layout - */ -@media screen and (min-width: 992px) { - .qld-quick-exit { + .icon-info { + position: absolute; + inset-inline-start: 0; + background-repeat: no-repeat; + margin-block-start: 4px; + background-image: url("data:image/svg+xml,"); + } + @include media-breakpoint-up(lg) { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; @@ -152,18 +158,15 @@ z-index: 999; padding-block: 20px; padding-inline: 40px; - .container { padding-inline: calc(var(--#{$prefix}gutter-x) * 0.5); } - &-inner { justify-content: space-between; - .qld-quick-exit-tip-link { -ms-flex-align: center; align-items: center; - color: $qld-white; + color: var(--#{$prefix}quick-exit-text-colour); display: -ms-flexbox; display: flex; } @@ -197,66 +200,54 @@ } } } -} -.icon-info { - position: absolute; - inset-inline-start: calc(var(--#{$prefix}quick-exit-spacing) * 2.5); - background-repeat: no-repeat; - margin-block-start: 4px; - background-image: url("data:image/svg+xml,"); -} -.qld-quick-exit-inner.has-tooltip { - .qg-quick-exit__tips { - padding-inline-start: 0; - } - @media screen and (max-width: 925px) { - .not-mobile { - display: none; + .qld-quick-exit-inner.has-tooltip { + .qg-quick-exit__tips { + padding-inline-start: 0; } - } - @media screen and (max-width: 420px) { - .very-small-mobile { - display: none; + @include media-breakpoint-down(lg) { + .not-mobile { + display: none; + } } - } -} -.qld-quick-exit-inner.has-icon-info { - .qg-quick-exit__tips { - padding-inline-start: var(--#{$prefix}icon-info-spacing); - } -} -.qld-quick-exit-inner.has-icon-info.has-tooltip { - @media screen and (max-width: 1020px) { - .icon-info { - display: none; + @include media-breakpoint-down(sm) { + .very-small-mobile { + display: none; + } } + } + .qld-quick-exit-inner.has-icon-info { .qg-quick-exit__tips { - padding-inline-start: 0; + padding-inline-start: calc(var(--#{$prefix}icon-info-spacing) * 1); } } - @media screen and (max-width: 925px) { - .not-mobile { - display: none; + .qld-quick-exit-inner.has-icon-info.has-tooltip { + @include media-breakpoint-down(lg) { + .not-mobile { + display: none; + } + .not-mobile, + .qld-quick-exit-tip-link { + display: none; + } + .icon-info { + margin-block-start: 0; + } } } - // @media screen and (max-width: 520px) { - // .very-small-mobile { - // display: none; - // } - // } -} -@media screen and (max-width: 850px) { - .not-mobile, - .qld-quick-exit-tip-link { - display: none; + @include media-breakpoint-down(md) { + .qld-quick-exit-inner { + .qg-quick-exit__tips { + .not-mobile, + a { + display: none; + } + } + } } -} - -//////////////////////////////////////////////////////////////////////////////////// -/// This is only for Responsive Design and keeping important info available to view -@media screen and (max-width: 365px) { - .qld-quick-exit-button { - padding-inline: 10px; // + @include media-breakpoint-down(sm) { + .qld-quick-exit-button { + padding-inline: 10px; + } } } diff --git a/src/components/bs5/searchInput/search.functions.js b/src/components/bs5/searchInput/search.functions.js index e4fdcc1c..7870f286 100644 --- a/src/components/bs5/searchInput/search.functions.js +++ b/src/components/bs5/searchInput/search.functions.js @@ -114,9 +114,9 @@ export async function showSuggestions(value = '', isDefault = false, form) {
    Suggestions + const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '$1'); + return `
  • ${highlightedText}
    • `; + }).join('')} `; dynamicSuggestionsContainer.style.display = 'block'; createPopper(searchInput, suggestions, { @@ -190,4 +190,4 @@ export function submitSearchForm(query = '', form) { } // Attach the function to the window object to make it globally accessible -window.selectSuggestion = (value, form) => selectSuggestion(value, form); \ No newline at end of file +window.selectSuggestion = (value, form) => selectSuggestion(value, form); diff --git a/src/components/bs5/searchInput/searchInput.data.json b/src/components/bs5/searchInput/searchInput.data.json index 63ebe361..adc88889 100644 --- a/src/components/bs5/searchInput/searchInput.data.json +++ b/src/components/bs5/searchInput/searchInput.data.json @@ -1,63 +1,63 @@ { - "customClass": "", - "variantClass": "", - "placeholder": "Search website", - "inputID": "search", - "inputName": "query", - "buttonID": "search-button", - "buttonType": "submit", - "buttonLabel": "Search", - "ariaLabel": "Search website", - "suggestions": true, - "tags": { - "collection": "qgov~sp-search", - "profile": "qld", - "numranks": "10", - "tiers": "off", - "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", - "results-url": "https://discover.search.qld.gov.au/s/search.json" - }, - "default_suggestions": { - "popular_services": [ - { - "title": "Apply for leave", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application" - }, - { - "title": "Apply for higher duties or relieving at level", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level" - }, - { - "title": "Extend a temporary or casual employee", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee" - }, - { - "title": "Hire a staff member (recruitment)", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment" - } - ], - "categories": [ - { - "title": "Search for directives, policies, circulars, and guidelines", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines" - }, - { - "title": "Employee pay and benefits", - "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits" - }, - { - "title": "Queensland Shared Services", - "link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services" - }, - { - "title": "Career development", - "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development" - } - ], - "options": { - "label": "Browse all categories", - "view_more": false, - "href": "/queenslanders" - } + "customClass": "", + "variantClass": "", + "placeholder": "Search website", + "inputID": "search", + "inputName": "query", + "buttonID": "search-button", + "buttonType": "submit", + "buttonLabel": "Search", + "ariaLabel": "Search website", + "suggestions": true, + "tags": { + "collection": "qgov~sp-search", + "profile": "qld", + "numranks": "10", + "tiers": "off", + "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", + "results-url": "https://discover.search.qld.gov.au/s/search.json" + }, + "default_suggestions": { + "popular_services": [ + { + "title": "Apply for leave", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application" + }, + { + "title": "Apply for higher duties or relieving at level", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level" + }, + { + "title": "Extend a temporary or casual employee", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee" + }, + { + "title": "Hire a staff member (recruitment)", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment" + } + ], + "categories": [ + { + "title": "Search for directives, policies, circulars, and guidelines", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines" + }, + { + "title": "Employee pay and benefits", + "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits" + }, + { + "title": "Queensland Shared Services", + "link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services" + }, + { + "title": "Career development", + "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development" + } + ], + "options": { + "label": "Browse all categories", + "view_more": false, + "href": "/queenslanders" } + } } \ No newline at end of file diff --git a/src/components/bs5/searchInput/searchInput.hbs b/src/components/bs5/searchInput/searchInput.hbs index bf9d9f7a..d156339a 100644 --- a/src/components/bs5/searchInput/searchInput.hbs +++ b/src/components/bs5/searchInput/searchInput.hbs @@ -44,4 +44,4 @@ {{/if}} - + \ No newline at end of file diff --git a/src/components/bs5/searchInput/searchInput.scss b/src/components/bs5/searchInput/searchInput.scss index a26a703c..bb6ce5b4 100644 --- a/src/components/bs5/searchInput/searchInput.scss +++ b/src/components/bs5/searchInput/searchInput.scss @@ -1,5 +1,5 @@ // ---------------------------------------------------------------------------------------------------------------------- -// Header - palettes and second hand variables: +// Search input - palettes and second hand variables: @import './colours'; // ---------------------------------------------------------------------------------------------------------------------- @@ -15,7 +15,11 @@ --icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5C11.5 4.71875 10.5312 3.09375 9 2.1875C7.4375 1.28125 5.53125 1.28125 4 2.1875C2.4375 3.09375 1.5 4.71875 1.5 6.5C1.5 8.3125 2.4375 9.9375 4 10.8438C5.53125 11.75 7.4375 11.75 9 10.8438C10.5312 9.9375 11.5 8.3125 11.5 6.5ZM10.5312 11.625C9.40625 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.4375 11.5938 10.5625L15.7812 14.7188C16.0625 15.0312 16.0625 15.5 15.7812 15.7812C15.4688 16.0938 15 16.0938 14.7188 15.7812L10.5312 11.625Z' fill='%23414141'/%3E%3C/svg%3E%0A"); position: relative; - min-width: 22.5rem; + width: 100%; + + @include media-breakpoint-up(lg) { + min-width: 22.5rem; + } //Search dropdown .suggestions { diff --git a/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx b/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx new file mode 100644 index 00000000..54bf624f --- /dev/null +++ b/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx @@ -0,0 +1,11 @@ +import { Canvas, Meta, Story } from "@storybook/blocks" +import * as SidenavWrapperStories from "./sidenavWrapper.stories" + + + +# Side Wrapper navigation +This is a partial-block to embed more content inside another partial https://handlebarsjs.com/guide/partials.html#partial-blocks + + + + diff --git a/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js b/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js new file mode 100644 index 00000000..412dea39 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js @@ -0,0 +1,13 @@ +import Component from '../../../js/QGDSComponent.js' +import template from "./sidenavWrapper.test.hbs?raw"; + +export class SidenavWrapperTest { + + // Use the global Component class to create a new instance of the Sidenav component. + // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. + + constructor( data = {} ) { + return new Component(template, data); + } + +} diff --git a/src/components/bs5/sidenavWrapper/manifest.json b/src/components/bs5/sidenavWrapper/manifest.json new file mode 100644 index 00000000..e69de29b diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs b/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs new file mode 100644 index 00000000..0561ab80 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs @@ -0,0 +1,4 @@ + +
    + {{> @partial-block }} +
    diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js b/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js new file mode 100644 index 00000000..64206fc7 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js @@ -0,0 +1,68 @@ +// ComponentExample.stories.js +import { SidenavWrapperTest } from "./SidenavWrapper.test.js"; +import defaultdata from "./../sidenav/sidenav.data.json"; +import init from "./../../../js/handlebars.init"; +import Handlebars from "handlebars"; +export default { + tags: ["autodocs"], + title: "!Layout/Components/Side Navigation Wrapper", + render: (args) => { + init(Handlebars); + return new SidenavWrapperTest(args).html; + }, + + argTypes: { + }, + + parameters: { + docs: { + controls: { + exclude: ["navlist", "navtitlelink"], + }, + }, + }, +}; + +/** + * Default side navigation + * + */ +export const Default = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
    +
    + + ${Story()} +
    +
    + `; + }, + ], +}; + + +/** + * Dark side navigation + * + */ +export const Dark = { + args: defaultdata, + decorators: [ + (Story) => { + return ` +
    +
    +
    +
    + ${Story()} +
    +
    +
    +
    + `; + }, + ], +}; diff --git a/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs b/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs new file mode 100644 index 00000000..22a7f614 --- /dev/null +++ b/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs @@ -0,0 +1,15 @@ + +
    +
    +

    pre sidenaveWrapper prefix

    +
    +
    +{{#>sidenavWrapper}} + {{> sidenav }} +

    inner sidenavWrapper data

    +{{/sidenavWrapper}} +
    +

    post sidenaveWrapper suffix

    +
    +
    +
    \ No newline at end of file diff --git a/src/components/bs5/textbox/textInput.scss b/src/components/bs5/textbox/textInput.scss index f3f718b8..7338296d 100644 --- a/src/components/bs5/textbox/textInput.scss +++ b/src/components/bs5/textbox/textInput.scss @@ -40,7 +40,7 @@ } .qld-text-input-label { - color: var(--#{$prefix}color-default-color-light-text-lighter); + color: var(--#{$prefix}text-grey); display: block; font-weight: 600; line-height: 1.5; diff --git a/src/components/bs5/typography/typography.scss b/src/components/bs5/typography/typography.scss index bb3dcd03..308138bd 100644 --- a/src/components/bs5/typography/typography.scss +++ b/src/components/bs5/typography/typography.scss @@ -9,21 +9,33 @@ h1, line-height: 1.3; margin-top: 0; margin-bottom: 1.5rem; + font-size: 2rem; + + @include media-breakpoint-up(lg) { + font-size: 2.5rem; + } + } h2, .h2 { line-height: 1.5; margin-bottom: 1.5rem; + font-size: 1.75rem; &:not(:first-child) { margin-top: 3rem; } + + @include media-breakpoint-up(lg) { + font-size: 2rem; + } } h3, .h3 { line-height: 1.5; margin-bottom: 1.5rem; + font-size: 1.5rem; &:not(:first-child) { margin-top: 2.25rem; } @@ -34,6 +46,7 @@ h4, line-height: 1; margin-bottom: 1.5rem; margin-top: 2rem; + font-size: 1.25rem; } h5, @@ -41,6 +54,7 @@ h5, line-height: 1; margin-bottom: 1.5rem; margin-top: 1.5rem; + font-size: 1rem; } h6, @@ -48,36 +62,5 @@ h6, line-height: 1; margin-bottom: 1.5rem; margin-top: 1.5rem; -} - /* large and x-large sizes */ -@media (min-width: 992px) { - h1, - .h1 { - font-size: 40px; - } - h2, - .h2 { - font-size: 32px; - } - - h3, - .h3 { - font-size: 24px; - } -} -/* small and medium sizes */ -@media (max-width: 991.99px) { - h1, - .h1 { - font-size: 32px; - } - h2, - .h2 { - font-size: 28px; - } - - h3, - .h3 { - font-size: 24px; - } + font-size: 0.87rem; } \ No newline at end of file diff --git a/src/components/bs5/video/video.hbs b/src/components/bs5/video/video.hbs index 9c5b1ea0..a9f58220 100644 --- a/src/components/bs5/video/video.hbs +++ b/src/components/bs5/video/video.hbs @@ -45,6 +45,8 @@ {{! Render the transcript content in an accordion template }} - {{{ transcriptAccordion }}} + {{#if transcriptContent}} + {{{ transcriptAccordion }}} + {{/if}} diff --git a/src/js/handlebars.helpers.js b/src/js/handlebars.helpers.js index 0e1453f4..b4f5cb83 100644 --- a/src/js/handlebars.helpers.js +++ b/src/js/handlebars.helpers.js @@ -1,22 +1,20 @@ -/* global Handlebars */ - /** * Registers Handlebars Helpers - * @param {module} Handlebars Templating engine + * @param {Handlebars} handlebars Templating engine * @returns {void} Result of the helper operation */ -export default function handlebarsHelpers(Handlebars) { - // Contains - - Handlebars.registerHelper("contains", function (needle, haystack, options) { - needle = Handlebars.escapeExpression(needle); - haystack = Handlebars.escapeExpression(haystack); +export default function handlebarsHelpers(handlebars) { + // contains - if first object is in collection (second object) to return true + handlebars.registerHelper("contains", function (needle, haystack, options) { + needle = handlebars.escapeExpression(needle); + haystack = handlebars.escapeExpression(haystack); return haystack.indexOf(needle) > -1 ? options.fn(this) : options.inverse(this); }); - // ifCond - checks conditions - Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) { + // ifCond - checks conditions + handlebars.registerHelper("ifCond", function (v1, operator, v2, options) { switch (operator) { case "==": return v1 == v2 ? options.fn(this) : options.inverse(this); @@ -48,16 +46,47 @@ export default function handlebarsHelpers(Handlebars) { return options.inverse(this); } }); - // Checks is expected type - Handlebars.registerHelper('isType', function (value, expected, options) { + // isType - Checks is expected type + handlebars.registerHelper('isType', function (value, expected, options) { if (value === expected) { return options.fn(this); // Render the block if condition is true } else { return options.inverse(this); // Render the else block if present } }); -} + // ifAny - {{{#ifAny variable1 variable2 variable3 variable4 etc}}, if any set then return true + handlebars.registerHelper('ifAny', function (...args) { + const options = args.pop(); // The last argument is the options object + return args.some(arg => !!arg) ? options.fn(this) : options.inverse(this); + }); + // formatDate - Format Date, for footer meta data i.e {{formatDate '2023-06-23'}} + handlebars.registerHelper('formatDate', function(dateString, defaultDate) { + // Use the dateString if provided, otherwise use the defaultDate, otherwise error + let date; + if (dateString) { + date = new Date(dateString); + } + if (isNaN(date) && defaultDate) { + date = new Date(defaultDate); + } -if(typeof(Handlebars) !== 'undefined') { - handlebarsHelpers(Handlebars); + // Check if the date is valid + if (isNaN(date)) { + return 'Invalid Date'; + } + + var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; + var day = date.getDate(); + var month = monthNames[date.getMonth()]; + var year = date.getFullYear(); + return `${day} ${month} ${year}`; + }); + + // formatDateOrToday - Format Date if passed or today i.e. {{formatDateOrToday '2023-06-23'}} or {{formatDateOrToday}} + handlebars.registerHelper('formatDateOrToday', function(dateString) { + // Use the current date if dateString is missing or invalid + const dateToFormat = dateString || new Date().toISOString(); + // Call the formatDate helper with the determined date and format + return handlebars.helpers.formatDate(dateToFormat); + }); } diff --git a/src/js/handlebars.init.js b/src/js/handlebars.init.js index 365dec6a..6c6c0a2d 100644 --- a/src/js/handlebars.init.js +++ b/src/js/handlebars.init.js @@ -1,6 +1,34 @@ import handlebarsHelpers from "./handlebars.helpers.js"; +import handlebarsPartials from "./handlebars.partials.js"; import Handlebars from "handlebars"; -export * from "./handlebars.helpers.js"; -export const init = () => handlebarsHelpers(Handlebars); +/** + * init function to load all HandleBar partials and helpers + * + * @param {Handlebars} handlebars + */ +let isHandlebarsHelpersAndPartialsRegistered = false; + +export default function init(handlebars = Handlebars) { + if (typeof(handlebars) === 'undefined') { + if(typeof(Handlebars) !== 'undefined') { + handlebars = Handlebars + } + } + + if(typeof(handlebars) !== 'undefined') { + if (!isHandlebarsHelpersAndPartialsRegistered) { + isHandlebarsHelpersAndPartialsRegistered = true; + } else { + console.log("HandleBars Helpers And Partials already loaded, loading again") + } + handlebarsHelpers(handlebars); + + handlebarsPartials(handlebars); + } else { + console.log("Handlebars not found, init failed"); + } +} + +init(); diff --git a/src/js/handlebars.partials.js b/src/js/handlebars.partials.js new file mode 100644 index 00000000..38d0dd4f --- /dev/null +++ b/src/js/handlebars.partials.js @@ -0,0 +1,92 @@ +/** THIS IS A GENERATED FILE **/ + +import accordion from "../components/bs5/accordion/accordion.hbs?raw"; +import banner from "../components/bs5/banner/banner.hbs?raw"; +import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw"; +import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw"; +import breadcrumbsWrapper from "../components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs?raw"; +import button from "../components/bs5/button/button.hbs?raw"; +import callout from "../components/bs5/callout/callout.hbs?raw"; +import card from "../components/bs5/card/card.hbs?raw"; +import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw"; +import contentFooterWrapper from "../components/bs5/contentFooterWrapper/contentFooterWrapper.hbs?raw"; +import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?raw"; +import correctincorrect from "../components/bs5/correctincorrect/correctincorrect.hbs?raw"; +import dateinput from "../components/bs5/dateinput/dateinput.hbs?raw"; +import footer from "../components/bs5/footer/footer.hbs?raw"; +import footerForgov from "../components/bs5/footer/footerForgov.hbs?raw"; +import formcheck from "../components/bs5/formcheck/formcheck.hbs?raw"; +import fullPage from "../components/bs5/fullPageWrapper/fullPage.hbs?raw"; +import globalAlert from "../components/bs5/globalAlert/globalAlert.hbs?raw"; +import head from "../components/bs5/head/head.hbs?raw"; +import header from "../components/bs5/header/header.hbs?raw"; +import inpageAlert from "../components/bs5/inpageAlert/inpageAlert.hbs?raw"; +import inpagenav from "../components/bs5/inpagenav/inpagenav.hbs?raw"; +import mainContainerWrapper from "../components/bs5/mainContainerWrapper/mainContainerWrapper.hbs?raw"; +import metaDcTerms from "../components/bs5/metaDcTerms/metaDcTerms.hbs?raw"; +import metaOpenGraph from "../components/bs5/metaOpenGraph/metaOpenGraph.hbs?raw"; +import modal from "../components/bs5/modal/modal.hbs?raw"; +import navbar from "../components/bs5/navbar/navbar.hbs?raw"; +import pagination from "../components/bs5/pagination/pagination.hbs?raw"; +import quickexit from "../components/bs5/quickexit/quickexit.hbs?raw"; +import searchInput from "../components/bs5/searchInput/searchInput.hbs?raw"; +import select from "../components/bs5/select/select.hbs?raw"; +import sidenav from "../components/bs5/sidenav/sidenav.hbs?raw"; +import sidenavWrapper from "../components/bs5/sidenavWrapper/sidenavWrapper.hbs?raw"; +import spinner from "../components/bs5/spinner/spinner.hbs?raw"; +import table from "../components/bs5/table/table.hbs?raw"; +import tag from "../components/bs5/tag/tag.hbs?raw"; +import textarea from "../components/bs5/textarea/textarea.hbs?raw"; +import textbox from "../components/bs5/textbox/textbox.hbs?raw"; +import typography from "../components/bs5/typography/typography.hbs?raw"; +import video from "../components/bs5/video/video.hbs?raw"; + + +/** + * Registers Handlebars Partials + * @param {Handlebars} handlebars Templating engine + * @returns {void} Result of the helper operation + */ +export default function handlebarsPartials(handlebars) { + handlebars.registerPartial("accordion", accordion); + handlebars.registerPartial("banner", banner); + handlebars.registerPartial("blockquote", blockquote); + handlebars.registerPartial("breadcrumbs", breadcrumbs); + handlebars.registerPartial("breadcrumbsWrapper", breadcrumbsWrapper); + handlebars.registerPartial("button", button); + handlebars.registerPartial("callout", callout); + handlebars.registerPartial("card", card); + handlebars.registerPartial("contentFooter", contentFooter); + handlebars.registerPartial("contentFooterWrapper", contentFooterWrapper); + handlebars.registerPartial("contentWrapper", contentWrapper); + handlebars.registerPartial("correctincorrect", correctincorrect); + handlebars.registerPartial("dateinput", dateinput); + handlebars.registerPartial("footer", footer); + handlebars.registerPartial("footerForgov", footerForgov); + handlebars.registerPartial("formcheck", formcheck); + handlebars.registerPartial("fullPage", fullPage); + handlebars.registerPartial("globalAlert", globalAlert); + handlebars.registerPartial("head", head); + handlebars.registerPartial("header", header); + handlebars.registerPartial("inpageAlert", inpageAlert); + handlebars.registerPartial("inpagenav", inpagenav); + handlebars.registerPartial("mainContainerWrapper", mainContainerWrapper); + handlebars.registerPartial("metaDcTerms", metaDcTerms); + handlebars.registerPartial("metaOpenGraph", metaOpenGraph); + handlebars.registerPartial("modal", modal); + handlebars.registerPartial("navbar", navbar); + handlebars.registerPartial("pagination", pagination); + handlebars.registerPartial("quickexit", quickexit); + handlebars.registerPartial("searchInput", searchInput); + handlebars.registerPartial("select", select); + handlebars.registerPartial("sidenav", sidenav); + handlebars.registerPartial("sidenavWrapper", sidenavWrapper); + handlebars.registerPartial("spinner", spinner); + handlebars.registerPartial("table", table); + handlebars.registerPartial("tag", tag); + handlebars.registerPartial("textarea", textarea); + handlebars.registerPartial("textbox", textbox); + handlebars.registerPartial("typography", typography); + handlebars.registerPartial("video", video); + +} diff --git a/src/main.js b/src/main.js index 7547c1e8..debfdf78 100644 --- a/src/main.js +++ b/src/main.js @@ -135,4 +135,4 @@ window.addEventListener("DOMContentLoaded", () => { transcript.addEventListener("click", videoTranscriptTitle); }); })(); -}); \ No newline at end of file +}); diff --git a/src/main.scss b/src/main.scss index 0300d437..631087d1 100644 --- a/src/main.scss +++ b/src/main.scss @@ -28,9 +28,7 @@ $enable-dark-mode: true; // 2. QLD Design System variables (Bootstrap overrides) @import "./scss/qld-variables"; - // @import "./scss/qld-variables-dark"; //future state -@import "./scss/qld-type"; // 3. Include remainder of bootstrap // 3.1 Required @@ -78,8 +76,10 @@ $enable-dark-mode: true; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "~bootstrap/scss/utilities/api"; +//8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency. +@import "./scss/qld-type"; -// 8. QLD Design System components (bootsrap overrides and custom). Please maintain naming consistency +// 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency. @import "./components/bs5/accordion/accordion.scss"; @import "./components/bs5/banner/banner.scss"; @import "./components/bs5/blockquote/blockquote.scss"; diff --git a/src/scss/qld-print.scss b/src/scss/qld-print.scss index c9393c2d..7cba2edf 100644 --- a/src/scss/qld-print.scss +++ b/src/scss/qld-print.scss @@ -208,6 +208,11 @@ .breadcrumb li:before, .breadcrumb a:before { display: none !important; } + // displaying full breadcrumbs + .breadcrumb .breadcrumb-item.breadcrumb-toggle { + display: none!important; + } + /* A few simple lines */ #qg-site-header { @@ -264,7 +269,7 @@ } /* Hide elements not needed for printing */ - .navbar, footer, .sidebar { + .navbar, footer, .sidebar, footer.qld-footer.dark { display: none; } @@ -324,14 +329,21 @@ .global-alert { display: none; } + a.btn:after { display: block; content:" (" attr(href) ")"; } + a.stretched-link:after { + content:" (" attr(href) ")"; + font-size: 13px; + line-height: 1; + position: relative; + } /* Custom qld- styles */ - .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed { - display: none; + .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed, .qld__header__pre-header { + display: none !important; } .qld__header__brand-image.qld__header__brand-image_subtype, .qld__header__brand-image { display: block !important; @@ -340,7 +352,7 @@ .qld__header__brand a:after { display: none; } - + /* adding class to print data-href from breadcrumb link */ .print-current-url { display: block; @@ -350,6 +362,12 @@ } + /* Print colors to show background elements */ + + .alert, .card-img { + print-color-adjust: exact; + } + /*print styles for forms*/ @media only print { form abbr[title*=required]:after { diff --git a/src/scss/qld-type.scss b/src/scss/qld-type.scss index 2174fa8d..61ef25ca 100644 --- a/src/scss/qld-type.scss +++ b/src/scss/qld-type.scss @@ -41,6 +41,7 @@ $h6-font-size: $font-size-base * 0.875; $headings-font-weight: 600; $headings-line-height: 2; $headings-color: $qld-text-headings; +$qld-heading-color: $core-default-color-brand-primary-light-green; $link-color: $qld-brand-primary; $link-hover-color: $qld-brand-primary; @@ -94,6 +95,12 @@ body { } .qld-content-body { + + p { + margin-top: 1.5rem; + margin-bottom: 0; + } + ul, ol, p { line-height: 1.75; } @@ -103,32 +110,34 @@ body { } } +// Apply correct bold font-weight +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, strong, b, th { - font-weight: $font-weight-bold !important; // Overrides default BS styles + font-weight: $font-weight-bold; } // Light, Light alt -a { - font-weight: var(--qld-link-font-weight); + +h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-light-text-heading); } a, a.nav-link { - text-decoration: underline; - text-underline-offset: var(--qld-link-underline-offset) !important; - text-decoration-thickness: var(--qld-link-underline-thickness) !important; + text-underline-offset: var(--qld-link-underline-offset); + text-decoration-thickness: var(--qld-link-underline-thickness); &:hover { - text-decoration-thickness: var(--qld-link-underline-thickness-hover) !important; + text-decoration-thickness: var(--qld-link-underline-thickness-hover); } &:visited { - color: #551A8B; - text-decoration-color: #551A8B; + color: var(--#{$prefix}color-default-color-light-link-visited); + text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited); &:hover { - text-decoration-thickness: 2px; - text-decoration-color: #551A8B; + text-decoration-thickness: var(--qld-link-underline-thickness-hover); + text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited-hover); } } @@ -137,6 +146,7 @@ a.nav-link { outline-offset: 2px; } } + caption { font-size: 14px; font-weight: 400; @@ -146,31 +156,29 @@ caption { // Dark, dark alt .dark, .dark-alt { - body & { - color: var(--qld-body-color); - } - h1, - h2, - h3, - h4, - h5, - h6 { - color: var(--qld-headings-color); - } + h1, h2, h3, h4, h5, h6 { + color: var(--#{$prefix}color-default-color-dark-text-heading); + } + + + body & { + color: var(--qld-body-color); + } a, a.nav-link { - text-decoration-color: #B5CCE2; - &:visited { - color: var(--qld-link-visited-dark); - text-decoration-color: var(--qld-link-visited-dark); - &:hover { - text-decoration-color: #FFFFFF; - } - } + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default); + + &:visited { + color: var(--#{$prefix}color-default-color-dark-link-visited); + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-visited); + + &:hover { + text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default-hover); + } + } } } - caption { font-size: 14px; font-weight: 400; diff --git a/src/stories/integration/MainIntegration.js b/src/stories/integration/MainIntegration.js new file mode 100644 index 00000000..b2b1798b --- /dev/null +++ b/src/stories/integration/MainIntegration.js @@ -0,0 +1,29 @@ +/* global, __dirname */ + +import init from "./../../js/handlebars.init"; +import Handlebars from 'handlebars'; + +export class MainIntegration { + + constructor(data, args = {}) { + init(Handlebars); + console.log("contracutor"); + this.data = data; + this.args = args; + + this.template = data.template; + // Compile the template + this.compiled = Handlebars.compile(this.template)(this.data); + + // For debugging purposes + console.log('Template:', this.template); + console.log('Data:', this.data); + //console.log('Compiled:', this.compiled); + + return { + template: this.template, + data: this.data, + html: this.compiled, + }; + } +} diff --git a/src/stories/integration/MainIntegration.mdx b/src/stories/integration/MainIntegration.mdx new file mode 100644 index 00000000..648346db --- /dev/null +++ b/src/stories/integration/MainIntegration.mdx @@ -0,0 +1,10 @@ +import { Canvas, Meta, Story } from "@storybook/blocks" +import * as Integration from "./integration.stories" + + + +# Integration details + + + + diff --git a/src/stories/integration/breadcrumb.data.json b/src/stories/integration/breadcrumb.data.json new file mode 100644 index 00000000..055f67c9 --- /dev/null +++ b/src/stories/integration/breadcrumb.data.json @@ -0,0 +1,28 @@ +{ + "breadcrumbs": [ + { + "link": "#", + "linktext": "For government" + }, + { + "link": "#", + "linktext": "Information and communication technology" + }, + { + "link": "#", + "linktext": "Communication and publishing" + }, + { + "link": "#", + "linktext": "Website and digital publishing" + }, + { + "link": "#", + "linktext": "Website standards, guidelines and templates" + }, + { + "link": "#", + "linktext": "Single Website Experience" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/content.data.json b/src/stories/integration/content.data.json new file mode 100644 index 00000000..077c9fae --- /dev/null +++ b/src/stories/integration/content.data.json @@ -0,0 +1,3 @@ +{ + "input": "data1" +} \ No newline at end of file diff --git a/src/stories/integration/contentFooter.data.json b/src/stories/integration/contentFooter.data.json new file mode 100644 index 00000000..59d9805f --- /dev/null +++ b/src/stories/integration/contentFooter.data.json @@ -0,0 +1,3 @@ +{ + "lastUpdated": "1987/12/10" +} diff --git a/src/stories/integration/footer.data.json b/src/stories/integration/footer.data.json new file mode 100644 index 00000000..0680f0c9 --- /dev/null +++ b/src/stories/integration/footer.data.json @@ -0,0 +1,154 @@ +{ + "sitename": "Site name, Namestyle or Name Identifier", + "contactHasContactList": true, + "footerHasCrest": true, + "footerHasStateOfQld": true, + "feedbackFormEnabled": false, + "followlinksEnabled": true, + "copyrightHasYearFrom": false, + "copyrightOrganisationName": "Organisation", + "contact": { + "hasBorderColumn": false, + "title": "Contact us", + "content": "

    Get in touch for enquiries, feedback, complaints and compliments.

    ", + "list": [ + { + "icon": "icon-phone", + "label": "Phone: 13 QGOV (13 74 68)" + }, + { + "icon": "icon-email", + "label": "Email: email@qld.gov.au" + } + ], + "buttonLabel": "Contact us", + "buttonLink": "" + }, + "lookup": { + "link": { + "URL": "https://www.qld.gov.au", + "text": "Queensland Government" + } + }, + "acknowledgements": [ + { + "title": "", + "content": "

    We pay our respects to the Aboriginal and Torres Strait Islander ancestors of this land, their spirits and their legacy. The foundations laid by these ancestors—our First Nations peoples—give strength, inspiration and courage to current and future generations towards creating a better Queensland.

    " + } + ], + "copyright": { + "hasBorderColumn": true, + "content": "© The State of Queensland", + "yearFrom": "1995", + "currentYear": "2024" + }, + "footerlinks": { + "hasBorderColumn": false, + "title": "", + "list": [ + { + "title": "Help", + "link": "#" + }, + { + "title": "Copyright", + "link": "#" + }, + { + "title": "Disclaimer", + "link": "#" + }, + { + "title": "Privacy", + "link": "#" + }, + { + "title": "Right to information", + "link": "#" + }, + { + "title": "Accessibility", + "link": "#" + }, + { + "title": "Jobs in Queensland Government", + "link": "https://smartjobs.qld.gov.au", + "target": "_blank" + }, + { + "title": "Other languages", + "link": "#" + } + ] + }, + "feedbackForm": { + "hasBorderColumn": true, + "title": "Website feedback", + "content": "Help us improve the content on our website or tell us what is working well.", + "btnTitle": "Leave your feedback", + "formAttr": [ + { + "key": "data-formio", + "value": "" + }, + { + "key": "data-formio-project-name", + "value": "dev-oldkihhcwbdtwye" + }, + { + "key": "data-formio-form-name", + "value": "footerfeedbackcontactus" + }, + { + "key": "data-formio-env-url", + "value": "api.forms.platforms.qld.gov.au" + }, + { + "key": "data-formio-createForm-options", + "value": "formioCreateFormOptions" + }, + { + "key": "data-formio-createForm-controller", + "value": "formioCreateFormController" + } + ], + "formioResource": "https://static.qgov.net.au/formio-qld/v2/v2.x.x-latest/formio-script.min.js" + }, + "followlinks": { + "hasBorderColumn": true, + "title": "Follow us", + "list": [ + { + "name": "Facebook", + "enabled": true, + "link": "#", + "target": "_blank", + "icon": "" + }, + { + "name": "LinkedIn", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "X (Twitter)", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "Youtube", + "enabled": true, + "link": "#", + "icon": "" + }, + { + "name": "Instagram", + "enabled": true, + "link": "#", + "icon": "" + } + ] + } +} \ No newline at end of file diff --git a/src/stories/integration/globalAlert.data.json b/src/stories/integration/globalAlert.data.json new file mode 100644 index 00000000..2a1eaf7f --- /dev/null +++ b/src/stories/integration/globalAlert.data.json @@ -0,0 +1,9 @@ +{ + "alertItems": [ + { + "variant": "global-alert-critical", + "content": "Testing: This website is currently undergoing testing", + "action": "Read more" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/header.data.json b/src/stories/integration/header.data.json new file mode 100644 index 00000000..0eb7f6a2 --- /dev/null +++ b/src/stories/integration/header.data.json @@ -0,0 +1,173 @@ +{ + "icon-root": "assets/img/svg-icons.svg", + "icons": { + "menu-icon": "qld__icon__mobile-menu", + "search-icon": "qld__icon__search", + "close-icon": "qld__icon__close", + "chevron_down": "qld__icon__chevron-down" + }, + "sitePreHeader": { + "url": { + "value": "https://qld.gov.au" + }, + "text": { + "value": "www.qld.gov.au" + }, + "CTA": [ + { + "id": "CTAone", + "url": { + "value": "#" + }, + "text": { + "value": "For Queenslanders" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "list", + "view_more": true, + "label": "View all", + "url": "https://www.qld.gov.au/queenslanders", + "target": "_blank", + "dropdown_config": { + "groups": [ + { + "action": "_blank", + "url": "#", + "label": "Transport and motoring" + }, + { + "action": "_blank", + "url": "#", + "label": "Employment and jobs" + }, + { + "action": "_blank", + "url": "#", + "label": "Education and training" + }, + { + "action": "_blank", + "url": "#", + "label": "Queensland and its government" + }, + { + "action": "_blank", + "url": "#", + "label": "Health and wellbeing" + }, + { + "action": "_blank", + "url": "#", + "label": "Community support" + } + ] + } + } + }, + { + "id": "CTAtwo", + "url": { + "value": "#" + }, + "text": { + "value": "Business and Industry" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "list", + "view_more": true, + "label": "View all", + "url": "https://www.qld.gov.au/queenslanders", + "target": "_blank", + "dropdown_config": { + "groups": [ + { + "action": "_blank", + "url": "#", + "label": "Transport and motoring" + }, + { + "action": "_blank", + "url": "#", + "label": "Employment and jobs" + }, + { + "action": "_blank", + "url": "#", + "label": "Education and training" + }, + { + "action": "_blank", + "url": "#", + "label": "Queensland and its government" + }, + { + "action": "_blank", + "url": "#", + "label": "Health and wellbeing" + }, + { + "action": "_blank", + "url": "#", + "label": "Community support" + } + ] + } + } + }, + { + "id": "CTAthree", + "url": { + "value": "#" + }, + "text": { + "value": "Login" + }, + "dropdown_enabled": true, + "dropdown_options": { + "dropdown_type": "form", + "dropdown_config": { + "content": "
    " + } + } + } + ] + }, + "siteHeader": { + "config": { + "masterbrand_enabled": true, + "subbrand_enabled": false, + "cobrand_enabled": false, + "endorsed_enabled": false, + "standalone_enabled": false + }, + "url": { + "value": "https://qld.gov.au" + }, + "secondaryType": { + "logo": { + "value": "" + }, + "siteTitle": { + "value": "Queensland Government Design System" + }, + "subline": { + "value": "QGDS" + } + } + }, + "siteSearchAsset": { + "value": "#", + "placeholder": "", + "label": "", + "formAction": { + "url": "https://www.forgov.qld.gov.au/search" + }, + "options": { + "borderStyle": { + "full": true + } + } + } +} \ No newline at end of file diff --git a/src/stories/integration/inpagenav.data.json b/src/stories/integration/inpagenav.data.json new file mode 100644 index 00000000..a7c429e9 --- /dev/null +++ b/src/stories/integration/inpagenav.data.json @@ -0,0 +1,26 @@ +{ + "navtitle": "On this page", + "variantClass": "", + "navitems": [ + { + "linktext": "Section heading", + "linkid": "#section-heading" + }, + { + "linktext": "Content heading", + "linkid": "#content-heading" + }, + { + "linktext": "Pre-registration inspection", + "linkid": "#inspection" + }, + { + "linktext": "Fees and charges", + "linkid": "#fees-and-charges" + }, + { + "linktext": "Related services", + "linkid": "#related-services" + } + ] +} diff --git a/src/stories/integration/integration.stories.js b/src/stories/integration/integration.stories.js new file mode 100644 index 00000000..35a2fa2d --- /dev/null +++ b/src/stories/integration/integration.stories.js @@ -0,0 +1,145 @@ + +import { MainIntegration } from './MainIntegration'; +//Data +import headerData from './header.data.json'; +import navbarData from './navigation.data.json'; +import breadcrumbsData from './breadcrumb.data.json'; +import searchData from './search.data.json'; +import globalAlertData from './globalAlert.data.json'; +import inpagenavData from './inpagenav.data.json'; +import sidenavData from './sidenav.data.json'; +import contentFooterData from './contentFooter.data.json'; +import footerData from './footer.data.json'; +//Content Data +import contentData from './content.data.json'; +import template from "./main.hbs?raw"; +import metaOpenGraphData from "../../components/bs5/metaOpenGraph/MetaOpenGraph.data.json"; +import { dcTerms } from '../../components/bs5/metaDcTerms/MetaDcTerms.data.json'; + +/** sample data **/ +const defaultData = { + template: template, // Adjust template path relative to this file + cdn: ".", //for storybook it's ., for normal usage "PROD" + title: "title goes here", + description: "my description", + uri: "http://localhost/uri/here", + dcTerms: dcTerms, + seo: metaOpenGraphData.seo, + og: metaOpenGraphData.og, + header: headerData, + search: searchData, + navbar: navbarData, + breadcrumbs: breadcrumbsData, + globalAlert: globalAlertData, + sidenav: sidenavData, + inpagenav: inpagenavData, + content: contentData, + contentFooter: contentFooterData, + footer: footerData, +}; + +export default { + title: 'Integration/Main Integration Template', + render: (args) => { + return new MainIntegration(args).html; + }, + args: defaultData, + props: { + data: { ...defaultData }, + }, + parameters: { + layout: 'fullscreen', + }, +}; + + +/** + * Default Integration story + */ +export const Default = {}; + + +// /** +// * Integration in 'Light' colour theme. +// */ +// export const Light = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Light', +// values: [ +// {name: 'Light', value: 'var(--qld-light-background)'}, +// ], +// }, +// }, +// }; +// +// +// /** +// * Integration in 'Alternative' colour theme. +// */ +// export const Alternative = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Alternative', +// values: [ +// {name: 'Alternative', value: 'var(--qld-light-grey-background)'}, +// ], +// }, +// }, +// +// }; +// +// +// /** +// * Accordion in 'Dark' colour theme. +// */ +// export const Dark = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Dark', +// values: [ +// {name: 'Dark', value: 'var(--qld-dark-background)'}, +// ], +// }, +// }, +// +// }; +// +// /** +// * Accordion in 'Dark alternative' colour theme. +// */ +// export const DarkAlternative = { +// args: { +// ...header, +// ...navigation, +// ...footer, +// }, +// parameters: { +// backgrounds: { +// default: 'Dark Alternative', +// values: [ +// {name: 'Dark Alternative', value: 'var(--qld-dark-alt-background)'}, +// ], +// }, +// }, +// +// }; + + + + diff --git a/src/stories/integration/main.hbs b/src/stories/integration/main.hbs new file mode 100644 index 00000000..3a5b199f --- /dev/null +++ b/src/stories/integration/main.hbs @@ -0,0 +1,13 @@ +{{#>fullPage}} + my main content goes here + +{{> inpagenav inpagenav}} +

    this is something, accordion next

    + {{> accordion groupid="accordion-group-1" toggleAll=true accordionItems=[{id="One", title="Accordion item #1", expanded=true, content="

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas.

    Aenean sed pretium mauris. Quisque euismod in nisl et consequat.

    " },{id="Two", title="Accordion item #2", expanded=false, content="

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

    "},{id="Three", title="Accordion item #3", expanded=false, content="

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
    3. Vestibulum auctor dapibus neque.
    "}] }} +
    + {{> textbox name="firstName" placeholder="First Name"}} + {{> textbox name="lastName" placeholder="Last Name"}} + {{> select name="options" options=options}} + {{> button type="submit" text="Submit"}} +
    +{{/fullPage}} diff --git a/src/stories/integration/navigation.data.json b/src/stories/integration/navigation.data.json new file mode 100644 index 00000000..c39aa56b --- /dev/null +++ b/src/stories/integration/navigation.data.json @@ -0,0 +1,22 @@ +{ + "metadata": { + "target_url": "metadata-index.html", + "options": { + "showHomeTitleSmallDevices": true, + "icon-root": "assets/img/svg-icons.svg", + "home-active": true + } + }, + "navigation": [ + { + "title": "Link 1", + "icon": "", + "target_url": "index.html" + }, + { + "title": "Link 2", + "icon": "", + "target_url": "index.html" + } + ] +} \ No newline at end of file diff --git a/src/stories/integration/search.data.json b/src/stories/integration/search.data.json new file mode 100644 index 00000000..85654c20 --- /dev/null +++ b/src/stories/integration/search.data.json @@ -0,0 +1,20 @@ +{ + "customClass": "", + "variantClass": "", + "placeholder": "Search website", + "inputID": "search", + "inputName": "query", + "buttonID": "search-button", + "buttonType": "submit", + "buttonLabel": "Search", + "ariaLabel": "Search website", + "suggestions": true, + "tags": { + "collection": "qgov~sp-search", + "profile": "qld", + "numranks": "10", + "tiers": "off", + "suggestions": "https://discover.search.qld.gov.au/s/suggest.json", + "results-url": "https://discover.search.qld.gov.au/s/search.json" + } +} \ No newline at end of file diff --git a/src/stories/integration/sidenav.data.json b/src/stories/integration/sidenav.data.json new file mode 100644 index 00000000..2b7b75de --- /dev/null +++ b/src/stories/integration/sidenav.data.json @@ -0,0 +1,88 @@ +{ + "navtitle": "In this section", + "navtitlelink": "#optionallink", + "navlist": [ + { + "link": "https://www.qld.gov.au/transport/registration/register/heavy", + "label": "Heavy vehicles", + "class": "", + "target": "", + "children": [ + { + "link": "#", + "class": "", + "label": "Level two item", + "children": [] + }, + { + "link": "#", + "class": "active", + "label": "Level two item", + "children": [] + }, + { + "link": "#", + "class": "", + + "label": "Level two item", + "children": [ + { + "link": "#", + "class": "", + "label": "Level three item", + "children": [] + }, + { + "link": "#", + "class": "active", + "label": "Level three item that wraps to another line", + "children": [] + } + ] + } + ] + }, + { + "link": "#", + "label": "Renew registration", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Register a motorised mobility device", + "class": "active", + "children": [] + }, + { + "link": "#", + "label": "Register a boat", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Conditional registration", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Vehicles registered overseas temporarily being used in Queensland", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Left hand drive vehicles", + "class": "", + "children": [] + }, + { + "link": "#", + "label": "Registration Help Tool—how to register a used motor vehicle or motorcycle", + "class": "", + "children": [] + } + ] +}