What's happening

Added

• Yet another new domain for the NSW Design System! We have streamlined with a new domain from designsystem.digital.nsw.gov.au to designsystem.nsw.gov.au. Visit designsystem.nsw.gov.au today!
• Breadcrumbs update for mobile, ellipsis button to show all breadcrumbs for when there are >3 options and are viewed on a tablet/mobile device.

Patches

• Updated documentation site content

Added

• New domain for the NSW Design System! We now call designsystem.digital.nsw.gov.au home :)
• TypeScript types added to the NSW Design System
• Adds svg support to the Support list component
• Updates Twitter logo to X and adds in Accessibility attributes to social icons

Patches

• Update dependencies: @floating-ui/dom from 1.6.10 to 1.6.11
• Update dependencies: send, browser-sync, cookie and socket.io
• Updates custom domain for docs site alongside URL sanitisation refactorisation for side nav active link feature.

Added

• Feature: adds new Support list component.

Patches

• Fix: HTML tags and documentation content.
• Fix: Adds aria-label values for key CTAs on Map templates.
• Update dependencies: rollup
• Update dependencies: JamesIves/github-pages-deploy-action

Removed

• Sponsorship and partnership acknowledgement method outlining the guidelines for acknowledging sponsorship and partnership support. Now supported via a dedicated multi-variant component called Support list.

Patches

• Fix: improve the handling of the select and checkbox default selected state in the filters component by checking option.defaultChecked before setting option.checked, and using option.selectedIndex instead of setting it to an empty string on reset/clear.
• Update dependencies: @floating-ui/dom

Patches

• Fix: adds a <span class="sr-only"> inside the button element to ensure that buttons with icons have discernible text for accessibility.
• Fix: remove the role="group" attribute from <li> elements in the carousel component as it is not valid on a list item. The use of aria-roledescription, aria-label, and data-index attributes for accessibility purposes maintains accessibility standards after removing role="group".
• Update dependencies: replace deprected NSW Government brand assets
• Update dependencies: ws, engine.io-client and socket.io
• Update dependencies: JamesIves/github-pages-deploy-action
• Update dependencies: follow-redirects

Added

• Sponsorship and partnership acknowledgement: added a new method outlining the guidelines for acknowledging sponsorship and partnership support. The page includes instructions on placement and spacing, using the NSW Government Waratah logo, and arranging support logos.

Patches

• Fix: remove hover state from text tag component and set the cursor style explicitly to default.

Minor changes

• Feat: Class of nsw-footer__acknowledgement added to the <p> element in the footer component and the font size changed from 'md' to 'sm'.

Added

• Accessibility enhancement to the accordion component with the hidden=until-found attribute.

Patches

• Utility list: fixed the issue of clicking outside the tooltip or on a non-button element triggering unwanted behaviour in the utility list component.
• All JavaScript components' performance and reliability improvements:
  • JavaScript errors are now caught in each component to prevent them from affecting other components.
  • Selectors have been made more restrictive where appropriate.
  • Components now test whether properties exist before accessing attributes and child elements.
• Date-input: removed default browser padding on the legend element in the date input component.
• Main navigation component: fixed the issue of the main navigation not closing a previously opened menu in the Safari browser.
• Card carousel:
  • Drag/Swipe functionality: fixed an issue in the swipe-content.js code, ensuring the carousel updates its position dynamically during drag actions.
  • JavaScript enhancements: updated carousel.js to complement the changes in swipe-content.js.
  • Class inheritance: the Carousel class now extends SwipeContent.
  • Attribute handling: attributes are accessed using this.element instead of directly.
  • Drag functionality: introduced dragEnabled attribute to handle drag settings.
  • Conditional checks: added checks for null values in styles and dimensions.
  • Navigation button alignment: added padding: 0 on the .nsw-carousel button class in the _carousel.scss file. This change corrects the alignment issue caused by default padding values in iOS browsers.
  • Removal of unused methods: removed alignControlsFunc method and related controls alignment logic.
  • Example updates: adjusted our examples to demonstrate the drag functionality.

Added

• Date input: new Date input documentation outlining the usage of date input component.
• Date picker: new Date picker component allowing users to easily select dates in a user-friendly manner.

Added

• Implemented support for inverted demo examples for each component.
• Implemented support for themed demo examples for each component. This feature showcases how components and elements appear when presented with alternative color schemes or themes.
• SASS theming variables and updated developer documentation for theming to support multiple levels of customisation based on branding requirements, so that developers can easily implement and modify colour themes.
• Card carousel: new Card carousel component allowing users to view and interact with multiple cards in a visually appealing and navigable format.

Added

• Utility list component: new Utility list component giving users quick access to commonly used actions on content, including printing, downloading and sharing across different social media platforms.

Patches

• Multiple select component: fixed the absence of the nsw-multi-select__button element creation when an option was pre-selected onload.
• Support for the HTML select multiple in the filters component: updated the component's logic to recognise and manage multiple selections efficiently, providing users with enhanced filtering capabilities.

Added

• Contribution Criteria Page: added a new page outlining the criteria for contributions.
• Propose a New Component Page: added a new page to facilitate the submission of new component proposals.
• Build a New Component Page: added a new page to guide users through the process of building new components to showcase our contribution process.
• Back to top component: new Back to top component allowing users to navigate back to the top of the page for enhanced usability.

Patches

• Tabs Accessibility Bug: fixed an accessibility bug within tabs by including the aria-owns attribute to the role="tablist" element, ensuring improved accessibility for all users.
• Collapsible Filters Icon: fixed the size issue of the open/close icon for collapsible filters, enhancing visual consistency and user experience.

• Implemented consistent open/close animations and transforms across the main-nav, filters, and select components for a unified user experience.
• Documented the skip link functionality on the masthead page, improving accessibility and navigation.
• Enabled accordion open onload functionality, enhancing user interaction by automatically displaying content upon page load.
• Increased the tap target size of the footer links for improved usability and ease of navigation on various devices.

• New Popover component

• Adds utility classes for Background, Borders, Box Shadow, Display, Flex, Float, Overflow, Position, SVG, Text, Vertical align, Visibility and Z-index.
• New Close button component documentation

• New Link component documentation
• Added 'close on click outside' functionality to the Main navigation component

• Added new white outline Button variant
• Added pseudo content alternative text to Breadcrumbs right arrow icon to improve accessibility.

• New Tooltip and Toggletip component

• New landing pages templates

• Added support for multiple select filtering functionality
• Updated Filters component documentation with new multiple select examples and use cases
• Fixed minor bugs related to the multiple select functionality

• Added a disabled state to the Pagination component
• Updated the pink NSW Government colour palette names to fuchsia for consistent brand naming. Fuchsia is a more specific and precise color name than pink, helping to avoid confusion and ensure that the NSW Government brand is consistently represented

• Callout component heading level 4 changed to a paragraph tag with a .nsw-h4 class to ensure that the heading structure follows a logical and hierarchical order
• In-page alert component heading level 5 changed to a paragraph tag with a .nsw-h5 class to ensure that the heading structure follows a logical and hierarchical order
• Added a paragraph tag around text in Cards component to improve accessibility for users who rely on assistive technology to navigate.

• Moved Single select component to separate page
• New Multiple select component

• New Status labels component
• New File upload component
• New Loader component
• Updated HEX codes for the success green and warning orange status colours

• New Filters variants for instant and batch filtering

• New CSS variables for link theming and updated link hover colour
• Bug fix for Tabs component

• Fixed a bug on mobile version of main navigation

• Updated variants for input group

• CSS syntax fix for Hero banner component
• Bug fix for Main navigation component

• New Hero banner off-white variant
• New Footer brand palette and social variants

• New Dialog Component

• New Hero banner variant using line system
• Hero banner featured list accent line changed to Brand Light
• New Steps component
• New You are here method
• Added Ulitily classes for box shadow and borders
• Updated guidance for Header and Breadcrumbs components
• Added design and dev application information to Graphic elements page

• Updated Header component logo, padding and line height
• New Header variant for rectangular co-branded logos
• Added option to invert colours for dark sections

• Updated Header with new logo and added descriptor guidance
• Fixed Filters component scrolling issues

• Changed highlight bar width to be consistent across components
• Changed Global alert button colour
• Added compact variant to In page alert component
• Callout component UI update
• Updated HEX value for Red 04
• Added responsive font and line height CSS variables
• Updated guidance for Card component

• Changed new card modifier
• Form example names fix
• Header title changed to Brand dark
• In-page notifications renamed
• New row 3 palette colours
• New map demo pages