@qld-gov-au/qgds-bootstrap5 1.1.2 → 1.1.4

package/src/components/bs5/footer/footer_formio.scss

@@ -0,0 +1,265 @@
+#qg-footer-feedback {
+    #feedbackFormIO {
+        .qg-spinner {
+            padding: var(--#{$prefix}footer-spacing) 0;
+            text-align: center;
+        }
+
+        .form-check-input {
+            margin-left: 0;
+            --qld-form-check-bg: var(--#{$prefix}formIO-bg-colour);
+
+            &:hover,
+            &:focus {
+                background-color: var(--#{$prefix}extra-light-grey);
+                cursor: pointer;
+            }
+        }
+
+        textarea {
+            &:hover {
+                background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+            }
+            &:focus {
+                outline: 3px solid var(--#{$prefix}light-blue);
+                outline-offset: 2px;
+                background-color: var(--#{$prefix}extra-light-grey);
+            }
+            &.is-valid {
+                outline: none;
+                background-color: var(--#{$prefix}core-default-color-status-error-lightest);
+                margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
+                border: var(--#{$prefix}formIO-form-control-border-width) solid var(--#{$prefix}formIO-border-notify-invalid);
+                box-shadow: none;  // Overrides Bootstrap5 styling for invalid input.
+
+                &:focus {
+                    outline: 3px solid var(--#{$prefix}light-blue);
+                }
+            }
+        }
+
+        .form-check-input[type="radio"]:checked {
+            background-image: url("data:image/svg+xml,%3csvg viewBox='-2 -2 4 4' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='1.8' fill='%23414141'/%3e%3c/svg%3e");
+        }
+
+        .col-form-label {
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px);
+            padding-block-end: 0;
+            font-weight: 600;
+            padding-block-start: 0;
+            display: block;
+        }
+
+        .wizard-page>.form-group:first-child .has-feedback {
+            label.col-form-label {
+                border-block-start: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour);
+                padding-block-start: var(--#{$prefix}formIO-spacing);
+            }
+        }
+
+        .formio-component-textarea {
+            .col-form-label {
+                margin-block-end: 4px;
+            }
+        }
+
+        .formio-component-submit .btn,
+        .formio-component-submit .btn-primary {
+            --qld-btn-active-bg: var(--#{$prefix}formIO-submit-btn);
+            --qld-btn-color: var(--#{$prefix}formIO-submit-btn-text);
+            --qld-btn-border-color: transparent;
+            --qld-btn-bg: var(--#{$prefix}formIO-submit-btn);
+            margin-block-start: calc(var(--#{$prefix}footer-spacing) + 4px);
+            width: 100%;
+
+            &:hover,
+            &:active {
+                color: var(--#{$prefix}formIO-submit-btn-text);
+                border-color: var(--#{$prefix}formIO-submit-btn-hover);
+                text-decoration-line: underline;
+                text-decoration-thickness: var(--#{$prefix}formIO-form-control-border-width);
+                text-underline-offset: var(--#{$prefix}footer-text-underline-offset);
+                background-color: var(--#{$prefix}formIO-submit-btn-hover);
+            }
+
+            &:disabled {
+                color: var(--#{$prefix}formIO-formio-colour);
+                background-color: var(--#{$prefix}formIO-btn-disabled-colour);
+            }
+        }
+
+        .formio-component-radio {
+            flex-direction: column;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+            align-items: start;
+
+            .form-radio {
+                .form-check {
+                    display: block;
+                    padding: 0;
+                    margin: 0;
+
+                    .form-check-label {
+                        display: flex;
+                        align-items: start;
+                        margin-block-end: var(--#{$prefix}footer-spacing);
+                        margin-inline-start: 0;
+
+                        span {
+                            margin-inline-start: calc(var(--#{$prefix}footer-spacing) - 4px);
+                        }
+                    }
+
+                    &:last-of-type {
+                        margin-block-end: 0px;
+                    }
+                }
+            }
+        }
+
+        .form-control {
+            background-color: var(--#{$prefix}formIO-bg-colour);
+            color: var(--#{$prefix}formIO-formio-colour);
+        }
+
+        .formio-modified {
+            .form-check-input {
+                outline: none;
+                outline-offset: 0;
+            }
+
+            .is-invalid {
+                outline: var(--#{$prefix}formIO-border-notify-invalid) solid var(--#{$prefix}formIO-form-control-border-width);
+            }
+
+            textarea {
+                outline: none;
+                background-color: var(--#{$prefix}formIO-bg-colour);
+                outline-offset: 0;
+
+                &:hover {
+                    background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+                }
+                &:focus {
+                    outline: 3px solid var(--#{$prefix}light-blue);
+                    outline-offset: 2px;
+                    background-color: var(--#{$prefix}extra-light-grey);
+                }
+                &.is-valid {
+                    outline: none;
+                    background-color: var(--#{$prefix}core-default-color-status-error-lightest);
+                    margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
+                    border: var(--#{$prefix}formIO-form-control-border-width) solid var(--#{$prefix}formIO-border-notify-invalid);
+                    box-shadow: none;  // Overrides Bootstrap5 styling for invalid input. 
+
+                    &:focus {
+                        outline: 3px solid var(--#{$prefix}light-blue);
+                    }
+                }
+
+                /* Overrides the 'dark' theme that the form is inherited from footer's dark theme - because the form's background is white (light theme). */
+                &::selection {
+                    color: var(--#{$prefix}white);
+                    background-color: var(--#{$prefix}brand-primary);
+                }
+                /* End: Overrides 'dark' theme */
+            }
+        }
+
+        .callout {
+            margin-block-start: 0;
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px);
+            background-color: var(--#{$prefix}core-default-color-neutral-lightest);
+            border-left: none;
+            border-inline-start: calc(var(--#{$prefix}formIO-form-control-border-width) * 2) solid var(--#{$prefix}formIO-callout-border-colour);
+
+            #feedback-serv-dep-staff {
+                color: var(--#{$prefix}formIO-formio-colour);
+
+                &.status {
+                    margin: 0 !important;
+                    background-color: transparent;
+                }
+
+                h4 {
+                    color: var(--#{$prefix}formIO-formio-colour);
+                    font-size: var(--#{$prefix}footer-font-size);
+                    margin-block: 0;
+                    position: relative;
+                    line-height: var(--#{$prefix}formIO-callout-heading-line-height);
+                }
+
+                p {
+                    margin-block-start: var(--#{$prefix}footer-spacing);
+                    margin-block-end: 0;
+                }
+            }
+        }
+
+        .formio-component-html1 {
+            margin-block-start: calc(var(--#{$prefix}footer-spacing) * -1);
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px);
+
+            h2 {
+                margin-block-start: 0;
+                color: var(--#{$prefix}formIO-thankyou-page-title-colour);
+                font-size: 1rem;
+                font-weight: 600;
+                margin-block-end: var(--#{$prefix}footer-spacing);
+            }
+
+            h2:first-child {
+                font-weight: 700;
+                color: var(--#{$prefix}formIO-thankyou-page-title-colour);
+                font-size: 1rem;
+                margin-block-start: 0;
+                margin-block-end: var(--#{$prefix}footer-spacing);
+                border-block-end: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour);
+                padding-block-end: calc(var(--#{$prefix}footer-spacing) - 3px);
+            }
+
+            p:last-of-type {
+                display: none;
+            }
+        }
+
+        button.btn-wizard-nav-submit {
+            display: none;
+        }
+
+        .formio-wizard-nav-container {
+            display: none;
+        }
+
+        .formio-errors .error {
+            margin-block-start: 0px;
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);        
+        }
+
+        .formio-component.has-error .invalid-feedback,
+        .formio-component.has-message .invalid-feedback {
+            margin-top: 0px;
+        }
+
+        .field-required:after {
+            content: none;
+            content: "";
+        }
+
+        .field-required:before {
+            content: " *";
+            color: var(--#{$prefix}formIO-error);
+        }
+
+        p {
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.25);
+        }
+
+        @include media-breakpoint-down(md) {
+            p {
+                margin-block-end: var(--#{$prefix}footer-spacing);
+            }
+        }
+    }
+}

package/src/components/bs5/fullPageWrapper/fullPage.stories.js

@@ -1,7 +1,4 @@
 import { FullPageTest } from "./fullPage.test.js";
-import init from "../../../js/handlebars.init.js";
-import Handlebars from "handlebars";
-
 import { dcTerms } from '../metaDcTerms/MetaDcTerms.data.json';
 import metaOpenGraphData from '../metaOpenGraph/MetaOpenGraph.data.json';
 import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
@@ -16,6 +13,8 @@ import footerData from "../footer/footer.data.json";
 const defaultData = {
   cdn: ".", //for StoryBook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": masterbrand_variant["icon-root"],
+  icons: masterbrand_variant.icons,
   description: "my description",
   uri: "http://localhost/uri/here",
   dcTerms: dcTerms,
@@ -34,7 +33,6 @@ const defaultData = {
 export default {
   title: "!Layout/Full Page",
   render: (args) => {
-    init(Handlebars)
     return new FullPageTest(args).html;
   },
   args: defaultData,

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

@@ -1,7 +1,5 @@
 import { MainContainerWrapperTest } from "./mainContainerWrapper.test.js";
 
-import init from "./../../../js/handlebars.init";
-import Handlebars from "handlebars";
 //Data
 import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
 import menu_state from "../navbar/navbar.variant.menuState.data.json";
@@ -15,6 +13,8 @@ import footerData from "../footer/footer.data.json";
 const defaultData = {
   cdn: ".", //for storybook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": masterbrand_variant["icon-root"],
+  icons: masterbrand_variant.icons,
   header: masterbrand_variant,
   search: searchData,
   navbar: menu_state,
@@ -28,7 +28,6 @@ const defaultData = {
 export default {
   title: "!Layout/Main Container Wrapper",
   render: (args) => {
-    init(Handlebars)
     return new MainContainerWrapperTest(args).html;
   },
   args: defaultData,

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

@@ -1,13 +1,10 @@
 // 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;
   },
 

package/src/components/bs5/video/video.scss

@@ -49,6 +49,11 @@ $video-clock-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
   border-radius: var(--#{$prefix}video-border-radius);
   box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
 
+  // Add margin top on the next element after video component
+  + * {
+    margin-top: 2rem;
+  }
+
   &-player {
     position: relative;
 

package/src/css/main.scss

@@ -1,7 +1,3 @@
-// DEV Notes:
-// ~bootstrap is an alias for node_modules/bootstrap/ as defined in vite.config.js
-// ~fontawesome is an alias for node_modules/fontawesome/ as defined in vite.config.js
-
 // Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
 
 // External fonts
@@ -11,7 +7,8 @@ $font-family-sitename: "Fira Sans";
 
 //Icons
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+//TODO: should we pull from ../../node_modules/@fortawesome/fontawesome-free/css/all.css instead of cdn
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 
 
 //Prefix to namespace design-system classes
@@ -22,9 +19,9 @@ $enable-dark-mode: true;
 
 
 // 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/variables-dark";
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
 
 // 2. QLD Design System variables (Bootstrap overrides)
 @import "./qld-variables";
@@ -32,49 +29,49 @@ $enable-dark-mode: true;
 
 // 3. Include remainder of bootstrap
 // 3.1 Required
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";
 
 
 // 3.2 Recommended, Resets and shared
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/helpers";
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/helpers";
 
 // 3.3 Optional components
-@import "~bootstrap/scss/accordion";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/placeholders";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/tooltip";
+@import "../../node_modules/bootstrap/scss/accordion";
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/carousel";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/list-group";
+@import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/progress";
+@import "../../node_modules/bootstrap/scss/transitions";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/offcanvas";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/placeholders";
+@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/spinners";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/toasts";
+@import "../../node_modules/bootstrap/scss/tooltip";
 
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
-@import "~bootstrap/scss/utilities/api";
+@import "../../node_modules/bootstrap/scss/utilities/api";
 
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";

package/src/js/QGDSComponent.js

@@ -1,5 +1,4 @@
 import Handlebars from "handlebars";
-import handlebarsHelpers from "./handlebars.helpers";
 
 export default class Component {
   /**
@@ -26,4 +25,3 @@ export default class Component {
     };
   }
 }
-handlebarsHelpers(Handlebars);

package/src/stories/integration/MainIntegration.js

@@ -1,12 +1,11 @@
 /* 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;

package/src/stories/integration/integration.stories.js

@@ -21,6 +21,8 @@ const defaultData = {
   template: template, // Adjust template path relative to this file
   cdn: ".", //for storybook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": headerData["icon-root"],
+  icons: headerData.icons,
   description: "my description",
   uri: "http://localhost/uri/here",
   dcTerms: dcTerms,