@qld-gov-au/qgds-bootstrap5 2.0.5 → 2.0.7

package/src/components/bs5/button/button.scss

@@ -18,20 +18,16 @@
   //Primary button variant
   &-primary {
     --#{$prefix}btn-bg: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
     --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
+      --#{$prefix}light-action-primary-hover
     );
     --#{$prefix}icon-color: currentColor;
     --#{$prefix}icon-hover-color: currentColor;
@@ -41,12 +37,12 @@
   &-outline-secondary {
     --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
-    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}light-action-secondary);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
+    --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
@@ -57,7 +53,7 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
     --#{$prefix}gradient: none;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
   }
 
@@ -83,40 +79,32 @@
 .dark-alt .btn {
   //Primary button variant (dark mode)
   &-primary {
-    --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
+    --#{$prefix}btn-bg: var(--#{$prefix}dark-action-secondary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}text-darkest);
     --#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
   }
 
   //Secondary button variant (dark mode)
   &-secondary,
   &-outline-secondary {
-    --#{$prefix}btn-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary
-    );
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}white);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
     --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-hover-color: var(--#{$prefix}white);
@@ -124,13 +112,11 @@
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
     --#{$prefix}btn-focus-bg: transparent;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
   }
 
@@ -145,9 +131,7 @@
     --#{$prefix}btn-active-color: var(--#{$prefix}white);
     --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-background-shade);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
   }
 }
@@ -321,19 +305,15 @@ a.btn,
   &-tertiary {
     text-decoration: underline;
     text-underline-offset: 0.3em;
-    --qld-body-color: var(--#{$prefix}dark-green);
+    --qld-body-color: var(--#{$prefix}light-link);
 
     &:hover {
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:focus {
       background-color: var(--#{$prefix}btn-hover-bg);
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:active {
@@ -409,7 +389,7 @@ a.btn,
   }
 
   &-tertiary {
-    --qld-body-color: var(--#{$prefix}golden-yellow);
+    --qld-body-color: var(--#{$prefix}dark-link);
 
     &:hover {
       --qld-body-color: var(--#{$prefix}dark-action-secondary-hover);
@@ -421,7 +401,7 @@ a.btn,
 
     &:active {
       text-decoration: none;
-      --qld-body-color: var(--#{$prefix}white);
+      --qld-body-color: var(--#{$prefix}dark-link);
     }
   }
 }

package/src/components/bs5/button/manifest.json

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

package/src/components/bs5/callToAction/callToAction.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as CallToActionStories from "./callToAction.stories";
 import defaultdata from "./callToAction.data.json";
 

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

@@ -16,14 +16,14 @@ export default {
     <div class="container">
       <div class="row">
         <div class="col">
-          ${new CallToAction({...args}).html}
+          ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({...args, label: 'Label', "class": [{"small": false}, {"view-all": false}]}).html}
+          ${new CallToAction({ ...args, label: "Label", class: [{ small: false }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>
-    `
+    `;
   },
   parameters: {
     design: {
@@ -31,7 +31,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=v3sxViBgYUUmwplL-0",
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -39,6 +41,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -54,14 +57,7 @@ export const Default = {
  * Call To Action - Light
  * */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -77,14 +73,7 @@ export const Light = {
  * Call To Action - Light-Alt
  * */
 export const LightAlt = {
-  parameters: {
-    backgrounds: {
-      default: 'LightAlt',
-      values: [
-        { name: 'LightAlt', value: 'var(--qld-light-alt-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -100,14 +89,7 @@ export const LightAlt = {
  * Call To Action - Dark
  * */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-dark-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -123,14 +105,7 @@ export const Dark = {
  * Call To Action - Dark-Alt
  * */
 export const DarkAlt = {
-  parameters: {
-    backgrounds: {
-      default: 'DarkAlt',
-      values: [
-        { name: 'DarkAlt', value: 'var(--qld-dark-alt-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `
@@ -149,33 +124,23 @@ export const Small = {
   args: {
     ...defaultdata,
     label: "View all",
-    class: [
-      {"small": true}, 
-      {"view-all": true},
-    ],
+    class: [{ small: true }, { "view-all": true }],
   },
   render: (args) => {
     return `
     <div class="container">
       <div class="row">
         <div class="col">
-          ${new CallToAction({...args}).html}
+          ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({...args, label: 'Label', "class": [{"small": true}, {"view-all": false}]}).html}
+          ${new CallToAction({ ...args, label: "Label", class: [{ small: true }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>
-    `
-  },
-  parameters: {
-    backgrounds: {
-      default: 'DarkAlt',
-      values: [
-        { name: 'DarkAlt', value: 'var(--qld-dark-alt-background)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/callout/Callout.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as CalloutStories from "./callout.stories";
 
 <Meta of={CalloutStories} />

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

@@ -1,20 +1,20 @@
 // callout.stories.js
-import { Callout } from './Callout.js';
-import defaultdata from './callout.data.json';
+import { Callout } from "./Callout.js";
+import defaultdata from "./callout.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Callout',
+  tags: ["autodocs"],
+  title: "3. Components/Callout",
   render: (args) => new Callout(args).html,
 
   argTypes: {
     title: {
-      name: 'Title',
+      name: "Title",
       description: `H3 title text for the callout.`,
     },
     content: {
-      name: 'Content',
-      description: 'Text content for the callout. Can include HTML markup.',
+      name: "Content",
+      description: "Text content for the callout. Can include HTML markup.",
     },
   },
 
@@ -33,7 +33,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98115&mode=design&t=Ue7c77KjVYU1eTGj-0",
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -41,6 +43,7 @@ export default {
  */
 export const Default = {
   args: defaultdata.default,
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -55,14 +58,7 @@ export const NoTitle = {
  */
 export const Light = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -81,14 +77,7 @@ export const Light = {
  */
 export const Alternative = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: 'Alternative',
-      values: [
-        { name: 'Alternative', value: 'var(--qld-light-grey-alt)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -107,14 +96,7 @@ export const Alternative = {
  */
 export const Dark = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -133,14 +115,7 @@ export const Dark = {
  */
 export const DarkAlternative = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: 'Dark alternative',
-      values: [
-        { name: 'Dark alternative', value: 'var(--qld-dark-blue)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/callout/manifest.json

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

package/src/components/bs5/card/Card.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as CardStories from "./card--no-action.stories";
 import defaultdata from "./card.data.json";
 

package/src/components/bs5/card/card.scss

@@ -50,9 +50,9 @@
   // Video styled card
   .video-overlay {
     --#{$prefix}video-nav-bg: var(--#{$prefix}light-action-primary);
-    --#{$prefix}video-nav-bg-rgb: 9, 84, 159;
+    --#{$prefix}video-nav-bg-rgb: 0, 94, 184;
     --#{$prefix}video-nav-bg-hover: var(--#{$prefix}light-action-primary-hover);
-    --#{$prefix}video-nav-bg-hover-rgb: 0, 62, 125;
+    --#{$prefix}video-nav-bg-hover-rgb: 0, 62, 150;
     --#{$prefix}video-nav-bg-opacity: 0.9;
     --#{$prefix}video-nav-color: var(--#{$prefix}dark-text);
     --#{$prefix}video-clock-icon-size: 1.25rem;
@@ -144,11 +144,11 @@
     }
     .video-overlay {
       --#{$prefix}video-nav-bg: var(--#{$prefix}dark-action-primary);
-      --#{$prefix}video-nav-bg-rgb: 120, 186, 0;
+      --#{$prefix}video-nav-bg-rgb: 132, 211, 255;
       --#{$prefix}video-nav-bg-hover: var(
         --#{$prefix}dark-action-primary-hover
       );
-      --#{$prefix}video-nav-bg-hover-rgb: 173, 211, 63;
+      --#{$prefix}video-nav-bg-hover-rgb: 166, 247, 255;
       --#{$prefix}video-nav-color: var(--#{$prefix}dark-action-text);
       --#{$prefix}video-play-icon-color: var(--#{$prefix}text-darkest);
     }
@@ -162,7 +162,7 @@
     --#{$prefix}card-footer-border: var(--#{$prefix}dark-border);
   }
   &-dark-alt {
-    --#{$prefix}card-bg: var(--#{$prefix}dark-blue);
+    --#{$prefix}card-bg: var(--#{$prefix}dark-alt-background);
     --#{$prefix}card-icon-background-color: var(
       --#{$prefix}dark-alt-background-shade
     );

package/src/components/bs5/card/manifest.json

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

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

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

package/src/components/bs5/contentFooterWrapper/manifest.json

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

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

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

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

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

package/src/components/bs5/correctincorrect/manifest.json

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

package/src/components/bs5/dateinput/Dateinput.stories.js

@@ -6,23 +6,22 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Forms/Dateinput",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Dateinput(args).html;
-  
   },
 
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {
-  },
+  argTypes: {},
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
 };
 
 /**
@@ -30,24 +29,18 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
  * Dark themed Date inputs
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: false},
-  },
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
-    },
+  args: {
+    ...defaultdata,
+    ...{ isDisabled: false },
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -63,20 +56,19 @@ export const Dark = {
  * Filled style Date inputs
  */
 export const Filled = {
-  args: { 
-	  ...defaultdata,
-	  ...{customClass: "form-style-filled"},
+  args: {
+    ...defaultdata,
+    ...{ customClass: "form-style-filled" },
   },
 };
 
-
 /**
  * Disabled Date inputs
  */
 export const Disabled = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: true},
+  args: {
+    ...defaultdata,
+    ...{ isDisabled: true },
   },
 };
 
@@ -85,8 +77,8 @@ export const Disabled = {
  */
 export const Valid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-success"},
+    ...defaultdata,
+    ...{ customClass: "qld-input-success" },
   },
 };
 
@@ -95,7 +87,7 @@ export const Valid = {
  */
 export const Invalid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-error"},
+    ...defaultdata,
+    ...{ customClass: "qld-input-error" },
   },
 };

package/src/components/bs5/dateinput/manifest.json

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

package/src/components/bs5/directionLinks/DirectionLinks.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as DirectionLinksStories from "./directionLinks.stories";
 
 <Meta of={DirectionLinksStories} />

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

@@ -10,6 +10,11 @@ import defaultdata from "./directionLinks.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Direction Links",
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
   render: (args) => {
     return `
     <!-- Grid container -->
@@ -51,6 +56,7 @@ export default {
     label: { control: "text" },
   },
   parameters: {
+    backgrounds: { disable: false },
     controls: { disable: true },
     design: {
       name: "QGDS Figma Reference",
@@ -69,10 +75,9 @@ export const Default = {};
  * Direction Link - Light
  * */
 export const Light = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+      value: "light",
     },
   },
   decorators: [
@@ -90,10 +95,9 @@ export const Light = {
  * Direction Link - Light-Alt
  * */
 export const LightAlt = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "LightAlt",
-      values: [{ name: "LightAlt", value: "var(--qld-light-alt-background)" }],
+      value: "alt",
     },
   },
   decorators: [
@@ -111,10 +115,9 @@ export const LightAlt = {
  * Direction Link - Dark
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
   decorators: [
@@ -132,10 +135,9 @@ export const Dark = {
  * Direction Link - Dark-Alt
  * */
 export const DarkAlt = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "DarkAlt",
-      values: [{ name: "DarkAlt", value: "var(--qld-dark-alt-background)" }],
+      value: "darkAlt",
     },
   },
   decorators: [