@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.15

package/src/scss/qld-variables.scss

@@ -4,48 +4,40 @@
 // These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.scss,
 
 //QGDS tokens - masterbrand
+@import "@qld-gov-au/qgds-tokens/dist/scss/_variables.scss";
 @import "@qld-gov-au/qgds-tokens/dist/scss/_map.scss";
 
 //QLD Names Colours
-$qld-dark-blue : #05325F;
-$qld-sapphire-blue : #09549F;
-$qld-light-blue : #0085B3;
-$qld-light-green : #6BBE27;
-$qld-dark-green : #008635;
-$qld-golden-yellow : #FFE500;
-$qld-maroon-traditional : #771E32;
-$qld-maroon-modern : #A70240;
-$qld-dark-text: #FFFFFF;
-$qld-dark-border: #1D9AC6;
-$qld-dark-alt-border: #09ACFE;
-$qld-alt-button-hover: #005B23;
-$qld-general-info-alert: #e5eef5;
-$qld-red-border: #8A1220;
-$qld-blue-border: #5C94C0;
-$qld-yellow-border: #B38800;
-$qld-dark-blue-shade : #052C53;
-$qld-light-background: #EFF4F9;
-$qld-light-background-shade: #E5EEF5;
-$qld-light-border: #ECEDE9;
-$qld-dark-focus: #01B0E5;
-$qld-link-visited: #8B63B0;
-$qld-link-visited-dark: #E1C2FF;
-$qld-text-light-blue-dark : #DEEBF9;
-$qld-light-green-dark : #ADD33F;
-$qld-dark-green-dark : #78BA00;
-$qld-light-yellow : #FFEF60;
-$qld-button-dark-blue : #003E7D;
-$qld-text-darkest : #121940;
-$qld-dark-hover : #044a8f;
-
-//Hypothetical
-$cobrand-blue : #132D4E;
-$cobrand-grey : #294d7b;
-$cobrand-maroon : #A70240;
-$cobrand-purple : #634B78;
-$cobrand-yellow : #FBAF54;
-$cobrand-orange : #FD855D;
-
+$qld-dark-blue : $core-default-color-brand-primary-dark-blue;
+$qld-sapphire-blue : $core-default-color-brand-primary-sapphire-blue;
+$qld-light-blue : $core-default-color-brand-primary-light-blue;
+$qld-light-green : $core-default-color-brand-primary-light-green;
+$qld-dark-green : $core-default-color-brand-secondary-darkgreen;
+$qld-golden-yellow : $core-default-color-brand-secondary-golden-yellow;
+$qld-maroon-traditional : $core-default-color-brand-other-gov-maroon;
+$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
+$qld-dark-text: $core-default-color-neutral-white;
+$qld-dark-border: $color-default-color-dark-border-default;
+$qld-dark-alt-border: $color-default-color-dark-border-alt;
+$qld-alt-button-hover: $color-default-color-light-action-secondary-hover;
+$qld-general-info-alert: $core-default-color-status-info-lighter;
+$qld-red-border: $core-default-color-status-error-darker;
+$qld-blue-border: $color-default-color-light-border-light;
+$qld-yellow-border: $core-default-color-status-caution-darker;
+$qld-dark-blue-shade : $color-default-color-dark-background-alt-shade;
+$qld-light-background: $core-default-color-status-info-lightest;
+$qld-light-background-shade: $color-default-color-light-background-light-shade;
+$qld-light-border: $color-default-color-light-border-default;
+$qld-dark-focus: $color-default-color-dark-focus-default;
+$qld-link-visited: $color-default-color-light-underline-visited;
+$qld-link-visited-dark: $color-default-color-dark-underline-visited;
+$qld-text-light-blue-dark : $core-default-color-neutral-lighter;
+$qld-light-green-dark : $core-default-color-brand-primary-light-green;
+$qld-dark-green-dark : $color-default-color-dark-action-primary;
+$qld-light-yellow : $core-default-color-status-caution-lightest;
+$qld-button-dark-blue : $color-default-color-light-action-primary-hover;
+$qld-text-darkest : $color-default-color-dark-link-on-action;
+$qld-dark-hover : $color-default-color-dark-background-default-shade;
 
 //QGOV Brand Mapping - QLD.GOV.AU
 $qld-brand-primary-dark : $qld-dark-blue;
@@ -55,74 +47,66 @@ $qld-brand-secondary-dark : $qld-dark-green;
 $qld-brand-secondary : $qld-light-green;
 $qld-brand-accent : $qld-golden-yellow;
 
-
-// Uncoment to switch primary palette
-// $qld-brand-primary-dark   : $cobrand-grey;
-// $qld-brand-primary        : $cobrand-maroon;
-// $qld-brand-primary-light  : $cobrand-blue;
-// $qld-brand-secondary-dark : $cobrand-orange;
-// $qld-brand-secondary      : $cobrand-purple;
-// $qld-brand-accent         : $cobrand-yellow;
-
-
 //Grays
-$qld-system-darkest : #1D1D1D;
-$qld-text-grey : #414141;
-$qld-hint-text-color: #6F777b;
-$qld-hint-text-color-muted: #DEEBF9;
-$qld-color-dark-button-hover: #ADD33F;
-$qld-text-headings : #04284C;
-$qld-dark-grey : #595959;
-$qld-dark-grey-muted : #636363; // --QLD-color-light-text__muted
-$qld-medium-grey : #78797E;
-$qld-soft-grey : #7A7A7A;
-$qld-alt-grey : #DADADA;
-$qld-grey : #E0E0E0;
-$qld-light-grey : #EBEBEB;
-$qld-light-grey-alt : #E8E8E8;
-$qld-extra-light-grey : #F5F5F5;
-$qld-white : #FFFFFF;
-$qld-white-underline : rgba(255, 255, 255, 0.72);
-$qld-dark-underline : rgba(3, 33, 63, 0.72);
-$qld-maroon-traditional: #771E32;
-$qld-maroon-modern : #A70240;
-$qld-notify-warning : #E22339;
-$qld-notify-information: #0085B3;
-$qld-notify-success : #339D37;
-$qld-notify-alert : #FFCC2C;
-$qld-syntax-values : #6BBE27;
-$qld-syntax-elements : #A7E5FF;
-$qld-syntax-properties : #C88DF7;
-$qld-syntax-comments : #C0D7EC;
-$qld-textbox-border-color: #003E7D;
-$qld-color-error-light: #FFF6F6;
-$qld-color-success-light: #F7FBF8;
+$qld-system-darkest : $core-default-color-neutral-darkest;
+$qld-hint-text-color: $core-default-color-neutral-dark;
+$qld-dark-grey : $core-default-color-neutral-darker;
+$qld-medium-grey : $core-default-color-neutral-dark;
+$qld-alt-grey : $core-default-color-neutral-light;
+$qld-light-link: $color-default-color-light-link-default;
+
+//Should be core color rather than second hand reference (no match)
+$qld-soft-grey : $color-default-color-light-border-alt;
 
-$qld-light-link: #1E5866;
+$qld-dark-grey-muted : $color-default-color-light-text-lighter; 
+$qld-text-grey : $color-default-color-light-text-default;
+$qld-hint-text-color-muted: $core-default-color-neutral-lighter;
+$qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
+$qld-text-headings : $color-default-color-light-text-heading;
+$qld-grey : $core-default-color-neutral-light;
+$qld-light-grey : $core-default-color-neutral-lighter;
+$qld-light-grey-alt : $color-default-color-light-background-alt;
+$qld-extra-light-grey : $core-default-color-neutral-lightest;
+$qld-white : $core-default-color-neutral-white;
+$qld-white-underline : $core-default-color-status-underline-light;
+$qld-dark-underline : $core-default-color-status-underline-dark;
+$qld-maroon-traditional: $core-default-color-brand-other-gov-maroon;
+$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
+$qld-notify-warning : $core-default-color-status-error-default;
+$qld-notify-information: $core-default-color-status-info-default;
+$qld-notify-success : $core-default-color-status-success-default;
+$qld-notify-alert : $core-default-color-status-caution-default;
+$qld-syntax-values : $core-default-color-brand-primary-light-green;
+$qld-syntax-elements : $core-default-color-code-light-blue;
+$qld-syntax-properties : $core-default-color-code-violet;
+$qld-syntax-comments : $core-default-color-code-muted;
+$qld-textbox-border-color: $color-default-color-light-action-primary-hover;
+$qld-color-error-light: $core-default-color-status-error-lightest;
+$qld-color-success-light: $core-default-color-status-success-lightest;
 
 // Define new figma variables as SASS variables
-$qld-color-background: #FFFFFF;
-$qld-color-background--shade: #F5F5F5;
-$qld-color-light-background: #EFF4F9;
-$qld-color-light-background--shade: #E5EEF5;
-$qld-color-light-alt-background: #E8E8E8;
-$qld-color-light-alt-background--shade: #E0E0E0;
+$qld-color-background: $core-default-color-neutral-white;
+$qld-color-background--shade: $color-default-color-light-background-default-shade;
+$qld-color-light-background: $core-default-color-status-info-lightest;
+$qld-color-light-background--shade: $color-default-color-light-background-light-shade;
+$qld-color-light-alt-background: $color-default-color-light-background-alt;
+$qld-color-light-alt-background--shade: $color-default-color-light-background-alt-shade;
 
-$qld-color-dark-background: #09549F;
-$qld-color-dark-background--shade: #04498F;
-$qld-color-dark-alt-background: #05325F;
-$qld-color-dark-alt-background--shade: #052C53;
+$qld-color-dark-background: $core-default-color-brand-primary-sapphire-blue;
+$qld-color-dark-background--shade: $color-default-color-dark-background-default-shade;
+$qld-color-dark-alt-background: $core-default-color-brand-primary-dark-blue;
+$qld-color-dark-alt-background--shade: $color-default-color-dark-background-alt-shade;
 
 $qld-light-action-primary: $qld-sapphire-blue;
-$qld-light-action-primary-hover: $qld-button-dark-blue;
-$qld-light-action-secondary: #008635;
-$qld-light-action-secondary-hover: #005B23;
+$qld-light-action-primary-hover: $color-default-color-light-action-primary-hover;
+$qld-light-action-secondary: $color-default-color-light-action-secondary;
+$qld-light-action-secondary-hover: $color-default-color-light-action-secondary-hover;
 
-$qld-dark-action-primary: $qld-dark-green-dark;
-$qld-dark-action-primary-hover: $qld-light-green-dark;
-$qld-dark-action-secondary: #FFE500;
-$qld-dark-action-secondary-hover: #FFEF60;
-$qld-dark-action-text: $qld-text-darkest;
+$qld-dark-action-primary: $color-default-color-dark-action-primary;
+$qld-dark-action-primary-hover: $color-default-color-dark-action-primary-hover;
+$qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
+$qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
+$qld-dark-action-text: $color-default-color-dark-link-on-action;
 
 $primary : $qld-brand-primary;
 $primary-dark : $qld-brand-primary-dark;
@@ -223,6 +207,8 @@ $project-colors: (
   "light-background": $qld-light-background,
   "light-background-shade": $qld-light-background-shade,
   "light-border": $qld-light-border,
+  "light-link": $qld-light-link,
+
   "light-alt-background": $qld-color-light-alt-background,
   "light-alt-background-shade": $qld-color-light-alt-background--shade,
   "dark-background": $qld-color-dark-background,
@@ -234,8 +220,8 @@ $project-colors: (
 );
 
 // Merge maps
-$merged-theme-qld: map-merge($theme-colors, $qld-tokens);
-$theme-colors: map-merge($merged-theme-qld, $project-colors);
+$tokens: map-merge($theme-colors, $qld-tokens);
+$theme-colors: map-merge($tokens, $project-colors);
 
 // Cusotm GRID breakpoints: https://getbootstrap.com/docs/5.2/layout/grid/#variables
 $grid-breakpoints: (

package/src/templates/compiled/index.html

@@ -329,9 +329,10 @@
                                 <a href="#" class="btn btn-outline-secondary">Contact us</a>
 
                             </div>
-
                     </div>
+                </div>
 
+                <div class="row">
                     <!-- Section 3: Section links (Custom secondary nav items) -->
                     <div class="col-xs-12 col-lg-2 footer-column border-right" aria-label="footer-navigation">
                         <nav class="nav footer-link-list flex-column">

package/src/templates/index.html

@@ -1,58 +1,43 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{pageTitle}}</title>
 
-    <link rel="stylesheet" href="assets/css/qld.bootstrap.css">
-
-</head>
-
-<body>
-
-    {{{ components.header }}} <!-- Include the 'header' partial here without HTML escaping -->
+    <link rel="stylesheet" href="assets/css/qld.bootstrap.css" />
+  </head>
 
+  <body>
+    {{{ components.header }}}
+    <!-- Include the 'header' partial here without HTML escaping -->
 
     <main class="qld-body">
-
-        <!-- Banner -->
-        {{{ components.banner }}} <!-- Include the 'banner' partial here without HTML escaping -->
-
-        <!-- Main content -->
-        <div class="container qld-content">
-
-            <div class="row">
-
-                <!-- Left Aside -->
-                <div class="col-3">
-                    {{{ components.sidenav }}}
-                </div>
-
-                <div class="col-7 ms-40">
-
-                    <!-- Breadcrumbs -->
-                    {{{ breadcrumbs }}}
-
-                    <div id="app"></div>
-                    {{{ content }}}
-
-                </div>
-
-            </div>
+      <!-- Banner -->
+      {{{ components.banner }}}
+      <!-- Include the 'banner' partial here without HTML escaping -->
+
+      <!-- Main content -->
+      <div class="container qld-content">
+        <div class="row">
+          <!-- Left Aside -->
+          <div class="col-3">{{{ components.sidenav }}}</div>
+
+          <div class="col-7 ms-40">
+            <!-- Breadcrumbs -->
+            {{{ breadcrumbs }}}
+
+            <div id="app"></div>
+            {{{ content }}}
+          </div>
         </div>
+      </div>
 
-        {{{ components.footer }}} <!-- Include the 'footer' partial here without HTML escaping -->
-
+      {{{ components.footer }}}
+      <!-- Include the 'footer' partial here without HTML escaping -->
     </main>
 
-
     <script src="assets/js/bootstrap.min.js"></script>
     <script src="assets/js/qld.bootstrap.min.js"></script>
-
-
-
-</body>
-
-</html>
+  </body>
+</html>

package/src/components/common/header/Header.js

@@ -1,11 +0,0 @@
-import Component from "../../../js/QGDSComponent.js";
-import template from "./table.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);
-  }
-}