Skip to content

Design System v1.21.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 09 Jun 01:29
· 6 commits to master since this release
v1.21.0
2645203

Released on 9 June 2026

This release delivers significant improvements to code quality, maintainability, accessibility, security, and the developer experience. Key highlights include modernised linting and configuration management, enhanced Storybook integration, expanded component documentation, Chromatic visual testing, and several accessibility and security fixes. #417

Improvements

Accessibility - CTA Link Icons

  • Fixed CTA link icons not displaying in Windows High Contrast Mode.
  • Migrated CTA icons to inline SVGs using fill: currentColor to ensure visibility when system colour overrides are applied.

Tables - Default Vertical Alignment

  • Updated table cells and headers to use vertical-align: top by default.
  • Added .qld__align-middle utility class for optional middle alignment.

Banner Component - Theme Texture Support

  • Updated banner styling to correctly display:
    • Light texture images for light and alt themes.
    • Dark texture images for dark and dark-alt themes.

Utility Classes - Spacing Utilities

  • Moved spacing utility classes from the Extended repository into Core.
  • Removed the duplicate utility implementation from Extended.

Repository Cleanup - Removed Legacy Documentation Files

  • Removed redundant .html documentation files for components now fully documented in Storybook.

Removed Deprecated Intermediate Banner Component

  • Removed the intermediate banner component from the repository as it is no longer used.

Fixes

Mega Menu Accessibility

  • Fixed keyboard accessibility issues in Mega Main Navigation.
  • ESC, UP Arrow, and TAB navigation now correctly close expanded accordion panels.
  • Refactored mega_main_navigation/global.js into a modern ES module structure with smaller, maintainable functions.
  • Added Storybook interaction tests covering keyboard behaviour.

Search Security (XSS)

  • Fixed a potential XSS injection vector in Funnelback search results.
  • Sanitised search term output by removing unsafe rendering via triple Handlebars braces.
  • Applied the fix across the basic search implementation.

Search Results Messaging

  • Fixed the "No Results" page not displaying the user's search term.
  • Added the missing Handlebars variable so search queries are now correctly shown in the no-results message.

Linting and Configuration Modernisation

ESLint Migration

  • Replaced legacy .eslintrc and .editorconfig files with a modern flat-config eslint.config.mjs.
  • Consolidated linting support for:
    • JavaScript
    • CSS/SCSS
    • JSON
    • Markdown
  • Integrated Prettier and Storybook linting support.
  • Updated project scripts and dependencies to align with the new configuration.
  • Removed deprecated .eslintignore in favour of native ignore patterns within the new configuration.

Stylelint Improvements

  • Added .stylelintrc.json for CSS and SCSS linting.
  • Enforced BEM naming conventions.
  • Updated rules for improved SCSS compatibility.
  • Enhanced .stylelintignore to exclude build artefacts and external dependencies.

Tooling Updates

  • Updated ESLint, Prettier, Stylelint, and associated plugins across the core repository.

Storybook Enhancements

Handlebars Support

  • Added a custom Vite plugin (vite-plugin-hbs.js) to precompile Handlebars templates during build.
  • Enables direct Handlebars imports within stories.
  • Improves Storybook build performance and maintainability.

Storybook Configuration

  • Refactored .storybook/globals.js to provide:
    • Centralised componentLinks mapping
    • Reusable storyParams helper
    • Standardised QLD Design System and Figma documentation links

Developer Experience Improvements

  • Enabled Storybook AutoDocs.
  • Improved theme handling and preview configuration.
  • Updated Storybook introduction page to reference the project README.

Storybook Documentation Coverage - Added or expanded documentation for:

  • Banner
    • Basic
    • Advanced
    • Icon tiles
  • Button
  • Card
    • Single action
    • Multi action
    • Feature
    • No action
  • Forms
    • Checkbox
    • Radio button
    • Select
    • Text area
    • Text input
    • Validation examples
  • Global Alert
  • Table
  • A–Z Listing
  • Abstract
  • In-page Navigation

Visual Testing and CI/CD

Chromatic Integration

  • Added Chromatic visual regression testing to the Design System Core repository.
  • Configured CI/CD integration for the develop branch.
  • Added GitHub Actions workflow with:
    • Branch filtering
    • Concurrency controls
    • Automated visual testing

This release modernises the development toolchain, improves Storybook documentation and testing capabilities, strengthens accessibility and security, and removes legacy technical debt. These changes provide a more maintainable platform and a better developer experience for future component development.

Assets 2
Loading