Update dependency hds-design-tokens to v3

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
hds-design-tokens	^2.13.0 -> ^3.0.0

---

Release Notes

City-of-Helsinki/helsinki-design-system (hds-design-tokens)

v3.2.0

Compare Source

React

Added

• [DateInput] Support for customising date styles
• [Login] Support for getting api tokens from Keycloak
• [Accordion] Support for customising close button styles

Changed

• [Button] CSS supports reset and button types

Fixed

• [Header.NavigationMenu] Fixed navigation menu on mobile
• [Header.ActionBar] Added aria-hidden for separator
• [Checbox] Fixed Checkbox label taking space even if label not given (when using an external component as the label for it)

Core

Changed

• [Button] CSS supports reset and button types

Fixed

• [Checkbox] Small changes to styles not to add padding when label not used (by using hds-checkbox__label--hidden class)

Templates

Added

• Added new template for error page

Documentation

Changed

• [Checkbox] Small addition to guide not to use the label-property at all when using an external label for the Checkbox
• [Accordion] Add close button theming properties

Figma

Added

• [Icons] Added a new vector icon for X, replacing Twitter

Changed

• [Footer] Replaced old Twitter icon with X icon
• [SearchInput] Improved responsiveness with auto layout

Fixed

• [Tabs] Background colour removed to support different application background colours. Note! When using Tabs with a scroll-button in Figma, ensure to adjust the button's gradient fill to match the application's background for visual consistency

Sketch & Abstract

Changed

• Updated HDS Sketch libraries to Sketch version 99.1. Please update your Sketch and files accordingly

Icons

Added

• [Icons] Added a new vector icon for X

Changed

• [Icons] Renamed twitter to xx_twitter to indicate it's deprecated state

v3.1.0

Compare Source

React

Added

• [Footer] Added onLogoClick callback
• [Container] Added a new attribute to align it with Header
• [Login] New login components and utilities to provide OIDC authentication and api tokens

Changed

• [Checkbox, DateInput, Dropdowns, FileInput, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea, TimeInput] Improved readability and accessibility of error, success and info states

Fixed

• [StepByStep] Fixed React warnings about missing keys.
• [Header] onDidChangeLanguage is now called only when language is changed.
• [Header] Fixed header dropdown overflow issues
• [DatePicker] Fixed selected date getting reseted in a controlled state
• [CookieConsent, Dropdown, FileInput, NumberInput, SearchInput, TextInput] Fixed button focus inside input components
• [Tag] Fixed margins with several lines long texts

Core

Changed

• [Checkbox, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea] Improved readability and accessibility of error, success and info states

Fixed

• [Tag] Border-radiuses and paddings to match designs
• [Link] Removed underline when using Button styles with Link

Documentation

Added

• [Footer] Added onLogoClick callback
• [Form validation] Live examples for validation pattern
• [Form validation] Links to multi-page guidelines and components
• [Login] Documentation for the new Login system

Changed

• [FileInput] Changed from beta to stable
• [Pagination] Changed from beta to stable
• [SearchInput] Changed from beta to stable

Fixed

Several new line issues breaking the documentation and examples
This is HDS -competition page was broken and not available
Unified error message implementation, examples and documentation

Design kit

Figma

We're excited to announce the availability of the HDS UI Kit in Figma (.fig) format! You can access it within the "hds-design-kit.zip" and import the file to use in your projects. Please be aware that this Figma file is independent and won't receive automatic updates from the original file.

If you're looking for an updatable Figma library, feel free to get in touch with the HDS team. An updatable version is accessible with Helsinki licenses, and we plan to make it available as a community file in the future. Stay tuned for updates!

Changed

• [Color styles] Quality of life improvement: added hex codes after color names for ease of access
• [Color styles] Changed greyscale color names to match token names, e.g. Grey-10 -> Black-10
• [Highlight] Changed the Quote to be a variant of Highlight component, not its own component, to match implementation

[HDS Form Components] Updated error, success and info text shared symbols in all input components

Removed

[Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.

Fixed

• [Highlight] Fixed paddings on all sizes and font, line-height to match implementation
• [Highlight] Linked text properties back to quote variants
• [Highlight] Correct color style attached to text color

Sketch/Abstract

Changed

• [HDS Form Components] Updated error, success and info text shared symbols in all input symbols

Removed

• [Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.

Fixed

• [Dropdown] Border for dropdown menu fixed from 2px to 1px and example updated according to that

v3.0.0

Compare Source

React

Breaking

• [Navigation] Removed, use new Header instead
• [Footer] Redesigned and rebuilt
• [StatusLabel, Tag] Rectangular versions removed
• [LinkBox] Property name withBorder changed to border
• [Koros] Renamed variants Wave to Vibration and Storm to Wave

Added

• [Header] Added new Header-component
  • [Header.UniversalBar] Added new UniversalBar component
  • [Header.ActionBar] Added new ActionBar component
    • [Header.ActionBarItem] New component to display button icons
  • [Header.LanguageSelector] Added new language selector component
  • [Header.Link] Added new component to be used under Header components
  • [Header.NavigationMenu] Added new NavigationMenu component
• [Footer] (changed) is now redesigned with new components
  • [Footer.Custom] New component for custom content
  • [Footer.Link] New link component to be used under Footer components
  • [Footer.NavigationGroup] New component for displaying grouped navigation links
  • [Footer.UtilityGroup] New component for displaying grouped utility links
  • [Footer.GroupHeading] New component for group components headings
• [Header, Footer] Added navigation landmarks.

Changed

• Supported browserlist updated
• [RadioButton] Default value is not recommended anymore
• [Footer] Redesigned and rebuilt

Fixed

• [Breadcrumb] Theme variable typos
• [LoadingSpinner] Made more polite accessibility-wise, not interrupting screen readers anymore

Removed

• [StatusLabel, Tag] Removed rectangular versions
• [Navigation] New Header component is the replacement

Core

Changed

• [Koros] Rename Koros variants according to brand
• [Koros] Renamed variants Wave to Vibration and Storm to Wave

Removed

• [StatusLabel, Tag] Rectangular version (default)

Documentation

Added

• [Header] Added new Header and its sub-components' documentations
• [Footer] Added new Footer and its sub-components' documentations
• Added documention for focus colour tokens
• Added navigation pattern guidelines
• Added new releases page
• Added new guide how to migrate to 3.0.0

Changed

• [Koros] Rename Koros variants according to brand
• [Koros] Fix Storm and Wave Koros variant usage
• [Koros] Rename koros flipHorizontal to flipVertical
• Update contributing guide
• [Radiobutton, Checkbox, Toggle] Update guide for no default value
• [StatusLabel, Tag] Remove support for rectangular variants

Fixes

• [Breadcrumb, Hero] Added missing StatusLabelTooltips
• [Koros] Koros accessibility tab content copied from footer
• [Heros] Wrong css class in Hero component examples
• [LoadingSpinner] Change aria alert to polite
• [Breadcrumbs] Fixed typos in BreadCrumbCustomTheme variables

Design kit

Figma

There is a brand new Figma library available. The licenses are checked and provided separately, and currently available for a limited time. But if you're interested in switching to Figma, contact HDS team. It will be available with Helsinki licenses and in the future also as a community file.

Sketch/Abstract

Added

• [Footer] New symbols following the hel.fi visual style. New symbols also include changes to all Footer sections. Service title is now mandatory. The Helsinki logo moved to the Base section. Separate symbols for Footers with custom content (e.g. partner information). New variant for the Utility section which allow more utility links and link groups
• [Header] New component replacing HDS Navigation

Changed

• Updated HDS Sketch libraries to Sketch version 98.3. Please update your Sketch and files accordingly.
• [Koros] Renamed Storm to Wave and Wave to Vibration according to brand
• [Page templates] Breakpoint-XS padding fix from 12px to 16px
• [Heros] Fixes for paddings and Lead Text width in sizes M and S

Deprecated

• [Footer] Old Footer symbols deprecated. These will be removed in a future major release. Switch to new Footer symbols as soon as possible
• [Navigation] Marked as deprecated, will be removed in the next major release. Replaced by HDS Header. Switch to new Header symbols as soon as possible

v2.17.0

Compare Source

React

Added

• [Highlight] New component for quotes and text highlights

Core

Added

• [Highlight] New component for quotes and text highlights

Documentation

Added

• [Highlight] Documentation for new Highlight component
• Document tokens for focus colours

Changed

• Improved docs for creating new react components
• Updated contributing guide

Fixed

• Updated package dependencies

Design kit

Added

• Figma API icon library export script

v2.16.0

Compare Source

React

Added

• [Select] New optional string property 'optionKeyField'
• [Combobox] New optional string property 'optionKeyField'

Fixed

• [FileInput] Max file size to accept sizes which equal the given limit
• [FileInput] Empty file.type prevented file uploads of unknown types

Documentation

Changed

• Radio buttons should not have a default value

Design kit

Changed

• [Accordion] Upgrade to Sketch version 97.1
• [Breadcrumbs] Upgrade to Sketch version 97.1
• [Buttons] Upgrade to Sketch version 97.1
• [Cards] Upgrade to Sketch version 97.1
• [Color] Upgrade to Sketch version 97.1
• [Cookies] Upgrade to Sketch version 97.1
• [Errors] Upgrade to Sketch version 97.1
• [Filters] Upgrade to Sketch version 97.1
• [Footer] Upgrade to Sketch version 97.1
• [Form Components] Upgrade to Sketch version 97.1
• [Grids and Breakpoints] Upgrade to Sketch version 97.1
• [Hero] Upgrade to Sketch version 97.1
• [Icons] Upgrade to Sketch version 97.1
• [Koros] Upgrade to Sketch version 97.1
• [Labels and Tags] Upgrade to Sketch version 97.1
• [Links] Upgrade to Sketch version 97.1 and update link-external icon
• [Loaders] Upgrade to Sketch version 97.1
• [Logo] Upgrade to Sketch version 97.1
• [Modals and Notifications] Upgrade to Sketch version 97.1
• [Navigation] Upgrade to Sketch version 97.1
• [Page templates] Upgrade to Sketch version 97.1
• [Pagination] Upgrade to Sketch version 97.1
• [Placeholders and templates] Upgrade to Sketch version 97.1
• [Shadow] Upgrade to Sketch version 97.1
• [Spacing] Upgrade to Sketch version 97.1
• [Step-by-step] Upgrade to Sketch version 97.1
• [Table] Upgrade to Sketch version 97.1
• [Tabs] Upgrade to Sketch version 97.1
• [Typography] Upgrade to Sketch version 97.1

v2.15.0

Compare Source

React

Added

• [Breadcrumb] New Breadcrumb component

• [Hero] New Hero component

• [StepByStep] New StepByStep component

• [Tooltip] Tooltips for status labels

• [Icon] 16 new UI icons

Fixed

• [Accordion] Fixed accordion with borders

Changed

• [StatusLabel] Marked default rectangular StatusLabel as deprecated. This will be removed in 3.0.0
• [Icon] New icon for link-external

Core

Added

• [Breadcrumb] New Breadcrumb component

• [Hero] New Hero component

• [StepByStep] New StepByStep component

• [Tooltip] Tooltips for StatusLabels

• [Icon] 16 new UI icons

Changed

• [StatusLabel] Marked default rectangular StatusLabel as deprecated. This will be removed in 3.0.0
• [Icon] New icon for link-external

Documentation

Added

• [Breadcrumbs] Documentation for new Breadcrumbs component

• [Hero] Documentation for new Hero component

• [StepByStep] Documentation for new StepByStep component

• [Tooltip] Tooltip documentation for all status labels

• [Button] Added example of button as a link

Fixed

• [Gatsby] Check and fix headers and their styles in Gatsby (H1-H6)
• [Accordion] Improve accordion examples and documentation

Changed

• Improved docs for creating new react components
• New and changed icons added to icon list

Design kit

Added

• [Breadcrumbs] Breadcrumbs symbols for all HDS breakpoints
• [Hero] Eight Hero symbols for all HDS breakpoints
  – [Icons] Added 16 new UI icons (arrow-right-dashed, bag-cogwheel, binoculars, cogwheels, collapse, graph-columns, hammers, history, lightbulb, money-bag, money-bag-fill, scroll, scroll-cogwheel, scroll-content, scroll-group, shield)
• [Step-by-step] Step-by-step symbols for top, middle and bottom parts (two sizes: small & extra-large)

Changed

– [Accordion] Upgraded to Sketch version 96.3
– [Buttons] Upgraded to Sketch version 96.3
– [Cards] Upgraded to Sketch version 96.3
– [Color] Upgraded to Sketch version 96.3
– [Cookies] Upgraded to Sketch version 96.3
– [Footer] Upgraded to Sketch version 96.3
– [Form Components] Upgraded to Sketch version 96.3
– [Grids and Breakpoints] Upgraded to Sketch version 96.3
– [Icons] Upgraded to Sketch version 96.3
– [Icons] New icon for link-external
– [Koros] Upgraded to Sketch version 96.3
– [Labels and Tags] Upgraded to Sketch version 96.3
– [Links] Upgraded to Sketch version 96.3
– [Loaders] Upgraded to Sketch version 96.3
– [Logo] Upgraded to Sketch version 96.3
– [Modals and Notifications] Upgraded to Sketch version 96.3
– [Navigation] Upgraded to Sketch version 96.3
– [Pagination] Upgraded to Sketch version 96.3
– [Placeholders and templates] Upgraded to Sketch version 96.3
– [Shadow] Upgraded to Sketch version 96.3
– [Spacing] Upgraded to Sketch version 96.3
– [Table] Upgraded to Sketch version 96.3
– [Tabs] Upgraded to Sketch version 96.3
– [Typography] Upgraded to Sketch version 96.3

Icon kit

Added

– [Icons] Added 16 new UI icons (arrow-right-dashed, bag-cogwheel, binoculars, cogwheels, collapse, graph-columns, hammers, history, lightbulb, money-bag, money-bag-fill, scroll, scroll-cogwheel, scroll-content, scroll-group, shield)

Changed

– [Icons] New icon for link-external

v2.14.0

Compare Source

React

Fixed

• [Accordion] Prevent page scroll when accordion is opened with the spacebar
• [SearchInput] SearchInput uses hds-core's SearchInput styles instead of TextInput's

Changed

• [SelectionGroup] Refactor code using deprecating React.Children API
• [SideNavigation] Refactor code using deprecating React.Children API
• [Tabs] Refactor code using deprecating React.Children API

Core

Fixed

• [SearchInput] Unified CSS with TextInput

Documentation

Fixed

• [FileInput] Added missing import
• Repository's README files updated to match current branch policy

Changed

• [StatusLabel] Rectangular variant marked as deprected
• Refactor code using deprecating React.Children API

Design tokens

Added

• New token for focus color

Design

Changed

• [Tag] Rectangular version marked as deprecated

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[Jussiles]

This will be updated in other PR: #861

[renovate]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 3.x releases. But if you manually upgrade to 3.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.