@qld-gov-au/qgds-bootstrap5 1.1.39 → 1.1.41

package/src/components/bs5/backToTop/backToTop.scss

@@ -1,9 +0,0 @@
-//--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// Widgets
-//--------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-.back-to-top {
-  --margin-top: 2rem;
-  margin-top: var(--margin-top);
-  width: fit-content;
-}

package/src/components/bs5/breadcrumbs/breadcrumb.functions.js

@@ -1,95 +0,0 @@
-/**
- * Initialise the Breadcrumb component.
- * Shorten long breadcrumbs when required.
- *
- * @memberof module:Breadcrumb
- *
- * @returns {void} Returns early when breadcrumb does not exist or its length is within set maxLength.
- */
-export function initBreadcrumb() {
-  // Set the standard breadcrumb length.
-  const maxLength = 4;
-
-  // Get the breadcrumb DOM element.
-  const breadcrumb = document.querySelector(".breadcrumb");
-  if (!breadcrumb) {
-    return;
-  }
-  const breadcrumbList = breadcrumb.querySelectorAll(".breadcrumb-item");
-
-  // Return when breadcrumb does not exist.
-  if (!breadcrumbList || !breadcrumbList.length) {
-    return;
-  }
-  // Shorten breadcrumb.
-  breadcrumbShorten(breadcrumbList, maxLength);
-}
-
-/**
- * Shorten long breadcrumb lists
- *
- * @memberof module:Breadcrumb
- *
- * @param  {Element} breadcrumbList - Breadcrumb DOM element.
- * @param  {number} maxLength - Standard maximum length for breadcrumb.
- * @returns {void} Returns early when breadcrumb does not exist or its length is within set maxLength.
- */
-export function breadcrumbShorten(breadcrumbList, maxLength = 4) {
-  // No shortening is required when breadcrumb does not exist or its length is within the maximum range.
-  if (!breadcrumbList || breadcrumbList.length <= maxLength) {
-    return;
-  }
-
-  breadcrumbList.forEach((crumb, index) => {
-    if (index > 1 && index < breadcrumbList.length - 2) {
-      crumb.classList.add("shortened");
-      crumb.querySelector("a").setAttribute("tabindex", -1);
-    }
-
-    if (index === 1) {
-      let expandCrumb = document.createElement("li"),
-        expandButton = document.createElement("a");
-
-      expandCrumb.classList.add("breadcrumb-item", "breadcrumb-toggle");
-
-      expandButton.setAttribute("href", "javascript:void(0)");
-      expandButton.setAttribute("aria-label", "Expand the breadcrumbs");
-      //expandButton.textContent = '[...]'
-      expandButton.addEventListener("click", breadcrumbExpand);
-
-      expandCrumb.appendChild(expandButton);
-      crumb.after(expandCrumb);
-    }
-  });
-}
-
-/**
- * Expand shortened breadcrumb lists
- *
- * @memberof module:Breadcrumb
- *
- * @param  {Event} event - The event that triggered this function.
- * @returns {void} Returns early when the breadcrumb does not exist or is empty.
- */
-export function breadcrumbExpand(event) {
-  const breadcrumb = event.target.closest(".breadcrumb");
-  if (!breadcrumb) {
-    console.log("breadcrumbExpand: Breadcrumb does not exist.");
-    return;
-  }
-  const breadcrumbList = breadcrumb.querySelectorAll(".breadcrumb-item");
-
-  if (!breadcrumbList || !breadcrumbList.length) {
-    console.log("breadcrumbExpand: Breadcrumb does not exist or is empty.");
-    return;
-  }
-
-  breadcrumbList[0].parentElement.classList.add("expanded");
-
-  breadcrumbList.forEach((crumb, index) => {
-    if (index > 1 && index < breadcrumbList.length - 2) {
-      crumb.classList.remove("shortened");
-      crumb.querySelector("a").setAttribute("tabindex", 0);
-    }
-  });
-}

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

@@ -1,34 +0,0 @@
-import { forGov } from "../breadcrumbs/breadcrumbs.data.json";
-import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js";
-const defaultData = { breadcrumbs: forGov };
-
-export default {
-  title: "4. Wrappers/Components/Breadcrumbs Wrapper",
-  render: (args) => {
-    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/contentFooterWrapper/contentFooterWrapper.stories.js

@@ -1,36 +0,0 @@
-import defaultdata from "./../contentFooter/contentFooter.data.json";
-import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js";
-
-export default {
-  title: "4. Wrappers/Components/Content Footer Wrapper",
-  render: (args) => {
-    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/contentWrapper/contentWrapper.stories.js

@@ -1,65 +0,0 @@
-// ComponentExample.stories.js
-import { ContentWrapperTest } from "./ContentWrapper.test.js";
-import defaultdata from "./contentWrapper.data.json";
-
-export default {
-  title: "4. Wrappers/Components/Content Wrapper",
-  render: (args) => {
-    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/fullPageWrapper/fullPage.stories.js

@@ -1,63 +0,0 @@
-import { FullPageTest } from "./fullPage.test.js";
-import { dcTerms } from '../metaDcTerms/MetaDcTerms.data.json';
-import metaOpenGraphData from '../metaOpenGraph/MetaOpenGraph.data.json';
-import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
-import menu_state  from "../navbar/navbar.variant.menuState.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",
-  "icon-root": masterbrand_variant["icon-root"],
-  icons: masterbrand_variant.icons,
-  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: "4. Wrappers/Full Page",
-  render: (args) => {
-    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/mainContainerWrapper/mainContainerWrapper.stories.js

@@ -1,50 +0,0 @@
-import { MainContainerWrapperTest } from "./mainContainerWrapper.test.js";
-
-//Data
-import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
-import menu_state from "../navbar/navbar.variant.menuState.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",
-  "icon-root": masterbrand_variant["icon-root"],
-  icons: masterbrand_variant.icons,
-  header: masterbrand_variant,
-  search: searchData,
-  navbar: menu_state,
-  breadcrumbs: breadcrumbsData.forGov,
-  globalAlert: globalAlertData.critical,
-  sidenav: sidenavData,
-  contentFooter: contentFooterData,
-  footer: footerData,
-};
-
-export default {
-  title: "4. Wrappers/Main Container Wrapper",
-  render: (args) => {
-    return new MainContainerWrapperTest(args).html;
-  },
-  args: defaultData,
-  argTypes: {
-  },
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      controls: {
-      },
-    },
-  },
-};
-
-/**
- * Default head metadata
- * 
- */
-export const Default = {};
-

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

@@ -1,85 +0,0 @@
-.navbar {
-    // ------------------------------------------------------------------------------------------------------------------
-    //  1. Assign local var using qgds-tokens
-    // ------------------------------------------------------------------------------------------------------------------
-    --#{$prefix}navbar-border-width: 0.5rem;
-    --#{$prefix}navbar-link-color: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}navbar-link-color-hover: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-text-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-    --#{$prefix}navbar-nav-text-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-light-background-default);
-    --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white);
-    --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}core-default-color-neutral-lighter);
-    --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}navbar-border-accent: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-action-secondary);
-    --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-light-text-heading);
-    --#{$prefix}navbar-hover-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
-    --#{$prefix}navbar-svg-color: var(--#{$prefix}core-default-color-brand-secondary-darkgreen);
-
-    // Mobile default is dark
-    --#{$prefix}navbar-overlay: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-    --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-light-action-secondary);
-    --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-    --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
-    --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}navbar-mobile-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}navbar-mobile-cta-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}navbar-mobile-cta-bg-color-open: var(--#{$prefix}color-default-color-dark-background-default);
-
-    // Toggle icons for mobile
-    --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
-    --#{$prefix}navbar-mobile-menu-toggle-boxshadow__hover: 0px 4px 8px 3px rgba(0, 0, 0, .1), 0px 1px 3px rgba(0, 0, 0, .2);
-    --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-light-background-default);
-
-    // ------------------------------------------------------------------------------------------------------------------
-    //  3. Modes
-    // ------------------------------------------------------------------------------------------------------------------
-    .alt &,
-    .light & {
-        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}color-default-color-light-text-default);
-        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-light-border-default);
-    }
-
-    .dark &,
-    .dark-alt & {
-        // Mobile default is dark
-        --#{$prefix}navbar-mobile-home-icon-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-mobile-menu-toggle-bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-        --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-
-        --#{$prefix}navbar-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-title-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-dark-text-heading);
-        --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
-
-        --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-link-color-hover: var(--#{$prefix}core-default-color-neutral-white);
-
-        --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white);
-        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
-        --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary);
-        --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default);
-        --#{$prefix}navbar-svg-color: var(--#{$prefix}color-default-color-dark-action-secondary);
-    }
-}
-

package/src/components/bs5/navbar/_icons.scss

@@ -1,64 +0,0 @@
-// ------------------------------------------------------------------------------------------------------------------
-//  1. Basic icons for navbar component
-// ------------------------------------------------------------------------------------------------------------------
-.navbar {
-    .dropdown-toggle {
-        .toggle_icon {
-            color: var(--#{$prefix}navbar-svg-color);
-            height: 1rem;
-            width: 1rem;
-            margin-left: .25rem;
-            vertical-align: middle;
-            -ms-flex-item-align: center;
-            align-self: center;
-
-            //Transitions for navbar
-            -webkit-transition: -webkit-transform .25s ease-in;
-            transition: -webkit-transform .25s ease-in;
-            transition: transform .25s ease-in;
-            transition: transform .25s ease-in, -webkit-transform .25s ease-in;
-
-            @include media-breakpoint-down(lg) {
-                height: 1.25rem;
-                width: 1.25rem;
-                // TO DO: This should be cleaner organised
-                float: right;
-                margin: .5rem;
-            }
-
-            @include media-breakpoint-down(md) {
-                height: 1rem;
-                width: 1rem;
-            }
-        }
-
-        &.show svg {
-            transform: rotate(180deg);
-        }
-    }
-
-    .dropdown-menu {
-        &__inner {
-            .chevron__icon {
-                height: 1.25rem;
-                width: 1.25rem;
-                color: var(--#{$prefix}navbar-svg-color);
-            }
-
-            a.dropdown-item {
-                position: relative;
-                .chevron__icon {
-                    position: absolute;
-                    top: 1.15rem;
-                    right: 0;
-                }
-            }
-        }
-    }
-
-    @include media-breakpoint-down(lg) {
-        .chevron__icon {
-            display: none;
-        }
-    }
-}

package/src/components/bs5/sidenavWrapper/SidenavWrapper.mdx

@@ -1,11 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SidenavWrapperStories from "./sidenavWrapper.stories"
-
-<Meta of={SidenavWrapperStories} />
-
-# Side Wrapper navigation
-This is a partial-block to embed more content inside another partial https://handlebarsjs.com/guide/partials.html#partial-blocks
-<Canvas>
-  <Story of={SidenavWrapperStories.Default} />
-</Canvas>
-

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

@@ -1,65 +0,0 @@
-// ComponentExample.stories.js
-import { SidenavWrapperTest } from "./SidenavWrapper.test.js";
-import defaultdata from "./../sidenav/sidenav.data.json";
-export default {
-  tags: ["autodocs"],
-  title: "4. Wrappers/Components/Side Navigation Wrapper",
-  render: (args) => {
-    return new SidenavWrapperTest(args).html;
-  },
-
-  argTypes: {
-  },
-
-  parameters: {
-    docs: {
-      controls: {
-        exclude: ["navlist", "navtitlelink"],
-      },
-    },
-  },
-};
-
-/**
- * Default side navigation
- * 
- */
-export const Default = {
-  args: defaultdata,
-  decorators: [
-    (Story) => {
-      return `
-      <div class="container-fluid">
-        <div class="row">
-        
-          ${Story()}
-        </div>
-      </div>
-      `;
-    },
-  ],
-};
-
-
-/**
- * Dark side navigation
- * 
- */
-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/stories/integration/MainIntegration.js

@@ -1,28 +0,0 @@
-/* global, __dirname */
-
-
-import Handlebars from 'handlebars';
-
-export class MainIntegration {
-
-  constructor(data, args = {}) {
-    console.log("contracutor");
-    this.data = data;
-    this.args = args;
-
-    this.template = data.template;
-    // Compile the template
-    this.compiled = Handlebars.compile(this.template)(this.data);
-
-    // For debugging purposes
-    console.log('Template:', this.template);
-    console.log('Data:', this.data);
-    //console.log('Compiled:', this.compiled);
-
-    return {
-      template: this.template,
-      data: this.data,
-      html: this.compiled,
-    };
-  }
-}

package/src/stories/integration/MainIntegration.mdx

@@ -1,10 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as Integration from "./integration.stories"
-
-<Meta of={Integration} />
-
-# Integration details
-<Canvas>
-  <Story of={Integration.Default} />
-</Canvas>
-

package/src/stories/integration/breadcrumb.data.json

@@ -1,28 +0,0 @@
-{
-  "breadcrumbs": [
-    {
-      "link": "#",
-      "linktext": "For government"
-    },
-    {
-      "link": "#",
-      "linktext": "Information and communication technology"
-    },
-    {
-      "link": "#",
-      "linktext": "Communication and publishing"
-    },
-    {
-      "link": "#",
-      "linktext": "Website and digital publishing"
-    },
-    {
-      "link": "#",
-      "linktext": "Website standards, guidelines and templates"
-    },
-    {
-      "link": "#",
-      "linktext": "Single Website Experience"
-    }
-  ]
-}

package/src/stories/integration/content.data.json

@@ -1,3 +0,0 @@
-{
-  "input": "data1"
-}

package/src/stories/integration/contentFooter.data.json

@@ -1,3 +0,0 @@
-{
-    "lastUpdated": "1987/12/10"
-}