Merge pull request #1055 from City-of-Helsinki/release-2.16.0

Release 2.16.0

.github/workflows/development.yml

@@ -14,10 +14,14 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: setup node
-        uses: actions/[email protected]
+      - name: Read .nvmrc
+        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvmrc
+
+      - name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
           registry-url: 'https://registry.npmjs.org'
 
       - name: install dependencies

.github/workflows/gh-pages.yml

@@ -12,11 +12,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: setup node
-        uses: actions/[email protected]
+      - name: Read .nvmrc
+        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvmrc
+
+      - name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
-          registry-url: "https://registry.npmjs.org"
+          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
+          registry-url: 'https://registry.npmjs.org'
 
       - name: install dependencies
         run: yarn

.nvmrc

@@ -0,0 +1 @@
+v16.19.1

CHANGELOG.md

@@ -7,6 +7,60 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.16.0] - June, 28, 2023
+
+### 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
+
 ## [2.15.0] - May, 25, 2023
 
 ### React
@@ -72,7 +126,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [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)
+  – [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
@@ -112,17 +166,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 – [Icons] New icon for link-external
 
-
 ## [2.14.0] - May, 9, 2023
 
-### React 
+### 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
@@ -136,10 +190,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### 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
 
@@ -157,7 +213,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.13.0] - March, 27, 2023
 
-### React 
+### React
 
 #### Added
 
@@ -187,6 +243,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Documentation
 
 #### Added
+
 - [Tag] Deprecation warning for rectangular tag
 - [Navigation] Deprecation warning for Navigation
 
@@ -208,7 +265,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.12.1] - February, 23, 2023
 
-### React 
+### React
 
 #### Fixed
 
@@ -221,7 +278,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.12.0] - February, 21, 2023
 
-### React 
+### React
 
 #### Changed
 
@@ -246,7 +303,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.11.0] - February, 9, 2023
 
-### React 
+### React
 
 #### Changed
 

DEVELOPMENT.md

@@ -2,10 +2,11 @@
 
 ## Development environment
 
-> Helsinki Design System uses [**Lerna**](https://lerna.js.org/) for running scripts across the repo as well as versioning and creating releases of the packages. [**Yarn workspaces**](https://yarnpkg.com/lang/en/docs/workspaces/) is used to manage dependencies. This allows the separate packages to reference each other via symlinks during local development.
+> Helsinki Design System uses [**Lerna**](https://lerna.js.org/) for running scripts across the repo as well as versioning and creating releases of the packages. [**Yarn workspaces**](https://yarnpkg.com/lang/en/docs/workspaces/) is used to manage dependencies. This allows the separate packages to reference each other via symlinks during local development. [**Nvm**](https://github.com/nvm-sh/nvm) is a node version manager used to specify the preferred node version across the project (optional but highly recommended, if not used, see the preferred version in .nvmrc file).
 
 ### Prerequisites
 
+- [Nvm](https://github.com/nvm-sh/nvm)
 - [Node](https://nodejs.org/en/)
 - [Yarn](https://yarnpkg.com/)
 - [Docker](https://www.docker.com/) (for visual regression tests)

lerna.json

@@ -1,5 +1,4 @@
 {
   "npmClient": "yarn",
-  "useWorkspaces": true,
   "version": "independent"
 }

package.json

@@ -19,8 +19,8 @@
     "update-versions": "lerna version --exact --no-git-tag-version --no-push --amend --yes"
   },
   "devDependencies": {
-    "lerna": "^3.16.4",
-    "rimraf": "^4.1.3"
+    "lerna": "^7.0.1",
+    "rimraf": "^5.0.1"
   },
   "resolutions": {
     "multer": "1.4.4-lts.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Core styles for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "@storybook/html": "6.4.18",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "2.15.0",
+    "hds-design-tokens": "2.16.0",
     "normalize.css": "8.0.1",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "Design tokens for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

packages/react/.eslintrc.json

@@ -52,6 +52,8 @@
     "react/prop-types": "off",
     "import/extensions": "off",
     "import/prefer-default-export": "off",
+    "jsx-a11y/control-has-associated-label": "warn",
+    "jsx-a11y/no-interactive-element-to-noninteractive-role": "warn",
     "jsx-a11y/label-has-associated-control": [
       2,
       {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "description": "React components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -121,7 +121,7 @@
     "crc-32": "1.2.0",
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
-    "hds-core": "2.15.0",
+    "hds-core": "2.16.0",
     "kashe": "1.0.4",
     "lodash.get": "^4.4.2",
     "lodash.isequal": "4.5.0",

packages/react/src/components/dropdown/combobox/Combobox.tsx

@@ -97,6 +97,7 @@ export const Combobox = <OptionType,>(props: ComboboxProps<OptionType>) => {
     label,
     onBlur = () => null,
     onFocus = () => null,
+    optionKeyField,
     optionLabelField = 'label',
     options = [],
     placeholder,
@@ -517,6 +518,7 @@ export const Combobox = <OptionType,>(props: ComboboxProps<OptionType>) => {
               toggleButtonRef.current.focus();
             }}
             onRemove={removeSelectedItem}
+            optionKeyField={optionKeyField || optionLabelField}
             optionLabelField={optionLabelField}
             removeButtonAriaLabel={props.selectedItemRemoveButtonAriaLabel}
             selectedItems={selectedItems}
@@ -622,6 +624,7 @@ export const Combobox = <OptionType,>(props: ComboboxProps<OptionType>) => {
           menuStyles={styles}
           multiselect={props.multiselect}
           open={isOpen}
+          optionKeyField={optionKeyField || optionLabelField}
           optionLabelField={optionLabelField}
           options={getFilteredItems}
           selectedItem={selectedItem}

packages/react/src/components/dropdown/select/Select.tsx

@@ -140,6 +140,12 @@ export type CommonSelectProps<OptionType> = LabelType & {
    * Callback function fired when the component is focused
    */
   onFocus?: () => void;
+  /**
+   * Sets the data item field that represents the item key. Key needs to be unique between items.
+   * E.g. an `optionKeyField` value of `'bar'` and a data item `{ foo: 'Label', bar: 'value' }`, would use `'value'` as the key in the menu for that specific item
+   * Uses value of `optionLabelField` by default.
+   */
+  optionKeyField?: string;
   /**
    * Sets the data item field that represents the item label
    * E.g. an `optionLabelField` value of `'foo'` and a data item `{ foo: 'Label', bar: 'value' }`, would display `Label` in the menu for that specific item
@@ -329,6 +335,7 @@ export const Select = <OptionType,>(props: SelectProps<OptionType>) => {
     label,
     onBlur = () => null,
     onFocus = () => null,
+    optionKeyField,
     optionLabelField = 'label',
     options = [],
     placeholder,
@@ -536,6 +543,7 @@ export const Select = <OptionType,>(props: SelectProps<OptionType>) => {
               toggleButtonRef.current.focus();
             }}
             onRemove={removeSelectedItem}
+            optionKeyField={optionKeyField || optionLabelField}
             optionLabelField={optionLabelField}
             removeButtonAriaLabel={props.selectedItemRemoveButtonAriaLabel}
             selectedItems={selectedItems}
@@ -608,6 +616,7 @@ export const Select = <OptionType,>(props: SelectProps<OptionType>) => {
           menuStyles={styles}
           multiselect={props.multiselect}
           open={isOpen}
+          optionKeyField={optionKeyField || optionLabelField}
           optionLabelField={optionLabelField}
           options={options}
           selectedItem={selectedItem}

packages/react/src/components/fileInput/FileInput.test.tsx

@@ -142,6 +142,8 @@ describe('<FileInput /> spec', () => {
     const firstFile = new File(['test'], firstFileName, { type: 'image/png' });
     const secondFileName = 'test-file-b';
     const secondFile = new File(['test-file-with-too-long-content'], secondFileName, { type: 'image/png' });
+    const thirdFileName = 'test-file-with-exactly-max-size-bytes';
+    const thirdFile = new File(['0123456789'], thirdFileName, { type: 'image/png' });
     render(
       <FileInput
         id="test-file-input"
@@ -153,10 +155,10 @@ describe('<FileInput /> spec', () => {
       />,
     );
     const fileUpload = screen.getByLabelText(inputLabel);
-    userEvent.upload(fileUpload, [firstFile, secondFile]);
+    userEvent.upload(fileUpload, [firstFile, secondFile, thirdFile]);
     expect(screen.getByText(firstFileName)).toBeInTheDocument();
-    expect(screen.getByText('1/2 file(s) added', { exact: false })).toBeInTheDocument();
-    expect(screen.getByText('File processing failed for 1/2 files:', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('2/3 file(s) added', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('File processing failed for 1/3 files:', { exact: false })).toBeInTheDocument();
     expect(
       screen.getByText(`File, ${secondFileName}, is too large (31 B). The maximum file size is 10 B.`, {
         exact: false,

packages/react/src/components/fileInput/FileInput.tsx

@@ -307,8 +307,10 @@ const validateAccept = (language: Language, accept: string) => (file: File): tru
     (acceptExtension) => acceptExtension.includes(fileType) || acceptExtension.includes(`${fileType.split('/')[0]}/*`),
   );
   const hasMatchingFileExtension = !!acceptedExtensions.find((acceptExtension) => acceptExtension === extension);
+
   return (
-    (!!fileType && (isMatchingType || hasMatchingFileExtension)) || {
+    isMatchingType ||
+    hasMatchingFileExtension || {
       type: ValidationErrorType.accept,
       text: getAcceptErrorMessage(language, file, accept),
     }
@@ -317,7 +319,7 @@ const validateAccept = (language: Language, accept: string) => (file: File): tru
 
 const validateMaxSize = (language: Language, maxSize: number) => (file: File): true | ValidationError => {
   return (
-    file.size < maxSize || {
+    file.size <= maxSize || {
       type: ValidationErrorType.maxSize,
       text: getMaxSizeErrorMessage(language, file, maxSize),
     }

packages/react/src/components/header/components/headerUniversalBar/HeaderUniversalBar.tsx

@@ -39,6 +39,7 @@ export type HeaderUniversalBarProps = React.PropsWithChildren<{
 export const HeaderUniversalBar = ({
   ariaLabel,
   children,
+  className,
   id,
   primaryLinkHref,
   primaryLinkText,
@@ -48,7 +49,7 @@ export const HeaderUniversalBar = ({
   const childElements = getChildElementsEvenIfContainerInbetween(children);
 
   return (
-    <nav role="navigation" aria-label={ariaLabel} id={id} className={styles.headerUniversalBar}>
+    <nav role="navigation" aria-label={ariaLabel} id={id} className={classNames(styles.headerUniversalBar, className)}>
       <ul className={styles.headerUniversalBarList}>
         <li className={styles.universalBarMainLinkContainer}>
           <NavigationLink href={primaryLinkHref} label={primaryLinkText} className={styles.universalBarLink} />

packages/react/src/components/header/components/navigationLink/NavigationLink.tsx

@@ -181,6 +181,7 @@ export const NavigationLink = ({
         >
           {React.Children.map(dropdownLinks, (child, childIndex) => {
             return cloneElement(child as React.ReactElement, {
+              // eslint-disable-next-line react/no-array-index-key
               key: childIndex,
             });
           })}