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

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

@@ -2,6 +2,42 @@
 import { Tabs } from "./tabs.js";
 import defaultdata from "./tabs.data.json";
 
+// Generate argTypes for tab items dynamically
+const generateTabItemArgTypes = () => {
+  const argTypes = {};
+  const tabCount = defaultdata.data.items.length;
+
+  for (let i = 0; i < tabCount; i++) {
+    argTypes[`data.items.${i}.tab_text`] = {
+      name: `tabs item ${i} tab_text`,
+      description: `Tab ${i + 1} label text`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.title`] = {
+      name: `tabs item ${i} title`,
+      description: `Tab ${i + 1} section heading`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.icon`] = {
+      name: `tabs item ${i} icon`,
+      description: `Tab ${i + 1} icon classes`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.content`] = {
+      name: `tabs item ${i} content`,
+      description: `Tab ${i + 1} content HTML`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.disabled`] = {
+      name: `tabs item ${i} disabled`,
+      description: `Tab ${i + 1} disabled state`,
+      control: "boolean",
+    };
+  }
+
+  return argTypes;
+};
+
 export default {
   tags: ["autodocs"],
   title: "3. Components/Tabs",
@@ -32,6 +68,8 @@ export default {
       control: "text",
       defaultValue: "12345",
     },
+    // Dynamically generated tab item controls
+    ...generateTabItemArgTypes(),
   },
 };
 
@@ -52,49 +90,6 @@ export const ContainerTabsDefault = {
     type_variant: "container-tabs",
     unique_id: "234566",
     variant: "default",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 3",
-          title: "Section Heading Item 3",
-          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 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,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          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 6",
-          title: "Section Heading Item 6",
-          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>",
-        },
-      ],
-    },
   },
 };
 
@@ -107,49 +102,6 @@ export const ContainerTabsLight = {
     type_variant: "container-tabs",
     unique_id: "345678",
     variant: "light",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 3",
-          title: "Section Heading Item 3",
-          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 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,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          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 6",
-          title: "Section Heading Item 6",
-          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>",
-        },
-      ],
-    },
   },
 };
 
@@ -162,49 +114,6 @@ export const ContainerTabsAlt = {
     type_variant: "container-tabs",
     unique_id: "456789",
     variant: "alt",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 3",
-          title: "Section Heading Item 3",
-          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 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,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          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 6",
-          title: "Section Heading Item 6",
-          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>",
-        },
-      ],
-    },
   },
 };
 
@@ -217,49 +126,6 @@ export const ContainerTabsDark = {
     type_variant: "container-tabs",
     unique_id: "567890",
     variant: "dark",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 3",
-          title: "Section Heading Item 3",
-          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 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,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          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 6",
-          title: "Section Heading Item 6",
-          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>",
-        },
-      ],
-    },
   },
 };
 
@@ -272,48 +138,5 @@ export const ContainerTabsDarkAlt = {
     type_variant: "container-tabs",
     unique_id: "123456",
     variant: "dark-alt",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          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 3",
-          title: "Section Heading Item 3",
-          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 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,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          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 6",
-          title: "Section Heading Item 6",
-          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>",
-        },
-      ],
-    },
   },
 };

package/src/components/bs5/tag/Tag.mdx

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

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

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

package/src/components/bs5/tag/tag--large.stories.js

@@ -0,0 +1,53 @@
+// tag--large.stories.js
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Tag/Large",
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+// Large Tag story
+export const Large = {
+  args: defaultdata.large,
+};
+
+// Large Information Tag story with all variants
+export const LargeInformation = {
+  name: "Large Information variants",
+  args: {
+    ...defaultdata.info,
+    tagItems: defaultdata.info.tagItems.map((item) => ({
+      ...item,
+      classes: `${item.classes} tag-large`,
+    })),
+  },
+};
+
+// Large Action Tag story with all variants
+export const LargeAction = {
+  name: "Large Action variants",
+  args: {
+    ...defaultdata.action,
+    tagItems: defaultdata.action.tagItems.map((item) => ({
+      ...item,
+      classes: `${item.classes} tag-large`,
+    })),
+  },
+};

package/src/components/bs5/tag/tag--standard.stories.js

@@ -0,0 +1,39 @@
+// tag--standard.stories.js
+import { Tag } from './Tag.js';
+import defaultdata from './tag.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: '3. Components/Tag/Standard',
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+// Default Tag story
+export const Default = {
+  args: defaultdata.default,
+};
+
+// Info Tag story
+export const Information = {
+  args: defaultdata.info,
+};
+
+// Action Tag story
+export const Action = {
+  args: defaultdata.action,
+};

package/src/components/bs5/tag/tag--status.stories.js

@@ -0,0 +1,97 @@
+// tag--status.stories.js
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
+
+const sizes = {
+  "": "Small (Default)",
+  "tag-large": "Large",
+};
+
+const emphasis = {
+  "tag-low": "Low",
+  "tag-high": "High",
+};
+
+const types = {
+  "tag-neutral": "Neutral",
+  "tag-success": "Success",
+  "tag-warning": "Warning",
+  "tag-error": "Error",
+  "tag-information": "Information",
+};
+
+/**
+ * Construct Status tag for all possible variants with various sizes, emphasis levels, and types.
+ * @returns {HTML} HTMLMarkup of the tags.
+ */
+function statusVariantsMarkup() {
+  //Map through the emphasis levels and sizes objects.
+  return Object.entries(emphasis)
+    .map(([emClass, emLabel]) => {
+      return Object.entries(sizes)
+        .map(([sizeClass, sizeLabel]) => {
+          //Construct tagItems for each types.
+          let tagItems = [];
+          Object.entries(types).map(([typeClass, typeLabel]) => {
+            tagItems.push({
+              content: `${typeLabel}`,
+              classes: `${typeClass}`,
+            });
+          });
+
+          //Generate Tag component markup from all possible tag types.
+          const tagHtml = new Tag({
+            variant: defaultdata.status.variant,
+            tagItems: tagItems,
+            size: sizeClass,
+            emphasis: emClass,
+          }).html;
+
+          //Return Tag component markup in grid with tag's emphasis and size as label.
+          return `<div class="d-grid mb-4">
+                <div class="fw-bold">${emLabel} ${sizeLabel}</div>
+                <div class="btn-toolbar">
+                  ${tagHtml}
+                </div>
+              </div>`;
+        })
+        .join("");
+    })
+    .join("");
+}
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Tag/Status",
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+/**
+ * Show the Default mode of Status tags in all possible variants.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllStatusVariantsInDefaultMode = {
+  render: () => {
+    return statusVariantsMarkup();
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};