@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

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

@@ -1,5 +1,5 @@
 // footer.stories.js
-import { Footer, FooterForgov } from "./Footer.js";
+import { Footer } from "./Footer.js";
 
 import defaultdata from "./footer.data.json";
 
@@ -7,78 +7,20 @@ export default {
   tags: ["autodocs"],
   title: "2. Layout/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",
+    organisationLink: {
+      name: "Organisation link",
+      description: "organisation section details",
       control: { type: "object" },
     },
     acknowledgements: {
@@ -91,17 +33,6 @@ export default {
       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" },
-    },
   },
 };
 
@@ -144,22 +75,3 @@ export const DarkAlt = {
     controls: { include: [] },
   },
 };
-
-/**
- * Forgov footer
- */
-
-export const Forgov = {
-  args: {
-    ...defaultdata,
-    sitename: "For government",
-    variantClass: "dark",
-    contactHasContactList: true,
-    footerHasCrest: false,
-    footerHasStateOfQld: true,
-    feedbackFormEnabled: true,
-    followlinksEnabled: true,
-    copyrightHasYearFrom: true,
-  },
-  render: (args) => new FooterForgov(args).html,
-};

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

@@ -1,3 +1,119 @@
+.qld-footer {
+  --#{$prefix}formIO-bg-colour: var(
+    --#{$prefix}core-default-color-neutral-white
+  );
+  --#{$prefix}formIO-callout-bg-colour: var(
+    --#{$prefix}core-default-color-neutral-lighter
+  );
+  --#{$prefix}formIO-hr-colour: var(
+    --#{$prefix}core-default-color-neutral-lighter
+  );
+  --#{$prefix}formIO-formio-colour: var(
+    --#{$prefix}color-default-color-light-text-default
+  );
+  --#{$prefix}formIO-input-border: var(
+    --#{$prefix}color-default-color-light-border-alt
+  );
+  --#{$prefix}formIO-btn-disabled-colour: var(
+    --#{$prefix}core-default-color-neutral-light
+  );
+  --#{$prefix}formIO-btn-close-colour: var(
+    --#{$prefix}color-default-color-light-action-secondary
+  );
+  --#{$prefix}formIO-btn-close-colour__hover: var(
+    --#{$prefix}color-default-color-light-action-secondary-hover
+  );
+  --#{$prefix}formIO-link-colour: var(
+    --#{$prefix}color-default-color-light-link-default
+  );
+  --#{$prefix}formIO-link-colour-hover: var(
+    --#{$prefix}color-default-color-light-focus-default
+  );
+  --#{$prefix}formIO-submit-btn: var(
+    --#{$prefix}color-default-color-light-action-primary
+  );
+  --#{$prefix}formIO-submit-btn-hover: var(
+    --#{$prefix}color-default-color-light-action-primary-hover
+  );
+  --#{$prefix}formIO-submit-btn-text: var(
+    --#{$prefix}color-default-color-light-link-on-action
+  );
+  --#{$prefix}formIO-thankyou-page-title-colour: var(
+    --#{$prefix}color-default-color-light-text-heading
+  );
+  --#{$prefix}formIO-border-notify-invalid: var(
+    --#{$prefix}core-default-color-status-error-default
+  );
+  --#{$prefix}formIO-border-notify-success: var(
+    --#{$prefix}core-default-color-status-success-default
+  );
+  --#{$prefix}formIO-callout-border-colour: var(
+    --#{$prefix}core-default-color-brand-primary-light-green
+  );
+  --#{$prefix}formIO-error: var(
+    --#{$prefix}core-default-color-status-error-default
+  );
+  --#{$prefix}formIO-bg-colour: var(
+    --#{$prefix}core-default-color-neutral-white
+  );
+  --#{$prefix}formIO-callout-bg-colour: var(
+    --#{$prefix}core-default-color-neutral-lighter
+  );
+  --#{$prefix}formIO-hr-colour: var(
+    --#{$prefix}core-default-color-neutral-lighter
+  );
+  --#{$prefix}formIO-formio-colour: var(
+    --#{$prefix}color-default-color-light-text-default
+  );
+  --#{$prefix}formIO-input-border: var(
+    --#{$prefix}color-default-color-light-border-alt
+  );
+  --#{$prefix}formIO-btn-disabled-colour: var(
+    --#{$prefix}core-default-color-neutral-light
+  );
+  --#{$prefix}formIO-btn-close-colour: var(
+    --#{$prefix}color-default-color-light-action-secondary
+  );
+  --#{$prefix}formIO-btn-close-colour__hover: var(
+    --#{$prefix}color-default-color-light-action-secondary-hover
+  );
+  --#{$prefix}formIO-link-colour: var(
+    --#{$prefix}color-default-color-light-link-default
+  );
+  --#{$prefix}formIO-link-colour-hover: var(
+    --#{$prefix}color-default-color-light-focus-default
+  );
+  --#{$prefix}formIO-submit-btn: var(
+    --#{$prefix}color-default-color-light-action-primary
+  );
+  --#{$prefix}formIO-submit-btn-hover: var(
+    --#{$prefix}color-default-color-light-action-primary-hover
+  );
+  --#{$prefix}formIO-submit-btn-text: var(
+    --#{$prefix}color-default-color-light-link-on-action
+  );
+  --#{$prefix}formIO-thankyou-page-title-colour: var(
+    --#{$prefix}color-default-color-light-text-heading
+  );
+  --#{$prefix}formIO-border-notify-invalid: var(
+    --#{$prefix}core-default-color-status-error-default
+  );
+  --#{$prefix}formIO-border-notify-success: var(
+    --#{$prefix}core-default-color-status-success-default
+  );
+  --#{$prefix}formIO-callout-border-colour: var(
+    --#{$prefix}core-default-color-brand-primary-light-green
+  );
+  --#{$prefix}formIO-error: var(
+    --#{$prefix}core-default-color-status-error-default
+  );
+
+  --#{$prefix}formIO-feeback-font-weight: normal;
+  --#{$prefix}formIO-border-outline-width: 2px;
+  --#{$prefix}formIO-form-control-border-width: 2px;
+  --#{$prefix}formIO-callout-heading-line-height: 24px;
+  --#{$prefix}formIO-spacing: 1rem;
+}
 #qg-footer-feedback {
   #feedbackFormIO {
     .qg-spinner {
@@ -286,3 +402,106 @@
     }
   }
 }
+/* Feedback form */
+#qg-feedback-toggle {
+  --qld-dark-alt-border: var(--#{$prefix}formIO-input-border);
+  color: var(--#{$prefix}formIO-formio-colour);
+  width: 100%;
+
+  #btn-footer-feedback {
+    color: var(--#{$prefix}footer-color-text);
+    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);
+    }
+  }
+
+  #btn-footer-feedback:not(.collapsed) {
+    font-weight: var(--#{$prefix}formIO-feeback-font-weight);
+    border-color: var(--#{$prefix}formIO-bg-colour);
+    border-radius: var(--#{$prefix}footer-border-radius);
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    outline: none !important;
+    width: 100%;
+    text-align: start;
+    background-color: var(--#{$prefix}formIO-bg-colour);
+    color: var(--#{$prefix}light-text-heading);
+    font-weight: 700;
+  }
+
+  .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 {
+      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);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  padding-inline: var(--#{$prefix}footer-bootstrap-default-padding);
+  padding-block-end: var(--#{$prefix}footer-bootstrap-default-padding);
+
+  .qg-footer-feedback-footer {
+    border-block-start: var(--#{$prefix}footer-border-width) solid
+      var(--#{$prefix}formIO-hr-colour);
+    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;
+      text-align: center;
+      text-decoration: none;
+
+      &:hover {
+        border-color: var(--#{$prefix}formIO-btn-close-colour__hover);
+        text-decoration: underline;
+        text-decoration-thickness: var(
+          --#{$prefix}footer-font-underline-boarder
+        );
+      }
+    }
+  }
+}

package/src/components/bs5/formcheck/formcheck.hbs

@@ -14,7 +14,7 @@
   
   {{#each listitems}}
   <div class="form-check">
-    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}}>
+    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>
     <label class="form-check-label" for="{{id}}">
       {{label}}
     </label>