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

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -10,107 +10,125 @@ $breadcrumb-divider-dark-flipped: url("data:image/svg+xml,<svg xmlns='http://www
 
 //OR using custom CSS properties scoped to the component
 .breadcrumb {
-    --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider)};
-    --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-flipped)};
-    --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}breadcrumb-bg: transparent;
-    --#{$prefix}breadcrumb-margin-bottom: 0;
-    --#{$prefix}breadcrumb-padding-y: 1.5rem 0 1rem;
-
-    .dark &,
-    .dark-alt & {
-        --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}color-default-color-dark-text-lighter);
-        --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider-dark)};
-        --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-dark-flipped)};
-    }
-
+  --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider)};
+  --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-flipped)};
+  --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}dark-grey-muted);
+  --#{$prefix}breadcrumb-bg: transparent;
+  --#{$prefix}breadcrumb-margin-bottom: 0;
+  --#{$prefix}breadcrumb-padding-y: 1.5rem 0 1rem;
+  --#{$prefix}breadcrumb-visited-link-color: var(--#{$prefix}color-default-color-light-link-default);
+  --#{$prefix}breadcrumb-visited-link-text-decoration-color: var(
+    --#{$prefix}color-default-color-light-underline-default
+  );
+  --#{$prefix}breadcrumb-visited-link-text-decoration-color-hover: var(
+    --#{$prefix}color-default-color-light-underline-default-hover
+  );
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}color-default-color-dark-text-lighter);
+    --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider-dark)};
+    --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-dark-flipped)};
+    --#{$prefix}breadcrumb-visited-link-color: var(--#{$prefix}color-default-color-dark-link-default);
+    --#{$prefix}breadcrumb-visited-link-text-decoration-color: var(
+      --#{$prefix}color-default-color-dark-underline-default
+    );
+    --#{$prefix}breadcrumb-visited-link-text-decoration-color-hover: var(
+      --#{$prefix}color-default-color-dark-underline-default-hover
+    );
+  }
 }
 
 @include color-mode(dark) {
-
 }
 
 .breadcrumb {
-    font-size: 0.875rem;
-
-    &.expanded {
-        .breadcrumb-toggle {
-            display: none;
-        }
+  font-size: 0.875rem;
+  &.expanded {
+    .breadcrumb-toggle {
+      display: none;
     }
+  }
 }
-
 .breadcrumb-item {
-    // Show only parent page breadcrumb on small screens
-    display: none;
-
-    &:nth-last-child(2) {
-        display: list-item;
-
-        &:before {
-            content: var(--#{$prefix}breadcrumb-divider);
-            float: left;
-            padding-right: var(--qld-breadcrumb-item-padding-x);
-            width: 1rem;
-        }
+  display: none;
+  line-height: 2rem;
+  &:nth-last-child(2) {
+    display: list-item;
+    &:before {
+      content: var(--#{$prefix}breadcrumb-divider);
+      float: left;
+      padding-right: var(--qld-breadcrumb-item-padding-x);
+      width: 1rem;
     }
-
-    + .breadcrumb-item {
-        &:before {
-            width: 1rem;
-        }
-    }
-
-    &.shortened {
-        height: 0;
-        overflow: hidden;
-        max-width: 0;
-        transition: max-width 0s;
-        padding: 0;
-    }
-
-    .breadcrumb-toggle {
-        border: 0;
-        padding: 0;
-        vertical-align: inherit;
+  }
+  a:after {
+    content: none;
+  }
+  &.shortened {
+    height: 0;
+    overflow: hidden;
+    max-width: 0;
+    transition: max-width 0s;
+    padding: 0;
+  }
+  .breadcrumb-toggle {
+    border: 0;
+    padding: 0;
+    vertical-align: inherit;
+  }
+  a:visited {
+    color: var(--#{$prefix}breadcrumb-visited-link-color);
+    text-decoration-color: var(--#{$prefix}breadcrumb-visited-link-text-decoration-color);
+    &:hover {
+      text-decoration-color: var(--#{$prefix}breadcrumb-visited-link-text-decoration-color-hover);
     }
+  }
 }
 
 @include media-breakpoint-up(md) {
-    .breadcrumb {
-        --#{$prefix}breadcrumb-padding-y: 2.5rem 0 1.5rem;
+  .breadcrumb {
+    --#{$prefix}breadcrumb-padding-y: 2.5rem 0 1.5rem;
+  }
+  .breadcrumb-item {
+    :after {
+      content: var(--#{$prefix}breadcrumb-divider-flipped);
     }
-
-    .breadcrumb-item {
-        + .breadcrumb-item:before {
-            content: var(--#{$prefix}breadcrumb-divider-flipped)
-        }
-        // Show current and parent page on medium screens
-        &:last-child {
-            display: list-item;
-        }
-
-        &:nth-last-child(2):before {
-            // Hide divider before parent page
-            content: none;
-        }
+    &:last-child {
+      content: none;
     }
+  }
 }
 
 @include media-breakpoint-up(lg) {
-
-    .breadcrumb {
-        --#{$prefix}breadcrumb-padding-y: 3rem 0 2rem;
-
-        font-size: 1rem;
+  .breadcrumb {
+    --#{$prefix}breadcrumb-padding-y: 3rem 0 2rem;
+
+    font-size: 1rem;
+  }
+  .breadcrumb-item {
+    display: list-item;
+    padding-left: 0;
+    padding-right: var(--qld-breadcrumb-item-padding-x);
+    & + .breadcrumb-item {
+      padding-left: 0;
+      &:before {
+        content: none;
+      }
     }
-    .breadcrumb-item {
-        // Show all breadcrumbs on large screens
-        display: list-item;
-
-        &:nth-last-child(2):not(:first-child):before {
-            // Show divider before parent page
-            content: var(--#{$prefix}breadcrumb-divider-flipped);
-        }
+    &:nth-last-child(2):not(:first-child):before {
+      content: none;
+    }
+    &.active {
+      &:before {
+        content: none;
+      }
     }
-}
+    a:after {
+      width: 1rem;
+      content: var(--#{$prefix}breadcrumb-divider-flipped);
+      float: right;
+      padding-left: var(--qld-breadcrumb-item-padding-x);
+    }
+  }
+}

package/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs

@@ -0,0 +1,11 @@
+<!-- breadcrumbs-->
+<div class="container-fluid alt">
+  <div class="container">
+    <div class="row">
+      <div class="container-xl">
+
+        {{> @partial-block }}
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js

@@ -0,0 +1,37 @@
+import { forGov } from "../breadcrumbs/breadcrumbs.data.json";
+import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js";
+import init from "../../../js/handlebars.init.js";
+import Handlebars from "handlebars";
+const defaultData = { breadcrumbs: forGov };
+
+export default {
+  title: "!Layout/Components/Breadcrumbs Wrapper",
+  render: (args) => {
+    init(Handlebars);
+    return new BreadcrumbsWrapperTest(args).html;
+  },
+  args: defaultData,
+  argTypes: {
+  },
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+/**
+ * Default head metadata
+ * 
+ */
+export const Default = {};
+

package/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs

@@ -0,0 +1,7 @@
+header before
+<main>
+{{#>breadcrumbsWrapper}}
+  {{> breadcrumbs breadcrumbs }}
+{{/breadcrumbsWrapper}}
+content after
+</main>

package/src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js

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

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

@@ -0,0 +1,3 @@
+{
+    "lastUpdated":  "1900-01-31"
+}

package/src/components/bs5/contentFooter/contentFooter.hbs

@@ -0,0 +1,4 @@
+<dl class="qld-content-dates">
+  <dt>Last updated:</dt>
+  <dd>{{formatDateOrToday lastUpdated }}</dd>
+</dl>

package/src/components/bs5/contentFooter/contentFooter.js

@@ -0,0 +1,10 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./contentFooter.hbs?raw";
+
+export class ContentFooter {
+
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

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

@@ -0,0 +1,59 @@
+import defaultdata from "./contentFooter.data.json";
+import { ContentFooter } from "./contentFooter.js";
+import init from "../../../js/handlebars.init.js";
+import Handlebars from "handlebars";
+
+export default {
+  title: "!Layout/Components/Content Footer",
+  render: (args) => {
+    init(Handlebars)
+    return new ContentFooter(args).html;
+  },
+
+  argTypes: {
+    lastUpdated: {
+      name: "Last updated",
+      description: `Date page was Last Updated`,
+      control: { type: 'text'  },
+    },
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+};
+
+/**
+ * Default Content Footer
+ * 
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+/**
+ * Default empty Content Footer
+ *
+ */
+export const DefaultEmpty = {
+  args: {
+  },
+  decorators:[Story => {
+    return `
+          ${Story()}
+      `;
+  }],
+};
+
+

package/src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs

@@ -0,0 +1,5 @@
+<div class="container qld-content-footer">
+  <div class="row">
+    {{> @partial-block }}
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+import defaultdata from "./../contentFooter/contentFooter.data.json";
+import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js";
+import init from "../../../js/handlebars.init.js";
+import Handlebars from "handlebars";
+
+export default {
+  title: "!Layout/Components/Content Footer Wrapper",
+  render: (args) => {
+    init(Handlebars)
+    return new ContentFooterWrapperTest(args).html;
+  },
+
+  argTypes: {
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+};
+
+/**
+ * Default head metadata
+ * 
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+

package/src/components/bs5/contentFooterWrapper/contentFooterWrapper.test.hbs

@@ -0,0 +1,13 @@
+<!-- Side Nav test -->
+<main>
+<div class="container-fluid">
+  {{#>contentFooterWrapper}}
+    {{> contentFooter }}
+    <p>inner contentFooterWrapper data</p>
+  {{/contentFooterWrapper}}
+</div>
+</main>
+    <footer class="qld-footer" role="contentinfo">
+<p>post contentFooterWrapper suffix</p>
+    </footer>
+

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

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

package/src/components/bs5/contentWrapper/ContentWrapper.test.js

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

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

@@ -0,0 +1,3 @@
+{
+    "title": "this is my title"
+}

package/src/components/bs5/contentWrapper/contentWrapper.hbs

@@ -0,0 +1,5 @@
+<!-- Content Wrapper -->
+<div class="col-12 col-lg-8 ps-lg-64 qld-content-body" id="content">
+  {{#if title}}<h1>{{title}}</h1>{{/if}}
+  {{> @partial-block }}
+</div>

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

@@ -0,0 +1,68 @@
+// ComponentExample.stories.js
+import { ContentWrapperTest } from "./ContentWrapper.test.js";
+import defaultdata from "./contentWrapper.data.json";
+import init from "./../../../js/handlebars.init";
+import Handlebars from "handlebars";
+
+export default {
+  title: "!Layout/Components/Content Wrapper",
+  render: (args) => {
+    init(Handlebars);
+    return new ContentWrapperTest(args).html;
+  },
+
+  argTypes: {
+    title: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+This is a partial-block to embed more content inside another partial. See [Handlebars Partial Blocks](https://handlebarsjs.com/guide/partials.html#partial-blocks) for more details.
+pass "title" to set title at top content block.
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Default Content Wrapper
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+          ${Story()}
+        </div>
+      </div>
+      `;
+    },
+  ],
+};
+
+
+/**
+ * Dark Content Wrapper
+ */
+export const Dark = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+        <div class="col-lg-4 col-md-5">
+        <div class="dark">
+          ${Story()}
+        </div>
+        </div>
+        </div>
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/contentWrapper/contentWrapper.test.hbs

@@ -0,0 +1,12 @@
+<!-- Content Wrapper test -->
+<div class="container-fluid">
+<div class="row">
+<p>pre contentWrapper prefix</p>
+</div>
+  <div class="row">
+{{#>contentWrapper}}
+  <p>inner contentWrapper data</p>
+{{/contentWrapper}}
+</div>
+  <p>post contentWrapper suffix</p>
+</div>

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

@@ -26,7 +26,7 @@
   --#{$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}core-default-color-neutral-black);
+  --#{$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);
@@ -40,7 +40,8 @@
   --#{$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);
-  @media (max-width: 991.98px) {
+  --#{$prefix}formIO-error: var(--#{$prefix}core-default-color-status-error-default);
+  @include media-breakpoint-down(lg) {
     --qld-footer-column-border-color: transparent;
   }
 

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

@@ -3,6 +3,7 @@
   // Measurements
   // -text
   --#{$prefix}footer-font-size: 0.875rem;
+  --#{$prefix}footer-title-font-size: 1.25rem;
   --#{$prefix}footer-text-underline-offset: 0.3em;
   --#{$prefix}footer-font-underline-boarder: 2px;
 
@@ -23,8 +24,9 @@
   --#{$prefix}footer-crest-max-width: 252px;
 
   // Form IO
-  --#{$prefix}formIO-feeback-font-weight: 700;
+  --#{$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;
 }

package/src/components/bs5/footer/footer-usingDefaults.data.json

@@ -0,0 +1,3 @@
+{
+
+}