Skip to content

Commit fe99659

Browse files
mrTuomoKmrTuomoK
authored
Merge pull request #1572 from City-of-Helsinki/release-4.9.0
2 parents bb301f7 + f3630e6 commit fe99659

File tree

270 files changed

+426
-311
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

270 files changed

+426
-311
lines changed

‎.github/workflows/loki-tests.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ jobs:
2020
- name: Checkout code
2121
uses: actions/checkout@v4
2222

23+
- name: Set up Docker Buildx
24+
uses: docker/setup-buildx-action@v3
25+
2326
- name: download all artifacts
2427
uses: actions/download-artifact@v4
2528
with:
@@ -60,7 +63,7 @@ jobs:
6063
run: |
6164
sudo apt update
6265
sudo apt install graphicsmagick -y
63-
yarn add loki@0.32.0
66+
yarn add loki@0.35.1
6467
working-directory: ./packages/react
6568

6669
- name: Sanitize artifact name. Backslash not allowed

‎CHANGELOG.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,50 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [4.9.0] - December, 18, 2025
9+
10+
- Security related updates and changes necessary due to them.
11+
12+
### React
13+
14+
#### Changed
15+
16+
Changes that are not related to specific components
17+
18+
- [Storybook] Loading HelsinkiGrotesk font from CDN
19+
- Instead of using useLayoutEffect, use useIsomorphicLayoutEffect to handle SSR better.
20+
21+
#### Fixed
22+
23+
- [Component] What bugs/typos are fixed?
24+
- [Select] Jumping to the end of Virtualized lists with END press.
25+
- [Select] Select accepts options with an empty string value
26+
- [Select] onClose was not triggered when navigating away with keyboard
27+
- [Select] Keyboard navigation problems.
28+
- [Login] TokenizedFetchModule exports were missing.
29+
- [CookieConsent] Replaced inline event handlers with proper event listeners.
30+
31+
### Core
32+
33+
#### Changed
34+
35+
Changes that are not related to specific components
36+
37+
- [Storybook] Loading HelsinkiGrotesk font from CDN
38+
39+
### Documentation
40+
41+
#### Added
42+
43+
- [Cookie Consent] Example of adding `hds-*` namespace to personalised cookies group.
44+
45+
#### Changed
46+
47+
Changes that are not related to specific components
48+
49+
- Loading HelsinkiGrotesk font from CDN
50+
- Updated the accessibility statement to remove the mention of a resolved table-related issue
51+
852
## [4.8.1] - November, 10, 2025
953

1054
Small fix to build process to output correct Typescript typings for some components which missed them.

‎e2e/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "e2e",
33
"private": true,
44
"description": "e2e tests using Playwright",
5-
"version": "4.8.1",
5+
"version": "4.9.0",
66
"engines": {
77
"node": "^22.13.1"
88
},

‎e2e/tests/react/components/react-cookie-consent-spec.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { test, expect, Page, Locator } from '@playwright/test';
2-
import { getFocusedElement, isLocatorSelectedOrChecked } from '../../../utils/element.util';
2+
import { getFocusedElement, isLocatorSelectedOrChecked, waitForStablePosition } from '../../../utils/element.util';
33
import {
44
gotoStorybookUrlByName,
55
createScreenshotFileName,
@@ -250,9 +250,11 @@ test.describe(`Banner`, () => {
250250
const banner = getBannerOrPageLocator(page);
251251
// isVisible does not seem to work with shadow dom
252252
expect(banner).toHaveCount(1);
253+
await waitForStablePosition(banner);
253254
const screenshotName = createScreenshotFileName(testInfo, hasTouch);
254255
await takeScreenshotWithSpacing(page, banner, screenshotName);
255256
await changeLanguage(page, 'sv');
257+
await waitForStablePosition(banner);
256258
const screenshotNameSV = createScreenshotFileName(testInfo, hasTouch, 'sv language');
257259
await takeScreenshotWithSpacing(page, banner, screenshotNameSV);
258260
});

‎packages/core/.storybook/index.css‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,5 @@
1-
@font-face {
2-
font-family: 'HelsinkiGrotesk';
3-
src: url('../src/fonts/565d73a693abe0776c801607ac28f0bf.woff') format('woff');
4-
font-display: swap;
5-
font-weight: 400;
6-
font-style: normal;
7-
text-rendering: optimizeLegibility;
8-
}
9-
10-
@font-face {
11-
font-family: 'HelsinkiGrotesk';
12-
src: url('../src/fonts/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
13-
font-display: swap;
14-
font-weight: 400;
15-
font-style: italic;
16-
text-rendering: optimizeLegibility;
17-
}
18-
19-
@font-face {
20-
font-family: 'HelsinkiGrotesk';
21-
src: url('../src/fonts/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
22-
font-display: swap;
23-
font-weight: 500;
24-
font-style: normal;
25-
text-rendering: optimizeLegibility;
26-
}
27-
28-
@font-face {
29-
font-family: 'HelsinkiGrotesk';
30-
src: url('../src/fonts/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
31-
font-display: swap;
32-
font-weight: 500;
33-
font-style: italic;
34-
text-rendering: optimizeLegibility;
35-
}
36-
37-
@font-face {
38-
font-family: 'HelsinkiGrotesk';
39-
src: url('../src/fonts/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
40-
font-display: swap;
41-
font-weight: 700;
42-
font-style: normal;
43-
text-rendering: optimizeLegibility;
44-
}
45-
46-
@font-face {
47-
font-family: 'HelsinkiGrotesk';
48-
src: url('../src/fonts/20d494430c87e15e194932b729d48270.woff') format('woff');
49-
font-display: swap;
50-
font-weight: 700;
51-
font-style: italic;
52-
text-rendering: optimizeLegibility;
53-
}
54-
55-
@font-face {
56-
font-family: 'HelsinkiGrotesk';
57-
src: url('../src/fonts/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
58-
font-display: swap;
59-
font-weight: 900;
60-
font-style: normal;
61-
text-rendering: optimizeLegibility;
62-
}
63-
64-
@font-face {
65-
font-family: 'HelsinkiGrotesk';
66-
src: url('../src/fonts/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
67-
font-display: swap;
68-
font-weight: 900;
69-
font-style: italic;
70-
text-rendering: optimizeLegibility;
71-
}
1+
/* Import HelsinkiGrotesk fonts from CDN */
2+
@import 'https://makasiini.hel.ninja/delivery/HelsinkiGrotesk/HelsinkiGrotesk.css';
723

734
body {
745
font-family: var(--font-default);

‎packages/core/.storybook/main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,4 @@ module.exports = {
1313
'@storybook/addon-outline',
1414
'@storybook/preset-scss',
1515
],
16-
staticDirs: ['../src/fonts'],
1716
};

‎packages/core/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "hds-core",
3-
"version": "4.8.1",
3+
"version": "4.9.0",
44
"description": "Core styles for the Helsinki Design System",
55
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
66
"license": "MIT",
@@ -48,7 +48,7 @@
4848
"css-loader": "5.2.6",
4949
"cssnano": "4.1.10",
5050
"glob": "^10.4.1",
51-
"hds-design-tokens": "4.8.1",
51+
"hds-design-tokens": "4.9.0",
5252
"jest": "^29.7.0",
5353
"postcss": "8.2.15",
5454
"postcss-classes-to-mixins": "^3.0.1",

‎packages/core/src/components/cookie-consent/_font-face.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@
3232
$font-weight-700: false, // Bold
3333
$font-weight-900: false, // Black
3434
){
35-
$font-path: '../../../src/fonts/';
35+
$font-cdn-base: 'https://makasiini.hel.ninja/delivery/HelsinkiGrotesk';
3636

3737
@if $all or ($font-weight-400) {
3838
@font-face {
3939
font-display: swap;
4040
font-family: HelsinkiGrotesk;
4141
font-style: normal;
4242
font-weight: 400;
43-
src: url('#{$font-path}565d73a693abe0776c801607ac28f0bf.woff') format('woff');
43+
src: url('#{$font-cdn-base}/565d73a693abe0776c801607ac28f0bf.woff') format('woff');
4444
text-rendering: optimizelegibility;
4545
}
4646
}
@@ -51,7 +51,7 @@
5151
font-family: HelsinkiGrotesk;
5252
font-style: italic;
5353
font-weight: 400;
54-
src: url('#{$font-path}5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
54+
src: url('#{$font-cdn-base}/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
5555
text-rendering: optimizelegibility;
5656
}
5757
}
@@ -62,7 +62,7 @@
6262
font-family: HelsinkiGrotesk;
6363
font-style: normal;
6464
font-weight: 500;
65-
src: url('#{$font-path}7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
65+
src: url('#{$font-cdn-base}/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
6666
text-rendering: optimizelegibility;
6767
}
6868
}
@@ -73,7 +73,7 @@
7373
font-family: HelsinkiGrotesk;
7474
font-style: italic;
7575
font-weight: 500;
76-
src: url('#{$font-path}e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
76+
src: url('#{$font-cdn-base}/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
7777
text-rendering: optimizelegibility;
7878
}
7979
}
@@ -84,7 +84,7 @@
8484
font-family: HelsinkiGrotesk;
8585
font-style: normal;
8686
font-weight: 700;
87-
src: url('#{$font-path}533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
87+
src: url('#{$font-cdn-base}/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
8888
text-rendering: optimizelegibility;
8989
}
9090
}
@@ -95,7 +95,7 @@
9595
font-family: HelsinkiGrotesk;
9696
font-style: italic;
9797
font-weight: 700;
98-
src: url('#{$font-path}20d494430c87e15e194932b729d48270.woff') format('woff');
98+
src: url('#{$font-cdn-base}/20d494430c87e15e194932b729d48270.woff') format('woff');
9999
text-rendering: optimizelegibility;
100100
}
101101
}
@@ -106,7 +106,7 @@
106106
font-family: HelsinkiGrotesk;
107107
font-style: normal;
108108
font-weight: 900;
109-
src: url('#{$font-path}a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
109+
src: url('#{$font-cdn-base}/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
110110
text-rendering: optimizelegibility;
111111
}
112112
}
@@ -117,7 +117,7 @@
117117
font-family: HelsinkiGrotesk;
118118
font-style: italic;
119119
font-weight: 900;
120-
src: url('#{$font-path}62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
120+
src: url('#{$font-cdn-base}/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
121121
text-rendering: optimizelegibility;
122122
}
123123
}

0 commit comments

Comments
 (0)