@qld-gov-au/qgds-bootstrap5 2.0.0 → 2.0.2

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

@@ -0,0 +1,112 @@
+import { Sizes } from "../icons.stories";
+import { Story } from "@storybook/blocks";
+
+## Sizes
+
+We have 6 preset sizes for icons ranging from extra small (xs) to extra
+extra large (xxl) and a dedicated feature size for large or detailed icons.
+Feature icons use a background shade to help make it stand out from other
+elements on the page.
+
+This size range allows for flexibility and adaptability in various design
+contexts while maintaining visual harmony and balance. These predefined
+sizes ensure that icons are proportionate and legible, enhancing their
+effectiveness and the overall aesthetic of the site.
+
+<Story of={Sizes} />
+
+#### Usage
+
+Combine base class <code>qld-icon</code> with specific icon name and size
+class as listed here to set the icon size.
+
+<table class="table table-responsive">
+  <thead class="table-light">
+    <tr>
+      <th scope="col">Class</th>
+      <th scope="col">REM size</th>
+      <th scope="col">Pixel size</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>.qld-icon-xs</code>
+      </td>
+      <td>
+        <pre>1rem</pre>
+      </td>
+      <td>
+        <pre>16x16</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.qld-icon-sm</code>
+      </td>
+      <td>
+        <pre>1.25rem</pre>
+      </td>
+      <td>
+        <pre>20x20</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.qld-icon-md</code>
+      </td>
+      <td>
+        <pre>1.5rem</pre>
+      </td>
+      <td>
+        <pre>24x24</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.qld-icon-lg</code>
+      </td>
+      <td>
+        <pre>2rem</pre>
+      </td>
+      <td>
+        <pre>32x32</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.qld-icon-xl</code>
+      </td>
+      <td>
+        <pre>2.5rem</pre>
+      </td>
+      <td>
+        <pre>40x40</pre>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.qld-icon-xxl</code>
+      </td>
+      <td>
+        <pre>3rem</pre>
+      </td>
+      <td>
+        <pre>48x48</pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<h5 class="mt-5">Example code:</h5>
+
+{/* prettier-ignore-start */}
+```html
+<span class="qld-icon qld-icon-xxl qld-icon-design" aria-hidden="true"></span>
+<span class="qld-icon qld-icon-xl qld-icon-design" aria-hidden="true"></span>
+<span class="qld-icon qld-icon-lg qld-icon-design" aria-hidden="true"></span>
+<span class="qld-icon qld-icon-md qld-icon-design" aria-hidden="true"></span>
+<span class="qld-icon qld-icon-sm qld-icon-design" aria-hidden="true"></span>
+<span class="qld-icon qld-icon-xs qld-icon-design" aria-hidden="true"></span>
+```
+{/* prettier-ignore-end */}

package/src/components/bs5/icons/stories/storyFlexContainer.html

@@ -0,0 +1,18 @@
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xxl qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xl qld-icon-alert-information"></span>Icon XL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-lg qld-icon-alert-information"></span>Icon LG
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-md qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-sm qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xs qld-icon-alert-information"></span>Icon XXL
+</div>

package/src/components/bs5/icons/stories/storyInlineWithText.html

@@ -0,0 +1,18 @@
+<p>
+  <span
+    class="qld-icon is-inline qld-icon-xxl qld-icon-alert-information"
+  ></span
+  >Lorem ipsum dolor sit amet,
+  <span class="qld-icon is-inline qld-icon-xl qld-icon-alert-information"></span
+  >consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua.
+  <span class="qld-icon is-inline qld-icon-lg qld-icon-alert-information"></span
+  >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+  aliquip ex ea commodo consequat.
+  <span class="qld-icon is-inline qld-icon-md qld-icon-alert-information"></span
+  >Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+  eu fugiat nulla pariatur.
+  <span class="qld-icon is-inline qld-icon-xs qld-icon-alert-information"></span
+  >Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum.
+</p>

package/src/components/bs5/icons/stories/storySizes.html

@@ -0,0 +1,89 @@
+<div class="row align-items-end text-start">
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xxl qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre><strong class="mt-2">XXL:</strong> 64x64</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xl qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-lg qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-md qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-sm qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xs qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
+  </div>
+</div>
+
+<div class="row align-items-end text-start">
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xxl qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XXL:</strong> 64x64</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xl qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-lg qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-md qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-sm qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xs qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
+  </div>
+</div>

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

@@ -5,10 +5,7 @@ import * as ImageStories from "./image.stories";
 
 # Image
 
-<Canvas>
-  {/* Explicitly reference a specific story to avoid ambiguity */}
-  <Story of={ImageStories.FixedRatio} />
-</Canvas>
+<Canvas of={ImageStories.DefaultImage} />
 
 ## Design resources
 

package/src/components/bs5/inpageAlert/InpageAlert.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./inpageAlert.data.json";
 
 # In-page alert
 
-<Canvas>
-  <Story of={AlertStories.Success} />
-</Canvas>
+<Canvas of={AlertStories.Default} />
 
 ## Design resources
 

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

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as InpagenavStories from "./inpagenav.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as InpagenavStories from "./inpagenav.stories";
 
 <Meta of={InpagenavStories} />
 
 # Pagination
-<Canvas>
-  <Story of={InpagenavStories.Default} />
-</Canvas>
+
+<Canvas of={InpagenavStories.Default} />
 
 ## Design resources
 

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

@@ -5,9 +5,7 @@ import * as linkStories from "./link.stories";
 
 # Icon Link
 
-<Canvas>
-  <Story of={linkStories.Default} />
-</Canvas>
+<Canvas of={linkStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/link/link.scss

@@ -2,20 +2,12 @@
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
 
-  --#{$prefix}icon-background-color: var(--#{$prefix}light-action-secondary);
-  --#{$prefix}icon-background-color-hover: var(
-    --#{$prefix}light-action-secondary-hover
-  );
   --#{$prefix}link-color: var(--#{$prefix}light-link);
   --#{$prefix}link-text-decoration-color: var(--#{$prefix}light-link);
   --#{$prefix}link-gap: 0.5rem;
 
   .dark &,
   .dark-alt & {
-    --#{$prefix}icon-background-color: var(--#{$prefix}dark-action-secondary);
-    --#{$prefix}icon-background-color-hover: var(
-      --#{$prefix}dark-action-secondary-hover
-    );
     --#{$prefix}link-color: var(--#{$prefix}dark-link);
     --#{$prefix}link-text-decoration-color: var(--#{$prefix}dark-link);
     &:visited {
@@ -38,13 +30,12 @@
   width: fit-content;
 
   &:hover {
+    --#{$prefix}icon-color: var(--#{$prefix}action-icon-hover-color);
+
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);
     text-decoration-color: var(
       --#{$prefix}color-default-color-light-underline-default
     );
-    .qld-icon {
-      background-color: var(--#{$prefix}icon-background-color-hover);
-    }
   }
 
   &:visited {
@@ -61,10 +52,6 @@
     outline-offset: 2px;
     border-radius: 4px;
   }
-
-  .qld-icon {
-    background-color: var(--#{$prefix}icon-background-color);
-  }
 }
 
 .link-list {

package/src/components/bs5/linkColumns/linkColumns.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./linkColumns.data.json";
 
 # LinkColumns
 
-<Canvas>
-  <Story of={linkColumnsStories.Default} />
-</Canvas>
+<Canvas of={linkColumnsStories.Default} />
 
 ## Design resources
 

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

@@ -5,6 +5,4 @@ import stories from "./logo.stories";
 
 # Logo
 
-<Canvas>
-  <Story of={stories.Default} />
-</Canvas>
+<Canvas of={stories.Default} />

package/src/components/bs5/pageLayout/ThemeShowcase.stories.js

@@ -0,0 +1,249 @@
+export default {
+  title: "5. Templates/Theme Showcase",
+  render: (args) => {
+    return args.content;
+  },
+  argTypes: {
+    themeClass: {
+      control: { type: 'select' },
+      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
+      description: 'Theme class to apply to the content area',
+    },
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+      },
+    },
+  },
+};
+
+/**
+ * Default Theme
+ * The default theme uses the base color scheme without additional background styling
+ */
+export const DefaultTheme = {
+  args: {
+    content: `
+      <div class="default p-4 mb-4 border">
+        <h2>Default Theme</h2>
+        <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Background Utilities</h3>
+        <div class="row g-3">
+          <div class="col-md-4">
+            <div class="bg-default p-3 rounded">
+              <strong>.bg-default</strong><br>
+              Background using default theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light p-3 rounded">
+              <strong>.bg-light</strong><br>
+              Background using light theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light-alt p-3 rounded">
+              <strong>.bg-light-alt</strong><br>
+              Background using light alt color
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Light Theme
+ * The light theme provides a bright, clean appearance
+ */
+export const LightTheme = {
+  args: {
+    content: `
+      <div class="light p-4 mb-4 border">
+        <h2>Light Theme</h2>
+        <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Theme Features</h3>
+        <ul>
+          <li>Automatic color and background-color application</li>
+          <li>Optimized contrast ratios</li>
+          <li>Consistent styling across components</li>
+        </ul>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Alt Theme
+ * The alt theme provides an alternative light styling
+ */
+export const AltTheme = {
+  args: {
+    content: `
+      <div class="alt p-4 mb-4 border">
+        <h2>Alt Theme</h2>
+        <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <blockquote class="blockquote mt-4">
+          <p>"The alt theme provides visual variety while maintaining accessibility standards."</p>
+          <footer class="blockquote-footer">QLD Design System</footer>
+        </blockquote>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Theme
+ * The dark theme provides a bold, high-contrast appearance
+ */
+export const DarkTheme = {
+  args: {
+    content: `
+      <div class="dark p-4 mb-4 border">
+        <h2>Dark Theme</h2>
+        <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <div class="alert alert-info mt-4">
+          <h4 class="alert-heading">Dark Theme Benefits</h4>
+          <p class="mb-0">Reduces eye strain in low-light conditions and provides a sophisticated appearance.</p>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Alt Theme
+ * The dark alt theme provides an alternative dark styling
+ */
+export const DarkAltTheme = {
+  args: {
+    content: `
+      <div class="dark-alt p-4 mb-4 border">
+        <h2>Dark Alt Theme</h2>
+        <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Dark Utility Examples</h3>
+        <div class="row g-3">
+          <div class="col-md-6">
+            <div class="bg-dark p-3 rounded text-white">
+              <strong>.bg-dark</strong><br>
+              Dark background utility
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="bg-dark-alt p-3 rounded text-white">
+              <strong>.bg-dark-alt</strong><br>
+              Dark alt background utility
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Theme Comparison
+ * Shows all themes in a single view for comparison
+ */
+export const ThemeComparison = {
+  args: {
+    content: `
+      <div class="mb-4">
+        <h2>Theme Palette Comparison</h2>
+        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+      </div>
+      
+      <div class="row g-4">
+        <div class="col-lg-6">
+          <div class="default p-3 border">
+            <h3>Default Theme</h3>
+            <p>Base theme with neutral styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="light p-3 border">
+            <h3>Light Theme</h3>
+            <p>Clean, bright appearance.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="alt p-3 border">
+            <h3>Alt Theme</h3>
+            <p>Alternative light styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="dark p-3 border">
+            <h3>Dark Theme</h3>
+            <p>High contrast, modern look.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-12">
+          <div class="dark-alt p-3 border">
+            <h3>Dark Alt Theme</h3>
+            <p>Alternative dark styling with different background treatment.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="mt-5">
+        <h3>Background Utility Classes</h3>
+        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <div class="row g-3">
+          <div class="col-md-3">
+            <div class="bg-default p-2 text-center rounded">.bg-default</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light p-2 text-center rounded">.bg-light</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt p-2 text-center rounded">.bg-light-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark p-2 text-center rounded text-white">.bg-dark</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-default-shade p-2 text-center rounded">.bg-default-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-shade p-2 text-center rounded">.bg-light-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt-shade p-2 text-center rounded">.bg-light-alt-shade</div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};

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

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as PaginationStories from "./pagination.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as PaginationStories from "./pagination.stories";
 
 <Meta of={PaginationStories} />
 
 # Pagination
-<Canvas>
-  <Story of={PaginationStories.Default} />
-</Canvas>
+
+<Canvas of={PaginationStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./promotionalPanel.data.json";
 
 # Promotional Panel
 
-<Canvas>
-  <Story of={promotionalPanelStories.Default} />
-</Canvas>
+<Canvas of={promotionalPanelStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/quickexit/quickexit.hbs

@@ -5,7 +5,7 @@
     <div class="qld-quick-exit-inner container-fluid {{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
       <div class="qg-quick-exit__tips">
         {{#if hasIconInfo}}
-          <span class="qld-icon icon-info"></span>
+          <span class="icon-info"></span>
         {{/if}}
         <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
         <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">