@qld-gov-au/qgds-bootstrap5 2.0.6 → 2.0.8

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

@@ -15,7 +15,11 @@ export default {
       description: `Pass a JSON object containing an array of links to the component.`,
     },
   },
-
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
   decorators: [
     (Story, context) => {
       const { args } = context; // Deconstruct args from the context oject
@@ -47,30 +51,36 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98076&mode=design&t=Ge7frKNP4uEGswUz-0",
     },
+    backgrounds: {
+      disable: false,
+    },
   },
 };
 
 /**
  * Default Breadcrumbs story
  * */
-export const Default = {};
+export const Default = {
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
+};
 
 /**
  * Dark Breadcrumbs story
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
-
   args: {
     ...defaultdata.default,
     class: "dark",
   },
-
   decorators: [
     (Story) => {
       return `
@@ -92,10 +102,9 @@ export const WithExpanderDefault = {
  * Breadcrumbs with expander (Dark)
  * */
 export const WithExpanderDark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
   args: {

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

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

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

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

package/src/components/bs5/button/Button.mdx

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

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

@@ -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,12 +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 `
@@ -79,12 +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 `
@@ -103,12 +96,7 @@ export const Alternative = {
  */
 export const Dark = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -127,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-alt-background)" },
-      ],
-    },
-  },
+  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

@@ -429,6 +429,7 @@
       flex-wrap: wrap;
       .tag-item {
         margin: 0;
+        font-weight: normal;
       }
     }
     /////////////////////////////////////////////
@@ -458,7 +459,6 @@
       li.tag-link {
         border-color: var(--#{$prefix}card-link-color);
         font-size: 0.875rem;
-        font-weight: normal;
         &:hover {
           border-color: var(--#{$prefix}link-hover-colour);
           background-color: var(--#{$prefix}link-hover-colour);

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: [

package/src/components/bs5/footer/Footer.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 FooterStories from "./footer.stories";
 import defaultdata from "./footer.data.json";
 

package/src/components/bs5/footer/footer.hbs

@@ -38,24 +38,26 @@
        
           <div class="col-12">
             {{!-- Custom contact list --}}
-            {{#ifCond contact.showList "&&" contact.list}}
-            {{#each contact.list }}
-            <div class="footer-contact-item footer-contact-{{@key}}">
-              <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
-            </div>
-            {{/each}}
-            
-            {{else}}
-            {{!default contact list }}
-            <div class="footer-contact-item footer-contact-phone">
-              <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
-              rel="noopener">13 QGOV (13 74 68)</a>
-            </div>
-          
-            <div class="footer-contact-item footer-contact-email">
-              <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
-              href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
-            </div>
+            {{#ifCond contact.showList "!==" false}}
+              {{#ifCond contact.showList "&&" contact.list}}
+              {{#each contact.list }}
+              <div class="footer-contact-item footer-contact-{{@key}}">
+                <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
+              </div>
+              {{/each}}
+
+              {{else}}
+              {{!default contact list }}
+              <div class="footer-contact-item footer-contact-phone">
+                <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
+                rel="noopener">13 QGOV (13 74 68)</a>
+              </div>
+
+              <div class="footer-contact-item footer-contact-email">
+                <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
+                href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
+              </div>
+              {{/ifCond}}
             {{/ifCond}}
           </div>
         </div>

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

@@ -290,10 +290,6 @@
         padding-block-start: 0;
         padding-block-end: 0;
 
-        &:focus-visible {
-          box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border);
-        }
-
         span {
           display: block;
         }
@@ -323,7 +319,13 @@
 
     .btn {
       min-width: 10rem;
-      width: fit-content;
+      width: 100%;
+      margin-block-end: 1.5rem;
+
+      @include media-breakpoint-up(md) {
+        width: fit-content;
+        margin-block-end: 0;
+      }
     }
   }
 

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

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

package/src/components/bs5/formcheck/stories/checkbox/Checkbox.mdx

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