@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.8

package/src/components/bs5/header/header.stories.js

@@ -1,4 +1,4 @@
-import { Header } from "./Header.js";
+import { Header, argTypes } from "./Header.js";
 import { Navbar } from "../navbar/Navbar.js";
 import { SearchInput } from "../searchInput/SearchInput.js";
 
@@ -12,166 +12,50 @@ 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";
 
-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 = (arg_types, variant, menu) => ({
-  ...arg_types,
-  ...variant,
-  ...menu,
-});
-
+/**
+ * #### Regarding the "Delivering for Queensland" logo.
+ *
+ * The `hasDeliveringForQLDLogo` option should always be set to `true` for all brand configurations.
+ * This overrides the standard Coat Of Arms logo, and will always be displayed in the preheader region on mobile and table screens regardless of brand configuration.
+ *
+ * The "Delivering for QLD" logo is also displayed on desktop screens in the main content region except under these conditions:
+ * - When `mainContent.siteTitle` has a value, the displayed logo will default to a standard COA stacked logo for space reasons.
+ * - When `mainContent.logo.src` has a value, will display the chosen custom logo.
+ *
+ */
 export default {
   tags: ["autodocs"],
   title: "2. Layout/Header",
   render: (args) => {
     return `
         ${new Header({ ...args, searchInput: new SearchInput(searchData).html }).html}
-        ${new Navbar(args).html}
+        ${new Navbar(menu_state).html}
         `;
   },
-  argTypes: {},
+  argTypes,
   parameters: {
     layout: "fullscreen",
     docs: {
+      controls: {
+        exclude: [
+          "navigation",
+          "preHeader.globalLink.url",
+          "mainContent.url",
+          "assets.siteSearch.value",
+          "assets.siteSearch.placeholder",
+          "assets.siteSearch.label",
+          "assets.siteSearch.formAction.url",
+        ],
+      },
       story: { height: "400px" },
     },
     backgrounds: { disable: true },
   },
 };
 
-// Navbar story with 'Light' color theme
 export const MasterBrand = {
   args: {
     ...masterbrand_variant,
-    ...menu_state,
   },
   decorators: [
     (Story) => {
@@ -182,11 +66,9 @@ export const MasterBrand = {
   ],
 };
 
-// Navbar story with 'Dark' color theme
 export const SubBrand = {
   args: {
     ...subbrand_variant,
-    ...menu_state,
   },
   decorators: [
     (Story) => {
@@ -199,30 +81,13 @@ export const SubBrand = {
 
 // Co brand
 export const CoBrand = {
-  args: mergeArgs(alternative_palette, cobrand_variant, menu_state),
-  argTypes: arg_types,
+  args: {
+    ...cobrand_variant,
+  },
   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
+    (Story) => {
       return `
-        <style>
-          :root {
-            ${cssVariables}
-          }
-        </style>
-        <main>
           ${Story()}
-        </main>
       `;
     },
   ],
@@ -230,30 +95,13 @@ export const CoBrand = {
 
 // Endorsed brand
 export const EndorsedBrand = {
-  args: mergeArgs(sample_argtypes, endorsed_variant, menu_state),
-  argTypes: arg_types,
+  args: {
+    ...endorsed_variant,
+  },
   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
+    (Story) => {
       return `
-        <style>
-          :root {
-            ${cssVariables}
-          }
-        </style>
-        <main>
           ${Story()}
-        </main>
       `;
     },
   ],
@@ -261,30 +109,13 @@ export const EndorsedBrand = {
 
 // Standalone
 export const StandaloneBrand = {
-  args: mergeArgs(sample_argtypes, standalone_variant, menu_state),
-  argTypes: arg_types,
+  args: {
+    ...standalone_variant,
+  },
   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
+    (Story) => {
       return `
-        <style>
-          :root {
-            ${cssVariables}
-          }
-        </style>
-        <main>
           ${Story()}
-        </main>
       `;
     },
   ],

package/src/components/bs5/header/header.variant.coBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isCoBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -15,25 +17,20 @@
     ]
   },
   "mainContent": {
+    "palette": "dark",
     "url": "https://qld.gov.au",
     "logo": null,
     "secondaryLogo": null,
-    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
-    "subline": ""
+    "siteTitle": "Cairns and Hinterland",
+    "subline": "Hospital and Health Service"
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/src/components/bs5/header/header.variant.endorsed.data.json

@@ -1,6 +1,8 @@
 {
   "isEndorsedBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -108,6 +110,7 @@
     ]
   },
   "mainContent": {
+    "palette": "dark-alt",
     "url": "https://qld.gov.au",
     "logo": {
       "src": "assets/img/endorsed.svg",
@@ -121,18 +124,12 @@
     "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/src/components/bs5/header/header.variant.masterBrand.data.json

@@ -1,5 +1,6 @@
 {
   "isMasterBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
     "palette": "dark",
     "globalLink": {
@@ -119,18 +120,12 @@
   },
 
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/src/components/bs5/header/header.variant.standAlone.data.json

@@ -1,6 +1,8 @@
 {
   "isStandaloneBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark-alt",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -110,6 +112,7 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "siteTitle": "Standalone example",
     "subLine": "",
@@ -123,18 +126,12 @@
     }
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/src/components/bs5/header/header.variant.subBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isSubBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -22,25 +24,20 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "logoPath": "",
     "secondaryLogoPath": "",
-    "siteTitle": "For government",
-    "subline": "Hospital and Health Service"
+    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
+    "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/src/components/bs5/header/headerBrand.hbs

@@ -1,22 +1,21 @@
 
 <div class="qld-header-brand">
-    <a class="qld-header-link d-lg-inline-flex" href="{{url}}">
-        <div class="qld-header-brand-image qld-header-logo">
+    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}">
+        <div class="qld-header-brand-image align-self-center">
             {{#if logo}}
             <img src="{{logo.src}}" height="56" alt="{{#if logo.altText}}{{logo.altText}}{{else}}Queensland government{{/if}}" />
+            {{else if siteTitle}}
+            {{>logo logo="coa-landscape-2lines" height="56" className="qld-header-logo" fill="currentColor"}}
+            {{else if hasDeliveringForQLDLogo}}
+            {{>logo logo="coa-delivering-for-qld" height="56" className="qld-header-logo is-delivering-for-qld" fill="currentColor"}}
             {{else}}
-            {{#if siteTitle}}
-            {{>logo logo="coa-landscape-2lines" height="56" fill="currentColor"}}
-            {{else}}
-            {{>logo height="56" fill="currentColor"}}
-            {{/if}}
+            {{>logo height="56" className="qld-header-logo"  fill="currentColor"}}
             {{/if}}
         </div>
         {{#if secondaryLogo}}
-            <div class="qld-header-secondary-content" >
+        <div class="qld-header-secondary-content">
             <img src="{{secondaryLogo.src}}" class="qld-header-secondary-image qld-header-logo" height="56" alt="{{#if secondaryLogo.altText}}{{secondaryLogo.altText}}{{else}}{{siteTitle}}{{#if subline}}{{subline}}{{/if}}{{/if}}" />
-
-            </div>
+        </div>
         {{else}}
         {{#if siteTitle}}
         <div class="qld-header-secondary-content">