diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9180b4462f..48ec58b485 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,238 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
+## [0.15.0] - October 29, 2020
+### Breaking changes
+#### Design tokens
+- Renamed colour tokens
+ - `--color-coat-of-arms-blue` to `coat-of-arms`
+ - `--color-coat-of-arms-gold` to `gold`
+ - `--color-coat-of-arms-silver` to `silver`
+ - `--color-[color name]-dark-50` to `--color-[color name]-dark`
+ - `--color-[color name]-light-20` to `--color-[color name]-light`
+ - `--color-[color name]-light-50` to `--color-[color name]-medium-light`
+- Replaced tokens `-light-05` with `-light `
+- Changed colour token values of `-light`, `-medium-light`, and `-dark`:
+ - `--color-brick-light` to `#ffeeed`
+ - `--color-brick-medium-light` to `#facbc8`
+ - `--color-brick-dark` to `#800e04`
+ - `--color-bus-light` to `#f0f0ff`
+ - `--color-bus-medium-light` to `#ccccff`
+ - `--color-bus-dark` to `#00005e`
+ - `--color-coat-of-arms-light` to `#e6f4ff`
+ - `--color-coat-of-arms-medium-light` to `#b5daf7`
+ - `--color-coat-of-arms-dark` to `#005799`
+ - `--color-gold-light` to `#f7f2e4`
+ - `--color-gold-medium-light` to `#e8d7a7`
+ - `--color-gold-dark` to `#9e823c`
+ - `--color-silver-dark` to `#b0b8bf`
+ - `--color-copper-light` to `#cffaf1`
+ - `--color-copper-medium-light` to `#9ef0de`
+ - `--color-copper-dark` to `#00a17d`
+ - `--color-engel-light` to `#fff9db`
+ - `--color-engel-medium-light` to `#fff3b8`
+ - `--color-engel-dark` to `#dbc030`
+ - `--color-fog-light` to `#e8f3fc`
+ - `--color-fog-medium-light` to `#d0e6f7`
+ - `--color-fog-dark` to `#72a5cf`
+ - `--color-metro-light` to `#ffeee6`
+ - `--color-metro-medium-light` to `#ffcab3`
+ - `--color-metro-dark` to `#bd2f00`
+ - `--color-summer-light` to `#fff4d4`
+ - `--color-summer-medium-light` to `#ffe49c`
+ - `--color-summer-dark` to `#cc9200`
+ - `--color-suomenlinna-light` to `#fff0f7`
+ - `--color-suomenlinna-medium-light` to `#ffdbeb`
+ - `--color-suomenlinna-dark` to `#e673a5`
+ - `--color-tram-light` to `#dff7eb`
+ - `--color-tram-medium-light` to `#a3e3c2`
+ - `--color-tram-dark` to `#006631`
+
+#### React
+- [Navigation] in ([#288](https://github.com/City-of-Helsinki/helsinki-design-system/pull/288))
+ - The `animateOpen` prop was removed.
+ - Replaced `menuCloseAriaLabel` and `menuOpenAriaLabel` props with a single `menuToggleAriaLabel` prop
+ - The supported values for the `theme` prop were changed from `white` and `black` to `light` and `dark`.
+ - [Navigation.Dropdown] The component was completely re-written. The old dropdown used a role="listbox" implementation that is intended be used in forms. It now uses a simple "menu button" implementation.
+ - The component is still used the same way as before, but the supported props changed. The supported props can be seen [here](https://hds.hel.fi/storybook/react/?path=/docs/components-navigation--default) under the NavigationDropdown tab.
+ - [Navigation.User] The dropdown used by the component was completely re-written for the same reason as above.
+ - The component is still used the same way as before, but the supported props changed. The supported props can be seen [here](https://hds.hel.fi/storybook/react/?path=/docs/components-navigation--default) under the NavigationUser tab.
+ - [Navigation.LanguageSelector] The component was completely re-written for the same reason as above.
+ - The component no longer accepts options, instead it is used similarly as the `Navigation.Dropdown` component.
+ ```tsx
+
+
+
+
+
+ ```
+ The supported props can be seen [here](https://hds.hel.fi/storybook/react/?path=/docs/components-navigation--default) under the NavigationLanguageSelector tab.
+ - [Navigation.Row]
+ - The prop `display` was renamed to `variant`, and the supported values for the prop were changed from `subNav` and `inline` to `default` and `inline`.
+ - [Navigation.Search]
+ - The `onSearchEnter` callback was renamed to `onSearch` as it can now be fired by pressing enter, or the search button.
+ - The focus event is no longer passed in the `onFocus` and `onBlur` callbacks.
+- [Combobox] Added a required prop - `toggleButtonAriaLabel` - that is used to describe the menu toggle button to screen readers. in ([#295](https://github.com/City-of-Helsinki/helsinki-design-system/pull/295))
+- [TextArea] Replaced `tooltipOpenButtonLabelText` and `tooltipCloseButtonLabelText` props with a single `tooltipButtonLabel` prop. in ([#283](https://github.com/City-of-Helsinki/helsinki-design-system/pull/283))
+- [TextInput] Replaced `tooltipOpenButtonLabelText` and `tooltipCloseButtonLabelText` props with a single `tooltipButtonLabel` prop. in ([#283](https://github.com/City-of-Helsinki/helsinki-design-system/pull/283))
+
+## Design kit
+### Added
+- [Colours] New shared style for focus style on dark backgrounds
+- [Navigation] New icon variant for Navigation dropdown options
+- [Buttons] Icon left and icon right variants for all Small buttons.
+- [Form Components] Added horizontal version of selection groups (both for checkbox and radio button)
+- [Icons] Added new icons
+ - cake (usage: birthday)
+ - calendar-recurring
+ - check-circle
+ - drag (usage: draggable elements)
+ - glyph-at
+ - glyph-euro
+ - layers
+ - playback-play
+ - playback-stop
+ - playback-pause
+ - playback-record
+ - playback-next
+ - playback-previous
+ - playback-fastforward
+ - playback-rewind
+ - podcast
+ - printer
+ - refresh
+ - rss
+ - sliders (usage: filters)
+ - sort
+ - sort-ascending
+ - sort-descending
+ - sort-alphabetical-ascending
+ - sort-alphabetical-descending
+- [Icons] Added new icons fill-variants for better accessibility
+ - error-fill
+ - alert-circle-fill
+ - info-circle-fill
+ - check-circle-fill
+ - cross-circle-fill
+ - plus-circle-fill
+ - minus-circle-fill
+ - question-circle-fill
+
+### Changed
+- Updated design library files to Sketch version 69
+- [Colour] Renamed colour tokens to value-agnostic light, light-medium and dark
+- [Colour] Adjusted token values light, light-medium and dark colour to improve theming
+- [Navigation] In mobile navigation menu, moved the language selection from the bottom of the menu to the top navigation bar
+ - Fixed issues reported in the accessibility audit.
+ - Updated example artboards to reflect new language selection position
+- [Navigation] Changed "sign out" button to use Supplementary/Small/Text and Icon Left symbol instead of the only Text variant
+- [Buttons] Increased the height of Small button variants by 8 pixels to comply with WCAG 2.5.5 Target Size.
+- [Buttons] Changed the minimum symbol width of Small buttons variants to 44 pixels to ensure complying with WCAG 2.5.5 Target Size.
+- [Buttons] Improved Small button variant symbol scaling
+- [Buttons] Shortened the spacing between icon and label in Supplementary button from 8px to 4px.
+- [Form Components] Checkbox + label symbols to use Smart layout
+- [Form Components] Radio button + label symbols to use Smart layout
+
+### Fixed
+- [Form Components] Disabled state radio button borders now use shared styles
+- [Form Components] Fixed small issues in Checkbox symbols
+ - Fixed incorrect label spacing in Checkbox/Hover - selected
+ - Fixed broken symbol link caused by Sketch 69 update in Checkbox/Unselected
+- [Icons] Fixed legibility and pixel snapping of icons
+ - microphone
+ - microphone-crossed
+ - volume-low
+ - volume-high
+ - arrow-up
+ - arrow-right
+ - arrow-left
+ - arrow-down
+ - arrow-undo
+ - arrow-redo
+ - angle-right
+ - calendar-cross
+ - clock-cross
+ - check
+ - download-cloud
+ - display
+ - cross
+ - cross-circle
+ - upload-cloud
+
+### Removed
+- [Colour] Removed color tokens -light-05
+
+### Deprecated
+- [Buttons] Supplementary button symbols without icons were deprecated and symbol will be completely removed in an upcoming release. This change was made to increase accessibility and usability of supplementary buttons.
+
+## Documentation
+### Added
+- First HDS Pattern: Forms, documenting best practices and accessiblity considerations of designing and building forms with HDS
+- [Tooltip] Component documentation
+- [Card] Component documentation
+- Documentation site content guidelines to the Contribution section
+
+
+### Changed
+- Updated all Component statuses in the Component overview
+ - All components were marked Accessible
+ - All components except Navigation and Footer were marked Stable
+- [Button] Updated the documentation to reflect changes to Supplementary and Small buttons
+- [Colour] Changed HDS Colour library documentation to match design and implementation
+- [Icons] Icon visual assets documentation to match additions and changes in implementation
+- Documentation site accessibility guidelines and statement
+- Guidelines were updated to describe the basis of HDS accessibility as well as the process of ensuring accessibility.
+- The accessibility statement was updated to list all currently known accessibility issues of the HDS documentation site. The reason for not fixing the issues was also stated.
+- Updated Roadmap
+- Updated What’s new section
+
+### Fixed
+- Fixed multiple broken links in the documentation site:
+- Contribution page links on many pages
+- Some Storybook links in the Component overview page
+- Added links to dev.hel.fi site in Getting started, Contribution and Resources sections
+- Added a small note about font purchase requirement for designers
+- Changed the documentation page title to be dynamic (now includes the page name in the HTML title)
+
+## Core
+### Added
+- [Icons] Added new icons
+- New component: Card
+
+### Changed
+- Updated components to use the renamed tokens. in ([#282](https://github.com/City-of-Helsinki/helsinki-design-system/pull/282))
+- [Button] Changed the minimum width and height of the `small` button. in ([#274](https://github.com/City-of-Helsinki/helsinki-design-system/pull/274))
+- [Button] Shortened the spacing between icon and label in Supplementary button to 4px. in ([#274](https://github.com/City-of-Helsinki/helsinki-design-system/pull/274))
+
+
+## React
+### Added
+- [Icons] Added new icons. in ([#286](https://github.com/City-of-Helsinki/helsinki-design-system/pull/286))
+- New component: Tooltip. in ([#283](https://github.com/City-of-Helsinki/helsinki-design-system/pull/283))
+- New component: Card. in ([#276](https://github.com/City-of-Helsinki/helsinki-design-system/pull/276))
+- [Navigation]
+ - Added a prop - `titleAriaLabel` - that is used to describe the logo and service to screen readers. in ([#288](https://github.com/City-of-Helsinki/helsinki-design-system/pull/288))
+ - [Navigation.Search] Added a prop - `searchButtonAriaLabel` - that is used to describe search button to screen readers. in ([#288](https://github.com/City-of-Helsinki/helsinki-design-system/pull/288))
+
+### Changed
+- Updated components to use the renamed tokens. in ([#282](https://github.com/City-of-Helsinki/helsinki-design-system/pull/282))
+- [Accessibility] Added warning when using other than strings as `Checkbox` or `RadioButton` label. in ([#300](https://github.com/City-of-Helsinki/helsinki-design-system/pull/300))
+- [Button] Set `iconLeft` or `iconRight` as required for supplementary buttons. in ([#274](https://github.com/City-of-Helsinki/helsinki-design-system/pull/274))
+- [Button] Changed the minimum width and height of the `small` button. in ([#274](https://github.com/City-of-Helsinki/helsinki-design-system/pull/274))
+- [Button] Shortened the spacing between icon and label in Supplementary button to 4px. in ([#274](https://github.com/City-of-Helsinki/helsinki-design-system/pull/274))
+- [Combobox] The selection is now cleared if the input value doesn't match the selected value. in ([#295](https://github.com/City-of-Helsinki/helsinki-design-system/pull/295))
+- [Combobox] The input value is now cleared if there's no selected item when the field is blurred. in ([#299](https://github.com/City-of-Helsinki/helsinki-design-system/pull/299))
+- [Footer] The copyright text is now hidden if neither `copyrightHolder` or `copyrightText` is defined. in ([#298](https://github.com/City-of-Helsinki/helsinki-design-system/pull/298))
+- [Navigation] This update contains many accessibility improvements and bug fixes to the component. in ([#288](https://github.com/City-of-Helsinki/helsinki-design-system/pull/288))
+ - The language selector is now always visible in the header. It used to be displayed at the bottom of the menu in mobile
+ - The search now needs to be activated when using a keyboard. It used to be activated when the search button received focus
+ - The search icon in the input for the `Navigation.Search` component was changed to a button
+ - The mobile menu toggle now uses the correct aria attributes
+
+### Fixed
+- [Navigation] Fixed an issue where the `className` prop for `Navigation.Item` wasn't applied when the component was used inside the `Navigation.Row` component. in ([#288](https://github.com/City-of-Helsinki/helsinki-design-system/pull/288))
+
+
## [0.14.0] - October 15, 2020
### Core
#### Changed
diff --git a/packages/core/package.json b/packages/core/package.json
index b2d7ed4f0c..18f284d72d 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "hds-core",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Core styles for the Helsinki Design System",
"author": "Anssi Lehtonen ",
"contributors": [
@@ -29,7 +29,7 @@
"@storybook/html": "6.0.19",
"copyfiles": "2.2.0",
"cssnano": "4.1.10",
- "hds-design-tokens": "0.14.0",
+ "hds-design-tokens": "0.15.0",
"normalize.css": "8.0.1",
"postcss": "7.0.30",
"postcss-cli": "7.1.1",
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 81f0c3f304..3776e74cfa 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
{
"name": "hds-design-tokens",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Design tokens for the Helsinki Design System",
"author": "Niclas Liimatainen ",
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
diff --git a/packages/react/package.json b/packages/react/package.json
index fbceeaacba..7b06554110 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "hds-react",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "React components for the Helsinki Design System",
"author": "Anssi Lehtonen ",
"contributors": [
@@ -94,7 +94,7 @@
"@popperjs/core": "2.5.3",
"@react-aria/visually-hidden": "3.2.0",
"downshift": "6.0.6",
- "hds-core": "0.14.0",
+ "hds-core": "0.15.0",
"lodash.isequal": "4.5.0",
"lodash.uniqueid": "4.0.1",
"react-merge-refs": "1.1.0",
diff --git a/packages/react/src/components/navigation/navigationLanguageSelector/NavigationLanguageSelector.tsx b/packages/react/src/components/navigation/navigationLanguageSelector/NavigationLanguageSelector.tsx
index 8288d44bfb..6263405ebd 100644
--- a/packages/react/src/components/navigation/navigationLanguageSelector/NavigationLanguageSelector.tsx
+++ b/packages/react/src/components/navigation/navigationLanguageSelector/NavigationLanguageSelector.tsx
@@ -1,12 +1,11 @@
import React from 'react';
import styles from './NavigationLanguageSelector.module.scss';
-import { NavigationDropdown } from '../navigationDropdown/NavigationDropdown';
-import { MenuButtonProps } from '../../../internal/menuButton/MenuButton';
+import { MenuButton, MenuButtonProps } from '../../../internal/menuButton/MenuButton';
export const NavigationLanguageSelector = ({ children, id = 'languageSelector', label, ...rest }: MenuButtonProps) => (
-
+
{children}
-
+
);
NavigationLanguageSelector.componentName = 'NavigationLanguageSelector';
diff --git a/packages/react/src/components/navigation/navigationUser/NavigationUser.tsx b/packages/react/src/components/navigation/navigationUser/NavigationUser.tsx
index 9eb5588c16..aae46a441c 100644
--- a/packages/react/src/components/navigation/navigationUser/NavigationUser.tsx
+++ b/packages/react/src/components/navigation/navigationUser/NavigationUser.tsx
@@ -1,11 +1,10 @@
import React, { useContext, useEffect } from 'react';
import styles from './NavigationUser.module.scss';
-import { NavigationDropdown } from '../navigationDropdown/NavigationDropdown';
import { NavigationContext } from '../NavigationContext';
import { IconSignin, IconUser } from '../../../icons';
import { Button } from '../../button';
-import { MenuButtonProps } from '../../../internal/menuButton/MenuButton';
+import { MenuButton, MenuButtonProps } from '../../../internal/menuButton/MenuButton';
export type NavigationUserProps = MenuButtonProps & {
/**
@@ -51,7 +50,7 @@ export const NavigationUser = ({
{children}
>
) : (
- }
id={id}
@@ -60,7 +59,7 @@ export const NavigationUser = ({
{...dropdownProps}
>
{children}
-
+
);
const signInButton = isMobile ? (
diff --git a/site/package.json b/site/package.json
index 254664b267..802318bf64 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,6 +1,6 @@
{
"name": "site",
- "version": "0.14.0",
+ "version": "0.15.0",
"private": true,
"description": "Documentation for Helsinki Design System",
"license": "MIT",
@@ -22,9 +22,9 @@
"devDependencies": {
"gatsby-cli": "2.12.29",
"gatsby-plugin-matomo": "0.8.3",
- "hds-core": "0.14.0",
- "hds-design-tokens": "0.14.0",
- "hds-react": "0.14.0",
+ "hds-core": "0.15.0",
+ "hds-design-tokens": "0.15.0",
+ "hds-react": "0.15.0",
"react-helmet": "6.0.0",
"rimraf": "3.0.2"
}