@qld-gov-au/qgds-bootstrap5 2.0.1 → 2.0.3

package/src/components/bs5/icons/icons.scss

@@ -1,3 +1,8 @@
+@forward "./_icons.variables";
+@use "./_icons.list" as *;
+@use "./icons.sizes" as *;
+@use "../../../css/mixins" as m;
+
 /* @TODO: Remove lines in between once all the icons within the components have been synced with new icons.  */
 :root {
   //Define global icons as CSS variables
@@ -9,23 +14,6 @@
 }
 
 .qld-icon {
-  //Shared icon styles
-  display: inline-block;
-  width: 1.25rem;
-  height: 1.25rem;
-  background-position: center center;
-  background-repeat: no-repeat;
-  mask-position: center center;
-  -webkit-mask-position: center center;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-
-  //Default color
-  background: var(--#{$prefix}icon-color);
-
-  //Change color at component level... e.g. on cards.css, use:
-  // .card { --#{$prefix}icon-color: purple; }
-
   &.icon-dot-grid {
     mask-image: escape-svg(var(--icon-dot-grid));
     -webkit-mask-image: escape-svg(var(--icon-dot-grid));
@@ -50,69 +38,33 @@
 }
 /* @TODO: Remove all lines above once all the icons within the components have been synced with new icons.  */
 
-@import "./_icons.variables";
-@import "./_icons.list";
-@import "./_icons-multicolours.list";
-
-$prefixIcon: $prefix + "icon-"; // Prefix for icon classes, based on global prefix in main.scss
-$prefixIconQgds: "--qgds-icon-"; // This QGDS variable could be moved to the token or tolkien repo.
-
-// Ensure SVGs inherit the current text color
-// Comment out to use the "fill" attribute inside svg element instead
-/*
-svg {
-	fill: currentColor;
-} */
-
-// List of icon sizes
-$icon-sizes: (
-  "xs": 1rem,
-  "sm": 1.25rem,
-  "md": 1.5rem,
-  "lg": 2rem,
-  "xl": 2.5rem,
-  "xxl": 3rem,
-);
-
 // Loop through the icon names and create utility class for each
 .qld-icon {
-  display: inline-block;
-  width: 1.25rem;
-  height: 1.25rem;
-  background-position: center center;
-  background-repeat: no-repeat;
-  mask-position: center center;
-  mask-repeat: no-repeat;
-  mask-size: contain;
-  background-color: var(--#{$prefix}body-color); // Default icon color
+  @include m.make-icon();
+
+  &:where(svg) {
+    background-color: transparent;
+  }
 
   // Utility classes for icons
   // Note: mask-image is the preferred method for icons that are single colour, as it allows for easy colour changes using CSS variables.
   // The background-image method is used for SVG icons with multiple fill colours.
   @each $icon in $icon-names {
-    @if index($icons-multicolour, $icon) {
-      // Only use background-image for multi colours icons.
-      &.#{$prefixIcon}#{$icon} {
-        background-image: var(#{$prefixIconQgds}#{$icon});
-        -webkit-background-image: var(#{$prefixIconQgds}#{$icon});
-        background-color: transparent;
-      }
-    } @else {
-      &.#{$prefixIcon}#{$icon} {
-        mask-image: var(#{$prefixIconQgds}#{$icon});
-        -webkit-mask-image: var(#{$prefixIconQgds}#{$icon});
-      }
+    &-#{$icon} {
+      @include m.make-icon($name: $icon, $include-base: false);
+    }
+  }
+
+  // Loop through the icon sizes and create utility class for each size.
+  // Independent from the icon base class to allow sizing on inline SVG icons as well as CSS icons.
+  @each $key, $value in $icon-sizes {
+    &-#{$key} {
+      --icon-size: #{$value};
     }
   }
-}
 
-// Loop through the icon sizes and create utility class for each size.
-// Independent from the icon base class to allow sizing on inline SVG icons as well as CSS icons.
-@each $size, $value in $icon-sizes {
-  .#{$prefixIcon}#{$size} {
-    width: $value;
-    height: $value;
-    mask-size: $value;
-    background-size: $value;
+  // Better alignment for icons inline with text
+  &.is-inline {
+    @include m.make-icon($include-base: false, $is-inline: true);
   }
 }

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

@@ -1,29 +1,10 @@
 import iconNames from "./_icons.list.js";
-import { Card } from '../card/Card.js';
-import iconUsageHtml from './story-icon-usage.html?raw';
-import iconSizingHtml from './story-icon-sizing.html?raw';
+import storyInlineWithTextHtml from "./stories/storyInlineWithText.html?raw";
+import storyFlexContainerHtml from "./stories/storyFlexContainer.html?raw";
+import storySizesHtml from "./stories/storySizes.html?raw";
 
-const defaultdata = {
-  "title": "Card title",
-  "description": "Card body text",
-  "date": "",
-  "variantClass": "default",
-  "image": "",
-  "imageAlt": "",
-  "iconClasses": "",
-  "iconPosition": "icon-top",
-  "action": "no",
-  "link": "",
-  "arrow": false,
-  "feature": false,
-  "featureImagePosition": "",
-  "video": false,
-  "videoDuration": "",
-  "footer": "",
-  "equalHeight": false,
-};
-const SPRITE_PATH = './assets/img/icons-sprite.svg';
-const PREFIX_QGDS = 'qgds-icon-';
+const SPRITE_PATH = "./assets/img/icons-sprite.svg";
+const PREFIX_QGDS = "qgds-icon-";
 
 // Helper function to remove the prefix from icon names
 function _removePrefixQGDS(name) {
@@ -33,48 +14,42 @@ function _removePrefixQGDS(name) {
   return name;
 }
 
-
 // Default export for Storybook
 export default {
   tags: ["autodocs"],
   title: "1. Core Styles/Iconography",
-  render: () => {
-    return iconUsageHtml + `<hr>` + iconSizingHtml;
-  },
   parameters: {
     layout: "padded",
     docs: {
       title: "Iconography in default",
-    // page: null, // To disable autodocs 
+      // page: null, // To disable autodocs
     },
   },
 };
 
-// Exports default as Overview, in order to avoid another "Default" menu in Storybook
-export const Overview = {};
-
 // Story for displaying all icons as SVGs
 export const SvgIcons = () => {
   return `
     <div class="container">
     <div class="row row-cols-sm-2 row-cols-lg-4 row-cols-xl-5 g-4">
       ${iconNames
-    .map(name => 
-    {
-      return new Card({
-        ...defaultdata,
-        title: ``,  // Overrides card title to empty string
-        description: `
-                <div class="mb-4">
-                  <svg class="qld-icon-xl" aria-label="${_removePrefixQGDS(name)} icon" role="img" width="32" height="32" viewBox="0 0 32 32" focusable="false">
+        .map((name) => {
+          return `
+          <div class="col">
+            <div class="card">
+              <div class="card-body" style="text-align: center">
+                <div class="mt-12 mb-4">
+                  <svg class="qld-icon qld-icon-xl" aria-label="${_removePrefixQGDS(name)} icon" role="img" width="32" height="32" viewBox="0 0 32 32" focusable="false">
                     <use href="${SPRITE_PATH}#${PREFIX_QGDS}${name}" />
                   </svg>
                 </div>
                 <small>${_removePrefixQGDS(name)}</small><br><code style="font-size: 0.75rem"> #${PREFIX_QGDS}${name}</code>
-                `,
-      }).html
-    })
-    .join('')}
+              </div>
+            </div>
+          </div>
+          `;
+        })
+        .join("")}
     </div>
     </div>
   `;
@@ -87,26 +62,28 @@ export const CssIcons = () => {
     <div class="container">
     <div class="row row-cols-sm-2 row-cols-lg-4 row-cols-xl-5 g-4">
       ${iconNames
-    .map(name => new Card({
-      ...defaultdata,
-      title: ``,  // Override card title to empty string
-      description: `
-                <div class="mb-4">
+        .map((name) => {
+          return `
+          <div class="col">
+            <div class="card">
+              <div class="card-body" style="text-align: center">
+                <div class="mt-12 mb-4">
                   <span class="qld-icon qld-icon-xl qld-icon-${name}"></span>
                 </div>
                 <small>${_removePrefixQGDS(name)}</small><br><code style="font-size: 0.75rem">qld-icon-${name}</code>
-                `,
-      iconClasses: ``,
-    }).html)
-    .join('')}
+              </div>
+            </div>
+          </div>`;
+        })
+        .join("")}
     </div>
     </div>
   `;
 };
 CssIcons.storyName = "CSS Icons";
 
-// Story for displaying icon sizing variations
-export const Sizes = () => {
-  return iconSizingHtml;
-};
+export const Sizes = () => storySizesHtml;
+
+export const FlexContainer = () => storyFlexContainerHtml;
 
+export const InlineWithText = () => storyInlineWithTextHtml;

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/inpagenav/inpagenav.scss

@@ -3,9 +3,8 @@
 
 // QGDS specific In-page Navigation variables.
 .qld-inpage-nav {
-  --#{$prefix}inpage-nav-padding-left: 1.5rem;
-  --#{$prefix}inpage-nav-title-padding-left: $nav-link-padding-x;
-  --#{$prefix}inpage-nav-link-padding-left: $nav-link-padding-x;
+  --#{$prefix}inpage-nav-padding-left: 1.25rem;
+  --#{$prefix}inpage-nav-title-padding-left: 0;
   --#{$prefix}inpage-nav-link-padding-y: 0.25rem;
   --#{$prefix}inpage-nav-border-color: var(--#{$prefix}brand-primary);
 }
@@ -46,10 +45,15 @@
       padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
       color: var(--#{$prefix}nav-link-color);
+      text-decoration-line: underline;
     }
 
     &:first-child .nav-link {
       padding-top: 0;
     }
+
+    &:last-child .nav-link {
+      padding-bottom: 0;
+    }
   }
 }

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} />