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

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

@@ -23,7 +23,7 @@
     }
   }
   .footer-site-name {
-    font-size: calc(var(--#{$prefix}footer-spacing) * 1.25);
+    font-size: var(--#{$prefix}footer-title-font-size);
     line-height: 1.5;
     font-weight: 600;
     margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);
@@ -40,8 +40,6 @@
       margin-block-start: calc(var(--#{$prefix}footer-spacing) * 2);
     }
   }
-
-  //Bordered columns in the footer should only show above medium breakpoint
   .border-column {
     height: 100%;
     position: relative;
@@ -57,7 +55,7 @@
   }
   .footer-heading {
     color: var(--#{$prefix}footer-color-title);
-    font-size: calc(var(--#{$prefix}footer-font-size) * 1.25);
+    font-size: var(--#{$prefix}footer-title-font-size);
     margin-block-end: var(--#{$prefix}footer-spacing);
     line-height: 1.5;
     font-weight: 600;
@@ -78,6 +76,9 @@
         --qld-brand-accent: var(--#{$prefix}footer-color-alt-button__hover);
       }
     }
+    b {
+      margin-inline-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
+    }
   }
   .footer-crest {
     display: block;
@@ -88,8 +89,6 @@
       width: 100%;
     }
   }
-
-  //Footer Nav classes
   .nav {
     --#{$prefix}nav-link-color: var(--#{$prefix}footer-color-link);
     &.footer-link-list {
@@ -106,6 +105,9 @@
         &:focus-visible {
           box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border);
         }
+        span {
+          display: block;
+        }
       }
       &--social .nav-link {
         display: flex;
@@ -136,8 +138,8 @@
   }
   .footer-contact {
     .btn {
-      min-width: 200px; // magic number
-      margin-block-start: calc(var(--#{$prefix}footer-spacing) * 0.5);
+      min-width: 200px;
+      margin-block-start: var(--#{$prefix}footer-spacing);
     }
   }
   .container > .row > div {
@@ -146,7 +148,7 @@
   .btn-global-secondary {
     white-space: normal;
   }
-  @media (max-width: 991.98px) {
+  @include media-breakpoint-down(lg) {
     --#{$prefix}last-para-margin: 24px;
     --qld-footer-padding-y: 0;
 
@@ -156,11 +158,13 @@
     }
     .container {
       > .row {
-        --qld-gutter-x: calc(var(--#{$prefix}footer-gap) * 2);
+        margin-inline: calc(var(--#{$prefix}footer-gap) * -1);
+        --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2);
         & > * {
           padding-inline: 0;
         }
         > .col-md-12 {
+          --qld-gutter-x: calc(var(--#{$prefix}footer-spacing) * 2);
           border-top: calc(var(--#{$prefix}footer-special-border-width) - 2px) solid
             var(--#{$prefix}footer-color-border);
 
@@ -194,6 +198,9 @@
           padding-inline: var(--qld-gutter-x);
           margin-inline: 0;
           width: 100%;
+          .footer-column {
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2);
+          }
         }
         p:last-child {
           margin-block-end: 0;
@@ -214,18 +221,21 @@
       }
     }
   }
-  @media (max-width: 767.98px) {
+  @include media-breakpoint-down(md) {
     .container {
       > .row {
         > .col-md-12 {
-          margin-inline-start: var(--qld-gutter-x);
-          width: calc(100% - calc(var(--qld-gutter-x) * 2));
+          margin-inline-start: var(--#{$prefix}footer-spacing);
+          width: calc(100% - calc(var(--#{$prefix}footer-spacing) * 2));
         }
         > .title,
         > .crest {
-          padding-inline: var(--qld-gutter-x);
+          padding-inline: var(--qld-footer-spacing);
           margin-inline: 0;
           width: 100%;
+          .footer-column {
+            margin-block-end: calc(var(--#{$prefix}footer-spacing) * 2.5);
+          }
         }
         p:last-child {
           margin-block-end: var(--#{$prefix}last-para-margin);
@@ -236,6 +246,10 @@
       column-count: 2;
       width: 100%;
     }
+    .footer-site-name,
+    .footer-heading {
+      font-size: calc(var(--#{$prefix}footer-title-font-size) - 0.25rem);
+    }
   }
 }
 
@@ -249,6 +263,7 @@
     border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}footer-color-alt-button);
     width: 100%;
     font-weight: normal;
+    margin-block-start: var(--#{$prefix}footer-spacing);
     &:active {
       color: var(--#{$prefix}formIO-formio-colour);
     }
@@ -262,7 +277,8 @@
     width: 100%;
     text-align: start;
     background-color: var(--#{$prefix}formIO-bg-colour);
-    color: var(--#{$prefix}formIO-formio-colour);
+    color: var(--#{$prefix}light-text-heading);
+    font-weight: 700;
     border-color: var(--#{$prefix}formIO-bg-colour);
     border-start-start-radius: var(--#{$prefix}footer-border-radius);
     border-start-end-radius: var(--#{$prefix}footer-border-radius);
@@ -270,14 +286,31 @@
   .btn.qg-feedback-toggle {
     font-weight: bold;
   }
+  &:has(#feedbackFormIO .formio-component-html1) {
+    #btn-footer-feedback {
+      display: none;
+      visibility: hidden;
+    }
+    #qg-footer-feedback {
+      padding-block-start: calc(var(--#{$prefix}footer-spacing) - 4px);
+      border-start-start-radius: var(--#{$prefix}footer-border-radius);
+      border-start-end-radius: var(--#{$prefix}footer-border-radius);
+    }
+  }
 }
-
 #qg-footer-feedback {
+  --qld-footer-bootstrap-default-padding: 1.5rem;
+
   background-color: var(--#{$prefix}formIO-bg-colour);
   a {
     color: var(--#{$prefix}formIO-link-colour);
+    text-decoration-color: var(--#{$prefix}formIO-link-colour);
     &:hover {
-      color: var(--#{$prefix}formIO-link-colour-hover);
+      text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover) !important;
+    }
+    &:hover,
+    &:visited {
+      color: var(--#{$prefix}formIO-link-colour);
     }
   }
   border-radius: var(--#{$prefix}footer-border-radius);
@@ -288,14 +321,14 @@
 
   .qg-footer-feedback-footer {
     border-block-start: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour);
-    padding-block-start: var(--#{$prefix}footer-spacing);
+    padding-block-start: calc(var(--#{$prefix}footer-spacing) + 4px);
 
     a.qg-footer-feedback__close {
       border: var(--#{$prefix}footer-special-border-width) solid var(--#{$prefix}formIO-btn-close-colour);
       width: 100%;
       display: block;
       border-radius: var(--#{$prefix}footer-border-radius);
-      padding: 9px 24px; // magic numbers
+      padding: 9px 24px;
       text-align: center;
       text-decoration: none;
       &:hover {
@@ -320,23 +353,23 @@
     .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");
     }
-    .formio-component-fieldSet2 {
-      margin-block-end: 0;
-    }
     .col-form-label {
-      margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
-      font-weight: bold;
-    }
-    .formio-component-submit {
-      margin-block-start: var(--#{$prefix}footer-spacing);
+      margin-block-end: calc(var(--#{$prefix}footer-spacing) + 4px);
+      padding-block-end: 0;
+      font-weight: 600;
+      padding-block-start: 0;
+      display: block;
     }
-    .form-check {
-      align-items: flex-start;
+    .wizard-page > .form-group:first-child .has-feedback {
+      label.col-form-label {
+        border-block-start: var(--qld-footer-border-width) solid var(--qld-formIO-hr-colour);
+        padding-block-start: var(--#{$prefix}formIO-spacing);
+      }
     }
-    .formio-modified .form-check-input,
-    .formio-modified .form-control {
-      border-color: var(--#{$prefix}formIO-border-notify-success);
-      outline: var(--#{$prefix}formIO-border-outline-width) solid var(--#{$prefix}formIO-border-notify-success);
+    .formio-component-textarea {
+      .col-form-label {
+        margin-block-end: 4px;
+      }
     }
     .formio-component-submit .btn,
     .formio-component-submit .btn-primary {
@@ -344,6 +377,7 @@
       --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 {
@@ -359,37 +393,29 @@
         background-color: var(--#{$prefix}formIO-btn-disabled-colour);
       }
     }
-    .form-radio {
-      .form-check {
-        display: block;
-        padding: 0;
-        margin: 0;
-        .form-check-label {
-          display: flex;
-          align-items: center;
-          margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.5);
-          margin-inline-start: 0;
-          span {
-            margin-inline-start: calc(var(--#{$prefix}footer-spacing) - 4px);
-          }
-        }
-        .form-check-input {
-          margin-left: 0;
-        }
-      }
-    }
-    .formio-component-howSatisfiedAreYouWithYourExperienceToday {
+    .formio-component-radio {
       flex-direction: column;
       padding-inline-start: 0;
+      margin-block-end: 0;
+      align-items: start;
 
-      label.col-form-label {
-        margin-inline-start: 0;
-      }
-      .form-check {
-        display: block;
-        margin-block-end: calc(var(--#{$prefix}footer-spacing) * 0.75);
-        span {
-          margin-block-end: 0;
+      .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: calc(var(--#{$prefix}footer-spacing) + 4px);
+          }
         }
       }
     }
@@ -398,14 +424,30 @@
       color: var(--#{$prefix}formIO-formio-colour);
       border: var(--#{$prefix}formIO-form-control-border-width) solid var(--#{$prefix}formIO-input-border);
     }
-    .formio-modified .is-invalid {
-      outline: var(--#{$prefix}formIO-border-notify-invalid) solid var(--#{$prefix}formIO-form-control-border-width);
-      border-color: var(--#{$prefix}formIO-border-notify-invalid);
-      outline-offset: 0;
+
+    .formio-modified {
+      .form-check-input {
+        outline: var(--#{$prefix}formIO-border-notify-success) solid var(--#{$prefix}formIO-form-control-border-width);
+        outline-offset: 0;
+      }
+      .is-invalid {
+        outline: var(--#{$prefix}formIO-border-notify-invalid) solid var(--#{$prefix}formIO-form-control-border-width);
+      }
+      textarea {
+        outline: var(--#{$prefix}formIO-border-notify-success) solid var(--#{$prefix}formIO-form-control-border-width);
+        background-color: #f7fbf8;
+        outline-offset: 0;
+      }
+      textarea.is-invalid {
+        outline: var(--#{$prefix}formIO-border-notify-invalid) solid var(--#{$prefix}formIO-form-control-border-width);
+        background-color: #fff6f6;
+        margin-block-end: calc(var(--#{$prefix}footer-spacing) * 1.5);
+      }
     }
     .callout {
-      margin-block: var(--#{$prefix}footer-spacing);
-      background-color: var(--#{$prefix}formIO-callout-bg-colour);
+      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);
@@ -430,19 +472,25 @@
     }
     .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: var(--#{$prefix}footer-spacing);
-        font-weight: bolder;
+        font-size: 1rem;
+        font-weight: 600;
         margin-block-end: var(--#{$prefix}footer-spacing);
-
-        &:first-of-type {
-          border-block-end: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}formIO-hr-colour);
-          padding-block-end: 13px; // magic number
-        }
       }
+      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;
       }
@@ -454,14 +502,24 @@
       display: none;
     }
     .formio-errors .error {
+      margin-block-start: calc(var(--#{$prefix}footer-spacing) * -1);
       margin-block-end: var(--#{$prefix}footer-spacing);
     }
-  }
-}
-
-@media (max-width: 300px) {
-  // This is the min width where the content is still usable.
-  .qld-footer {
-    width: 300px;
+    .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/footer/footer.stories.js

@@ -3,10 +3,107 @@ import { Footer, FooterForgov } from "./Footer.js";
 
 import defaultdata from "./footer.data.json";
 
+
 export default {
   tags: ["autodocs"],
   title: "!Core/Footer",
   render: (args) => new Footer(args).html,
+  // parameters: {
+  //   controls: {include: []},
+  // },
+  argTypes: {
+    "feedbackForm.formAttr.data-formio-project-name": { //data-formio-project-name
+      name: "Form.io Project, edit feedbackForm to change",
+      description: `Footer Feedback project's for reference edit feedbackForm formAttr.data-formio-project-name to update`,
+      control: {
+        type: 'radio',
+        labels:  {
+          "dev-oldkihhcwbdtwye" : "TEST (dev-oldkihhcwbdtwye)",
+          "staging-oldkihhcwbdtwye" : "STAGING (staging-oldkihhcwbdtwye)",
+          "uat-oldkihhcwbdtwye" : "UAT (uat-oldkihhcwbdtwye)",
+          "oldkihhcwbdtwye": "PROD (oldkihhcwbdtwye)",
+        },
+      },
+      options: [
+        "dev-oldkihhcwbdtwye",
+        "uat-oldkihhcwbdtwye",
+        "staging-oldkihhcwbdtwye",
+        "oldkihhcwbdtwye",
+      ],
+
+    },
+    sitename: {
+      name: "Site Name",
+      description: "Name of the site",
+      control: {type: 'text'},
+    },
+    contactHasContactList: {
+      name: "Contact Has Contact List",
+      description: "Whether the contact list is enabled",
+      control: {type: 'boolean'},
+    },
+    footerHasCrestDisabled: {
+      name: "Footer Has Crest",
+      description: "Whether the footer has a crest",
+      control: {type: 'boolean'},
+    },
+    footerHasStateOfQldDisabled: {
+      name: "Footer Has State of Qld",
+      description: "Whether the footer shows State of Qld",
+      control: {type: 'boolean'},
+    },
+    feedbackFormDisabled: {
+      name: "Feedback Form Disabled",
+      description: "Whether the feedback form is visible",
+      control: {type: 'boolean'},
+    },
+    followlinksEnabled: {
+      name: "Follow Links Enabled",
+      description: "Whether the follow links are enabled",
+      control: {type: 'boolean'},
+    },
+    copyrightHasYearFrom: {
+      name: "Copyright Has Year From",
+      description: "Whether the copyright section has a year from",
+      control: {type: 'boolean'},
+    },
+    copyrightOrganisationName: {
+      name: "Copyright Organisation Name",
+      description: "Name of the copyright organisation",
+      control: {type: 'text'},
+    },
+    contact: {
+      name: "Contact",
+      description: "Contact section details",
+      control: {type: 'object'},
+    },
+    lookup: {
+      name: "Lookup",
+      description: "Lookup section details",
+      control: {type: 'object'},
+    },
+    acknowledgements: {
+      name: "Acknowledgements",
+      description: "Acknowledgements section details",
+      control: {type: 'array'},
+    },
+    copyright: {
+      name: "Copyright",
+      description: "Copyright section details",
+      control: {type: 'object'},
+    },
+    footerlinks: {
+      name: "Footer Links",
+      description: "Footer links section details",
+      control: {type: 'object'},
+    },
+
+    followlinks: {
+      name: "Follow Links",
+      description: "Follow links section details",
+      control: {type: 'object'},
+    },
+  },
 };
 
 /**
@@ -14,9 +111,13 @@ export default {
  */
 export const Default = {
   args: defaultdata,
-  parameters: {
-    controls: { include: [] },
-  },
+};
+
+/**
+ * Example footer doing handlebars defaults
+ */
+export const DefaultBlank = {
+  args: {},
 };
 
 /**

package/src/components/bs5/fullPageWrapper/fullPage.hbs

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+  {{> metaDcTerms title=title description=description uri=uri dcTerms=dcTerms }}
+  {{> metaOpenGraph title=title description=description uri=uri seo=seo og=og }}
+  {{> head }}
+</head>
+<body>
+{{#> mainContainerWrapper }}
+  {{> @partial-block }}
+{{/mainContainerWrapper}}
+</body>
+</html>

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

@@ -0,0 +1,65 @@
+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.data.json';
+import { menu_state } from "../navbar/navbar.data.json";
+import breadcrumbsData from "../breadcrumbs/breadcrumbs.data.json";
+import searchData from "../searchInput/searchInput.data.json";
+import globalAlertData from "../globalAlert/globalAlert.data.json";
+import sidenavData from "../sidenav/sidenav.data.json";
+import contentFooterData from "../contentFooter/contentFooter.data.json";
+import footerData from "../footer/footer.data.json";
+
+const defaultData = {
+  cdn: ".", //for StoryBook it's ., for normal usage "PROD"
+  title: "title goes here",
+  description: "my description",
+  uri: "http://localhost/uri/here",
+  dcTerms: dcTerms,
+  seo: metaOpenGraphData.seo,
+  og: metaOpenGraphData.og,
+  header: masterbrand_variant,
+  search: searchData,
+  navbar: menu_state,
+  breadcrumbs: breadcrumbsData.forGov,
+  globalAlert: globalAlertData.critical,
+  sidenav: sidenavData,
+  contentFooter: contentFooterData,
+  footer: footerData,
+};
+
+export default {
+  title: "!Layout/Full Page",
+  render: (args) => {
+    init(Handlebars)
+    return new FullPageTest(args).html;
+  },
+  args: defaultData,
+  argTypes: {
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+/**
+ * Default
+ * 
+ */
+export const Default = {};
+

package/src/components/bs5/fullPageWrapper/fullPage.test.hbs

@@ -0,0 +1,4 @@
+{{#>fullPage}}
+  my main content goes here
+{{/fullPage}}
+

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

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./fullPage.test.hbs?raw";
+
+export class FullPageTest {
+
+  // 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);
+  }
+
+}