Merge pull request #1305 from City-of-Helsinki/release-3.9.0

Release 3.9.0

.github/pull_request_template.md

@@ -17,11 +17,7 @@ Closes #
 ## How Has This Been Tested?
 
 ## Demos:
-[Docs](https://city-of-helsinki.github.io/hds-demo/preview_<PR_ID>/)
-
-[Core Storybook](https://city-of-helsinki.github.io/hds-demo/preview_<PR_ID>/storybook/core)
-
-[React Storybook](https://city-of-helsinki.github.io/hds-demo/preview_<PR_ID>/storybook/react)
+Links to demos are in the comments
 
 ## Screenshots (if appropriate):
 

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

@@ -40,7 +40,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: restore yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -49,7 +49,7 @@ jobs:
             yarn-cache-folder-
 
       - name: restore lerna
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: '**/node_modules'
           key: yarn-node_modules-folder-${{ hashFiles('**/yarn.lock') }}
@@ -123,3 +123,17 @@ jobs:
           git status
           git push
         working-directory: ./hds-demo
+
+      - name: Preview url to PR comment
+        if: github.event_name == 'pull_request'
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: Preview url
+          message: |
+            Preview found from [hds-demo docs/${{ env.DEMO_NAME }}](https://github.com/City-of-Helsinki/hds-demo/tree/main/docs/${{ env.DEMO_NAME }})
+            ## Demos
+            [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

@@ -10,6 +10,10 @@ on:
 jobs:
   build-icon-library:
     runs-on: ubuntu-latest
+    env:
+      FILE_KEY: 'Kxwg3R0zNRHj55nQqFu6VS'
+      NODE_ID: '172:2478'
+
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
@@ -60,8 +64,6 @@ jobs:
             --filter 'Size=S'
         env:
           API_KEY: ${{ secrets.HDS_ICON_KIT }}
-          FILE_KEY: 'Kxwg3R0zNRHj55nQqFu6VS'
-          NODE_ID: '172:2478'
 
       - name: Append React interface into index file
         if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
@@ -114,6 +116,21 @@ jobs:
         if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
         run: rm -rf ./icon-library
 
+      # Update docsite icon list
+      - name: Run curl to get data from figma
+        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?}' | \
+             jq -s .> icon_group.json
+        env:
+          API_KEY: ${{ secrets.HDS_ICON_KIT }}
+        working-directory: ./site
+
+      - name: regenerate iconlist
+        run: |
+          yarn iconlist
+        working-directory: ./site
+
       - name: Commit changed files
         if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
         run: |

CHANGELOG.md

@@ -5,6 +5,79 @@ 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.9.0] - June, 2nd, 2024
+
+### React
+
+#### Added
+
+- [Login] GraphQL module with api token integration
+- [Header.LoginButton] Button to start the login process and handle errors.
+- [Header.LogoutSubmenuButton] Button to start the logout process from the menu and handle errors.
+- [Header.UserMenuButton] Button for a user menu that renders user's name and initials.
+- [Header.ActionBarButton] A Button without dropdown items (as in Header.ActionBarItem)
+- [Header.ActionBar] Add possibility to give the menu button a label with `menuButtonLabel` prop.
+- [Header.ActionBarSubItem] Component for creating menus in Header
+- [Header.ActionBarSubItemGroup] Container for creating grouped subitems with headings.
+
+#### Changed
+
+- [FileInput](packages/react/src/components/fileInput/FileInput.tsx) Added `minSize` property (default 0) for cases when the uploaded file must have non-zero length content
+
+#### Fixed
+
+- [TextInput, TextArea] Fix read-only input focus styles.
+
+### Core
+
+#### Fixed
+
+- [TextInput, TextArea] Fix read-only input focus styles.
+
+### Documentation
+
+#### Added
+
+- [Patterns] New page for Login pattern, instructions how HDS Login and Header.login should work together
+- [Getting started] Added a link to HDS Figma tutorial
+- [Header] Documented new features.
+- [Login] GraphQL module documentation
+- More detailed information on upcoming releases 4.0.0 and 5.0.0
+
+#### Changed
+
+- [Header] New documentation for ActionBarItems and Header.Login
+
+#### Fixed
+
+- [Getting started] Fixed old mentions of Abstract & Sketch
+
+### 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.
+- [Linkbox] Added four more tags into all variants. Reveal more tags from the layers. Nested instances also revealed. Example added to component frame.
+- [Navigation pattern] Added header functionalities documentation for Header.Login (in the future these will be on Header component page)
+- [TextInput, TextArea] Added missing read-only variants and redesigned focus ring.
+- [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
+- [Header] Actionitems have an updated focus styles
+- [Header] Some header subcomponents have updated names. Header.Actionbar.Mobilemenu -> Header.Mobilemenu , to accommodate new features such as Header.Mobilemenu.Login
+- [Header] Language select dropdown is now 320px wide like other Actionbar dropdowns.
+- [Linkbox] Border-variants now have inside stroke, for better experience when building layouts
+- [PhoneInput, PasswordInput] Read-only variants renamed to ReadOnly for consistency.
+
 ## [3.8.0] - May, 7, 2024
 
 ### React
@@ -55,14 +128,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Figma
 
 #### Added:
+
 - [Hero] Added secondary buttons and a responsive wrapper to buttons.
 - [Hero] Added buttons for the NoImage variant.
 - [Hero] Introduced XXL variant sizes.
 
 #### Fixed:
+
 - [Hero] Adjusted arrow and photographer info for improved responsiveness and ensured all variants are built using the same component structure.
 
 #### Removed:
+
 - [Hero] Replaced preselected images with placeholders.
 - [Hero] Replaced Diagonal variant's image with Placeholder image component (breaking change – resets used image).
 - [Hero] Replaced ImageBottom variant's links with buttons (breaking change).

e2e/package.json

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

packages/core/.stylelintrc.json

@@ -15,6 +15,7 @@
     "property-no-vendor-prefix": null,
     "selector-class-pattern": null,
     "selector-not-notation": "simple",
-    "selector-pseudo-element-colon-notation": "single"
+    "selector-pseudo-element-colon-notation": "single",
+    "declaration-no-important": [ true, { "severity": "warning" }]
   }
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.8.0",
+  "version": "3.9.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.8.0",
+    "hds-design-tokens": "3.9.0",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",
     "postcss-import": "12.0.1",

packages/core/src/components/text-input/text-input.css

@@ -3,6 +3,7 @@
 .hds-text-input {
   --border-width: 2px;
   --outline-width: 3px;
+  --outline-offset-readonly: 4px;
   --input-height: 56px;
   --textarea-height: 149px;
   --icon-size: var(--spacing-m);
@@ -280,10 +281,26 @@
   background-color: transparent;
   border: 0;
   color: var(--input-color-default);
+  outline-offset: var(--outline-offset-readonly);
   padding: 0;
-
+  
   /* fixes faded text color on Safari */
   -webkit-text-fill-color: var(--input-color-default);
+  transform: translate3d(0, 0, 0);
+  transition: 85ms ease-out;
+  transition-property: outline, transform;
+}
+
+.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {
+  /* the following calculation and margin is needed to keep the outline not to overlap
+  the other content vertically and make it look nice */
+  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));
+  margin: var(--outline-offset-readonly) 0;
+  outline: var(--color-focus-outline) solid var(--outline-width);
+}
+
+.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {
+  outline: var(--color-focus-outline) solid var(--outline-width);
 }
 
 /* BUTTON */

packages/core/src/components/text-input/textarea.stories.js

@@ -28,6 +28,21 @@ export const Default = () => `
     </div>
 `;
 
+export const ReadOnly = () => `
+    <div class="hds-text-input">
+      ${getLabel('input3')}
+      <div class="hds-text-input__input-wrapper">
+        <textarea
+          id="input3"
+          class="hds-text-input__input"
+          placeholder="Placeholder"
+          readonly
+        >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
+      </div>
+      ${getHelperText()}
+    </div>
+`;
+
 export const Disabled = () => `
     <div class="hds-text-input">
       ${getLabel('input3')}

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "3.8.0",
+  "version": "3.9.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.8.0",
+  "version": "3.9.0",
   "description": "Vanilla js for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

packages/react/.stylelintrc.json

@@ -19,6 +19,7 @@
     "scss/percent-placeholder-pattern": "([a-z][A-z]*)",
     "selector-class-pattern": null,
     "selector-not-notation": "simple",
-    "selector-pseudo-element-colon-notation": "single"
+    "selector-pseudo-element-colon-notation": "single",
+    "declaration-no-important": [ true, { "severity": "warning" }]
   }
 }

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "React components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -69,6 +69,7 @@
     "@testing-library/user-event": "^12.8.1",
     "@types/jest": "^26.0.1",
     "@types/jest-axe": "^3.5.3",
+    "@types/lodash": "4.17.4",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
     "@types/rollup-plugin-generate-package-json": "^3.2.8",
@@ -121,6 +122,7 @@
     "typescript": "4.6.4"
   },
   "dependencies": {
+    "@apollo/client": "^3.10.1",
     "@babel/runtime": "7.17.9",
     "@emotion/styled-base": "^11.0.0",
     "@hookform/resolvers": "^2.9.11",
@@ -135,7 +137,8 @@
     "crc-32": "1.2.0",
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
-    "hds-core": "3.8.0",
+    "graphql": "^16.8.1",
+    "hds-core": "3.9.0",
     "http-status-typed": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "kashe": "1.0.4",

packages/react/src/components/cookieConsent/content.builder.test.ts

@@ -7,6 +7,7 @@ import { CookieData, CookieGroup, Content, Category } from './contexts/ContentCo
 import { COOKIE_NAME } from './cookieConsentController';
 import mockWindowLocation from '../../utils/mockWindowLocation';
 import { VERSION_COOKIE_NAME } from './cookieStorageProxy';
+import { cloneWithJSONConversion } from '../../utils/cloneObject';
 
 describe(`content.builder.ts`, () => {
   const mockedWindowControls = mockWindowLocation();
@@ -124,7 +125,7 @@ describe(`content.builder.ts`, () => {
 
   // jest toEqual fails if functions exist.
   const filterContentWithoutFunctions = (content: Content): Content => {
-    return JSON.parse(JSON.stringify(content));
+    return cloneWithJSONConversion(content) as Content;
   };
 
   afterAll(() => {

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

@@ -148,6 +148,7 @@ Playground.args = {
   buttonLabel: '',
   language: 'en',
   multiple: false,
+  minSize: 10,
   maxSize: 300 * 1024,
   accept: '.png,.jpg,.pdf,.json',
   defaultValue: undefined,

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

@@ -167,6 +167,33 @@ describe('<FileInput /> spec', () => {
     ).toBeInTheDocument();
   });
 
+  it('should validate files based on minSize property', async () => {
+    const inputProps = {
+      ...defaultInputProps,
+      label: 'Choose files',
+      multiple: true,
+      accept: undefined,
+      minSize: 10,
+    };
+    const firstFileName = 'test-file-with-enaough-content';
+    const firstFile = new File(['01234567890'], firstFileName, { type: 'image/png' });
+    const secondFileName = 'test-file-with-too-small-content';
+    const secondFile = new File(['012345678'], secondFileName, { type: 'image/png' });
+    const thirdFileName = 'test-file-with-exactly-min-size-bytes';
+    const thirdFile = new File(['0123456789'], thirdFileName, { type: 'image/png' });
+    render(<FileInput {...inputProps} />);
+    const fileUpload = screen.getByLabelText(inputProps.label);
+    userEvent.upload(fileUpload, [firstFile, secondFile, thirdFile]);
+    expect(screen.getByText(firstFileName)).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 small (9 B). The minimum file size is 10 B.`, {
+        exact: false,
+      }),
+    ).toBeInTheDocument();
+  });
+
   it('should validate files based on accept file extension', async () => {
     const inputProps = {
       ...defaultInputProps,