Merge pull request #1343 from City-of-Helsinki/release-3.10.0

Release 3.10.0

.github/pull_request_template.md

@@ -8,7 +8,7 @@
 <!-- If suggesting a new feature or change, please discuss it in an issue first -->
 <!-- If fixing a bug, please link to the issue here: -->
 
-Closes #
+Closes [HDS-xxxx](https://helsinkisolutionoffice.atlassian.net/browse/HDS-xxxx)
 
 ## Motivation and Context
 
@@ -17,10 +17,12 @@ Closes #
 ## How Has This Been Tested?
 
 ## Demos:
+
 Links to demos are in the comments
 
 ## Screenshots (if appropriate):
 
 ## Add to changelog
-- [ ] Added needed line to changelog 
+
+- [ ] Added needed line to changelog
 <!-- Or comment here why it is not relevant in the change log -->

.github/workflows/hds-demo-preview-clean.yml

@@ -5,11 +5,12 @@ on:
     branches:
       - development
       - release-*
+      - 'feature/*'
     types:
       - closed
 
 jobs:
- build_and_publish_demo:
+  build_and_publish_demo:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
 

.github/workflows/hds-demo-preview.yml

@@ -5,14 +5,15 @@ on:
     branches:
       - development
       - release-*
+      - 'feature/*'
   push:
     branches:
       - development
       - release-*
-
+      - 'feature/*'
 
 jobs:
- build_and_publish_demo:
+  build_and_publish_demo:
     if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
 
@@ -38,7 +39,7 @@ jobs:
       - name: get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-        
+
       - name: restore yarn cache
         uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
@@ -113,14 +114,15 @@ jobs:
       - name: Copy build results
         run: cp -r ./site/public/* ./hds-demo/docs/$DEMO_NAME
 
-      - name: Commit 
+      - name: Commit
         run: |
           git config --global user.email "hds@hel.fi"
           git config --global user.name "Github Actions"
           git status
           git add .
           git commit -m "Updated preview to $DEMO_NAME"
           git status
+          git pull --rebase
           git push
         working-directory: ./hds-demo
 
@@ -135,5 +137,3 @@ jobs:
             [Docs](https://city-of-helsinki.github.io/hds-demo/${{ env.DEMO_NAME }})
             [Core Storybook](https://city-of-helsinki.github.io/hds-demo/${{ env.DEMO_NAME }}/storybook/core)
             [React Storybook](https://city-of-helsinki.github.io/hds-demo/${{ env.DEMO_NAME }}/storybook/react)
-
-

.github/workflows/update-icon-library.yml

@@ -118,6 +118,7 @@ jobs:
 
       # Update docsite icon list
       - name: Run curl to get data from figma
+        if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
         run: |
           curl  -H "X-FIGMA-TOKEN: ${API_KEY}" "https://api.figma.com/v1/files/${FILE_KEY}/nodes?ids=${NODE_ID}&depth=2" | \
              jq --arg nodeid $NODE_ID '.nodes[$nodeid].document.children | .[] | {group: .name?, icon: .children[]?.name?}' | \
@@ -127,6 +128,7 @@ jobs:
         working-directory: ./site
 
       - name: regenerate iconlist
+        if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
         run: |
           yarn iconlist
         working-directory: ./site
@@ -138,4 +140,7 @@ jobs:
           git config --global user.name "Github Actions"
           git add .
           git commit -m 'Updated icon library'
-          git push
+          git push
+
+      - name: End
+        run: echo "Done!"

CHANGELOG.md

@@ -5,6 +5,91 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.10.0] - Sep, 04, 2024
+
+### React
+
+#### Added
+
+- [ssr] getCriticalHdsRulesSync, a syncronous version of the getCriticalHdsRules
+
+#### Changed
+
+- [Accordion] Component accepts all div element properties
+- [Breadcrumb] Component accepts all nav element properties
+- [Button] Component accepts all button element properties
+- [Card] Component accepts all div element properties
+- [Checkbox] Component accepts all input element properties
+- [Columns] Component accepts all div element properties
+- [DateInput] Component accepts all input element properties
+- [Dialog] Component and its subcomponents accept all native elements properties
+- [FileInput] Component accepts all div element properties
+- [ErrorSummary] Component accepts all div element properties
+- [Fieldset] Component accepts all fieldset element properties
+- [Footer] Component and its subcomponents accept all native elements properties
+- [Header] Component and its subcomponents accept all native elements properties
+- [Hero] Component and its subcomponents accept all native elements properties
+- [Highlight] Component accepts all figure element properties
+- [ImageWithCard] Component accepts all div element properties
+- [Koros] Component accepts all div element properties
+- [Logo] Component accepts all img element properties
+- [Notification] Component accepts all div element properties
+- [SearchInput] Component and its subcomponents accept all native elements properties
+- [Pagination] Component accepts all nav element properties
+- [Section] Component accepts all div element properties
+- [StatusLabel] Component accepts all span element properties
+- [StepByStep] Component accepts all div element properties
+- [Stepper] Component accepts all div element properties
+- [Tabs] Component accepts all div element properties
+- [Tags] Component accepts all div element properties
+- [TextInput] Component accepts all input element properties
+- [ToggleButton] Component accepts all button element properties
+- [ToolTip] Component accepts all div element properties
+- [BreadCrumb] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer.Base] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer.Custom] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer.Link] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer.Navigation] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer.Utilities] ariaLabel is marked deprecated and aria-label should be used.
+- [Footer] ariaLabel is marked deprecated and aria-label should be used.
+- [Header.ActionBar] ariaLabel is marked deprecated and aria-label should be used.
+- [Header.ActionBarItem] ariaLabel is marked deprecated and aria-label should be used.
+- [Header.LanguageSelector] ariaLabel is marked deprecated and aria-label should be used.
+- [Header.NavigationMenu] ariaLabel is marked deprecated and aria-label should be used.
+- [Header.HeaderUniversalBar] ariaLabel is marked deprecated and aria-label should be used.
+- [Link] ariaLabel is marked deprecated and aria-label should be used.
+- [Logo] dataTestId is marked deprecated and data-testid should be used.
+- [Notification] dataTestId is marked deprecated and data-testid should be used.
+- [Pagination] dataTestId is marked deprecated and data-testid should be used.
+- [SideNavigation] ariaLabel is marked deprecated and aria-label should be used.
+- [StatusLabel] dataTestId is marked deprecated and data-testid should be used.
+- [Step] dataTestId is marked deprecated and data-testid should be used.
+- [Stepper] dataTestId is marked deprecated and data-testid should be used.
+- [Icon] ariaLabel, ariaLabelledby and ariaHidden are marked deprecated and aria-\* should be used.
+- [Skiplink] ariaLabel is marked deprecated and aria-label should be used.
+- [Table] dataTestId is marked deprecated and data-testid should be used.
+
+#### Fixed
+
+- [Header] Fixed an issue with ActionBarItem dropdowns not inside the menu in mobile
+- [Header] Fix broken layout in mobile menu animations
+- [Dialog] Fix broken scrolling and zooming in mobile devices
+
+### Documentation
+
+#### Added
+
+- [ssr] Solution to use HDS styles with Next.js app router.
+
+#### Changed
+
+- [ssr] Improved documentation about using HDS styles with Next.js pages router.
+- [Header] Added more detailed documentation.
+
+#### Fixed
+
+- [Grids] Fixed breakpoint-xs margin value from 12px to 16px to match implementation
+
 ## [3.9.0] - June, 2nd, 2024
 
 ### React
@@ -55,6 +140,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Figma
 
 #### Added
+
 - [Header] New functionalities for Actionbar: Action items can have an option for dropdown menus. For now only Logged in user has custom user menu and button (Header.Login)
 - [Header] In mobile breakpoints (XS-M) login button and logged-in user menu jump inside the Header.Mobilemenu that has a special accordion menu for dropdown.
 - [Header] Added missing Breadcrumbs to dark theme.
@@ -64,11 +150,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [PhoneInput, PasswordInput] Added missing read-only focus ring.
 
 #### Fixed
+
 - [Header] Mobilemenu link 2nd level names changed to Second level.
 - [Header] Mobilemenu now aligned to right border. Menu button should always be the rightmost element in mobile breakpoints.
 - [Hero] Flipped image 180 degrees in imageLeft, imageRight, imageBottom in XS size and diagonalKoros in all sizes.
 
 #### Changed
+
 - [Header] Login button now has sign-in icon instead of user - old Login actionitem is removed, please use Header.Login.
 - [Header] Breakpoint width numbers added to property names to match Footer
 - [Header] Nested instances revealed

e2e/package.json

@@ -2,7 +2,7 @@
   "name": "e2e",
   "private": true,
   "description": "e2e tests using Playwright",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "scripts": {
     "inst": "yarn playwright install",
     "ci": "npx playwright test",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Core styles for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "3.9.0",
+    "hds-design-tokens": "3.10.0",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",
     "postcss-import": "12.0.1",

packages/design-tokens/package.json

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

packages/hds-js/package.json

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

packages/react/.eslintrc.json

@@ -90,7 +90,33 @@
       }
     ],
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "error"
+    "@typescript-eslint/no-unused-vars": "error",
+    "react/forbid-component-props": [
+      "error",
+      {
+        "forbid": [
+          {
+            "propNamePattern": "aria[A-Z][a-z]*",
+            "message": "Use native 'aria-*' props instead of creating new props like ariaLabel'."
+          },
+          {
+            "propNamePattern": "{dataTestId,data-test-id}",
+            "message": "The 'data-testid' is the only acceptable format for test ids. Jest supports only this."
+          }
+        ]
+      }
+    ],
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "typeProperty",
+        "format": null,
+        "custom": {
+          "regex": "(aria[A-Z][a-z]+|dataTestId|data-test-id)",
+          "match": false
+        }
+      }
+    ]
   },
   "settings": {
     "react": {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "React components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -87,7 +87,7 @@
     "eslint-plugin-jest": "^27.6.3",
     "eslint-plugin-jsx-a11y": "^6.6.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "3.0.0",
     "inquirer": "7.1.0",
@@ -138,7 +138,7 @@
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
     "graphql": "^16.8.1",
-    "hds-core": "3.9.0",
+    "hds-core": "3.10.0",
     "http-status-typed": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "kashe": "1.0.4",