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

package/src/components/bs5/searchInput/search.functions.js

@@ -0,0 +1,170 @@
+import { createPopper } from '@popperjs/core';
+import { defaultSuggestions } from './search.json';
+
+/**
+ * Fetches data from the provided URL.
+ *
+ * @param {string} url - The URL to fetch data from.
+ * @param {string} type - The type of data to fetch (suggestions or services).
+ * @returns {Promise<Object>} - A promise that resolves to the fetched data.
+ */
+async function fetchData(url, type) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error(`Error fetching ${type}:`, error);
+    return {};
+  }
+}
+
+/**
+ * Sets the selected suggestion into the input field and submits the form.
+ *
+ * @param {string} value - The selected suggestion.
+ * @returns {void}
+ */
+export function selectSuggestion(value) {
+  const form = document.querySelector('.site-search');
+  const searchInput = form.querySelector('.qld-search-input input');
+  const suggestions = form.querySelector('.suggestions');
+
+  if (searchInput && suggestions && form) {
+    searchInput.value = value.trim();
+    suggestions.style.display = 'none';
+
+    // Retrieve additional params
+    const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
+    const profile = searchInput.getAttribute('data-profile') || 'qld';
+    const numRanks = searchInput.getAttribute('data-numranks') || '10';
+    const tiers = searchInput.getAttribute('data-tiers') || 'off';
+
+    // Form action
+    const actionUrl = form.getAttribute('action');
+
+    // Construct the URL with proper parameters
+    const params = new URLSearchParams({
+      query: value.trim(),
+      collection: collection,
+      profile: profile,
+      num_ranks: numRanks,
+      tiers: tiers
+    });
+
+    const searchUrl = `${actionUrl}?${params.toString()}`;
+
+    // Manually set the window location to the constructed URL
+    window.location.href = searchUrl;
+  }
+}
+
+/**
+ * Shows suggestions based on the user's input.
+ *
+ * @param {string} value - The current input value.
+ * @param {boolean} isDefault - Whether to show default suggestions or not.
+ * @returns {void}
+ **/
+export async function showSuggestions(value = '', isDefault = false) {
+  const form = document.querySelector('.site-search');
+  const searchInput = form.querySelector('.qld-search-input input');
+  const suggestions = form.querySelector('.suggestions');
+
+  // Search input attributes
+  const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search'; 
+  const profile = searchInput.getAttribute('data-profile') || 'qld';
+  const suggestUrl = searchInput.getAttribute('data-suggestions') || '10';
+  const resultsUrl = searchInput.getAttribute('data-results-url') || 'off';
+
+  if (!suggestions || !searchInput) {
+    console.error("Required elements not found.");
+    return;
+  }
+
+  // Clear previous suggestions and services
+  suggestions.innerHTML = '';
+  const loadedSuggestions = defaultSuggestions;
+
+  if (isDefault) {
+    suggestions.innerHTML = `
+      <div class="suggestions-category mt-2">
+        <strong>Popular services</strong>
+        <ul class="mt-2">${loadedSuggestions.popular_services.slice(0, 4).map(item => `<li onclick="window.selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
+      </div>
+      <hr>
+      <div class="suggestions-category mt-2">
+        <strong>Browse by category</strong>
+        <ul class="mt-2">${loadedSuggestions.categories.slice(0, 4).map(item => `<li onclick="window.selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
+      </div>
+      <!--${loadedSuggestions.options.view_more ? `<div class="suggestions-category mt-4 mb-4"><a href="${loadedSuggestions.options.href}">${loadedSuggestions.options.label}</a></div>-->` : ''}
+    `;
+    suggestions.classList.add('show');
+    createPopper(searchInput, suggestions, {
+      placement: 'bottom-start',
+    });
+    suggestions.style.display = 'block';
+    return;
+  }
+
+  if (value.length === 0) {
+    suggestions.innerHTML = '';
+    suggestions.style.display = 'none';
+    return;
+  }
+
+  if (suggestUrl) {
+    
+    const fetchedSuggestions = await fetchData(`${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`, 'suggestions');
+
+    // Use the fetched suggestions to populate the suggestions dropdown
+    if (fetchedSuggestions.length > 0) {
+      suggestions.innerHTML = `
+        <div class="suggestions-category mt-2">
+          <strong>Suggestions</strong>
+          <ul class="mt-2">${fetchedSuggestions.slice(0, 4).map(item => {
+            const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '<strong>$1</strong>');
+            return `<li onclick="window.selectSuggestion('${item}')"><a href="#">${highlightedText}</a></li>`;
+          }).join('')}</ul>
+        </div>
+      `;
+      suggestions.classList.add('show');
+
+      // Initialize Popper.js to manage the dropdown position
+      createPopper(searchInput, suggestions, {
+        placement: 'bottom-start',
+      });
+      suggestions.style.display = 'block';
+    } else {
+      suggestions.innerHTML = '';
+      suggestions.style.display = 'none';
+    }
+  }
+
+  if (resultsUrl) {
+    const fetchedServices = await fetchData(`${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`, 'services');
+
+    // Use the fetched services to populate the services dropdown
+    if (fetchedServices.response.resultPacket && fetchedServices.response.resultPacket.results.length > 0) {
+      suggestions.innerHTML += `
+        <div class="suggestions-category feature pt-2">
+          <strong>Services</strong>
+          <ul class="mt-2">${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `<li class="pb-2" onclick="window.selectSuggestion('${item.title}')"><a href="${item.liveUrl}">${item.title}</a></li>`).join('')}</ul>
+        </div>
+      `;
+      suggestions.classList.add('show');
+
+      // Initialize Popper.js to manage the dropdown position
+      createPopper(searchInput, suggestions, {
+        placement: 'bottom-start',
+      });
+      suggestions.style.display = 'block';
+    }
+  }
+}
+
+// Attach the function to the window object to make it globally accessible
+window.selectSuggestion = selectSuggestion;

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

@@ -7,5 +7,14 @@
 	"buttonID": "search-button",
 	"buttonType": "submit",
 	"buttonLabel": "Search",
-	"ariaLabel": "Search website"
+	"ariaLabel": "Search website",
+	"suggestions": true,
+	"tags": {
+		"collection": "qgov~sp-search",
+		"profile": "qld",
+		"numranks": "10",
+		"tiers": "off",
+		"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
+		"results-url": "https://discover.search.qld.gov.au/s/search.json"
+	}
 }

package/src/components/bs5/searchInput/searchInput.hbs

@@ -2,15 +2,21 @@
     QGDS Component: Search input 
 -->
 <div class="container {{variantClass}}">
-    
+
     <div class="qld-search-input {{customClass}}">
 
-        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}" aria-label="{{ ariaLabel }}" />
-    
+        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}"
+            aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+
         <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
             <span class="btn-icon"></span>
             <span class="btn-label">{{ buttonLabel }}</span>
         </button>
 
+        {{#if suggestions}}
+        <ul class="suggestions suggestions__group"></ul>
+        {{/if}}
+
     </div>
+
 </div>

package/src/components/bs5/searchInput/searchInput.scss

@@ -1,5 +1,9 @@
-.qld-search-input {
+// ----------------------------------------------------------------------------------------------------------------------
+// Header - palettes and second hand variables:
+@import './colours';
+// ----------------------------------------------------------------------------------------------------------------------
 
+.qld-search-input {
     //Default state - unfocused, unhovered
     --text-color: var(--qld-dark-grey-muted);
     --placeholder-color: var(--qld-dark-grey-muted);
@@ -11,8 +15,101 @@
     --icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5C11.5 4.71875 10.5312 3.09375 9 2.1875C7.4375 1.28125 5.53125 1.28125 4 2.1875C2.4375 3.09375 1.5 4.71875 1.5 6.5C1.5 8.3125 2.4375 9.9375 4 10.8438C5.53125 11.75 7.4375 11.75 9 10.8438C10.5312 9.9375 11.5 8.3125 11.5 6.5ZM10.5312 11.625C9.40625 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.4375 11.5938 10.5625L15.7812 14.7188C16.0625 15.0312 16.0625 15.5 15.7812 15.7812C15.4688 16.0938 15 16.0938 14.7188 15.7812L10.5312 11.625Z' fill='%23414141'/%3E%3C/svg%3E%0A");
 
     position: relative;
-    min-width: 15rem; 
-    max-width: 40rem; 
+    min-width: 22.5rem;
+
+    //Search dropdown
+    .suggestions {
+        position: absolute;
+        display: none;
+        left: 0;
+        top: 100%;
+        width: 100%;
+        z-index: 1;
+        border-radius: .5rem;
+        background: var(--#{$prefix}site-search-suggestions-bg);
+        box-shadow: var(--#{$prefix}site-search_boxshadow);
+        border-bottom: solid .25rem var(--#{$prefix}site-search-suggestions-hover__border_color);
+
+        .suggestions-category {
+            padding: 0 1rem;
+        }
+
+        hr {
+            margin: 0;
+        }
+
+        // Featured search result styles
+        .feature {
+            background-color: var(--#{$prefix}site-search-suggestions-feature_bg);
+
+            strong {
+                color: var(--#{$prefix}site-search-suggestions-feature_text-color);
+            }
+
+            ul {
+                li {
+                    &:hover {
+                        background-color: var(--#{$prefix}site-search-suggestions-feature_hover);
+                    }
+
+                    a {
+                        color: var(--#{$prefix}site-search-suggestions-feature_text-color);
+                    }
+                }
+            }
+        }
+
+        // Show when active
+        &.show {
+            display: block;
+        }
+
+        &__group {
+            padding: 0;
+
+            a,
+            strong {
+                color: var(--site-search-input-color);
+                font-weight: 400;
+                font-size: 1rem;
+                text-decoration: none;
+            }
+
+            strong {
+                font-weight: 600;
+            }
+
+            ul {
+                padding: 0;
+
+                li {
+                    min-height: 3rem;
+                    list-style: none;
+                    cursor: pointer;
+
+                    a {
+                        vertical-align: middle;
+                        vertical-align: -webkit-baseline-middle;
+
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+
+                    &:hover {
+                        background-color: var(--#{$prefix}site-search-suggestions-hover);
+                        margin: 0 -1rem;
+                        padding: 0 1rem;
+
+                        a {
+                            text-decoration: underline;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
 
     &.full-width {
         max-width: 100%;
@@ -27,20 +124,24 @@
         left: calc(1rem - 2px);
         width: 1.5rem;
         height: 1.5rem;
-        background-color: var(--icon-color); 
+        background-color: var(--icon-color);
         mask: var(--icon) center center / 1.25rem no-repeat;
     }
 
     //Icon color is scoped against the parent container, not the input :( 
-    &:has(.form-control:hover) { --icon-color: var(--qld-dark-grey-muted); }
-    &:has(.form-control:focus) { --icon-color: var(--qld-text-grey); }
+    &:has(.form-control:hover) {
+        --icon-color: var(--qld-dark-grey-muted);
+    }
 
-    .form-control {
+    &:has(.form-control:focus) {
+        --icon-color: var(--qld-text-grey);
+    }
 
+    .form-control {
         padding: 0.75rem 1rem 0.75rem 3rem;
         border-radius: 0.25rem;
         border: 2px solid var(--border-color);
-        background: var(--background-color); 
+        background: var(--background-color);
         padding-right: 6rem;
         color: var(--text-color);
 
@@ -64,19 +165,18 @@
             --placeholder-color: var(--qld-text-grey);
             --border-color: var(--qld-soft-grey);
             --background-color: var(--qld-white);
-            
+
             outline: 3px solid var(--outline-color);
             outline-offset: 2px;
         }
 
-        + button {
+        +button {
             position: absolute;
             top: 0;
             bottom: 0;
             right: 0;
-            z-index: 10;
             border-radius: 0 0.25rem 0.25rem 0;
-    
+
             // Adjust button padding to allow for input borders of 2px top and bottom
             padding-top: calc(0.75rem - 2px);
             padding-bottom: calc(0.75rem - 2px);
@@ -88,7 +188,7 @@
                 height: 1.5rem;
                 height: 1.5rem;
                 margin-right: 0;
-                background-color: var(--icon-color-on-btn); 
+                background-color: var(--icon-color-on-btn);
                 mask: var(--icon) center center / 1.25rem no-repeat;
             }
         }
@@ -102,10 +202,11 @@
         .form-control {
             padding-left: 1rem;
 
-            + button {
+            +button {
                 span.btn-label {
                     display: none;
                 }
+
                 //Show the search icon (on button) on small screens
                 span.btn-icon {
                     display: block;
@@ -127,7 +228,7 @@
     .qld-search-input {
 
         // Rescope colours inside a dark container
-        
+
         // Default state - unfocused, unhovered
         --icon-color: #DEEBF9;
         --icon-color-on-btn: var(--qld-dark-action-text);
@@ -136,13 +237,13 @@
         --placeholder-color: #DEEBF9;
         --border-color: var(--qld-dark-alt-border);
         --background-color: var(--qld-dark-background);
-        
+
         //Icon color is scoped against the parent container, not the input :( 
-        &:has(.form-control:hover) { 
+        &:has(.form-control:hover) {
             --icon-color: var(--qld-white);
         }
-        
-        &:has(.form-control:focus) { 
+
+        &:has(.form-control:focus) {
             --icon-color: var(--qld-text-grey);
             --text-color: var(--qld-text-grey);
         }
@@ -163,7 +264,7 @@
                 --border-color: var(--qld-light-grey);
                 --background-color: var(--qld-white);
             }
-    
+
         }
     }
-}
+}

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

@@ -6,7 +6,7 @@ export default {
   tags: ["autodocs"],
   title: "Components/Search Input",
   render: (args) => {
-    return new SearchInput(args).html;
+    return `<form class="site-search">${new SearchInput(args).html}</form>`;
   },
 
   argTypes: {

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

@@ -54,10 +54,12 @@
             &:active,
             &:focus {
                 background-color: $qld-textbox-border-color;
+                color: $qld-white;
+                text-decoration: underline;
+                text-underline-offset: var(--qld-link-underline-offset);
 
                 a {
-                    color: white;
-                    text-decoration: underline;
+                    color: $qld-white;
                 }
             }
         }

package/src/js/handlebars.helpers.js

@@ -1,13 +1,13 @@
 /* global Handlebars */
 
 /**
- * Registers Handlebars Helper for 'contains', 'ifCond', 'isType', 'isMultipleOfThree' and 'isEndOfRow'
+ * Registers Handlebars Helpers
  * @param {module} 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);
@@ -15,6 +15,7 @@ export default function handlebarsHelpers(Handlebars) {
       ? options.fn(this)
       : options.inverse(this);
   });
+  // ifCond - checks conditions 
   Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
     switch (operator) {
     case "==":
@@ -47,12 +48,7 @@ export default function handlebarsHelpers(Handlebars) {
       return options.inverse(this);
     }
   });
-  Handlebars.registerHelper('isMultipleOfThree', function(index) {
-    return (index % 3 === 0); // This will check if the index of the current item in the iteration is a multiple of three (nav dropdown)
-  });
-  Handlebars.registerHelper('isEndOfRow', function(index) {
-    return ((index + 1) % 3 === 0); // Since index is zero-based, add 1 to check if it's the end of a row.
-  });
+  // 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

package/src/main.js

@@ -1,58 +1,90 @@
-import { accordionToggleAll, accordionToggleAllButtonState, accordionHashLinks } from "./components/bs5/accordion/accordion.functions";
+import {
+  accordionToggleAll,
+  accordionToggleAllButtonState,
+  accordionHashLinks,
+} from "./components/bs5/accordion/accordion.functions";
 import { videoEmbedPlay, videoTranscriptTitle } from "./components/bs5/video/video.functions";
-import { initializeNavbar } from './components/bs5/navbar/navbar.functions';
-import { breadcrumbShorten } from "./components/bs5/breadcrumbs/breadcrumb.functions";
-import { positionQuickExit, initQuickexit } from './components/bs5/quickexit/quickexit.functions';
-import { toggleSearch, showSuggestions } from './components/bs5/header/header.functions';
-
-window.addEventListener('scroll', positionQuickExit, true);
-window.addEventListener('resize', positionQuickExit, true);
-window.addEventListener('click', initQuickexit, true);
-window.addEventListener('keydown', initQuickexit, true);
+import { initializeNavbar } from "./components/bs5/navbar/navbar.functions";
+import { initBreadcrumb } from "./components/bs5/breadcrumbs/breadcrumb.functions";
+import { positionQuickExit, initQuickexit } from "./components/bs5/quickexit/quickexit.functions";
+import { displayFeedbackForm } from "./components/bs5/footer/footer.functions";
+import { toggleSearch } from "./components/bs5/header/header.functions";
+import { showSuggestions } from "./components/bs5/searchInput/search.functions";
+
+window.addEventListener("scroll", positionQuickExit, true);
+window.addEventListener("resize", positionQuickExit, true);
+window.addEventListener("click", initQuickexit, true);
+window.addEventListener("keydown", initQuickexit, true);
 
 window.addEventListener("DOMContentLoaded", () => {
   (() => {
+    // Footer FormIO Action
+    // Note: This is added here, as there is an issue with breadcrumbShorten() function.
+    //       Will move this once that issue is fixed.
+    const footerFormio = document.getElementById("qg-feedback-toggle");
+    if (footerFormio) {
+      displayFeedbackForm();
+    }
 
     //Header search
-    let headerSearchButton = document.querySelector('.qld__main-nav__toggle-search');
-    if(headerSearchButton) {
-      document.querySelector('.qld__main-nav__toggle-search').addEventListener('click', toggleSearch);
+    let headerSearchButton = document.querySelector(".qld__main-nav__toggle-search");
+
+    if (headerSearchButton) {
+      document.querySelector(".qld__main-nav__toggle-search").addEventListener("click", toggleSearch);
     }
-    const searchInput = document.getElementById('search-input');
+
+    const form = document.querySelector(".site-search");
+    const searchInput = form.querySelector(".qld-search-input input");
+
     if (searchInput) {
       let timeout;
 
-      searchInput.addEventListener('keyup', function() {
+      searchInput.addEventListener("keyup", function () {
         clearTimeout(timeout);
         timeout = setTimeout(() => {
           showSuggestions(this.value);
         }, 300);
       });
 
-      searchInput.addEventListener('focus', function() {
-        showSuggestions('', true);
+      searchInput.addEventListener("focus", function () {
+        showSuggestions("", true);
       });
 
-      searchInput.addEventListener('click', function() {
-        if (this.value === '') {
-          showSuggestions('', true);
+      searchInput.addEventListener("click", function () {
+        if (this.value === "") {
+          showSuggestions("", true);
         }
       });
+
       // Close suggestions when clicking outside
-      document.addEventListener('click', function(event) {
-        if (!searchInput.contains(event.target) && !document.getElementById('suggestions').contains(event.target)) {
-          document.getElementById('suggestions').style.display = 'none';
+      document.addEventListener("click", function (event) {
+        if (!searchInput.contains(event.target) && !document.querySelector(".suggestions").contains(event.target)) {
+          document.querySelector(".suggestions").style.display = "none";
         }
       });
     }
 
+    //Header
+    // Get the <header> element
+    var header = document.querySelector("header");
+    if (header) {
+      // Get the current page URL without query string parameters
+      var url = window.location.origin + window.location.pathname;
+      // Set the data-page-url attribute on the <header> element
+      header.setAttribute("data-page-url", url);
+    }
+
     // Navbar
     initializeNavbar();
 
     // Breadcrumb
-    breadcrumbShorten();
+    initBreadcrumb();
 
     // Quick exit
+    window.addEventListener("scroll", positionQuickExit, true);
+    window.addEventListener("resize", positionQuickExit, true);
+    window.addEventListener("click", initQuickexit, true);
+    window.addEventListener("keydown", initQuickexit, true);
     initQuickexit();
     positionQuickExit();
 
@@ -62,9 +94,7 @@ window.addEventListener("DOMContentLoaded", () => {
     accordionToggleButton.forEach(function (toggleButton) {
       toggleButton.addEventListener("click", accordionToggleAll);
 
-      let accordionButtons = toggleButton
-        .closest(".accordion-group")
-        .querySelectorAll(".accordion-button");
+      let accordionButtons = toggleButton.closest(".accordion-group").querySelectorAll(".accordion-button");
 
       accordionButtons.forEach(function (button) {
         button.addEventListener("click", accordionToggleAllButtonState);
@@ -79,23 +109,17 @@ window.addEventListener("DOMContentLoaded", () => {
       link.addEventListener("click", accordionHashLinks);
     });
 
-
     // Video
-    let videoThumbnails = document.querySelectorAll('.video-thumbnail');
+    let videoThumbnails = document.querySelectorAll(".video-thumbnail");
 
     videoThumbnails.forEach(function (thumbnail) {
-      thumbnail.addEventListener("click", videoEmbedPlay)
-    })
+      thumbnail.addEventListener("click", videoEmbedPlay);
+    });
 
-    let videoTranscripts = document.querySelectorAll('.video .accordion .accordion-button');
+    let videoTranscripts = document.querySelectorAll(".video .accordion .accordion-button");
 
     videoTranscripts.forEach(function (transcript) {
-      transcript.addEventListener("click", videoTranscriptTitle)
-    })
-
-
-    //Modal
-
-
+      transcript.addEventListener("click", videoTranscriptTitle);
+    });
   })();
 });

package/src/main.scss

@@ -5,7 +5,7 @@
 // Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
 
 // External fonts
-@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap');
 $font-family-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-sitename: "Fira Sans";
 
@@ -113,5 +113,8 @@ $enable-dark-mode: true;
 // Common Layout Blocks, under review
 @import "./components/common/layout/content.scss";
 
-// Themes, under review
-@import "./scss/qld-theme.scss";
+// Themes
+@import "./scss/qld-theme.scss";
+
+// Print
+@import "./scss/qld-print.scss";