@qld-gov-au/qgds-bootstrap5 1.1.41 → 2.0.0

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

@@ -1,173 +1,46 @@
 {
-  "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"
+  "isSubBrand": true,
+  "preHeader": {
+    "globalLink": {
+      "text": "www.qld.gov.au",
+      "url": "https://qld.gov.au"
     },
-    "CTA": [
+    "actions": [
       {
         "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"
-              }
-            ]
-          }
-        }
+        "url": "#",
+        "text": "Contact Information",
+        "icon": "phone"
       },
+
       {
         "id": "CTAthree",
-        "url": {
-          "value": "#"
-        },
-        "text": {
-          "value": "Login"
-        },
-        "dropdown_enabled": true,
-        "dropdown_options": {
-          "dropdown_type": "form",
-          "dropdown_config": {
-            "content": "<div></div>"
-          }
-        }
+        "url": "#",
+        "text": "Login",
+        "icon": "login"
       }
     ]
   },
-  "siteHeader": {
-    "config": {
-      "masterbrand_enabled": false,
-      "subbrand_enabled": true,
-      "cobrand_enabled": false,
-      "endorsed_enabled": false,
-      "standalone_enabled": false
-    },
-    "url": {
-      "value": "https://qld.gov.au"
-    },
-    "logo": {},
-    "secondaryType": {
-      "logo": {
-        "value": ""
-      },
-      "siteTitle": {
-        "value": "For government"
-      },
-      "subline": {
-        "value": ""
-      }
-    }
+  "mainContent": {
+    "url": "https://qld.gov.au",
+    "logoPath": "",
+    "secondaryLogoPath": "",
+    "siteTitle": "For government",
+    "subline": "Hospital and Health Service"
   },
-  "siteSearchAsset": {
-    "value": "#",
-    "placeholder": "Placeholder",
-    "label": "Label",
-    "formAction": {
-      "url": "https://www.forgov.qld.gov.au/search"
-    },
-    "options": {
-      "borderStyle": {
-        "full": false
+  "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

@@ -0,0 +1,35 @@
+
+<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">
+            {{#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" fill="currentColor"}}
+            {{else}}
+            {{>logo height="56" fill="currentColor"}}
+            {{/if}}
+            {{/if}}
+        </div>
+        {{#if secondaryLogo}}
+            <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>
+        {{else}}
+        {{#if siteTitle}}
+        <div class="qld-header-secondary-content">
+            <span class="qld-header-site-title">
+                {{siteTitle}}
+            </span>
+            {{#if subline}}
+            <span class="qld-header-subline">
+                {{subline}}
+            </span>
+            {{/if}}
+        </div>
+        {{/if}}
+        {{/if}}
+    </a>
+</div>    

package/src/components/bs5/inpageAlert/InpageAlert.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as AlertStories from "./inpageAlert.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as AlertStories from "./inpageAlert.stories";
+import defaultdata from "./inpageAlert.data.json";
 
 <Meta of={AlertStories} />
 
 # In-page alert
+
 <Canvas>
   <Story of={AlertStories.Success} />
 </Canvas>
@@ -14,3 +16,7 @@ import * as AlertStories from "./inpageAlert.stories"
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98125&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/alerts-in-page)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/alerts/)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/inpageAlert/inpageAlert.data.json

@@ -1,7 +1,7 @@
 {
-	"variantClass": "alert-success",
-	"alertType": "",
-	"heading": "Alert heading",
-	"headingTag": "h2",
-	"content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"
-}
+  "variantClass": "alert-success",
+  "alertType": "",
+  "heading": "Alert heading",
+  "headingTag": "h2",
+  "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"
+}

package/src/components/bs5/{iconLink/iconLink.hbs → link/link.hbs}

@@ -4,7 +4,7 @@
 {{~/inline}} 
 
 {{#*inline "link"~}}
-<a class="icon-link" {{#if id}}id="{{id}}"{{/if}}
+<a class="link" {{#if id}}id="{{id}}"{{/if}}
     href="{{url}}" 
     target="{{target}}" 
     {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
@@ -28,9 +28,9 @@
 {{~/inline}} 
 
 {{#if linkList~}}
-<ul class="icon-link-list">
+<ul class="link-list">
     {{#each linkList}}
-      <li class="icon-link-item">
+      <li class="link-item">
         {{~> link~}}
       </li>
     {{/each}}

package/src/components/bs5/{iconLink/iconLink.js → link/link.js}

@@ -1,5 +1,5 @@
 import Component from "../../../js/QGDSComponent.js";
-import template from "./iconLink.hbs?raw";
+import template from "./link.hbs?raw";
 
 /**
  * Creates a new instance of the Link Column class.
@@ -10,7 +10,7 @@ import template from "./iconLink.hbs?raw";
  * See sample data file for more examples.
  */
 
-export class IconLink {
+export class Link {
   // Use the global Component class to create a new instance of the LinkColumn component.
   // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 

package/src/components/bs5/{iconLink/iconLink.mdx → link/link.mdx}

@@ -1,12 +1,12 @@
 import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as iconLinkStories from "./iconLink.stories";
+import * as linkStories from "./link.stories";
 
-<Meta of={iconLinkStories} />
+<Meta of={linkStories} />
 
 # Icon Link
 
 <Canvas>
-  <Story of={iconLinkStories.Default} />
+  <Story of={linkStories.Default} />
 </Canvas>
 
 ## Design resources

package/src/components/bs5/{iconLink/iconLink.scss → link/link.scss}

@@ -1,14 +1,21 @@
-.icon-link {
+.link {
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
 
   --#{$prefix}icon-background-color: var(--#{$prefix}light-action-secondary);
+  --#{$prefix}icon-background-color-hover: var(
+    --#{$prefix}light-action-secondary-hover
+  );
   --#{$prefix}link-color: var(--#{$prefix}light-link);
   --#{$prefix}link-text-decoration-color: var(--#{$prefix}light-link);
+  --#{$prefix}link-gap: 0.5rem;
 
   .dark &,
   .dark-alt & {
     --#{$prefix}icon-background-color: var(--#{$prefix}dark-action-secondary);
+    --#{$prefix}icon-background-color-hover: var(
+      --#{$prefix}dark-action-secondary-hover
+    );
     --#{$prefix}link-color: var(--#{$prefix}dark-link);
     --#{$prefix}link-text-decoration-color: var(--#{$prefix}dark-link);
     &:visited {
@@ -19,12 +26,25 @@
 
   color: var(--#{$prefix}link-color);
   text-decoration-color: var(--#{$prefix}link-text-decoration-color);
+  display: flex;
+  gap: var(--#{$prefix}link-gap);
+  align-items: center;
+  text-decoration-color: rgba(
+    var(--#{$prefix}link-color-rgb),
+    var(--#{$prefix}link-opacity, 0.5)
+  );
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
+  width: fit-content;
 
   &:hover {
-    text-decoration-thickness: var(--qld-link-underline-thickness);
+    text-decoration-thickness: var(--qld-link-underline-thickness-hover);
     text-decoration-color: var(
       --#{$prefix}color-default-color-light-underline-default
     );
+    .qld-icon {
+      background-color: var(--#{$prefix}icon-background-color-hover);
+    }
   }
 
   &:visited {
@@ -47,10 +67,14 @@
   }
 }
 
-.icon-link-list {
+.link-list {
   list-style: none;
   margin: 0;
   padding: 0;
+  li {
+    margin-top: 0.75rem;
+    line-height: 1.5rem;
+  }
   li:first-child {
     margin-top: 0;
   }

package/src/components/bs5/{iconLink/iconLink.stories.js → link/link.stories.js}

@@ -1,18 +1,17 @@
-// ComponentExample.stories.js
 /**
  * @file linkColumns.stories.js
  * @description Storybook configuration file for the link Columns component.
  * @module linkColumns.stories
  */
 
-import { IconLink } from "./iconLink.js";
-import defaultdata from "./iconLink.data.json";
+import { Link } from "./link.js";
+import defaultdata from "./link.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "3. Components/Icon Link",
+  title: "3. Components/Link",
 
-  render: (args) => new IconLink(args).html,
+  render: (args) => new Link(args).html,
   //   args: defaultdata,
   argTypes: {
     url: {

package/src/components/bs5/linkColumns/linkColumns.mdx

@@ -1,16 +1,21 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as linkColumnsStories from "./linkColumns.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as linkColumnsStories from "./linkColumns.stories";
+import defaultdata from "./linkColumns.data.json";
 
 <Meta of={linkColumnsStories} />
 
 # LinkColumns
+
 <Canvas>
   <Story of={linkColumnsStories.Default} />
 </Canvas>
 
 ## Design resources
 
-
 - [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6pghtHXhO8h5PAit-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6sRnJtEdRnteiQXM-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/link-columns-link-list)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/logo/logo.data.json

@@ -2,5 +2,6 @@
   "logo": "coa-landscape",
   "fill": "currentColor",
   "width": "",
+  "height": "",
   "className": ""
 }