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

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

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

package/src/components/bs5/header/Header.mdx

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

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

@@ -163,6 +163,7 @@ export default {
     docs: {
       story: { height: "400px" },
     },
+    backgrounds: { disable: true },
   },
 };
 
@@ -172,12 +173,6 @@ export const MasterBrand = {
     ...masterbrand_variant,
     ...menu_state,
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story) => {
       return `
@@ -193,12 +188,6 @@ export const SubBrand = {
     ...subbrand_variant,
     ...menu_state,
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story) => {
       return `
@@ -212,12 +201,6 @@ export const SubBrand = {
 export const CoBrand = {
   args: mergeArgs(alternative_palette, cobrand_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;
@@ -249,12 +232,6 @@ export const CoBrand = {
 export const EndorsedBrand = {
   args: mergeArgs(sample_argtypes, endorsed_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;
@@ -286,12 +263,6 @@ export const EndorsedBrand = {
 export const StandaloneBrand = {
   args: mergeArgs(sample_argtypes, standalone_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;

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

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

package/src/components/bs5/icons/Icons.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Markdown } from "@storybook/blocks";
+import { Canvas, Meta, Story, Markdown } from "@storybook/addon-docs/blocks";
 import * as IconStories from "./icons.stories.js";
 import IconsSizes from "./mdx/_IconsSizes.mdx";
 

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

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

package/src/components/bs5/icons/mdx/_IconsSizes.mdx

@@ -1,5 +1,5 @@
 import { Sizes } from "../icons.stories";
-import { Story } from "@storybook/blocks";
+import { Story } from "@storybook/addon-docs/blocks";
 
 ## Sizes
 

package/src/components/bs5/image/Image.mdx

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

package/src/components/bs5/inpageAlert/InpageAlert.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 AlertStories from "./inpageAlert.stories";
 import defaultdata from "./inpageAlert.data.json";
 

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

@@ -3,7 +3,7 @@ import defaultdata from "./inpageAlert.data.json";
 
 /**
  * The Inpage Alert is also known as Page Alert or Alert
- * 
+ *
  * Inpage alert accepts the following classes: <code>.alert-success</code>, <code>.alert-info</code>, <code>.alert-warning</code>, and <code>.alert-danger</code>
  */
 
@@ -32,7 +32,8 @@ export default {
   render: (args) => {
     return new InpageAlert({ ...defaultdata, ...args }).html;
   },
-
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
   argTypes: {
     variantClass: {
       name: "Classes",
@@ -46,12 +47,7 @@ export default {
           "alert-error": "Error",
         },
       },
-      options: [
-        "alert-success",
-        "alert-info",
-        "alert-warning",
-        "alert-error",
-      ],
+      options: ["alert-success", "alert-info", "alert-warning", "alert-error"],
     },
     alertType: {
       name: "Alert Type",
@@ -59,15 +55,14 @@ export default {
     },
     headingTag: {
       name: "Heading Tag",
-      description: 'Heading tag for the In-page Alert component. Can be h2, h3, h4, h5 or h6.',
+      description:
+        "Heading tag for the In-page Alert component. Can be h2, h3, h4, h5 or h6.",
       control: "select",
       options: ["h2", "h3", "h4", "h5", "h6"],
     },
   },
-
 };
 
-
 /**
  * Default In-page Alert component.
  */
@@ -76,23 +71,12 @@ export const Default = {
   args: defaultdata,
 };
 
-
-
-
 /**
  * In-page Alert when presented inside a <code>.dark</code> or <code>.dark-alt</code> container.
  */
 
-
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-dark-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
 
   decorators: [
     (Story) => {

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

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

package/src/components/bs5/inpagenav/Inpagenav.mdx

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

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

@@ -13,7 +13,9 @@ export default {
         exclude: ["variantClass", "navitems"],
       },
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -21,6 +23,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -43,12 +46,7 @@ export const Default = {
  */
 export const Dark = {
   args: defaultdata,
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `

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

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

package/src/components/bs5/link/link.mdx

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

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

@@ -13,6 +13,7 @@ export default {
 
   render: (args) => new Link(args).html,
   //   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   argTypes: {
     url: {
       description: "The URL that the link points to",
@@ -61,6 +62,7 @@ export default {
    * @property {string} design.url - URL of the design parameter.
    */
   parameters: {
+    backgrounds: { disable: false },
     design: {
       name: "QGDS Figma Reference",
       type: "figma",
@@ -78,18 +80,14 @@ export const Default = {
   args: {
     ...defaultdata.default,
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
  * Link in 'Dark' colour theme.
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   args: {
     ...defaultdata.default,
     class: "dark",

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

package/src/components/bs5/logo/Logo.mdx

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

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

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

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

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

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

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

package/src/components/bs5/modal/Modal.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 ModalStories from "./modal.stories"
 
 import { Modal } from './Modal.js';

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

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

package/src/components/bs5/pagination/Pagination.mdx

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

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

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

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

@@ -14,13 +14,14 @@ export default {
         hideNoControlsWarning: true,
       },
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
  * Pagination (Default)
  */
-
 export const Default = {
   args: defaultdata,
 };
@@ -28,21 +29,18 @@ export const Default = {
 /**
  * Pagination when used inside a <code>.light</code> container
  */
-
 export const Light = {
   args: defaultdata,
-
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+      value: "light",
     },
   },
 
   decorators: [
     (Story) => {
       return `
-      <div class="">
+      <div class="light">
           ${Story()}
       </div>
       `;
@@ -51,18 +49,15 @@ export const Light = {
 };
 
 /**
- * Pagination when used inside a <code>.light-alternative</code> container
+ * Pagination when used inside a <code>.alt</code> container
  */
 
 export const LightAlternative = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light Alternative",
-      values: [
-        { name: "Light Alternative", value: "var(--qld-light-alt-background)" },
-      ],
+      value: "alt",
     },
   },
 
@@ -84,10 +79,9 @@ export const LightAlternative = {
 export const Dark = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
 
@@ -109,12 +103,9 @@ export const Dark = {
 export const DarkAlternative = {
   args: defaultdata,
 
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark Alternative",
-      values: [
-        { name: "Dark Alternative", value: "var(--qld-dark-alt-background)" },
-      ],
+      value: "darkAlt",
     },
   },
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.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 promotionalPanelStories from "./promotionalPanel.stories";
 import defaultdata from "./promotionalPanel.data.json";
 

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

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

package/src/components/bs5/searchInput/SearchInput.mdx

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

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

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

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

@@ -17,6 +17,14 @@ export default {
       },
       story: { height: "400px" },
     },
+    backgrounds: {
+      disable: false,
+    },
+  },
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
   },
 };
 
@@ -48,12 +56,7 @@ export const Dark = {
   args: {
     ...defaultdata,
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -72,12 +75,7 @@ export const Dark = {
  */
 export const DarkFilled = {
   args: { ...defaultdata, customClass: "is-filled" },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `

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

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

package/src/components/bs5/sidenav/Sidenav.mdx

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

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

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

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

@@ -10,8 +10,9 @@ export default {
   },
 
   argTypes: {},
-
+  globals: { backgrounds: { value: "default" } },
   parameters: {
+    backgrounds: { disable: false },
     docs: {
       controls: {
         exclude: ["navlist", "navtitlelink"],
@@ -26,6 +27,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -46,12 +48,7 @@ export const Default = {
  *
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   args: defaultdata,
   decorators: [
     (Story) => {

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

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

package/src/components/bs5/skiplinks/SkipLinks.mdx

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

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

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

package/src/components/bs5/table/Table.mdx

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

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

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

package/src/components/bs5/tabs/Tabs.mdx

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

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

@@ -28,8 +28,7 @@
       {
         "tab_text": "Tab label 4",
         "title": "Section Heading Item 4",
-        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        "disabled": true
+        "content": "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>"
       },
       {
         "tab_text": "Tab label 5",