@qld-gov-au/qgds-bootstrap5 1.1.41 → 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/globalAlert/GlobalAlert.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as GlobalAlertStories from "./globalAlert.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as GlobalAlertStories from "./globalAlert.stories";
+import defaultdata from "./globalAlert.data.json";
 
 <Meta of={GlobalAlertStories} />
 
 # Global alert
+
 <Canvas>
   <Story of={GlobalAlertStories.Critical} />
 </Canvas>
@@ -13,3 +15,7 @@ import * as GlobalAlertStories from "./globalAlert.stories"
 - [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-314551&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-97590&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/alerts-global)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/globalAlert/globalAlert.test.js

@@ -83,17 +83,9 @@ describe("initGlobalAlerts", () => {
     const globalAlertComponent = new GlobalAlert(testMockData);
     return `
         <!DOCTYPE html>
-        <html>
-          <head>
-            <meta charset="utf-8">
-            <link rel="stylesheet" href="${__dirname}/../../../../dist/assets/css/qld.bootstrap.css">
-          </head>
-          <body>
-            ${globalAlertComponent.html}
-            <script>${bootstrapJsFile}</script>
-            <script>${qldBootstrapJsFile}</script>
-          </body>
-        </html>
+        ${globalAlertComponent.html}
+        <script>${bootstrapJsFile}</script>
+        <script>${qldBootstrapJsFile}</script>
       `;
   };
 

package/src/components/bs5/header/_header-variables.scss

@@ -0,0 +1,272 @@
+@use "../../../css/mixins" as *;
+$prefix: "qld" !default;
+
+%header-variables {
+  // Header
+  @include register-vars(
+    "#{$prefix}header-",
+    (
+      color-text: var(--#{$prefix}color-default-color-light-text-default),
+      color-bg: var(--#{$prefix}color-default-color-light-background-default),
+    )
+  );
+
+  // Pre-header bar
+  @include register-vars(
+    "#{$prefix}header-pre-header-",
+    (
+      color-text: var(--#{$prefix}color-default-color-dark-text-default),
+      color-bg: var(--#{$prefix}color-default-color-dark-background-default),
+      boxshadow: (
+        0 1px 2px rgba(0, 0, 0, 0.2),
+        0 1px 3px 1px rgba(0, 0, 0, 0.1),
+      ),
+      color-link: var(--#{$prefix}color-default-color-dark-text-default),
+      color-outline-focus: var(
+          --#{$prefix}color-default-color-dark-focus-default
+        ),
+      color-link-decoration: var(
+          --#{$prefix}color-default-color-dark-underline-default
+        ),
+      color-link-decoration-focus: var(
+          --#{$prefix}color-default-color-dark-underline-default-hover
+        ),
+    )
+  );
+
+  // CTA Wrapper
+  @include register-vars(
+    "#{$prefix}header__cta-wrapper__cta-link",
+    (
+      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
+      -icon_color: var(--#{$prefix}color-default-color-dark-action-secondary),
+      -icon_hover_color: var(
+          --#{$prefix}color-default-color-dark-action-secondary-hover
+        ),
+      _dropdown_bg_color: var(
+          --#{$prefix}color-default-color-dark-background-default
+        ),
+    )
+  );
+
+  @include register-vars(
+    "#{$prefix}header__CTA",
+    (
+      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
+      _border_color: var(--#{$prefix}color-default-color-dark-border-default),
+    )
+  );
+
+  // Toggle main navigation
+  @include register-vars(
+    "#{$prefix}header__toggle-main-nav",
+    (
+      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
+      _border_color: var(--#{$prefix}color-default-color-dark-border-default),
+      __hover_bg: var(
+          --#{$prefix}color-default-color-dark-background-default-shade
+        ),
+      __hover_svg_color: var(
+          --#{$prefix}color-default-color-dark-action-secondary-hover
+        ),
+      __focus_outline_color: var(
+          --#{$prefix}color-default-color-dark-focus-default
+        ),
+      __svg_color: var(--#{$prefix}color-default-color-dark-action-secondary),
+    )
+  );
+
+  // COA and title
+  @include register-vars(
+    "#{$prefix}header__brand-image",
+    (
+      __crest_fill: var(--#{$prefix}color-default-color-light-crest-fill),
+      __subtype__border_color: var(
+          --#{$prefix}color-default-color-light-accent-design-accent
+        ),
+      __subtype__text_color: var(
+          --#{$prefix}color-default-color-light-site-title
+        ),
+    )
+  );
+  @include register-vars(
+    "#{$prefix}header__brand__anchor",
+    (
+      __hover_text_color: var(
+          --#{$prefix}color-default-color-light-link-default
+        ),
+      __hover_brand-image__text_color: var(
+          --#{$prefix}color-default-color-light-link-default
+        ),
+      __hover_headingsubline__text_color: var(
+          --#{$prefix}color-default-color-light-link-default
+        ),
+      __hover_brand-image__filter: (
+        drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
+        drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)),
+      ),
+    )
+  );
+
+  // Sitename heading
+  @include register-vars(
+    "#{$prefix}header__site-name",
+    (
+      __heading__text_color: var(
+          --#{$prefix}color-default-color-light-site-title
+        ),
+      __subline__text_color: var(
+          --#{$prefix}color-default-color-light-text-lighter
+        ),
+    )
+  );
+
+  // ------------------------------------------------------------------------------------------------------------------
+  //  3. Dark/dark-alt modes
+  // ------------------------------------------------------------------------------------------------------------------
+  .dark &,
+  .dark-alt & {
+    // Root (dark/dark-alt)
+    @include register-vars(
+      "#{$prefix}header",
+      (
+        _color: var(--#{$prefix}color-default-color-dark-text-default),
+      )
+    );
+
+    // Pre-header bar (dark)
+    @include register-vars(
+      "#{$prefix}header__pre-header",
+      (
+        _text_color: var(--#{$prefix}color-default-color-dark-text-default),
+        _boxshadow: (
+          0 1px 2px rgba(0, 0, 0, 0.2),
+          0 1px 3px 1px rgba(0, 0, 0, 0.1),
+        ),
+        __url_text_color: var(--#{$prefix}color-default-color-dark-link-default),
+        __anchor_text_color: var(
+            --#{$prefix}color-default-color-dark-text-default
+          ),
+        __anchor__focus_text_color: var(
+            --#{$prefix}color-default-color-dark-underline-default-hover
+          ),
+        __anchor_text_decoration_color: var(
+            --#{$prefix}color-default-color-dark-underline-default
+          ),
+        __anchor_text_decoration_thickness: var(
+            --#{$prefix}header-underline__thickness-thin
+          ),
+        __anchor_text_decoration_offset: var(
+            --#{$prefix}header-underline__offset
+          ),
+        __anchor__focus_text_decoration_color: var(
+            --#{$prefix}color-default-color-dark-underline-default-hover
+          ),
+        __anchor__focus_text_decoration_thickness: var(
+            --#{$prefix}header-underline__thickness-thick
+          ),
+      )
+    );
+
+    // Pre-header CTA elements (dark/dark-alt)
+    @include register-vars(
+      "#{$prefix}header__cta-wrapper__cta-link",
+      (
+        _text_color: var(--#{$prefix}color-default-color-dark-link-default),
+        -icon_color: var(--#{$prefix}color-default-color-dark-action-secondary),
+        -icon_hover_color: var(
+            --#{$prefix}color-default-color-dark-action-secondary-hover
+          ),
+      )
+    );
+
+    // Toggle navigation (dark/dark-alt)
+    @include register-vars(
+      "#{$prefix}header__toggle-main-nav",
+      (
+        _text_color: var(--#{$prefix}color-default-color-dark-link-default),
+        _border_color: var(--#{$prefix}color-default-color-dark-border-default),
+        __hover_bg: var(
+            --#{$prefix}color-default-color-dark-background-default-shade
+          ),
+        __hover_svg_color: var(
+            --#{$prefix}color-default-color-dark-action-secondary-hover
+          ),
+        __focus_outline_color: var(
+            --#{$prefix}color-default-color-dark-focus-default
+          ),
+        __svg_color: var(--#{$prefix}color-default-color-dark-action-secondary),
+      )
+    );
+
+    @include register-vars(
+      "#{$prefix}header__brand__anchor",
+      (
+        __hover_text_color: var(
+            --#{$prefix}color-default-color-dark-link-default
+          ),
+        __hover_brand-image__text_color: var(
+            --#{$prefix}color-default-color-dark-link-default
+          ),
+        __hover_headingsubline__text_color: var(
+            --#{$prefix}color-default-color-dark-link-default
+          ),
+        __hover_brand-image__filter: (
+          drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
+          drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)),
+        ),
+      )
+    );
+    @include register-vars(
+      "#{$prefix}header__brand-image",
+      (
+        __subtype__border_color: var(
+            --#{$prefix}color-default-color-dark-accent-design-accent
+          ),
+        __subtype__text_color: var(
+            --#{$prefix}color-default-color-dark-site-title
+          ),
+        __crest_fill: var(--#{$prefix}color-default-color-dark-crest-fill),
+      )
+    );
+
+    @include register-vars(
+      "#{$prefix}header__site-name",
+      (
+        __heading__text_color: var(
+            --#{$prefix}color-default-color-dark-site-title
+          ),
+        __subline__text_color: var(
+            --#{$prefix}color-default-color-dark-text-lighter
+          ),
+      )
+    );
+  }
+
+  .dark-alt & {
+    @include register-vars(
+      "#{$prefix}header-",
+      (
+        color-bg: var(--#{$prefix}color-default-color-dark-background-alt),
+        pre-header-color-bg: var(
+            --#{$prefix}color-default-color-dark-background-default
+          ),
+      )
+    );
+  }
+
+  .dark & {
+    @include register-vars(
+      "#{$prefix}header-",
+      (
+        color-bg: var(--#{$prefix}color-default-color-dark-background-default),
+        pre-header-color-bg: var(
+            --#{$prefix}color-default-color-dark-background-alt
+          ),
+        __cta-wrapper__cta-link-dropdown_bg_color: var(
+            --#{$prefix}color-default-color-dark-background-alt
+          ),
+      )
+    );
+  }
+}