Design System v1.20.1

Released on 26 February 2026

This pull request updates the breadcrumb navigation in the component.hbs template for the basic search component to improve visual clarity and user experience. The main change is the addition of chevron icons between breadcrumb items, making the navigation path more visually distinct. #392

Breadcrumb visual enhancements:

• Added chevron icons ( <svg class="qld__icon"> ) between asset lineage items in the breadcrumb list, except after the last item, to visually separate navigation steps.
• Inserted chevron icons between breadcrumb items in the search result navigation for "Services", "Locations", and the title, enhancing the separation between each step.

Design System v1.20.0

Released on 25 February 2026

This release includes a set of refinements across colours and theming, navigation accessibility, and CTA links, tags and icon styling, along with expanded Storybook coverage and documentation. These updates improve consistency, accessibility and overall quality across the system. #391

Colours & theming

• Updated a core dark border colour to meet non‑text contrast requirements, improving readability for inputs and related components in dark themes. #389

Improved navigation accessibility

• Fixed invalid ARIA attributes on main navigation toggle buttons to meet WCAG requirements. #386
• Corrected active state styling for main navigation links with dropdowns so they match design specs across light/dark themes. #378

CTA links, tags, and icons

• Updated CTA link icons alignment (including “View all”) so they work reliably across all environments. #384
• Fixed link colour variables for hover/visited states so tags and links show correct, accessible colours. #377
• Resolved visited‑state tag hover contrast issues for ACTION tags. #377

Breadcrumbs & search metadata

• Replaced breadcrumb chevrons with SVG icons for better consistency and rendering. #381
• Added missing assetLineage and breadcrumb information to Funnelback metadata for basic search. #390

Storybook coverage and docs

• Added/expanded Storybook stories and docs for:
  * Callout #382
  * Loading spinner #382
  * Header #380
  * Footer #379
  * Icon library (browseable icon set) #388
• Enabled hot module reloading in Storybook for JS, SCSS, HBS, and MDX files to speed up development. #384
• Updated Storybook SVG URL handling to work with the new URL validator.

Design System v1.19.2

Released on 4 February 2026

This patch release improves the Search results page query to align with Funnelback 16. #385

Design System v1.19.1

Released on 2 February 2026

This patch release includes updates to the src/components/basic_search/html/component.hbs template to improve consistency and correctness in how metadata is accessed and displayed in search results. The main focus is on replacing references to metaData with listMetadata throughout the template, ensuring the correct data source is used for rendering result details and links. #383

Design System v1.19.0

Released on 15 January 2026

This minor release includes Storybook framework upgrades, accessibility and navigation fixes, CodeQL security remediations, typography improvements, and various UX polish updates across banners, alerts, video player and search results. #374

New Features

New consistent font-weight design tokens #365

• Introduced standard font-weight tokens and removed hard-coded values:
  • $QLD-font-weight-regular
  • $QLD-font-weight-semibold
  • $QLD-font-weight-bold
• Replaced numeric and semantic font weights with tokens across typography utilities and components.
• Enforced bold (700) for the site title only; all other bold usage was updated to semibold (600).
• Aligned footer font weights with typography specifications.

Storybook documentation for the Promo Panel component (#362)

• Created Storybook stories for the Promo Panel, aligned with the Design System documentation.
• Ensured key variations were represented for designers and developers.

Storybook documentation for the Pagination component (#370)

• Added Storybook documentation and examples covering all Pagination variants.

GitHub Workflow – publish Storybook documentation

• Added a GitHub workflow to publish Storybook documentation to GitHub Pages: Design System Storybook.

Improvements

SVG Icon update – Promo Panel (#362)

• Updated SVG icon mappings for the Promo Panel
• Ensured metadata-selected Material icons took precedence over Font Awesome icons; otherwise, the Font awesome icon remained in use.

SVG Icon update – Basic search (#360)

• Updated record icons in basic search results, including document and file-type icons.
• Updated SVG icon mapping for search result types such as documents, spreadsheets, and presentations.

Accessibility – “Skip to menu” link behaviour (#368)

• Fixed the “Skip to main navigation” link so it behaved correctly for keyboard users on both desktop and mobile.
• Removed the incorrect id="mainmenu" usage on the main navigation.
• Updated mobile and small-viewport behaviour so the link targeted the main menu toggle button (id="menubutton"), improving keyboard navigation.

Storybook migration to @storybook/builder-webpack5 (#362)

• Migrated Storybook to the supported @storybook/builder-webpack5 stack and updated related configuration.
• Replaced deprecated webpack5 packages with the new builder tooling.
• Ensured all existing components, including JS-heavy components like the Video Player, continued to function correctly.
• Established the foundation for additional Storybook work in this release (Promo Panel and Pagination documentation, Figma link fixes, and more).

Fixes

Video player – transcript accordion label (#362)

• Fixed the video player transcript accordion label so it updated correctly between “show transcript” and “hide transcript”.

Advanced Banner – fix truncation of descenders

• Fixed truncation of descenders (e.g., “g”, “q”) in long primary titles.
• Adjusted heading typography and layout so very long titles rendered fully without clipping.

Global Alerts – fix margins for vertical navigation (#367)

• Fixed incorrect margins for global alerts on pages using vertical navigation (LHN).
• Updated layout so alerts used margins appropriate for vertical-nav layouts, ensuring correct alignment on both mobile and desktop when mainNavVerticalNav was enabled.

Vertical navigation – hover/active state fixes (dark mode) (#342)

• Fixed dark-mode-only issues affecting vertical navigation (LHN).
• Level 1 pages: prevented submenus from opening by default on level 1 landing pages and ensured open states displayed correctly.
• Level 2 hover: fixed background changes on parent level 1 links so only the hovered level 2 link reflected the state.
• Mobile: aligned level 1 hover/active behaviour with the desktop experience.

Security & Code Quality – Storybook CVE (GHSA-8452-54wp-rmv6) (#366)

• Addressed Storybook security advisory GHSA-8452-54wp-rmv6 by upgrading Storybook and verifying environment-variable usage.
• Confirmed the core repo did not use .env files at Storybook build time, reducing the risk of secret leakage.
• Upgraded Storybook from 10.1.3 → 10.1.10, establishing the final baseline for this release.

CodeQL – fix high and selected medium-severity findings (#372)

• Fixed high-severity and selected medium CodeQL alerts in the core repository.
• Targeted multiple components and helpers, including file upload, global JS files, internal navigation, in-page navigation, code component, and breadcrumbs.

Banner Advanced – image alignment & “light” style fixes (#363)

• Fixed multiple visual defects in advanced and standard banners, focusing on “hero image – grid aligned & scaled” and the “light” colour style.
• Hero image alignment: removed incorrect col-xl-4 usage and adjusted background-position to center scaled hero images both horizontally and vertically.
• Banner heading & abstract spacing: updated desktop line-height to prevent truncated descenders and increased mobile margin-top for better spacing.
• Light style: corrected theme application via site metadata and fixed secondary heading colours on white backgrounds.
• CTA behaviour: updated ul (unordered list) to wrap buttons properly on narrow/tablet widths, adding flex utility classes to prevent long button labels from overlapping hero images (qld__banner__content--cta qld__display-flex qld__flex-wrap qld__link-list).

Design System v1.18.4

Released on 24 November 2025

This patch release improves the header component's JavaScript by making the resize event handling more robust, particularly on Android devices, and by making the event removal function safer. The changes help prevent unnecessary function calls and potential errors during event cleanup. #359

Improvements to resize event handling:

• Added a lastWidth variable to track the previous window width and updated the resize event listener to ignore events where the viewport width hasn't changed. This addresses redundant resize events, especially on Android devices.

Event handling safety:

• Updated the removeEvent function to check for the existence of the event token and its element before attempting to remove the event listener, preventing possible runtime errors.

Design System v1.18.3

Released on 20 November 2025

This patch release refactors the header search open/close logic to improve accessibility and user experience, and updates some color variables for better visual consistency. The main changes are grouped into JavaScript functionality improvements and style updates.

JavaScript functionality improvements:

• The openHeader and closeHeader functions in global.js now accept a requireFocusChange parameter to control whether focus is shifted when opening or closing the header. This prevents unnecessary focus changes when resizing the window, improving accessibility.
• The event listener for window resizing now calls openHeader(false) and closeHeader(false) to avoid focus changes during desktop/mobile transitions.

Style updates:

• Updated $QLD-color-dark__link--visited to a lighter shade for improved contrast.
• Changed $QLD-color-dark__underline--visited to a new color for consistency with visited link styles.

Design System v1.18.2

Released on 19 November 2025

This patch release updates the color palette for both light and dark themes in the src/styles/imports/variables.scss file to align with new DPC QGDS Figma design guidelines. The changes focus on refreshing the look and feel by adjusting color values for site titles, accents, headings, text, links, actions, focus, borders, and backgrounds. #357

Light theme color updates:

• Updated site title, design accent, heading, text, link, action, focus, border, and background colors to new values for a fresher appearance.
• Changed alternate border and background colors to better match the revised palette.

Dark theme color updates:

• Revised design accent, link-on-action, action, focus, border, and background colors for improved contrast and consistency with the new design.
• Adjusted alternate border and background colors to complement the updated dark theme.

Design System v1.18.1

Released on 13 November 2025

This patch release includes minor improvements to the header JavaScript and search box CSS to enhance robustness and maintainability. #356

JavaScript robustness improvements:

Updated src/components/header/js/global.js to check for the existence of the searchToggle and its related elements before accessing their properties. This prevents potential runtime errors if elements are missing from the DOM.

CSS selector refinement:

Modified the selector in src/components/search_box/css/component.scss for the search input to remove the child combinator (>), ensuring the padding style applies to all matching inputs within the parent, not just direct children.

Design System v1.18.0

Released on 12 November 2025

This minor release introduces a mix of improvements to Storybook configuration, design system links, accessibility and styling for icons, and several CSS refinements for tags and forms. The main changes focus on enhancing consistency, accessibility, and maintainability across the codebase. #355

New Features

• Search Component – Added a search icon inside the form field.
• Footer Component – Added support for links in the “Contact us” row and a second row for two contact methods.
• Tabs Component – Implemented new SVG icons.
• Vertical Navigation (LHN) – Updated SVG icons.
• Core Icons – Added new alert-cancel-filled to the core SVG spritesheet.
• Extended Icons – Added three new icons and updated all component references.

Improvements

Typography

• Updated form hint text to XS size (14px) to align with design.
• Updated site title to use Noto Sans with bold 700 weight per the new brand book.
• Filter Tag Component – Updated margins and focus styling to match updated QGDS patterns.
• Code Component – Updated labels from “Example” → “Vanilla example” and “White” → “Default”.

Fixes

Focus & Accessibility

• Fixed focus outlines being cut off in mega menus with descriptions.
• Corrected focus outline colour for single action cards on dark backgrounds.
• Fixed focus outline for main title links in dark primary mega menus.
• Updated SVG logo with correct aria-label and <title>.
• Improved Windows High Contrast mode support for vertical nav accordion buttons.

Navigation & Menu Behaviour

• Fixed CTA links in mobile menus appearing beneath elements by adjusting z-index.
• Corrected hover/active states for Level 2 mobile links.
• Fixed visited link colour appearing on hover in the pre-header.

Styles & Layout

• Updated dropdown menu border-bottom colour to use CSS variables instead of hardcoded hex.
• Removed duplicate utility classes in the multi-column component to fix mobile spacing issues.

Maintenance

• Updated all icon metadata references after sprite updates.
• Removed deprecated ff-meta-web-pro from the site-title variable.