QOLOE-356 start of header split

.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()}

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,

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,19 +138,19 @@ 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 {
   tags: ['autodocs'],
   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}
         `;
   },

src/components/bs5/header/partials/header_sitePreHeader_CTA_menuItem.hbs

@@ -0,0 +1,41 @@
+    <span {{#if dropdown_enabled}} class="dropdown dropdownCTA" {{/if}}>
+                            <a {{#if dropdown_enabled}} id="dropdown{{id}}" role="button" data-bs-toggle="dropdown" aria-expanded="false" class="qld__header__cta-link" href="#" {{else}} href="{{url.value}}" class="qld__header__cta-link" {{/if}}>
+                                <span class="qld__header__cta-link-text">{{{text.value}}}</span>
+                                {{#if dropdown_enabled}}
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__header__cta-link-icon">
+                                        <use href="{{@root.icon-root}}#{{@root.icons.chevron_down}}"></use>
+                                    </svg>
+                                {{/if}}
+                            </a>
+        {{#if dropdown_enabled}}
+            <ul class="dropdown-menu dark" aria-labelledby="dropdown{{id}}" role="list">
+                                {{#isType dropdown_options.dropdown_type "list"}}
+                                    {{#if dropdown_options.dropdown_config}}
+                                        {{#each dropdown_options.dropdown_config.groups}}
+                                            <li class="qld__header__cta-list">
+                                            <a href="{{url}}" {{#if action}} target="{{action}}" {{/if}}>
+                                                {{label}}
+                                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                                     xmlns="http://www.w3.org/2000/svg" class="cta_arrow">
+                                                    <path d="M18.8592 12.6135L13.6659 17.6633C13.5721 17.7781 13.4156 17.8068 13.2905 17.8068C13.1654 17.8068 13.0402 17.7781 12.9464 17.692C12.7274 17.5199 12.7274 17.233 12.9151 17.0608L17.295 12.757H5.50056C5.21899 12.757 5 12.5562 5 12.3266C5 12.0971 5.21899 11.8389 5.50056 11.8389H17.295L12.9151 7.56375C12.7274 7.3916 12.7274 7.10468 12.9464 6.93253C13.1654 6.76038 13.4782 6.76038 13.6659 6.96122L18.8592 12.011C19.0469 12.1832 19.0469 12.4414 18.8592 12.6135Z" fill="#FFE500" />
+                                                </svg>
+                                            </a>
+                                        </li>
+                                        {{/each}}
+                                        {{#if dropdown_options.view_more}}
+                                            <li class="qld__header__cta-list">
+                                            <a href="{{dropdown_options.url}}" target="{{dropdown_options.target}}" class="view-all border-bottom-0">
+                                                {{dropdown_options.label}}
+                                            </a>
+                                        </li>
+                                        {{/if}}
+                                    {{/if}}
+                                {{/isType}}
+                {{#isType dropdown_options.dropdown_type "form"}}
+                    {{#if dropdown_options.dropdown_config.content}}
+                        {{{dropdown_options.dropdown_config.content}}}
+                    {{/if}}
+                {{/isType}}
+                            </ul>
+        {{/if}}
+                        </span>

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}
+ */

src/components/bs5/header/partials/header_wrap.hbs

@@ -0,0 +1,8 @@
+<header class="qld__header" role="banner">
+    <nav class="qld__header__skip-link" aria-label="skip links" tabindex="-1">
+        <a class="qld__header__skip-link__linkstyle" href="#content">Skip to main content</a>
+        <a class="qld__header__skip-link__linkstyle" href="#main-nav">Skip to main navigation</a>
+    </nav>
+    {{> @partial-block }}
+</header>
+<!-- HEADER END -->

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,