@qld-gov-au/qgds-bootstrap5 1.1.40 → 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/icons/icons.scss

@@ -1,46 +1,52 @@
 /* @TODO: Remove lines in between once all the icons within the components have been synced with new icons.  */
 :root {
-    //Define global icons as CSS variables
-	--icon-dot-grid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99999 17.999C5.58864 17.999 1.99902 14.4102 1.99902 9.99804C1.99902 5.58591 5.58786 1.99707 9.99999 1.99707C14.4121 1.99707 18.001 5.58591 18.001 9.99804C18.001 14.4102 14.411 17.999 9.99999 17.999ZM9.99999 3.00024C5.99371 3.00024 3 5.99098 3 9.99804C3 14.0051 5.99294 17.0002 9.99999 17.0002C14.007 17.0002 17 14.0051 17 9.99804C17 5.99098 14.0063 3.00024 9.99999 3.00024Z' /%3E%3Cpath d='M9.25586 7.08128C9.25586 7.49232 9.58907 7.82553 10.0001 7.82553C10.4111 7.82553 10.7443 7.49232 10.7443 7.08128C10.7443 6.67025 10.4111 6.33704 10.0001 6.33704C9.58907 6.33704 9.25586 6.67025 9.25586 7.08128Z' /%3E%3Cpath d='M6.33643 7.08128C6.33643 7.49232 6.66964 7.82553 7.08067 7.82553C7.4917 7.82553 7.82492 7.49232 7.82492 7.08128C7.82492 6.67025 7.4917 6.33704 7.08067 6.33704C6.66964 6.33704 6.33643 6.67025 6.33643 7.08128Z' /%3E%3Cpath d='M7.08101 9.25598C6.66998 9.25598 6.33677 9.58919 6.33677 10.0002C6.33677 10.4113 6.66998 10.7445 7.08101 10.7445C7.49205 10.7445 7.82526 10.4113 7.82526 10.0002C7.82526 9.58919 7.49205 9.25598 7.08101 9.25598Z' /%3E%3Cpath d='M7.08046 12.175C6.66943 12.175 6.33622 12.5083 6.33622 12.9193C6.33622 13.3303 6.66943 13.6635 7.08046 13.6635C7.4915 13.6635 7.82471 13.3303 7.82471 12.9193C7.82471 12.5083 7.4915 12.175 7.08046 12.175Z' /%3E%3Cpath d='M9.9999 9.25598C9.58886 9.25598 9.25565 9.58919 9.25565 10.0002C9.25565 10.4113 9.58886 10.7445 9.9999 10.7445C10.4109 10.7445 10.7441 10.4113 10.7441 10.0002C10.7441 9.58919 10.4109 9.25598 9.9999 9.25598Z' /%3E%3Cpath d='M9.99947 12.1749C9.58844 12.1749 9.25523 12.5081 9.25523 12.9192C9.25523 13.3302 9.58844 13.6634 9.99947 13.6634C10.4105 13.6634 10.7437 13.3302 10.7437 12.9192C10.7437 12.5081 10.4105 12.1749 9.99947 12.1749Z' /%3E%3Cpath d='M12.1743 7.08128C12.1743 7.49232 12.5075 7.82553 12.9186 7.82553C13.3296 7.82553 13.6628 7.49232 13.6628 7.08128C13.6628 6.67025 13.3296 6.33704 12.9186 6.33704C12.5075 6.33704 12.1743 6.67025 12.1743 7.08128Z' /%3E%3Cpath d='M12.9188 9.25598C12.5078 9.25598 12.1746 9.58919 12.1746 10.0002C12.1746 10.4113 12.5078 10.7445 12.9188 10.7445C13.3299 10.7445 13.6631 10.4113 13.6631 10.0002C13.6631 9.58919 13.3299 9.25598 12.9188 9.25598Z' /%3E%3Cpath d='M12.9188 12.1754C12.5078 12.1754 12.1746 12.5086 12.1746 12.9197C12.1746 13.3307 12.5078 13.6639 12.9188 13.6639C13.3299 13.6639 13.6631 13.3307 13.6631 12.9197C13.6631 12.5086 13.3299 12.1754 12.9188 12.1754Z' /%3E%3C/svg%3E");
-	--icon-phone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.125 12.3437L13.9375 10.9687C13.375 10.7499 12.6875 10.9062 12.3125 11.4062L11.25 12.6562C9.625 11.7499 8.25 10.3749 7.34375 8.7499L8.625 7.71865C9.09375 7.3124 9.25 6.6249 9 6.0624L7.65625 2.8749C7.375 2.2499 6.6875 1.90615 6.03125 2.0624L3.09375 2.7499C2.4375 2.8749 2 3.4374 2 4.1249C2 11.7812 8.21875 17.9999 15.875 17.9999C16.5625 17.9999 17.125 17.5624 17.2812 16.9062L17.9375 13.9687C18.0938 13.3124 17.75 12.6249 17.125 12.3437ZM16.2812 16.6874C16.25 16.8749 16.0938 17.0312 15.875 17.0312C8.78125 17.0312 3 11.2187 3 4.1249C3 3.90615 3.125 3.7499 3.3125 3.71865L6.25 3.03115C6.28125 3.03115 6.3125 2.9999 6.34375 2.9999C6.5 2.9999 6.65625 3.1249 6.75 3.28115L8.09375 6.4374C8.15625 6.6249 8.125 6.8124 7.96875 6.9374L6.40625 8.21865C6.21875 8.3749 6.15625 8.6249 6.28125 8.84365C7.3125 10.9374 9.0625 12.6874 11.1875 13.7187C11.375 13.8437 11.625 13.7812 11.7812 13.5937L13.0625 12.0312C13.1875 11.8749 13.375 11.8437 13.5625 11.9062L16.7188 13.2499C16.9062 13.3437 17.0312 13.5312 16.9688 13.7499L16.2812 16.6874Z' /%3E%3C/svg%3E%0A");
-	--icon-email: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2C0 0.90625 0.875 0 2 0H14C15.0938 0 16 0.90625 16 2V10C16 11.125 15.0938 12 14 12H2C0.875 12 0 11.125 0 10V2ZM1 2V3.25L7.09375 7.75C7.625 8.125 8.34375 8.125 8.875 7.75L15 3.25V2C15 1.46875 14.5312 1 14 1H1.96875C1.4375 1 0.96875 1.46875 0.96875 2H1ZM1 4.5V10C1 10.5625 1.4375 11 2 11H14C14.5312 11 15 10.5625 15 10V4.5L9.46875 8.5625C8.59375 9.1875 7.375 9.1875 6.5 8.5625L1 4.5Z' /%3E%3C/svg%3E%0A");
-	--icon-search: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.8057 14.7188C16.1182 15.0312 16.1182 15.5 15.8057 15.7812C15.6807 15.9375 15.4932 16 15.3057 16C15.0869 16 14.8994 15.9375 14.7432 15.7812L10.5557 11.5938C9.43066 12.5 8.02441 13 6.52441 13C2.96191 13 0.0556641 10.0938 0.0556641 6.5C0.0556641 2.9375 2.93066 0 6.52441 0C10.0869 0 13.0244 2.9375 13.0244 6.5C13.0244 8.03125 12.5244 9.4375 11.6182 10.5312L15.8057 14.7188ZM1.55566 6.5C1.55566 9.28125 3.77441 11.5 6.55566 11.5C9.30566 11.5 11.5557 9.28125 11.5557 6.5C11.5557 3.75 9.30566 1.5 6.55566 1.5C3.77441 1.5 1.55566 3.75 1.55566 6.5Z' /%3E%3C/svg%3E");
-	--icon-home: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.984581 16.0312C0.711143 16.2656 0.711143 16.6562 0.945518 16.9297C1.14083 17.2031 1.53146 17.2031 1.80489 16.9688L3.25021 15.6797V23.375C3.25021 25.1328 4.65646 26.5 6.37521 26.5H17.6252C19.383 26.5 20.7502 25.1328 20.7502 23.375V15.6797L22.2346 16.9688C22.508 17.2031 22.8986 17.2031 23.094 16.9297C23.3283 16.6562 23.3283 16.2656 23.0549 16.0312L12.4299 6.69531C12.1955 6.46094 11.844 6.46094 11.6096 6.69531L0.984581 16.0312ZM17.6252 25.25H15.1252V19C15.1252 18.3359 14.5783 17.75 13.8752 17.75H10.1252C9.46114 17.75 8.87521 18.3359 8.87521 19V25.25H6.37521C5.35958 25.25 4.50021 24.4297 4.50021 23.375V14.5859L12.0002 7.98438L19.5002 14.5859V23.375C19.5002 24.4297 18.6799 25.25 17.6252 25.25ZM13.8752 25.25H10.1252V19H13.8752V25.25Z' /%3E%3C/svg%3E");
+  //Define global icons as CSS variables
+  --icon-dot-grid: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99999 17.999C5.58864 17.999 1.99902 14.4102 1.99902 9.99804C1.99902 5.58591 5.58786 1.99707 9.99999 1.99707C14.4121 1.99707 18.001 5.58591 18.001 9.99804C18.001 14.4102 14.411 17.999 9.99999 17.999ZM9.99999 3.00024C5.99371 3.00024 3 5.99098 3 9.99804C3 14.0051 5.99294 17.0002 9.99999 17.0002C14.007 17.0002 17 14.0051 17 9.99804C17 5.99098 14.0063 3.00024 9.99999 3.00024Z' /%3E%3Cpath d='M9.25586 7.08128C9.25586 7.49232 9.58907 7.82553 10.0001 7.82553C10.4111 7.82553 10.7443 7.49232 10.7443 7.08128C10.7443 6.67025 10.4111 6.33704 10.0001 6.33704C9.58907 6.33704 9.25586 6.67025 9.25586 7.08128Z' /%3E%3Cpath d='M6.33643 7.08128C6.33643 7.49232 6.66964 7.82553 7.08067 7.82553C7.4917 7.82553 7.82492 7.49232 7.82492 7.08128C7.82492 6.67025 7.4917 6.33704 7.08067 6.33704C6.66964 6.33704 6.33643 6.67025 6.33643 7.08128Z' /%3E%3Cpath d='M7.08101 9.25598C6.66998 9.25598 6.33677 9.58919 6.33677 10.0002C6.33677 10.4113 6.66998 10.7445 7.08101 10.7445C7.49205 10.7445 7.82526 10.4113 7.82526 10.0002C7.82526 9.58919 7.49205 9.25598 7.08101 9.25598Z' /%3E%3Cpath d='M7.08046 12.175C6.66943 12.175 6.33622 12.5083 6.33622 12.9193C6.33622 13.3303 6.66943 13.6635 7.08046 13.6635C7.4915 13.6635 7.82471 13.3303 7.82471 12.9193C7.82471 12.5083 7.4915 12.175 7.08046 12.175Z' /%3E%3Cpath d='M9.9999 9.25598C9.58886 9.25598 9.25565 9.58919 9.25565 10.0002C9.25565 10.4113 9.58886 10.7445 9.9999 10.7445C10.4109 10.7445 10.7441 10.4113 10.7441 10.0002C10.7441 9.58919 10.4109 9.25598 9.9999 9.25598Z' /%3E%3Cpath d='M9.99947 12.1749C9.58844 12.1749 9.25523 12.5081 9.25523 12.9192C9.25523 13.3302 9.58844 13.6634 9.99947 13.6634C10.4105 13.6634 10.7437 13.3302 10.7437 12.9192C10.7437 12.5081 10.4105 12.1749 9.99947 12.1749Z' /%3E%3Cpath d='M12.1743 7.08128C12.1743 7.49232 12.5075 7.82553 12.9186 7.82553C13.3296 7.82553 13.6628 7.49232 13.6628 7.08128C13.6628 6.67025 13.3296 6.33704 12.9186 6.33704C12.5075 6.33704 12.1743 6.67025 12.1743 7.08128Z' /%3E%3Cpath d='M12.9188 9.25598C12.5078 9.25598 12.1746 9.58919 12.1746 10.0002C12.1746 10.4113 12.5078 10.7445 12.9188 10.7445C13.3299 10.7445 13.6631 10.4113 13.6631 10.0002C13.6631 9.58919 13.3299 9.25598 12.9188 9.25598Z' /%3E%3Cpath d='M12.9188 12.1754C12.5078 12.1754 12.1746 12.5086 12.1746 12.9197C12.1746 13.3307 12.5078 13.6639 12.9188 13.6639C13.3299 13.6639 13.6631 13.3307 13.6631 12.9197C13.6631 12.5086 13.3299 12.1754 12.9188 12.1754Z' /%3E%3C/svg%3E");
+  --icon-phone: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.125 12.3437L13.9375 10.9687C13.375 10.7499 12.6875 10.9062 12.3125 11.4062L11.25 12.6562C9.625 11.7499 8.25 10.3749 7.34375 8.7499L8.625 7.71865C9.09375 7.3124 9.25 6.6249 9 6.0624L7.65625 2.8749C7.375 2.2499 6.6875 1.90615 6.03125 2.0624L3.09375 2.7499C2.4375 2.8749 2 3.4374 2 4.1249C2 11.7812 8.21875 17.9999 15.875 17.9999C16.5625 17.9999 17.125 17.5624 17.2812 16.9062L17.9375 13.9687C18.0938 13.3124 17.75 12.6249 17.125 12.3437ZM16.2812 16.6874C16.25 16.8749 16.0938 17.0312 15.875 17.0312C8.78125 17.0312 3 11.2187 3 4.1249C3 3.90615 3.125 3.7499 3.3125 3.71865L6.25 3.03115C6.28125 3.03115 6.3125 2.9999 6.34375 2.9999C6.5 2.9999 6.65625 3.1249 6.75 3.28115L8.09375 6.4374C8.15625 6.6249 8.125 6.8124 7.96875 6.9374L6.40625 8.21865C6.21875 8.3749 6.15625 8.6249 6.28125 8.84365C7.3125 10.9374 9.0625 12.6874 11.1875 13.7187C11.375 13.8437 11.625 13.7812 11.7812 13.5937L13.0625 12.0312C13.1875 11.8749 13.375 11.8437 13.5625 11.9062L16.7188 13.2499C16.9062 13.3437 17.0312 13.5312 16.9688 13.7499L16.2812 16.6874Z' /%3E%3C/svg%3E%0A");
+  --icon-email: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2C0 0.90625 0.875 0 2 0H14C15.0938 0 16 0.90625 16 2V10C16 11.125 15.0938 12 14 12H2C0.875 12 0 11.125 0 10V2ZM1 2V3.25L7.09375 7.75C7.625 8.125 8.34375 8.125 8.875 7.75L15 3.25V2C15 1.46875 14.5312 1 14 1H1.96875C1.4375 1 0.96875 1.46875 0.96875 2H1ZM1 4.5V10C1 10.5625 1.4375 11 2 11H14C14.5312 11 15 10.5625 15 10V4.5L9.46875 8.5625C8.59375 9.1875 7.375 9.1875 6.5 8.5625L1 4.5Z' /%3E%3C/svg%3E%0A");
+  --icon-search: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.8057 14.7188C16.1182 15.0312 16.1182 15.5 15.8057 15.7812C15.6807 15.9375 15.4932 16 15.3057 16C15.0869 16 14.8994 15.9375 14.7432 15.7812L10.5557 11.5938C9.43066 12.5 8.02441 13 6.52441 13C2.96191 13 0.0556641 10.0938 0.0556641 6.5C0.0556641 2.9375 2.93066 0 6.52441 0C10.0869 0 13.0244 2.9375 13.0244 6.5C13.0244 8.03125 12.5244 9.4375 11.6182 10.5312L15.8057 14.7188ZM1.55566 6.5C1.55566 9.28125 3.77441 11.5 6.55566 11.5C9.30566 11.5 11.5557 9.28125 11.5557 6.5C11.5557 3.75 9.30566 1.5 6.55566 1.5C3.77441 1.5 1.55566 3.75 1.55566 6.5Z' /%3E%3C/svg%3E");
+  --icon-home: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.984581 16.0312C0.711143 16.2656 0.711143 16.6562 0.945518 16.9297C1.14083 17.2031 1.53146 17.2031 1.80489 16.9688L3.25021 15.6797V23.375C3.25021 25.1328 4.65646 26.5 6.37521 26.5H17.6252C19.383 26.5 20.7502 25.1328 20.7502 23.375V15.6797L22.2346 16.9688C22.508 17.2031 22.8986 17.2031 23.094 16.9297C23.3283 16.6562 23.3283 16.2656 23.0549 16.0312L12.4299 6.69531C12.1955 6.46094 11.844 6.46094 11.6096 6.69531L0.984581 16.0312ZM17.6252 25.25H15.1252V19C15.1252 18.3359 14.5783 17.75 13.8752 17.75H10.1252C9.46114 17.75 8.87521 18.3359 8.87521 19V25.25H6.37521C5.35958 25.25 4.50021 24.4297 4.50021 23.375V14.5859L12.0002 7.98438L19.5002 14.5859V23.375C19.5002 24.4297 18.6799 25.25 17.6252 25.25ZM13.8752 25.25H10.1252V19H13.8752V25.25Z' /%3E%3C/svg%3E");
 }
 
 .qld-icon {
-	//Shared icon styles
-	display: inline-block;
-	width: 1.25rem;
-	height: 1.25rem;
-	background-position: center center;
-	background-repeat: no-repeat;
-	mask-position: center center;
-	mask-repeat: no-repeat;
+  //Shared icon styles
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-position: center center;
+  background-repeat: no-repeat;
+  mask-position: center center;
+  -webkit-mask-position: center center;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
 
-	//Default color
-	background: var(--#{$prefix}icon-color);
+  //Default color
+  background: var(--#{$prefix}icon-color);
 
-	//Change color at component level... e.g. on cards.css, use:
-	// .card { --#{$prefix}icon-color: purple; }
+  //Change color at component level... e.g. on cards.css, use:
+  // .card { --#{$prefix}icon-color: purple; }
 
-	&.icon-dot-grid {
-		mask-image: escape-svg(var(--icon-dot-grid));
-	}
+  &.icon-dot-grid {
+    mask-image: escape-svg(var(--icon-dot-grid));
+    -webkit-mask-image: escape-svg(var(--icon-dot-grid));
+  }
 
-	&.icon-phone {
-		mask-image: escape-svg(var(--icon-phone));
-	}
+  &.icon-phone {
+    mask-image: escape-svg(var(--icon-phone));
+    -webkit-mask-image: escape-svg(var(--icon-phone));
+  }
 
-	&.icon-email {
-		mask-image: escape-svg(var(--icon-email));
-	}
+  &.icon-email {
+    mask-image: escape-svg(var(--icon-email));
+    -webkit-mask-image: escape-svg(var(--icon-email));
+  }
 
-	&.icon-search {
-		mask-image: escape-svg(var(--icon-search));
-	}
+  &.icon-search {
+    mask-image: escape-svg(var(--icon-search));
+    -webkit-mask-image: escape-svg(var(--icon-search));
+  }
 
-	/* ... etc */
+  /* ... etc */
 }
 /* @TODO: Remove all lines above once all the icons within the components have been synced with new icons.  */
 
@@ -48,8 +54,8 @@
 @import "./_icons.list";
 @import "./_icons-multicolours.list";
 
-$prefixIcon: $prefix + 'icon-'; // Prefix for icon classes, based on global prefix in main.scss
-$prefixIconQgds: '--qgds-icon-';  // This QGDS variable could be moved to the token or tolkien repo.
+$prefixIcon: $prefix + "icon-"; // Prefix for icon classes, based on global prefix in main.scss
+$prefixIconQgds: "--qgds-icon-"; // This QGDS variable could be moved to the token or tolkien repo.
 
 // Ensure SVGs inherit the current text color
 // Comment out to use the "fill" attribute inside svg element instead
@@ -60,52 +66,53 @@ svg {
 
 // List of icon sizes
 $icon-sizes: (
-	'xs': 1rem,
-	'sm': 1.25rem,
-	'md': 1.5rem,
-	'lg': 2rem,
-	'xl': 2.5rem,
-	'xxl': 3rem
+  "xs": 1rem,
+  "sm": 1.25rem,
+  "md": 1.5rem,
+  "lg": 2rem,
+  "xl": 2.5rem,
+  "xxl": 3rem,
 );
 
 // Loop through the icon names and create utility class for each
 .qld-icon {
-	display: inline-block;
-	width: 1.25rem;
-	height: 1.25rem;
-	background-position: center center;
-	background-repeat: no-repeat;
-	mask-position: center center;
-	mask-repeat: no-repeat;
-	mask-size: contain;
-	background-color: var(--#{$prefix}body-color); // Default icon color
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-position: center center;
+  background-repeat: no-repeat;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  background-color: var(--#{$prefix}body-color); // Default icon color
 
-	// Utility classes for icons
-	// Note: mask-image is the preferred method for icons that are single colour, as it allows for easy colour changes using CSS variables.
-	// The background-image method is used for SVG icons with multiple fill colours.
-	@each $icon in $icon-names {
-		@if index($icons-multicolour, $icon) {
-			// Only use background-image for multi colours icons.
-			&.#{$prefixIcon}#{$icon} {
-				background-image: var(#{$prefixIconQgds}#{$icon});
-				background-color: transparent;
-			}
-		} @else {
-			&.#{$prefixIcon}#{$icon} {
-				mask-image: var(#{$prefixIconQgds}#{$icon});
-				-webkit-mask-image: var(#{$prefixIconQgds}#{$icon});
-			}
-		}
-	}
+  // Utility classes for icons
+  // Note: mask-image is the preferred method for icons that are single colour, as it allows for easy colour changes using CSS variables.
+  // The background-image method is used for SVG icons with multiple fill colours.
+  @each $icon in $icon-names {
+    @if index($icons-multicolour, $icon) {
+      // Only use background-image for multi colours icons.
+      &.#{$prefixIcon}#{$icon} {
+        background-image: var(#{$prefixIconQgds}#{$icon});
+        -webkit-background-image: var(#{$prefixIconQgds}#{$icon});
+        background-color: transparent;
+      }
+    } @else {
+      &.#{$prefixIcon}#{$icon} {
+        mask-image: var(#{$prefixIconQgds}#{$icon});
+        -webkit-mask-image: var(#{$prefixIconQgds}#{$icon});
+      }
+    }
+  }
 }
 
 // Loop through the icon sizes and create utility class for each size.
 // Independent from the icon base class to allow sizing on inline SVG icons as well as CSS icons.
 @each $size, $value in $icon-sizes {
-	.#{$prefixIcon}#{$size} {
-		width: $value;
-		height: $value;
-		mask-size: $value;
-		background-size: $value;
-	}
-}
+  .#{$prefixIcon}#{$size} {
+    width: $value;
+    height: $value;
+    mask-size: $value;
+    background-size: $value;
+  }
+}

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/inpagenav/inpagenav.scss

@@ -3,53 +3,53 @@
 
 // QGDS specific In-page Navigation variables.
 .qld-inpage-nav {
-    --#{$prefix}inpage-nav-padding-left: 1.5rem;
-    --#{$prefix}inpage-nav-title-padding-left: $nav-link-padding-x;
-    --#{$prefix}inpage-nav-link-padding-left: $nav-link-padding-x;
-    --#{$prefix}inpage-nav-link-padding-y: 0.25rem;
-    --#{$prefix}inpage-nav-border-color: var(--#{$prefix}brand-primary);
+  --#{$prefix}inpage-nav-padding-left: 1.5rem;
+  --#{$prefix}inpage-nav-title-padding-left: $nav-link-padding-x;
+  --#{$prefix}inpage-nav-link-padding-left: $nav-link-padding-x;
+  --#{$prefix}inpage-nav-link-padding-y: 0.25rem;
+  --#{$prefix}inpage-nav-border-color: var(--#{$prefix}brand-primary);
 }
 
 .dark .qld-inpage-nav,
 .dark-alt .qld-inpage-nav {
-    --#{$prefix}inpage-nav-border-color: var(--#{$prefix}dark-action-primary);
+  --#{$prefix}inpage-nav-border-color: var(--#{$prefix}dark-action-primary);
 
-    .nav {
-        --#{$prefix}nav-link-color: var(--#{$prefix}white);
-        --#{$prefix}nav-link-hover-color: var(--#{$prefix}brand-accent);
-    }
+  .nav {
+    --#{$prefix}nav-link-color: var(--#{$prefix}white);
+    --#{$prefix}nav-link-hover-color: var(--#{$prefix}brand-accent);
+  }
 }
 
 // General styling rules.
 .qld-inpage-nav {
-    border-left: 4px solid var(--#{$prefix}inpage-nav-border-color);
-    padding-left: var(--#{$prefix}inpage-nav-padding-left);
-
-    ul.nav {
-        display: flex;
-        flex-direction: column;
-        padding-left: 0;
-		margin-top: 1rem;
-    }
-
-    .nav-title {
-        font-size: 1rem;
-        line-height: 1.25;
-        margin-bottom: 0;
-        padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
+  border-left: 4px solid var(--#{$prefix}inpage-nav-border-color);
+  padding-left: var(--#{$prefix}inpage-nav-padding-left);
+
+  ul.nav {
+    display: flex;
+    flex-direction: column;
+    padding-left: 0;
+    margin-top: 0.75rem;
+  }
+
+  .nav-title {
+    font-size: 1rem;
+    line-height: 1.25;
+    margin-bottom: 0;
+    padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
+  }
+
+  .nav-item {
+    margin-top: 0;
+    .nav-link {
+      padding-top: var(--#{$prefix}inpage-nav-link-padding-y);
+      padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
+      padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
+      color: var(--#{$prefix}nav-link-color);
     }
 
-    .nav-item {
-        margin-top: 0;
-        .nav-link {
-            padding-top: var(--#{$prefix}inpage-nav-link-padding-y);
-            padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
-            padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
-            color: var(--#{$prefix}nav-link-color);
-        }
-
-        &:first-child .nav-link {
-            padding-top: 0;
-        }
+    &:first-child .nav-link {
+      padding-top: 0;
     }
+  }
 }

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

@@ -0,0 +1,77 @@
+{
+  "default": {
+    "url": "",
+    "id": "",
+    "label": "Document title (PDF 2.5 MB)",
+    "target": "_self",
+    "arialabel": "Document title (PDF 2.5 MB)",
+    "iconClass": "qld-icon-document-pdf",
+    "iconPosition": "leading",
+    "download": null
+  },
+  "linkGroup": {
+    "title": "Link group title",
+    "linkList": [
+      {
+        "url": "",
+        "id": "doc-1",
+        "label": "Document title (DOC 2.5 MB)",
+        "target": "_self",
+        "arialabel": "Document title (DOC 2.5 MB)",
+        "iconClass": "qld-icon-document-word",
+        "iconPosition": "leading",
+        "download": null
+      },
+      {
+        "url": "",
+        "id": "doc-2",
+        "label": "JPG image file (JPG 2.5 KB)",
+        "target": "_self",
+        "arialabel": "JPG image file (JPG 2.5 KB)",
+        "iconClass": "qld-icon-image",
+        "iconPosition": "leading",
+        "download": null
+      },
+      {
+        "url": "",
+        "id": "doc-3",
+        "label": "PNG image file (PNG 2.5 KB)",
+        "target": "_self",
+        "arialabel": "PNG image file (PNG 2.5 KB)",
+        "iconClass": "qld-icon-image",
+        "iconPosition": "leading",
+        "download": null
+      },
+      {
+        "url": "",
+        "id": "doc-4",
+        "label": "Document title (PDF 2.5 MB)",
+        "target": "_self",
+        "arialabel": "Document title (PDF 2.5 MB)",
+        "iconClass": "qld-icon-document-pdf",
+        "iconPosition": "leading",
+        "download": null
+      },
+      {
+        "url": "",
+        "id": "doc-5",
+        "label": "Document title (CSV 2.5 MB)",
+        "target": "_self",
+        "arialabel": "Document title (CSV 2.5 MB)",
+        "iconClass": "qld-icon-document-spreadsheet",
+        "iconPosition": "leading",
+        "download": null
+      },
+      {
+        "url": "",
+        "id": "doc-6",
+        "label": "Document title (PDF 2.5 MB)",
+        "target": "_self",
+        "arialabel": "Document title (PDF 2.5 MB)",
+        "iconClass": "qld-icon-document-pdf",
+        "iconPosition": "leading",
+        "download": null
+      }
+    ]
+  }
+}