@qld-gov-au/qgds-bootstrap5 2.1.21 → 2.2.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.21",
+  "version": "2.2.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "eslint": "10.2.1",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
-    "globals": "17.5.0",
+    "globals": "17.6.0",
     "handlebars": "4.7.9",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.21",
+  "version": "2.2.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "eslint": "10.2.1",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
-    "globals": "17.5.0",
+    "globals": "17.6.0",
     "handlebars": "4.7.9",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",

package/src/components/bs5/quickexit/quickexit.functions.js

@@ -8,7 +8,7 @@ export function initQuickexit() {
     quickExitButton != null
   ) {
     onbtnClick();
-    onKeyDown();
+    document.addEventListener("keydown", handleKeydown);
   }
 }
 /**
@@ -24,15 +24,14 @@ function onbtnClick() {
 }
 
 /**
- * onKeyDown -> escape keydown event
+ * handleKeydown -> escape keydown event
  * @return {undefined}
  **/
-function onKeyDown() {
+function handleKeydown(e) {
   const escapeSite = "https://www.google.com.au/";
-  // add hotkey trigger
-  document.addEventListener("keydown", function (e) {
-    if (e.keyCode === 27) {
-      quickExit(escapeSite);
+
+  if (e.key === "Escape") {
+    quickExit(escapeSite);
       if (e) {
         // stop escape from cancelling redirect
         e.preventDefault();
@@ -40,8 +39,7 @@ function onKeyDown() {
         e.returnValue = false;
       }
       return false;
-    }
-  });
+  }
 }
 
 /**

package/src/components/bs5/quickexit/quickexit.scss

@@ -25,7 +25,7 @@
   padding-inline: var(--#{$prefix}gutter-x);
   position: fixed;
   width: 100%;
-  z-index: 200;
+  z-index: 1;
 
   &-inner {
     display: flex;
@@ -121,7 +121,8 @@
       font-size: calc(var(--#{$prefix}body-font-size) * 0.875);
       margin-block-end: 0;
     }
-    .qld-quick-exit-button {
+    .qld-quick-exit-button,
+    .qld-quick-exit-button:focus {
       border-color: var(--#{$prefix}quick-exit-button-bg-colour);
       background-color: var(--#{$prefix}quick-exit-button-bg-colour);
       color: var(--#{$prefix}quick-exit-button-text-colour);
@@ -166,7 +167,7 @@
     position: -webkit-sticky;
     position: sticky;
     inset-block-start: 0;
-    z-index: 500;
+    z-index: 1;
     padding-block: 20px;
     padding-inline: 40px;
     .container {

package/src/components/bs5/typography/typography.scss

@@ -82,3 +82,27 @@ h6,
         margin-block-start: 1.5rem;
     }
 }
+
+.abstract,
+p.abstract {
+    font-size: $abstract-font-size;
+    line-height: $abstract-line-height;
+    font-weight: $abstract-font-weight;
+    color: var(--qld-abstract-color);
+}
+
+.quote,
+p.quote {
+    font-size: $quote-font-size;
+    line-height: $quote-line-height;
+    font-weight: $quote-font-weight;
+    color: var(--qld-quote-color);
+}
+
+.caption,
+p.caption {
+    font-size: $caption-font-size;
+    line-height: $caption-line-height;
+    font-weight: $caption-font-weight;
+    color: var(--qld-caption-color);
+}

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

@@ -9,31 +9,50 @@ export default {
   render: () => {
     return `
     <div class="qld-content-body" id="content">
-    <h1>Heading 1</h1>
-    <h2>Heading 2</h2>
-    <h3>Heading 3</h3>
-    <h4>Heading 4</h4>
-    <h5>Heading 5</h5>
-    <h6>Heading 6</h6>
-    <p>Elementum euismod fringilla vitae varius. Justo imperdiet justo <strong>tincidunt vestibulum venenatis</strong> morbi molestie dolor orci. <a href="#">Risus sapien urna blandit eget</a>. Mi, nisl facilisis pellentesque bibendum. Gravida lobortis vel amet, ullamcorper vestibulum, in curabitur odio pulvinar.</p>
-    <p>Example paragraph. <a href="#">Internal link</a> and an <a href="#" rel="external">external link</a>.</p>
-    <p><a class="qld__text-link--no-visited" href="#no-visit">Link without visited state</a></p>
-    <ul>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    </ul>
-    <ol>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    <li>List item</li>
-    </ol>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <hr>
+
+      <p class="abstract">Abstract text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <p class="quote">Quote text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <p>Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <p class="caption">Caption text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+      <hr>
+
+      <h4>Links </h4>
+      <p><a href="#">Internal link</a></p>
+      <p><a href="#" rel="external">External link</a></p>
+      <p><a class="qld__text-link--no-visited" href="#no-visit">Link without visited state</a></p>
+
+      <hr>
+
+      <h4>Unordered list </h4>
+      <ul style="margin-block-start: 1rem">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ul>
+
+      <hr>
+      <h4>Ordered list </h4>
+      <ol style="margin-block-start: 1rem">
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+        <li>List item</li>
+      </ol>
     </div>
 
+    <hr>
     <dl>
       <dt>Website:</dt>
       <dd><a href="https://www.qld.gov.au" target="_blank">https://www.qld.gov.au</a></dd>

package/src/css/qld-palettes.scss

@@ -11,6 +11,9 @@
   --qld-body-font-weight: #{$body-font-weight};
   --qld-border-color: var(--qld-light-border);
   --qld-headings-color: #{$headings-color};
+  --qld-abstract-color: #{$color-default-color-light-text-default};
+  --qld-quote-color: #{$color-default-color-light-text-default};
+  --qld-caption-color: #{$color-default-color-light-text-lighter};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
   --qld-link-hover-color: var(--qld-link-color);
@@ -57,6 +60,9 @@
   --qld-body-color: #fff;
   --qld-border-color: var(--qld-dark-border);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
+  --qld-abstract-color: #{$color-default-color-dark-text-default};
+  --qld-quote-color: #{$color-default-color-dark-text-default};
+  --qld-caption-color: #{$color-default-color-dark-text-lighter};
   --qld-link-color: #{$color-default-color-dark-link-default};
   --qld-link-color-rgb: 255, 255, 255;
   --qld-link-hover-color: #{$color-default-color-dark-link-default};

package/src/css/qld-variables.scss

@@ -12,6 +12,7 @@ $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-light-text: $color-default-color-light-text-default;
 $qld-dark-text: $color-default-color-dark-text-default;
 $qld-dark-border: $color-default-color-dark-border-default;
 $qld-dark-alt-border: $color-default-color-dark-border-alt;

package/src/css/variables/type.scss

@@ -1,3 +1,4 @@
+@use "../../css/functions" as f;
 //Typography
 $font-family-sans-serif:
   "Noto Sans",
@@ -56,3 +57,18 @@ $qld-heading-color: $core-default-color-brand-primary-light-green;
 $link-color: $qld-brand-primary;
 $link-hover-color: $qld-brand-primary;
 $link-visited-color: $qld-link-visited;
+
+// Abstract text styles
+$abstract-font-size: $font-size-base * 1.5;
+$abstract-line-height: f.snap-line-height(1.33);
+$abstract-font-weight: 400;
+
+// Quote text styles
+$quote-font-size: $font-size-base * 1.25;
+$quote-line-height: f.snap-line-height(1.4);
+$quote-font-weight: 600;
+
+// Caption text styles
+$caption-font-size: $font-size-base * 0.875;
+$caption-line-height: f.snap-line-height(1.43);
+$caption-font-weight: 400;

package/src/js/qld.bootstrap.js

@@ -23,8 +23,6 @@ import { initGlobalAlerts } from "./../components/bs5/globalAlert/globalAlert.fu
 import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.functions";
 import { printPage } from "./utils";
 
-window.addEventListener("click", initQuickexit, true);
-window.addEventListener("keydown", initQuickexit, true);
 window.addEventListener("DOMContentLoaded", () => {
   backToTop();
 
@@ -94,8 +92,6 @@ window.addEventListener("DOMContentLoaded", () => {
   initBreadcrumb();
 
   // Quick exit
-  window.addEventListener("click", initQuickexit, true);
-  window.addEventListener("keydown", initQuickexit, true);
   initQuickexit();
 
   // Accordion