@qld-gov-au/qgds-bootstrap5 1.1.39 → 1.1.41

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

@@ -12,31 +12,31 @@ export default {
   //https://storybook.js.org/docs/api/arg-types
   argTypes: {
     type_variant: {
-      description: 'Type of tab system',
+      description: "Type of tab system",
       control: "select",
       options: ["container-tabs", "section-tabs"],
     },
     variant: {
-      description: 'Type variant for the tab system',
+      description: "Type variant for the tab system",
       control: "select",
       options: ["default", "light", "alt", "dark", "dark-alt"],
     },
     tab_variant: {
-      description: 'The previous sibling variant value is used to set the tab system colour scheme in the tab section component.',
+      description:
+        "The previous sibling variant value is used to set the tab system colour scheme in the tab section component.",
       control: "select",
       options: ["default", "light", "alt", "dark", "dark-alt"],
     },
     unique_id: {
-      description: 'Each tab system must have a unique id',
+      description: "Each tab system must have a unique id",
       control: "text",
       defaultValue: "12345",
     },
   },
-
 };
 
 /**
- * 
+ *
  * Tabs - Section Tabs Default Dark
  */
 export const SectionTabsDefaultDark = {
@@ -54,38 +54,44 @@ export const ContainerTabsDefault = {
     variant: "default",
     data: {
       items: [
-        {   
+        {
           tab_text: "Tab label 1",
           title: "Section Heading (H3)",
-          icon: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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>",
+          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>",
+          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>",
+          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>",
+          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>",
         },
       ],
     },
@@ -103,38 +109,44 @@ export const ContainerTabsLight = {
     variant: "light",
     data: {
       items: [
-        {   
+        {
           tab_text: "Tab label 1",
           title: "Section Heading (H3)",
-          icon: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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>",
+          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>",
+          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>",
+          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>",
+          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>",
         },
       ],
     },
@@ -152,38 +164,44 @@ export const ContainerTabsAlt = {
     variant: "alt",
     data: {
       items: [
-        {   
+        {
           tab_text: "Tab label 1",
           title: "Section Heading (H3)",
-          icon: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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>",
+          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>",
+          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>",
+          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>",
+          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>",
         },
       ],
     },
@@ -201,38 +219,44 @@ export const ContainerTabsDark = {
     variant: "dark",
     data: {
       items: [
-        {   
+        {
           tab_text: "Tab label 1",
           title: "Section Heading (H3)",
-          icon: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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>",
+          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>",
+          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>",
+          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>",
+          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>",
         },
       ],
     },
@@ -250,38 +274,44 @@ export const ContainerTabsDarkAlt = {
     variant: "dark-alt",
     data: {
       items: [
-        {   
+        {
           tab_text: "Tab label 1",
           title: "Section Heading (H3)",
-          icon: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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: "btn-icon fa-solid fa-arrow-up-right-from-square",
-          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>",
+          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>",
+          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>",
+          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>",
+          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>",
+          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/common/footer/footer.scss

@@ -1,150 +1,147 @@
 footer.qld-footer {
-
-    --qld-white: #fff;
-	--qld-light-grey: #f5f5f5;
-	--body-color: var(--qld-white);
-	--qld-link-color-rgb: 255, 255, 255;
-
-	//All themes
-	--#{$prefix}footer-border-width: 4px;
-	--#{$prefix}footer-border-color: #{$qld-brand-secondary};
-	--#{$prefix}footer-padding-y: 4rem;
-    --#{$prefix}footer-bg: var(--qld-brand-primary);
-    --#{$prefix}footer-color: var(--qld-white);
-    --#{$prefix}link-color-rgb: 255, 255, 255;
-    --#{$prefix}link-hover-color-rgb: 255, 255, 255;
+  --qld-white: #fff;
+  --qld-light-grey: #f5f5f5;
+  --body-color: var(--qld-white);
+  --qld-link-color-rgb: 255, 255, 255;
+
+  //All themes
+  --#{$prefix}footer-border-width: 4px;
+  --#{$prefix}footer-border-color: #{$qld-brand-secondary};
+  --#{$prefix}footer-padding-y: 4rem;
+  --#{$prefix}footer-bg: var(--qld-brand-primary);
+  --#{$prefix}footer-color: var(--qld-white);
+  --#{$prefix}link-color-rgb: 255, 255, 255;
+  --#{$prefix}link-hover-color-rgb: 255, 255, 255;
 }
 
 @include color-mode(dark) {
-	footer.qld-footer {
-		--#{$prefix}footer-bg: var(--qld-brand-primary-dark);
-	}
+  footer.qld-footer {
+    --#{$prefix}footer-bg: var(--qld-brand-primary-dark);
+  }
 }
 
 footer.qld-footer {
-	//Padding
-	padding-top: var(--#{$prefix}footer-padding-y);
-	padding-bottom: var(--#{$prefix}footer-padding-y);
-
-	//Border
-	border-top: solid;
-	border-top-width: var(--#{$prefix}footer-border-width);
-	border-top-color: var(--#{$prefix}footer-border-color);
-
-	//Colors
-	background: var(--#{$prefix}footer-bg);
-	color: var(--#{$prefix}footer-color);
-
-	.footer-column {
-		position: relative;
-
-		&.border-right {
-			padding-right: 3rem;
-
-			&:after {
-				position: absolute;
-				content: "";
-				width: 2px;
-				background: rgba(255, 255, 255, 0.2);
-				top: 0;
-				bottom: 0;
-				right: 2rem;
-			}
-		}
-	}
-
-	.footer-heading {
-		color: var(--qld-white);
-		font-size: 1.25rem;
-		margin-bottom: 1rem;
-		line-height: 1.5;
-		font-weight: 600;
-	}
-
-	.footer-contact-item {
-		display: flex;
-		align-items: center;
-		margin-bottom: 1.25rem;
-
-		.qld-icon {
-			--qld-icon-color: var(--qld-brand-accent);
-			display: block;
-			width: 1.5rem;
-			margin-right: 0.5rem;
-			background-color: var(--qld-icon-color);
-		}
-	}
-
-	.footer-crest {
-		display: block;
-		width: 252px;
-		margin-bottom: 1.5rem;
-		--component-icon-color: #fff;
-	}
-
-	//Footer Nav classes
-	.nav {
-		--#{$prefix}nav-link-color: var(--qld-white);
-		--#{$prefix}nav-link-hover-color: var(--qld-white);
-
-		&.footer-link-list {
-			.nav-link {
-				font-weight: 400;
-				margin-bottom: 0.75rem;
-				padding: 0;
-
-				&:first-child {
-					margin-top: 0.5rem;
-				}
-
-				&:focus-visible {
-					box-shadow: 0 0 0 3px var(--qld-white);
-				}
-			}
-
-			&--social .nav-link {
-				--component-icon-color: #fff;
-
-				&:first-child {
-					margin-top: -2px;
-				}
-
-				display: flex;
-				margin-bottom: 1.25rem;
-
-				svg {
-					width: 1.25rem;
-					margin-right: 0.75rem;
-				}
-
-				&:hover {
-					--component-icon-color: var(--qld-brand-accent);
-				}
-			}
-		}
-	}
-
-	svg path {
-		fill: var(--component-icon-color);
-	}
-
-
+  //Padding
+  padding-top: var(--#{$prefix}footer-padding-y);
+  padding-bottom: var(--#{$prefix}footer-padding-y);
+
+  //Border
+  border-top: solid;
+  border-top-width: var(--#{$prefix}footer-border-width);
+  border-top-color: var(--#{$prefix}footer-border-color);
+
+  //Colors
+  background: var(--#{$prefix}footer-bg);
+  color: var(--#{$prefix}footer-color);
+
+  .footer-column {
+    position: relative;
+
+    &.border-right {
+      padding-right: 3rem;
+
+      &:after {
+        position: absolute;
+        content: "";
+        width: 2px;
+        background: rgba(255, 255, 255, 0.2);
+        top: 0;
+        bottom: 0;
+        right: 2rem;
+      }
+    }
+  }
+
+  .footer-heading {
+    color: var(--qld-white);
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    line-height: 1.5;
+    font-weight: 600;
+  }
+
+  .footer-contact-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.25rem;
+
+    .qld-icon {
+      --qld-icon-color: var(--qld-brand-accent);
+      display: block;
+      width: 1.5rem;
+      margin-right: 0.5rem;
+      background-color: var(--qld-icon-color);
+    }
+  }
+
+  .footer-crest {
+    display: block;
+    width: 252px;
+    margin-bottom: 1.5rem;
+    --component-icon-color: #fff;
+  }
+
+  //Footer Nav classes
+  .nav {
+    --#{$prefix}nav-link-color: var(--qld-white);
+    --#{$prefix}nav-link-hover-color: var(--qld-white);
+
+    &.footer-link-list {
+      .nav-link {
+        font-weight: 400;
+        margin-bottom: 0.75rem;
+        padding: 0;
+
+        &:first-child {
+          margin-top: 0.5rem;
+        }
+
+        &:focus-visible {
+          box-shadow: 0 0 0 3px var(--qld-white);
+        }
+      }
+
+      &--social .nav-link {
+        --component-icon-color: #fff;
+
+        &:first-child {
+          margin-top: -2px;
+        }
+
+        display: flex;
+        margin-bottom: 1.25rem;
+
+        svg {
+          width: 1.25rem;
+          margin-right: 0.75rem;
+        }
+
+        &:hover {
+          --component-icon-color: var(--qld-brand-accent);
+        }
+      }
+    }
+  }
+
+  svg path {
+    fill: var(--component-icon-color);
+  }
+
+  .btn {
+    --#{$prefix}btn-color: var(--qld-white);
+    --#{$prefix}btn-border-color: var(--qld-brand-accent);
+    --#{$prefix}btn-hover-border-color: #f3f1dc;
+    --#{$prefix}btn-hover-color: var(--qld-white);
+    --#{$prefix}btn-hover-bg: transparent;
+    --#{$prefix}btn-active-color: #03213f;
+    --#{$prefix}btn-active-bg: var(--qld-light-grey);
+    --#{$prefix}btn-active-border-color: var(--qld-light-grey);
+  }
+
+  .footer-contact {
     .btn {
-        --#{$prefix}btn-color: var(--qld-white);
-        --#{$prefix}btn-border-color: var(--qld-brand-accent);
-        --#{$prefix}btn-hover-border-color: #f3f1dc;
-        --#{$prefix}btn-hover-color: var(--qld-white);
-        --#{$prefix}btn-hover-bg: transparent;
-        --#{$prefix}btn-active-color: #03213f;
-        --#{$prefix}btn-active-bg: var(--qld-light-grey);
-        --#{$prefix}btn-active-border-color: var(--qld-light-grey);
+      min-width: 200px;
+      margin-top: 0.5rem;
     }
-
-	.footer-contact {
-		.btn {
-			
-            min-width: 200px;
-			margin-top: 0.5rem;
-		}
-	}
+  }
 }

package/src/components/common/layout/container.scss

@@ -0,0 +1,22 @@
+// Customisations to Bootstrap 5's default grid system to align with the QGDS UI Kit specifications.
+
+:root {
+  // Maximum width for all containers, 86rem (or 1376px)
+  --qld-container-max-width: 86rem;
+
+  // Default horizontal padding for containers.
+  --qld-container-padding-x: 1rem;
+
+  // Increase horizontal padding for medium and larger viewports.
+  @include media-breakpoint-up(md) {
+    --qld-container-padding-x: 2rem;
+  }
+}
+
+.container {
+  width: 100%;
+  //Apply custom variables
+  max-width: var(--qld-container-max-width);
+  padding-left: var(--qld-container-padding-x);
+  padding-right: var(--qld-container-padding-x);
+}