@qld-gov-au/qgds-bootstrap5 1.0.19 → 1.0.21

package/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as SidenavWrapperStories from "./sidenavWrapper.stories"
+
+<Meta of={SidenavWrapperStories} />
+
+# Side Wrapper navigation
+This is a partial-block to embed more content inside another partial https://handlebarsjs.com/guide/partials.html#partial-blocks
+<Canvas>
+  <Story of={SidenavWrapperStories.Default} />
+</Canvas>
+

package/src/components/bs5/sidenavWrapper/SidenavWrapper.test.js

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./sidenavWrapper.test.hbs?raw";
+
+export class SidenavWrapperTest {
+
+  // Use the global Component class to create a new instance of the Sidenav component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

package/src/components/bs5/sidenavWrapper/sidenavWrapper.hbs

@@ -0,0 +1,4 @@
+<!-- Side Nav -->
+<div class="col-12 col-lg-3 pe-lg-0 order-last order-lg-first mt-5 mt-lg-0">
+  {{> @partial-block }}
+</div>

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

@@ -0,0 +1,68 @@
+// ComponentExample.stories.js
+import { SidenavWrapperTest } from "./SidenavWrapper.test.js";
+import defaultdata from "./../sidenav/sidenav.data.json";
+import init from "./../../../js/handlebars.init";
+import Handlebars from "handlebars";
+export default {
+  tags: ["autodocs"],
+  title: "!Layout/Components/Side Navigation Wrapper",
+  render: (args) => {
+    init(Handlebars);
+    return new SidenavWrapperTest(args).html;
+  },
+
+  argTypes: {
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ["navlist", "navtitlelink"],
+      },
+    },
+  },
+};
+
+/**
+ * Default side navigation
+ * 
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+        
+          ${Story()}
+        </div>
+      </div>
+      `;
+    },
+  ],
+};
+
+
+/**
+ * Dark side navigation
+ * 
+ */
+export const Dark = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+        <div class="col-lg-4 col-md-5">
+        <div class="dark">
+          ${Story()}
+        </div>
+        </div>
+        </div>
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs

@@ -0,0 +1,15 @@
+<!-- Side Nav test -->
+<div class="container-fluid">
+<div class="row">
+<p>pre sidenaveWrapper prefix</p>
+</div>
+  <div class="row">
+{{#>sidenavWrapper}}
+  {{> sidenav }}
+  <p>inner sidenavWrapper data</p>
+{{/sidenavWrapper}}
+<div class="col-12 col-lg-8 ps-lg-64 qld-content-body" id="content">
+<p>post sidenaveWrapper suffix</p>
+</div>
+</div>
+</div>

package/src/components/bs5/tag/tag.scss

@@ -96,7 +96,7 @@ $close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     .tag-item {
         display: inline-block;
         color: var(--#{$prefix}dark-grey-muted);
-        margin: 0 0.5rem 0.5rem 0;
+        margin-top: 0.5rem;
         padding: 0 0.5rem;
         list-style-type: none;
         border: 1px solid var(--#{$prefix}light-grey);

package/src/components/bs5/textbox/textInput.scss

@@ -40,7 +40,7 @@
 }
 
 .qld-text-input-label {
-    color: var(--#{$prefix}color-default-color-light-text-lighter);
+    color: var(--#{$prefix}text-grey);
     display: block;
     font-weight: 600;
     line-height: 1.5;
@@ -161,7 +161,7 @@ select.qld-select.qld-input-success:not(:focus) {
 }
 
 .qld-select {
-    padding: 10px 18px;
+    padding: 12px 18px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23008635' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     appearance: none;

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

@@ -32,6 +32,15 @@ export default {
     <li>List item</li>
     </ol>
     </div>
+
+    <dl>
+      <dt>Website:</dt>
+      <dd><a href="https://www.qld.gov.au" target="_blank">https://www.qld.gov.au</a></dd>
+      <dt>Street address:</dt>
+      <dd>123 Street Street</dd>
+      <dd>Suburb QLD 4000</dd>
+    </dl>
+
     `;
   },
 

package/src/components/bs5/video/video.hbs

@@ -45,6 +45,8 @@
     </div>
 
     {{! Render the transcript content in an accordion template }}
-    {{{ transcriptAccordion }}}
+    {{#if transcriptContent}}
+        {{{ transcriptAccordion }}}
+    {{/if}}
 
 </section>

package/src/components/common/layout/content.scss

@@ -1,3 +1,6 @@
 .qld-content {
     padding: 4rem 1.25rem 4.5rem 1.25rem;
+    @include media-breakpoint-up(lg) {
+        padding: 4rem 0 4.5rem;
+    }
 }

package/src/js/handlebars.helpers.js

@@ -1,22 +1,21 @@
 /* global Handlebars */
-
 /**
  * Registers Handlebars Helpers
- * @param {module} Handlebars Templating engine
+ * @param {Handlebars} handlebars Templating engine
  * @returns {void} Result of the helper operation
  */
 
-export default function handlebarsHelpers(Handlebars) {
-  // Contains - 
-  Handlebars.registerHelper("contains", function (needle, haystack, options) {
-    needle = Handlebars.escapeExpression(needle);
-    haystack = Handlebars.escapeExpression(haystack);
+export default function handlebarsHelpers(handlebars) {
+  // contains - if first object is in collection (second object) to return true
+  handlebars.registerHelper("contains", function (needle, haystack, options) {
+    needle = handlebars.escapeExpression(needle);
+    haystack = handlebars.escapeExpression(haystack);
     return haystack.indexOf(needle) > -1
       ? options.fn(this)
       : options.inverse(this);
   });
-  // ifCond - checks conditions 
-  Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
+  // ifCond - checks conditions
+  handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
     switch (operator) {
     case "==":
       return v1 == v2 ? options.fn(this) : options.inverse(this);
@@ -48,14 +47,61 @@ export default function handlebarsHelpers(Handlebars) {
       return options.inverse(this);
     }
   });
-  // Checks is expected type
-  Handlebars.registerHelper('isType', function (value, expected, options) {
+  // isType - Checks is expected type
+  handlebars.registerHelper('isType', function (value, expected, options) {
     if (value === expected) {
       return options.fn(this); // Render the block if condition is true
     } else {
       return options.inverse(this); // Render the else block if present
     }
   });
+  // ifAny - {{{#ifAny variable1 variable2 variable3 variable4 etc}}, if any set then return true
+  handlebars.registerHelper('ifAny', function (...args) {
+    const options = args.pop(); // The last argument is the options object
+    return args.some(arg => !!arg) ? options.fn(this) : options.inverse(this);
+  });
+  // now - return current timestamp i.e {{now}}
+  handlebars.registerHelper('now', function() {
+    return new Date().toISOString();
+  });
+  // formatDate - Format Date, for footer meta data i.e {{formatDate '2023-06-23'}}
+  handlebars.registerHelper('formatDate', function(dateString, defaultDate, format) {
+    // Use the dateString if provided, otherwise use the defaultDate, otherwise error
+    let date;
+    if (dateString) {
+      date = new Date(dateString);
+    }
+    if (isNaN(date) && defaultDate) {
+      date = new Date(defaultDate);
+    }
+
+    // Check if the date is valid
+    if (isNaN(date)) {
+      return 'Invalid Date';
+    }
+
+    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    var day = date.getDate();
+    var month = monthNames[date.getMonth()];
+    var year = date.getFullYear();
+    // Format date based on the format string
+    switch (format) {
+    case 'YYYY':
+      return `${year}`;
+    case 'MMMM YYYY':
+      return `${month} ${year}`;
+    default:
+      return `${day} ${month} ${year}`;
+    }
+  });
+
+  // formatDateOrToday - Format Date if passed or today i.e. {{formatDateOrToday '2023-06-23'}} or {{formatDateOrToday}} <!-- This will use the current date -->
+  handlebars.registerHelper('formatDateOrToday', function(dateString, format) {
+    // Use the current date if dateString is missing or invalid
+    const dateToFormat = dateString || new Date().toISOString();
+    // Call the formatDate helper with the determined date and format
+    return handlebars.helpers.formatDate(dateString, dateToFormat, format);
+  });
 }
 
 if(typeof(Handlebars) !== 'undefined') {

package/src/js/handlebars.init.js

@@ -1,6 +1,34 @@
+/* global Handlebars */
 import handlebarsHelpers from "./handlebars.helpers.js";
-import Handlebars from "handlebars";
-export * from "./handlebars.helpers.js";
+import handlebarsPartials from "./handlebars.partials.js";
 
-export const init = () => handlebarsHelpers(Handlebars);
 
+let isHandlebarsHelpersAndPartialsRegistered = false;
+
+/*
+ * init function to load all HandleBar partials and helpers into passed in handlebars
+ * by default the helpers and partials will autoload if handleBars is found in environment
+ *
+ * @param {Handlebars} handlebars
+ */
+export default function init(handlebars) {
+  if (typeof(handlebars) === 'undefined') {
+    console.error("Handlebars.init requires HandleBars");
+  }
+
+  if(typeof(handlebars) !== 'undefined') {
+    if (!isHandlebarsHelpersAndPartialsRegistered) {
+      isHandlebarsHelpersAndPartialsRegistered = true;
+    } else {
+      console.log("HandleBars Helpers And Partials already loaded, loading again")
+    }
+    handlebarsHelpers(handlebars);
+
+    handlebarsPartials(handlebars);
+  } else {
+    console.log("Handlebars not found, init failed");
+  }
+}
+if(typeof(Handlebars) !== 'undefined') {
+  init(Handlebars);
+}

package/src/js/handlebars.partials.js

@@ -0,0 +1,96 @@
+/* global Handlebars */
+/** THIS IS A GENERATED FILE **/
+
+import accordion from "../components/bs5/accordion/accordion.hbs?raw";
+import banner from "../components/bs5/banner/banner.hbs?raw";
+import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw";
+import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw";
+import breadcrumbsWrapper from "../components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs?raw";
+import button from "../components/bs5/button/button.hbs?raw";
+import callout from "../components/bs5/callout/callout.hbs?raw";
+import card from "../components/bs5/card/card.hbs?raw";
+import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw";
+import contentFooterWrapper from "../components/bs5/contentFooterWrapper/contentFooterWrapper.hbs?raw";
+import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?raw";
+import correctincorrect from "../components/bs5/correctincorrect/correctincorrect.hbs?raw";
+import dateinput from "../components/bs5/dateinput/dateinput.hbs?raw";
+import footer from "../components/bs5/footer/footer.hbs?raw";
+import footerForgov from "../components/bs5/footer/footerForgov.hbs?raw";
+import formcheck from "../components/bs5/formcheck/formcheck.hbs?raw";
+import fullPage from "../components/bs5/fullPageWrapper/fullPage.hbs?raw";
+import globalAlert from "../components/bs5/globalAlert/globalAlert.hbs?raw";
+import head from "../components/bs5/head/head.hbs?raw";
+import header from "../components/bs5/header/header.hbs?raw";
+import inpageAlert from "../components/bs5/inpageAlert/inpageAlert.hbs?raw";
+import inpagenav from "../components/bs5/inpagenav/inpagenav.hbs?raw";
+import mainContainerWrapper from "../components/bs5/mainContainerWrapper/mainContainerWrapper.hbs?raw";
+import metaDcTerms from "../components/bs5/metaDcTerms/metaDcTerms.hbs?raw";
+import metaOpenGraph from "../components/bs5/metaOpenGraph/metaOpenGraph.hbs?raw";
+import modal from "../components/bs5/modal/modal.hbs?raw";
+import navbar from "../components/bs5/navbar/navbar.hbs?raw";
+import pagination from "../components/bs5/pagination/pagination.hbs?raw";
+import quickexit from "../components/bs5/quickexit/quickexit.hbs?raw";
+import searchInput from "../components/bs5/searchInput/searchInput.hbs?raw";
+import select from "../components/bs5/select/select.hbs?raw";
+import sidenav from "../components/bs5/sidenav/sidenav.hbs?raw";
+import sidenavWrapper from "../components/bs5/sidenavWrapper/sidenavWrapper.hbs?raw";
+import spinner from "../components/bs5/spinner/spinner.hbs?raw";
+import table from "../components/bs5/table/table.hbs?raw";
+import tag from "../components/bs5/tag/tag.hbs?raw";
+import textarea from "../components/bs5/textarea/textarea.hbs?raw";
+import textbox from "../components/bs5/textbox/textbox.hbs?raw";
+import typography from "../components/bs5/typography/typography.hbs?raw";
+import video from "../components/bs5/video/video.hbs?raw";
+
+
+/**
+ * Registers Handlebars Partials
+ * @param {Handlebars} handlebars Templating engine
+ * @returns {void} Result of the helper operation
+ */
+export default function handlebarsPartials(handlebars) {
+    handlebars.registerPartial("accordion", accordion);
+    handlebars.registerPartial("banner", banner);
+    handlebars.registerPartial("blockquote", blockquote);
+    handlebars.registerPartial("breadcrumbs", breadcrumbs);
+    handlebars.registerPartial("breadcrumbsWrapper", breadcrumbsWrapper);
+    handlebars.registerPartial("button", button);
+    handlebars.registerPartial("callout", callout);
+    handlebars.registerPartial("card", card);
+    handlebars.registerPartial("contentFooter", contentFooter);
+    handlebars.registerPartial("contentFooterWrapper", contentFooterWrapper);
+    handlebars.registerPartial("contentWrapper", contentWrapper);
+    handlebars.registerPartial("correctincorrect", correctincorrect);
+    handlebars.registerPartial("dateinput", dateinput);
+    handlebars.registerPartial("footer", footer);
+    handlebars.registerPartial("footerForgov", footerForgov);
+    handlebars.registerPartial("formcheck", formcheck);
+    handlebars.registerPartial("fullPage", fullPage);
+    handlebars.registerPartial("globalAlert", globalAlert);
+    handlebars.registerPartial("head", head);
+    handlebars.registerPartial("header", header);
+    handlebars.registerPartial("inpageAlert", inpageAlert);
+    handlebars.registerPartial("inpagenav", inpagenav);
+    handlebars.registerPartial("mainContainerWrapper", mainContainerWrapper);
+    handlebars.registerPartial("metaDcTerms", metaDcTerms);
+    handlebars.registerPartial("metaOpenGraph", metaOpenGraph);
+    handlebars.registerPartial("modal", modal);
+    handlebars.registerPartial("navbar", navbar);
+    handlebars.registerPartial("pagination", pagination);
+    handlebars.registerPartial("quickexit", quickexit);
+    handlebars.registerPartial("searchInput", searchInput);
+    handlebars.registerPartial("select", select);
+    handlebars.registerPartial("sidenav", sidenav);
+    handlebars.registerPartial("sidenavWrapper", sidenavWrapper);
+    handlebars.registerPartial("spinner", spinner);
+    handlebars.registerPartial("table", table);
+    handlebars.registerPartial("tag", tag);
+    handlebars.registerPartial("textarea", textarea);
+    handlebars.registerPartial("textbox", textbox);
+    handlebars.registerPartial("typography", typography);
+    handlebars.registerPartial("video", video);
+
+}
+if(typeof(Handlebars) !== 'undefined') {
+  handlebarsPartials(Handlebars);
+}

package/src/main.js

@@ -135,4 +135,4 @@ window.addEventListener("DOMContentLoaded", () => {
       transcript.addEventListener("click", videoTranscriptTitle);
     });
   })();
-});
+});

package/src/scss/qld-print.scss

@@ -208,6 +208,11 @@
     .breadcrumb li:before, .breadcrumb a:before {
       display: none !important;
     }
+    // displaying full breadcrumbs
+    .breadcrumb .breadcrumb-item.breadcrumb-toggle {
+      display: none!important;
+    }
+
 
      /* A few simple lines */
   #qg-site-header {
@@ -264,7 +269,7 @@
     }
   
     /* Hide elements not needed for printing */
-    .navbar, footer, .sidebar {
+    .navbar, footer, .sidebar, footer.qld-footer.dark {
       display: none;
     }
 
@@ -324,14 +329,21 @@
     .global-alert {
       display: none;
     }
+
     
     a.btn:after {
         display: block;
         content:" (" attr(href) ")";
     }
+    a.stretched-link:after {
+      content:" (" attr(href) ")";
+      font-size: 13px;
+      line-height: 1;
+      position: relative;
+    }
     /* Custom qld- styles */
-    .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed {
-      display: none;
+    .qld-side-navigation, .qld-inpage-nav, .qld__header__site-search.qld__header__site-search--closed, .qld__header__pre-header {
+      display: none !important;
     }
     .qld__header__brand-image.qld__header__brand-image_subtype, .qld__header__brand-image {
       display: block !important;
@@ -340,7 +352,7 @@
     .qld__header__brand a:after {
       display: none;
     }
-  
+    
     /* adding class to print data-href from breadcrumb link */
     .print-current-url {
       display: block;
@@ -350,6 +362,12 @@
 
   }
 
+  /* Print colors to show background elements */
+  
+  .alert, .card-img {
+    print-color-adjust: exact;
+  }
+  
   /*print styles for forms*/
 @media only print {
     form abbr[title*=required]:after {

package/src/scss/qld-type.scss

@@ -99,6 +99,10 @@ body {
   p {
     margin-top: 1.5rem;
     margin-bottom: 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   ul, ol, p {
@@ -108,15 +112,37 @@ body {
   li {
     margin-top: 0.5rem;
   }
+
 }
 
 // Apply correct bold font-weight
-h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, 
-strong, b, th {
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
+strong, b, th, dt {
   font-weight: $font-weight-bold;
 }
 
 
+// Definition list
+dt {
+  margin-top: 0.5rem;
+}
+
+dd {
+  margin-bottom: 0;
+}
+
+// Custom format for last updated dl
+dl.qld-content-dates {
+  display: flex;
+  gap: 4px;
+
+  dd {
+    margin-top: 0.5rem;
+  }
+
+}
+
+
 // Light, Light alt
 
 h1, h2, h3, h4, h5, h6 {
@@ -127,9 +153,11 @@ a,
 a.nav-link {
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
+  text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default);
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);
+    text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default-hover);
   }
 
     &:visited {
@@ -160,7 +188,7 @@ caption {
   h1, h2, h3, h4, h5, h6 {
     color: var(--#{$prefix}color-default-color-dark-text-heading);
   }
-  
+
 
   body & {
       color: var(--qld-body-color);
@@ -206,3 +234,4 @@ a.nostyle {
   background: var(--qld-selection-bg);
   text-shadow: none;
 }
+

package/src/scss/qld-variables.scss

@@ -60,7 +60,7 @@ $qld-soft-grey : $color-default-color-light-border-alt;
 $qld-dark-grey-muted : $color-default-color-light-text-lighter; 
 $qld-text-grey : $color-default-color-light-text-default;
 $qld-hint-text-color: $color-default-color-light-text-lighter;
-$qld-hint-text-color-muted: $core-default-color-neutral-lighter;
+$qld-hint-text-color-muted: $color-default-color-dark-text-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;

package/src/stories/integration/MainIntegration.js

@@ -0,0 +1,29 @@
+/* global, __dirname */
+
+import init from "./../../js/handlebars.init";
+import Handlebars from 'handlebars';
+
+export class MainIntegration {
+
+  constructor(data, args = {}) {
+    init(Handlebars);
+    console.log("contracutor");
+    this.data = data;
+    this.args = args;
+
+    this.template = data.template;
+    // Compile the template
+    this.compiled = Handlebars.compile(this.template)(this.data);
+
+    // For debugging purposes
+    console.log('Template:', this.template);
+    console.log('Data:', this.data);
+    //console.log('Compiled:', this.compiled);
+
+    return {
+      template: this.template,
+      data: this.data,
+      html: this.compiled,
+    };
+  }
+}

package/src/stories/integration/MainIntegration.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as Integration from "./integration.stories"
+
+<Meta of={Integration} />
+
+# Integration details
+<Canvas>
+  <Story of={Integration.Default} />
+</Canvas>
+

package/src/stories/integration/breadcrumb.data.json

@@ -0,0 +1,28 @@
+{
+  "breadcrumbs": [
+    {
+      "link": "#",
+      "linktext": "For government"
+    },
+    {
+      "link": "#",
+      "linktext": "Information and communication technology"
+    },
+    {
+      "link": "#",
+      "linktext": "Communication and publishing"
+    },
+    {
+      "link": "#",
+      "linktext": "Website and digital publishing"
+    },
+    {
+      "link": "#",
+      "linktext": "Website standards, guidelines and templates"
+    },
+    {
+      "link": "#",
+      "linktext": "Single Website Experience"
+    }
+  ]
+}

package/src/stories/integration/content.data.json

@@ -0,0 +1,3 @@
+{
+  "input": "data1"
+}

package/src/stories/integration/contentFooter.data.json

@@ -0,0 +1,3 @@
+{
+    "lastUpdated": "1987/12/10"
+}