@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.0

package/src/components/bs5/formcheck/stories/radio/radio.stories.js

@@ -1,5 +1,5 @@
 // FormcheckRadio.stories.js
-import { Formcheck } from "../../Formcheck.js";
+import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./radio.data.json";
 
 export default {
@@ -11,169 +11,77 @@ export default {
   globals: { backgrounds: { value: "default" } },
   parameters: { backgrounds: { disable: false } },
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {},
+  argTypes,
 };
 
-// Default story for Formcheck component
 export const Default = {
   args: { ...defaultdata },
-  parameters: {
-    controls: { include: `listitems` },
-  },
   globals: { backgrounds: { value: "default" } },
 };
 
 export const RadioDark = {
   args: { ...defaultdata },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioSmall = {
-  args: { ...defaultdata, id: "radioSmall" },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  args: { ...defaultdata, id: "checkboxSmall" },
+  render: (args) => `<div class="small">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioSmallDark = {
-  args: { ...defaultdata, id: "radioSmallDark" },
+  args: { ...defaultdata, id: "checkboxSmallDark" },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark small">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioValid = {
-  args: { ...defaultdata, id: "radioValid" },
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: true }).html}`,
 };
 
 export const RadioValidSmall = {
-  args: { ...defaultdata, id: "radioValidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
 };
 
 export const RadioValidDark = {
-  args: { ...defaultdata, id: "radioValidDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidDark" },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="valid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
 };
 
 export const RadioValidSmallDark = {
-  args: { ...defaultdata, id: "radioValidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmallDark" },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="valid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };
 
 export const RadioInvalid = {
-  args: { ...defaultdata, id: "radioInvalid" },
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: false }).html}`,
 };
 
 export const RadioInvalidSmall = {
-  args: { ...defaultdata, id: "radioInvalidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
 };
+
 export const RadioInvalidDark = {
-  args: { ...defaultdata, id: "radioInvalidDark" },
-  render: (args) => {
-    return `
-    <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidDark" },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
 };
 
 export const RadioInvalidSmallDark = {
-  args: { ...defaultdata, id: "radioInvalidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmallDark" },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="invalid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };

package/src/components/bs5/header/header.scss

@@ -425,9 +425,8 @@
     position: absolute;
     left: 0;
     right: 0;
-    top: 0.4rem;
     padding: 1rem var(--qld-container-padding-x);
-    background-color: var(--#{$prefix}header-color-bg);
+    background-color: var(--#{$prefix}body-bg);
 
     &.is-open {
       display: block;

package/src/components/bs5/icons/_icons.list.js

@@ -1,10 +1,4 @@
 export default [
-  "spinner-step-1",
-  "spinner-step-2",
-  "spinner-step-3",
-  "spinner-step-4",
-  "x",
-  "youtube",
   "accessibility",
   "alert-cancel",
   "alert-danger",
@@ -94,6 +88,10 @@ export default [
   "show",
   "sort-alpha",
   "speech",
+  "spinner-step-1",
+  "spinner-step-2",
+  "spinner-step-3",
+  "spinner-step-4",
   "spreadsheet",
   "status-cancel",
   "status-danger",
@@ -110,5 +108,7 @@ export default [
   "video",
   "view-all",
   "wheelchair",
-  "zoom",
+  "x",
+  "youtube",
+  "zoom"
 ];