diff --git a/.storybook/preview.js b/.storybook/preview.js index e6784aa7..93a840e1 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,9 +1,12 @@ -import "../dist/assets/js/bootstrap.min.js"; -import "../dist/assets/js/qld.bootstrap.min.js"; -import "../dist/assets/css/qld.bootstrap.css"; +import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"; +import "../src/js/qld.bootstrap.js"; +import "../src/css/main.scss"; + import {withThemeByClassName} from '@storybook/addon-themes'; import {allBackgrounds} from "./modes.js"; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import init from "../src/js/handlebars.init.js"; +import Handlebars from "handlebars"; /** @type { import('@storybook/html-vite').Preview } */ const preview = { @@ -88,6 +91,7 @@ const preview = { defaultTheme: 'None', }), (Story) => { + init(Handlebars); return ` ${Story()} diff --git a/src/components/bs5/fullPageWrapper/fullPage.stories.js b/src/components/bs5/fullPageWrapper/fullPage.stories.js index 21958328..72f92673 100644 --- a/src/components/bs5/fullPageWrapper/fullPage.stories.js +++ b/src/components/bs5/fullPageWrapper/fullPage.stories.js @@ -16,13 +16,17 @@ import footerData from "../footer/footer.data.json"; const defaultData = { cdn: ".", //for StoryBook it's ., for normal usage "PROD" title: "title goes here", + "icon-root": masterbrand_variant["icon-root"], + icons: masterbrand_variant.icons, description: "my description", uri: "http://localhost/uri/here", dcTerms: dcTerms, seo: metaOpenGraphData.seo, og: metaOpenGraphData.og, - header: masterbrand_variant, - search: searchData, + header: { + ...masterbrand_variant, + searchData: searchData + }, navbar: menu_state, breadcrumbs: breadcrumbsData.forGov, globalAlert: globalAlertData.critical, diff --git a/src/components/bs5/header/Header.js b/src/components/bs5/header/Header.js deleted file mode 100644 index 97b86ad2..00000000 --- a/src/components/bs5/header/Header.js +++ /dev/null @@ -1,12 +0,0 @@ -import Component from "../../../js/QGDSComponent.js"; -import template from "./header.hbs?raw"; - -export class Header { - // Use the global Component class to create a new instance of the Header 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/header/header.hbs b/src/components/bs5/header/header.hbs index fe7e9257..3a531b3c 100644 --- a/src/components/bs5/header/header.hbs +++ b/src/components/bs5/header/header.hbs @@ -1,898 +1,13 @@ - - \ No newline at end of file +{{#>header_wrap }} + {{#>header_preMenu sitePreHeader=sitePreHeader siteHeader=siteHeader siteSearchAsset=siteSearchAsset dropdown_enabled=dropdown_enabled dropdown_options=dropdown_options siteSearchAsset=siteSearchAsset }} + {{!put your own menu here }} + {{/header_preMenu }} + {{#>header_primary siteHeader=siteHeader }} + {{#unless searchInput }} + {{>searchInput this.searchData }} + {{else}} + {{! search is fully overriden by html }} + {{{ searchInput }}} + {{/unless}} + {{/header_primary }} +{{/header_wrap }} \ No newline at end of file diff --git a/src/components/bs5/header/header.stories.js b/src/components/bs5/header/header.stories.js index f92c9086..a722e752 100644 --- a/src/components/bs5/header/header.stories.js +++ b/src/components/bs5/header/header.stories.js @@ -1,4 +1,3 @@ -import { Header } from './Header.js'; import { Navbar } from '../navbar/Navbar.js'; import { SearchInput } from "../searchInput/SearchInput.js"; @@ -18,6 +17,8 @@ import subbrand_variant from './header.variant.subBrand.data.json'; import cobrand_variant from './header.variant.coBrand.data.json'; import endorsed_variant from './header.variant.endorsed.data.json'; import standalone_variant from './header.variant.standAlone.data.json'; +import Handlebars from "handlebars"; +import template from "./header.hbs?raw"; const sample_argtypes = { '--qld-color-default-color-light-background-default': '#ffffff', @@ -137,11 +138,11 @@ const arg_types = { '--qld-color-default-color-dark-action-secondary': { control: 'color' }, }; -const mergeArgs = (arg_types, variant, menu) => ({ - ...arg_types, - ...variant, - ...menu, -}); +const mergeArgs = (...args) => { + return args.reduce((acc, curr) => { + return { ...acc, ...curr }; + }, {}); +}; export default { @@ -149,7 +150,7 @@ export default { title: 'Core/Header', render: (args) => { return ` - ${new Header({ ...args, searchInput: new SearchInput(searchData).html }).html} + ${Handlebars.compile(template)({ ...args, searchInput: new SearchInput(searchData).html })} ${new Navbar(args).html} `; }, diff --git a/src/components/bs5/header/partials/header_preMenu.hbs b/src/components/bs5/header/partials/header_preMenu.hbs new file mode 100644 index 00000000..64f6055e --- /dev/null +++ b/src/components/bs5/header/partials/header_preMenu.hbs @@ -0,0 +1,245 @@ +
+
+ + {{sitePreHeader.text.value}} + + Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {{#if sitePreHeader.CTA}} + {{#each sitePreHeader.CTA}} + + + {{#if dropdown_enabled}} +
    + {{#isType dropdown_options.dropdown_type "list"}} + {{#if dropdown_options.dropdown_config}} + {{#each dropdown_options.dropdown_config.groups}} +
  • + + {{label}} + + + + +
    • + {{/each}} + {{#if dropdown_options.view_more}} +
  • + + {{dropdown_options.label}} + +
    • + {{/if}} + {{/if}} + {{/isType}} + {{#isType dropdown_options.dropdown_type "form"}} + {{#if dropdown_options.dropdown_config.content}} + {{{dropdown_options.dropdown_config.content}}} + {{/if}} + {{/isType}} +
+ {{/if}} + + {{/each}} + {{/if}} + {{> @partial-block }} +
+
+ {{#if siteSearchAsset.value}} + + {{/if}} + +
+
+
\ No newline at end of file diff --git a/src/components/bs5/header/partials/header_primary.hbs b/src/components/bs5/header/partials/header_primary.hbs new file mode 100644 index 00000000..ded7b0dd --- /dev/null +++ b/src/components/bs5/header/partials/header_primary.hbs @@ -0,0 +1,644 @@ +
+
+ {{#if siteHeader.config.masterbrand_enabled}} +
+ +
+ {{#if siteHeader.logo.value}} + + Queensland Government + + {{else}} + + Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{/if}} +
+ +
+ {{/if}} + {{#if siteHeader.config.subbrand_enabled}} +
+ +
+ {{#if siteHeader.logo.value}} + + Queensland Government + + {{else}} + + Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{/if}} +
+ {{#if siteHeader.secondaryType}} +
+ + {{siteHeader.secondaryType.siteTitle.value}} + + {{#if siteHeader.secondaryType.subline.value}} + + {{siteHeader.secondaryType.subline.value}} + + {{/if}} +
+ {{/if}} + +
+ {{/if}} + {{#if siteHeader.config.cobrand_enabled}} +
+ +
+ {{#if siteHeader.logo.value}} + + Queensland Government + + {{else}} + + Queensland Government + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{/if}} +
+ {{#if siteHeader.secondaryType}} +
+ + {{siteHeader.secondaryType.siteTitle.value}} + + {{#if siteHeader.secondaryType.subline.value}} + + {{siteHeader.secondaryType.subline.value}} + + {{/if}} +
+ {{/if}} + +
+ {{/if}} + {{#if siteHeader.config.endorsed_enabled}} +
+ +
+ {{#if siteHeader.secondaryType.logo.value}} +
+ {{siteHeader.secondaryType.siteTitle.value}} +
+ {{/if}} +
+ {{#if siteHeader.secondaryType.logo.value}} +
+ + {{siteHeader.secondaryType.siteTitle.value}} + + {{#if siteHeader.secondaryType.subline.value}} + + {{siteHeader.secondaryType.subline.value}} + + {{/if}} +
+ {{/if}} + +
+ {{/if}} + {{#if siteHeader.config.standalone_enabled}} +
+ +
+ {{#if siteHeader.logo.value}} + {{/if}} +
+ {{#if siteHeader.secondaryType.logo.value}} +
+ {{siteHeader.secondaryType.siteTitle.value}} +
+ {{else}} +
+ + {{siteHeader.secondaryType.siteTitle.value}} + + {{#if siteHeader.secondaryType.subline.value}} + + {{siteHeader.secondaryType.subline.value}} + + {{/if}} +
+ {{/if}} + +
+ {{/if}} + {{#if siteSearchAsset.value}} +
+ +
+ {{/if}} +
+
diff --git a/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.hbs b/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.hbs new file mode 100644 index 00000000..bd3da8a0 --- /dev/null +++ b/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.hbs @@ -0,0 +1,41 @@ + + + {{#if dropdown_enabled}} + + {{/if}} + \ No newline at end of file diff --git a/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.js b/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.js new file mode 100644 index 00000000..72e7f4e4 --- /dev/null +++ b/src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.js @@ -0,0 +1,46 @@ +/** + * @typedef {Object} DropdownOptionsConfig + * @property {Array<{url: string, action?: string, label: string}>} groups - Array of dropdown groups with URLs and optional actions. + * @property {boolean} [view_more] - Flag to indicate if 'view more' option should be rendered. + * @property {string} [url] - URL for 'view more' link. + * @property {string} [target] - Link target attribute for 'view more', usually '_blank' for new tab. + * @property {string} [label] - Label for 'view more' link. + * @property {string} [content] - HTML content for 'form' type dropdowns. + */ + +/** + * @typedef {Object} DropdownOptions + * @property {string} dropdown_type - Type of dropdown to render, e.g. 'list' or 'form'. + * @property {DropdownOptionsConfig} dropdown_config - Configuration object for the dropdown containing groups and view_more settings. + */ + +/** + * @typedef {Object} UrlObject + * @property {string} value - The URL to be used in the href attribute. + */ + +/** + * @typedef {Object} TextObject + * @property {string} value - The text to be displayed in the link. + */ + +/** + * @typedef {Object} RootIcons + * @property {string} chevron_down - Icon identifier for the chevron down symbol. + */ + +/** + * @typedef {Object} sitePreHeader_CTA_menuItem + * @property {boolean} dropdown_enabled - Flag indicating if the dropdown is enabled. + * @property {string} id - Unique identifier for the dropdown. + * @property {UrlObject} url - Object containing the URL for the link. + * @property {TextObject} text - Object containing the text for the link. + * @property {DropdownOptions} dropdown_options - The options object for configuring the dropdown. + * @property {RootIcons} icons - Object containing identifiers for SVG icons. + * @property {string} icon-root - The root path for the SVG icons. + */ + +/** + * The variables below need to be defined with appropriate values and passed to the Handlebars template header_sitePreHeader_CTA_menuItem.hbs. + * @type {header_sitePreHeader_CTA_menuItem} + */ diff --git a/src/components/bs5/header/partials/header_wrap.hbs b/src/components/bs5/header/partials/header_wrap.hbs new file mode 100644 index 00000000..9bf54e14 --- /dev/null +++ b/src/components/bs5/header/partials/header_wrap.hbs @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js index c2e6d39b..19877caa 100644 --- a/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js +++ b/src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js @@ -15,8 +15,12 @@ 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, + "icon-root": masterbrand_variant["icon-root"], + icons: masterbrand_variant.icons, + header: { + ...masterbrand_variant, + searchData: searchData + }, navbar: menu_state, breadcrumbs: breadcrumbsData.forGov, globalAlert: globalAlertData.critical, diff --git a/src/components/bs5/navbar/navBar.stories.js b/src/components/bs5/navbar/navBar.stories.js new file mode 100644 index 00000000..8cfc3437 --- /dev/null +++ b/src/components/bs5/navbar/navBar.stories.js @@ -0,0 +1,297 @@ +// Mock data +import menu_state from './navbar.variant.menuState.data.json'; +import cobrand_example from './navbar.variant.coBrand.data.json'; + +import Handlebars from "handlebars"; +import template from "./navbar.hbs?raw"; + +const sample_argtypes = { + '--qld-color-default-color-light-background-default': '#ffffff', + '--qld-color-default-color-light-background-default-shade': '#f5f5f5', + '--qld-color-default-color-light-background-light': '#eff4f9', + '--qld-color-default-color-light-background-light-shade': '#e5eef5', + '--qld-color-default-color-light-background-alt': '#f4f4f4', + '--qld-color-default-color-light-background-alt-shade': '#d6eff4', + '--qld-color-default-color-light-border-default': '#ebebeb', + '--qld-color-default-color-light-border-light': '#ccddee', + '--qld-color-default-color-light-border-alt': '#6F8690', + '--qld-color-default-color-light-action-primary': '#06658A', + '--qld-color-default-color-light-action-primary-hover': '#161616', + '--qld-color-default-color-light-action-secondary': '#009BAD', + '--qld-color-default-color-light-action-secondary-hover': '#161616', + '--qld-color-default-color-light-link-on-action': '#06658A', + '--qld-color-default-color-light-link-default': '#046994', + '--qld-color-default-color-light-link-visited': '#551A8B', + '--qld-color-default-color-light-accent-design-accent': '#FFD559', + '--qld-color-default-color-light-focus-default': '#02A2B5', + '--qld-color-default-color-light-underline-default': '#1B88B7', + '--qld-color-default-color-light-underline-default-hover': '#09549F', + '--qld-color-default-color-light-underline-visited': '#8b63b0', + '--qld-color-default-color-light-underline-visited-hover': '#551a8b', + '--qld-color-default-color-light-text-default': '#333333', + '--qld-color-default-color-light-text-lighter': '#636363', + '--qld-color-default-color-light-text-heading': '#003549', + '--qld-color-default-color-light-site-title': '#022A50', + '--qld-color-default-color-light-crest-fill': '#022A50', + '--qld-color-default-color-dark-background-default': '#046994', + '--qld-color-default-color-dark-background-default-shade': '#005C84', + '--qld-color-default-color-dark-background-alt': '#080707', + '--qld-color-default-color-dark-background-alt-shade': '#161616', + '--qld-color-default-color-dark-border-default': '#4A93B3', + '--qld-color-default-color-dark-border-alt': '#09ACFE', + '--qld-color-default-color-dark-action-primary': '#4A93B3', + '--qld-color-default-color-dark-action-primary-hover': '#FFFFFF', + '--qld-color-default-color-dark-action-secondary': '#FFD559', +}; + +const alternative_palette = { + '--qld-core-default-color-neutral-lighter': '#2b2b2b', + '--qld-color-default-color-light-background-default': '#000000', + '--qld-color-default-color-light-background-default-shade': '#000000', + '--qld-color-default-color-light-background-light': '#eff4f9', + '--qld-color-default-color-light-background-light-shade': '#e5eef5', + '--qld-color-default-color-light-background-alt': '#f4f4f4', + '--qld-color-default-color-light-background-alt-shade': '#d6eff4', + '--qld-color-default-color-light-border-default': '#ebebeb', + '--qld-color-default-color-light-border-light': '#ccddee', + '--qld-color-default-color-light-border-alt': '#6F8690', + '--qld-color-default-color-light-action-primary': '#06658A', + '--qld-color-default-color-light-action-primary-hover': '#161616', + '--qld-color-default-color-light-action-secondary': '#009BAD', + '--qld-color-default-color-light-action-secondary-hover': '#161616', + '--qld-color-default-color-light-link-on-action': '#06658A', + '--qld-color-default-color-light-link-default': '#FF0084', + '--qld-color-default-color-light-link-visited': '#551A8B', + '--qld-color-default-color-light-accent-design-accent': '#FF0084', + '--qld-color-default-color-light-focus-default': '#02A2B5', + '--qld-color-default-color-light-underline-default': '#1B88B7', + '--qld-color-default-color-light-underline-default-hover': '#2B2B2B', + '--qld-color-default-color-light-underline-visited': '#8b63b0', + '--qld-color-default-color-light-underline-visited-hover': '#551a8b', + '--qld-color-default-color-light-text-default': '#F5F5F5', + '--qld-color-default-color-light-text-lighter': '#636363', + '--qld-color-default-color-light-text-heading': '#003549', + '--qld-color-default-color-light-site-title': '#FFFFFF', + '--qld-color-default-color-light-crest-fill': '#FFFFFF', + '--qld-color-default-color-dark-background-default': '#34001b', + '--qld-color-default-color-dark-background-default-shade': '#000000', + '--qld-color-default-color-dark-background-alt': '#080707', + '--qld-color-default-color-dark-background-alt-shade': '#161616', + '--qld-color-default-color-dark-border-default': '#4A93B3', + '--qld-color-default-color-dark-border-alt': '#09ACFE', + '--qld-color-default-color-dark-action-primary': '#4A93B3', + '--qld-color-default-color-dark-action-primary-hover': '#FFFFFF', + '--qld-color-default-color-dark-action-secondary': '#FFD559', +}; + +const arg_types = { + '--qld-color-default-color-light-background-default': { control: 'color' }, + '--qld-color-default-color-light-background-default-shade': { control: 'color' }, + '--qld-color-default-color-light-background-light': { control: 'color' }, + '--qld-color-default-color-light-background-light-shade': { control: 'color' }, + '--qld-color-default-color-light-background-alt': { control: 'color' }, + '--qld-color-default-color-light-background-alt-shade': { control: 'color' }, + '--qld-color-default-color-light-border-default': { control: 'color' }, + '--qld-color-default-color-light-border-light': { control: 'color' }, + '--qld-color-default-color-light-border-alt': { control: 'color' }, + '--qld-color-default-color-light-action-primary': { control: 'color' }, + '--qld-color-default-color-light-action-primary-hover': { control: 'color' }, + '--qld-color-default-color-light-action-secondary': { control: 'color' }, + '--qld-color-default-color-light-action-secondary-hover': { control: 'color' }, + '--qld-color-default-color-light-link-on-action': { control: 'color' }, + '--qld-color-default-color-light-link-default': { control: 'color' }, + '--qld-color-default-color-light-link-visited': { control: 'color' }, + '--qld-color-default-color-light-accent-design-accent': { control: 'color' }, + '--qld-color-default-color-light-focus-default': { control: 'color' }, + '--qld-color-default-color-light-underline-default': { control: 'color' }, + '--qld-color-default-color-light-underline-default-hover': { control: 'color' }, + '--qld-color-default-color-light-underline-visited': { control: 'color' }, + '--qld-color-default-color-light-underline-visited-hover': { control: 'color' }, + '--qld-color-default-color-light-text-default': { control: 'color' }, + '--qld-color-default-color-light-text-lighter': { control: 'color' }, + '--qld-color-default-color-light-text-heading': { control: 'color' }, + '--qld-color-default-color-light-site-title': { control: 'color' }, + '--qld-color-default-color-light-crest-fill': { control: 'color' }, + '--qld-color-default-color-dark-background-default': { control: 'color' }, + '--qld-color-default-color-dark-background-default-shade': { control: 'color' }, + '--qld-color-default-color-dark-background-alt': { control: 'color' }, + '--qld-color-default-color-dark-background-alt-shade': { control: 'color' }, + '--qld-color-default-color-dark-border-default': { control: 'color' }, + '--qld-color-default-color-dark-border-alt': { control: 'color' }, + '--qld-color-default-color-dark-action-primary': { control: 'color' }, + '--qld-color-default-color-dark-action-primary-hover': { control: 'color' }, + '--qld-color-default-color-dark-action-secondary': { control: 'color' }, +}; + +const mergeArgs = (...args) => { + return args.reduce((acc, curr) => { + return { ...acc, ...curr }; + }, {}); +}; + + +export default { + tags: ['autodocs'], + title: 'Core/Nav Bar', + render: (args) => { + return ` + ${Handlebars.compile(template)(args)} + `; + }, + argTypes: {}, + parameters: { + layout: 'fullscreen', + }, +}; + +// Navbar story with 'Light' color theme +export const MasterBrand = { + args: { + ...menu_state, + }, + parameters: { + backgrounds: { + default: "Light", + values: [ + { name: 'Light', value: 'var(--qld-light-background)' }, + ], + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +// Navbar story with 'Dark' color theme +export const SubBrand = { + args: { + ...menu_state, + }, + parameters: { + backgrounds: { + default: "Light", + values: [ + { name: 'Light', value: 'var(--qld-light-background)' }, + ], + }, + }, + decorators: [ + (Story) => { + return ` + ${Story()} + `; + }, + ], +}; + +// Co brand +export const CoBrand = { + args: mergeArgs(alternative_palette, cobrand_example), + argTypes: arg_types, + parameters: { + backgrounds: { + default: "Light", + values: [ + { name: 'Light', value: 'var(--qld-light-background)' }, + ], + }, + }, + decorators: [ + (Story, context) => { + const { ...args } = context.args; + + // Generate CSS variables from args + const cssVariables = Object.keys(args).filter(key => key.startsWith('--')).map(key => { + return `${key}: ${args[key]};`; + }).join('\n'); + + // This can be cleaned up but might require introducing raw loader + return ` + +
+ ${Story()} +
+ `; + }, + ], +}; + +// Endorsed brand +export const EndorsedBrand = { + args: mergeArgs(sample_argtypes, menu_state), + argTypes: arg_types, + parameters: { + backgrounds: { + default: "Light", + values: [ + { name: 'Light', value: 'var(--qld-light-background)' }, + ], + }, + }, + decorators: [ + (Story, context) => { + const { ...args } = context.args; + + // Generate CSS variables from args + const cssVariables = Object.keys(args).filter(key => key.startsWith('--')).map(key => { + return `${key}: ${args[key]};`; + }).join('\n'); + + // This can be cleaned up but might require introducing raw loader + return ` + +
+ ${Story()} +
+ `; + }, + ], +}; + +// Standalone +export const StandaloneBrand = { + args: mergeArgs(sample_argtypes, menu_state), + argTypes: arg_types, + parameters: { + backgrounds: { + default: "Light", + values: [ + { name: 'Light', value: 'var(--qld-light-background)' }, + ], + }, + }, + decorators: [ + (Story, context) => { + const { ...args } = context.args; + + // Generate CSS variables from args + const cssVariables = Object.keys(args).filter(key => key.startsWith('--')).map(key => { + return `${key}: ${args[key]};`; + }).join('\n'); + + // This can be cleaned up but might require introducing raw loader + return ` + +
+ ${Story()} +
+ `; + }, + ], +}; diff --git a/src/components/bs5/searchInput/searchInput.hbs b/src/components/bs5/searchInput/searchInput.hbs index d156339a..56fbc359 100644 --- a/src/components/bs5/searchInput/searchInput.hbs +++ b/src/components/bs5/searchInput/searchInput.hbs @@ -1,4 +1,4 @@ -
diff --git a/src/css/main.scss b/src/css/main.scss index 83ef980b..d405bbb5 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -11,7 +11,7 @@ $font-family-sitename: "Fira Sans"; //Icons @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css"); -@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; //Prefix to namespace design-system classes @@ -22,9 +22,9 @@ $enable-dark-mode: true; // 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files) -@import "~bootstrap/scss/functions"; -@import "~bootstrap/scss/variables"; -@import "~bootstrap/scss/variables-dark"; +@import "bootstrap/scss/functions"; +@import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; // 2. QLD Design System variables (Bootstrap overrides) @import "./qld-variables"; @@ -32,49 +32,49 @@ $enable-dark-mode: true; // 3. Include remainder of bootstrap // 3.1 Required -@import "~bootstrap/scss/maps"; -@import "~bootstrap/scss/mixins"; -@import "~bootstrap/scss/utilities"; +@import "bootstrap/scss/maps"; +@import "bootstrap/scss/mixins"; +@import "bootstrap/scss/utilities"; // 3.2 Recommended, Resets and shared -@import "~bootstrap/scss/root"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/type"; -@import "~bootstrap/scss/containers"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/helpers"; +@import "bootstrap/scss/root"; +@import "bootstrap/scss/reboot"; +@import "bootstrap/scss/type"; +@import "bootstrap/scss/containers"; +@import "bootstrap/scss/grid"; +@import "bootstrap/scss/helpers"; // 3.3 Optional components -@import "~bootstrap/scss/accordion"; -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/breadcrumb"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/images"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/offcanvas"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/placeholders"; -@import "~bootstrap/scss/popover"; -@import "~bootstrap/scss/spinners"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/toasts"; -@import "~bootstrap/scss/tooltip"; +@import "bootstrap/scss/accordion"; +@import "bootstrap/scss/alert"; +@import "bootstrap/scss/badge"; +@import "bootstrap/scss/buttons"; +@import "bootstrap/scss/button-group"; +@import "bootstrap/scss/breadcrumb"; +@import "bootstrap/scss/card"; +@import "bootstrap/scss/carousel"; +@import "bootstrap/scss/close"; +@import "bootstrap/scss/dropdown"; +@import "bootstrap/scss/forms"; +@import "bootstrap/scss/list-group"; +@import "bootstrap/scss/images"; +@import "bootstrap/scss/modal"; +@import "bootstrap/scss/progress"; +@import "bootstrap/scss/transitions"; +@import "bootstrap/scss/nav"; +@import "bootstrap/scss/navbar"; +@import "bootstrap/scss/offcanvas"; +@import "bootstrap/scss/pagination"; +@import "bootstrap/scss/placeholders"; +@import "bootstrap/scss/popover"; +@import "bootstrap/scss/spinners"; +@import "bootstrap/scss/tables"; +@import "bootstrap/scss/toasts"; +@import "bootstrap/scss/tooltip"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` -@import "~bootstrap/scss/utilities/api"; +@import "bootstrap/scss/utilities/api"; //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency. @import "./qld-type"; diff --git a/src/js/handlebars.partials.js b/src/js/handlebars.partials.js index 848357da..0fd49a48 100644 --- a/src/js/handlebars.partials.js +++ b/src/js/handlebars.partials.js @@ -21,6 +21,10 @@ 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 header_preMenu from "../components/bs5/header/partials/header_preMenu.hbs?raw"; +import header_primary from "../components/bs5/header/partials/header_primary.hbs?raw"; +import header_sitePreHeader_CTA_menuItem from "../components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.hbs?raw"; +import header_wrap from "../components/bs5/header/partials/header_wrap.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"; @@ -69,6 +73,10 @@ export default function handlebarsPartials(handlebars) { handlebars.registerPartial("globalAlert", globalAlert); handlebars.registerPartial("head", head); handlebars.registerPartial("header", header); + handlebars.registerPartial("header_preMenu", header_preMenu); + handlebars.registerPartial("header_primary", header_primary); + handlebars.registerPartial("header_sitePreHeader_CTA_menuItem", header_sitePreHeader_CTA_menuItem); + handlebars.registerPartial("header_wrap", header_wrap); handlebars.registerPartial("inpageAlert", inpageAlert); handlebars.registerPartial("inpagenav", inpagenav); handlebars.registerPartial("mainContainerWrapper", mainContainerWrapper); diff --git a/src/stories/integration/integration.stories.js b/src/stories/integration/integration.stories.js index 35a2fa2d..b144a0fa 100644 --- a/src/stories/integration/integration.stories.js +++ b/src/stories/integration/integration.stories.js @@ -21,13 +21,17 @@ const defaultData = { template: template, // Adjust template path relative to this file cdn: ".", //for storybook it's ., for normal usage "PROD" title: "title goes here", + "icon-root": headerData["icon-root"], + icons: headerData.icons, description: "my description", uri: "http://localhost/uri/here", dcTerms: dcTerms, seo: metaOpenGraphData.seo, og: metaOpenGraphData.og, - header: headerData, - search: searchData, + header: { + ...headerData, + searchData: searchData + }, navbar: navbarData, breadcrumbs: breadcrumbsData, globalAlert: globalAlertData,