Skip to content

Commit bdb461f

Browse files
mikkojamGmikkojamG
committed
deps: upgrade HDS to 4.7.1 Ref: LINK-1759
chore: cleanup and refactoring Ref: LINK-1759 chore: optimize selects with search Ref: LINK-1759 deps: compatible react types Ref: LINK-1759 chore: type fixes Ref: LINK-1759 chore: select values should be arrays Ref: LINK-1759
1 parent bb29e65 commit bdb461f

228 files changed

Lines changed: 2574 additions & 2088 deletions

File tree

Some content is hidden

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

‎e2e/tests/events.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,9 @@ test.describe('Event search page', () => {
7373
// Results
7474
await expect(page.getByLabel('Viimeksi muokattu, laskeva')).toBeVisible();
7575
await expect(
76-
page.getByTestId('hds-pagination-previous-button')
76+
page.getByRole('button', { name: 'Edellinen' })
7777
).toBeDisabled();
78-
await expect(page.getByTestId('hds-pagination-next-button')).toBeVisible();
78+
await expect(page.getByRole('button', { name: 'Seuraava' })).toBeVisible();
7979
await expect(
8080
page.getByRole('button', { name: 'Anna palautetta' })
8181
).toBeVisible();

‎package.json‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,27 @@
66
"node": ">=22.13.0"
77
},
88
"dependencies": {
9-
"@apollo/client": "^3.9.8",
9+
"@apollo/client": "^3.10.1",
1010
"@ckeditor/ckeditor5-build-classic": "43.1.1",
1111
"@ckeditor/ckeditor5-react": "^6.2.0",
1212
"@emotion/react": "^11.11.4",
1313
"@faker-js/faker": "^8.4.1",
1414
"@nabla/vite-plugin-eslint": "^2.0.5",
1515
"@sentry/react": "^9.15.0",
1616
"@sentry/vite-plugin": "^3.4.0",
17+
"@testing-library/dom": "^10.4.0",
1718
"@testing-library/jest-dom": "^6.4.2",
18-
"@testing-library/react": "15.0.7",
19-
"@testing-library/user-event": "14.5.2",
19+
"@testing-library/react": "16.2.0",
20+
"@testing-library/user-event": "14.6.1",
2021
"@types/dompurify": "^3.0.5",
2122
"@types/leaflet": "1.9.8",
2223
"@types/leaflet-draw": "^1.0.11",
2324
"@types/lodash": "^4.17.0",
2425
"@types/node": "^22.13.0",
25-
"@types/react": "18.2.65",
26-
"@types/react-dom": "18.2.22",
26+
"@types/react": "^18.3.0",
27+
"@types/react-dom": "^18.3.0",
2728
"@types/react-helmet": "^6.1.11",
2829
"@types/react-modal": "^3.16.3",
29-
"@types/react-router": "^5.1.20",
30-
"@types/react-router-dom": "^5.3.3",
3130
"@types/react-scroll": "^1.8.10",
3231
"@vitejs/plugin-react-swc": "^3.7.0",
3332
"apollo-link-rest": "^0.9.0",
@@ -48,8 +47,8 @@
4847
"focus-visible": "^5.2.0",
4948
"formik": "2.4.5",
5049
"gzipper": "^7.2.0",
51-
"hds-core": "^3.8.0",
52-
"hds-react": "^3.8.0",
50+
"hds-core": "^4.7.1",
51+
"hds-react": "^4.7.1",
5352
"history": "^5.3.0",
5453
"html-tags": "^3.3.1",
5554
"i18next": "^23.10.1",
@@ -59,8 +58,8 @@
5958
"object-keys-normalizer": "^1.0.1",
6059
"pretty": "^2.0.0",
6160
"qs": "^6.12.1",
62-
"react": "^18.2.0",
63-
"react-dom": "^18.2.0",
61+
"react": "^18.3.1",
62+
"react-dom": "^18.3.1",
6463
"react-helmet": "^6.1.0",
6564
"react-i18next": "^14.1.0",
6665
"react-image-crop": "^11.0.5",
@@ -116,10 +115,12 @@
116115
"@playwright/test": "^1.51.1",
117116
"@vitest/coverage-istanbul": "^3.0.9",
118117
"eslint": "^8.57.0",
118+
"fake-indexeddb": "^6.0.0",
119119
"graphql": "16.8.1",
120120
"husky": "^9.0.11",
121121
"jsdom": "^26.1.0",
122122
"prettier": "^3.2.5",
123+
"shadow-dom-testing-library": "^1.11.3",
123124
"snyk": "^1.1297.3",
124125
"vite-bundle-visualizer": "^1.2.1"
125126
},

‎src/assets/theme/theme.ts‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -327,32 +327,23 @@ const theme: Theme = {
327327
'--dropdown-border-color-hover-invalid': 'var(--color-error-dark)',
328328
'--dropdown-border-color-focus': 'var(--color-black-90)',
329329
'--dropdown-border-color-invalid': 'var(--color-error)',
330-
'--dropdown-border-color-disabled': 'var(--color-black-10)',
331330
'--dropdown-color-default': 'var(--color-black-90)',
332331
'--dropdown-color-disabled': 'var(--color-black-40)',
333332
'--focus-outline-color': 'var(--color-coat-of-arms)',
334-
'--helper-color-default': 'var(--color-black-60)',
333+
'--assistive-color': 'var(--color-black-60)',
335334
'--menu-divider-color': 'var(--color-black-20)',
336-
'--menu-item-background-default': 'var(--color-white)',
337-
'--menu-item-background-hover': 'var(--color-black-10)',
338-
'--menu-item-background-selected': 'var(--color-white)',
339-
'--menu-item-background-selected-hover': 'var(--color-black-10)',
340-
'--menu-item-background-disabled': 'var(--color-white)',
335+
'--menu-item-background-color-default': 'var(--color-white)',
336+
'--menu-item-background-color-hover': 'var(--color-black-10)',
337+
'--menu-item-background-color-selected': 'var(--color-white)',
338+
'--menu-item-background-color-selected-hover': 'var(--color-black-10)',
339+
'--menu-item-background-color-disabled': 'var(--color-white)',
341340
'--menu-item-color-default': 'var(--color-black-90)',
342341
'--menu-item-color-hover': 'var(--color-black-90)',
343342
'--menu-item-color-selected': 'var(--color-black-90)',
344343
'--menu-item-color-selected-hover': 'var(--color-black-90)',
345344
'--menu-item-color-disabled': 'var(--color-black-40)',
346-
'--menu-item-icon-color-selected': 'var(--color-white)',
345+
'--menu-item-icon-color-selected': 'var(--color-black-90)',
347346
'--menu-item-icon-color-disabled': 'var(--color-black-40)',
348-
'--multiselect-checkbox-background-selected': 'var(--color-bus)',
349-
'--multiselect-checkbox-background-disabled': 'var(--color-black-10)',
350-
'--multiselect-checkbox-border-default': 'var(--color-black-50)',
351-
'--multiselect-checkbox-border-hover': 'var(--color-black-90)',
352-
'--multiselect-checkbox-border-disabled': 'var(--color-black-10)',
353-
'--multiselect-checkbox-color-default': 'transparent',
354-
'--multiselect-checkbox-color-selected': 'var(--color-white)',
355-
'--multiselect-checkbox-color-selected-disabled': 'var(--color-white)',
356347
'--placeholder-color': 'var(--color-black-60)',
357348
},
358349
sideNavigation: {

‎src/common/components/breadcrumb/Breadcrumb.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useTheme } from '../../../domain/app/theme/Theme';
1010

1111
export type BreadcrumbProps = { ariaLabel?: string } & Omit<
1212
HdsBreadcrumbProps,
13-
'ariaLabel'
13+
'aria-label'
1414
>;
1515

1616
const Breadcrumb = ({
@@ -23,7 +23,7 @@ const Breadcrumb = ({
2323
return (
2424
<HdsBreadcrumb
2525
{...rest}
26-
ariaLabel={ariaLabel ?? t('common.breadcrumb')}
26+
aria-label={ariaLabel ?? t('common.breadcrumb')}
2727
theme={theme.breadcrumb as BreadcrumbCustomTheme}
2828
/>
2929
);

‎src/common/components/button/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useTheme } from '../../../domain/app/theme/Theme';
66
import styles from './button.module.scss';
77

88
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
9-
({ className, variant = 'primary', ...rest }, ref) => {
9+
({ className, variant = ButtonVariant.Primary, ...rest }, ref) => {
1010
const { theme } = useTheme();
1111
return (
1212
<ClassNames>

‎src/common/components/buttonPanel/ButtonPanel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classNames from 'classnames';
2-
import { IconArrowLeft, IconMenuDots } from 'hds-react';
2+
import { ButtonVariant, IconArrowLeft, IconMenuDots } from 'hds-react';
33
import React from 'react';
44
import { useTranslation } from 'react-i18next';
55

@@ -86,11 +86,11 @@ const ButtonPanel: React.FC<ButtonPanelProps> = ({
8686
{onBack && (
8787
<Button
8888
className={classNames(styles.backButton, styles.smallButton)}
89-
iconLeft={<IconArrowLeft aria-hidden />}
89+
iconStart={<IconArrowLeft aria-hidden />}
9090
fullWidth={true}
9191
onClick={onBack}
9292
type="button"
93-
variant="secondary"
93+
variant={ButtonVariant.Secondary}
9494
>
9595
{t('common.buttonBack')}
9696
</Button>

‎src/common/components/closeButton/CloseButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classNames from 'classnames';
2-
import { IconCross } from 'hds-react';
2+
import { IconCross, IconSize } from 'hds-react';
33
import React from 'react';
44

55
import styles from './closeButton.module.scss';
@@ -25,7 +25,7 @@ const CloseButton: React.FC<Props> = ({
2525
onClick={onClick}
2626
type={type}
2727
>
28-
<IconCross size="s" />
28+
<IconCross size={IconSize.Small} />
2929
</button>
3030
);
3131
};

‎src/common/components/collapsible/Collapsible.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ClassNames } from '@emotion/react';
2-
import { IconAngleDown, IconAngleUp } from 'hds-react';
2+
import { IconAngleDown, IconAngleUp, IconSize } from 'hds-react';
33
import React from 'react';
44

55
import { useTheme } from '../../../domain/app/theme/Theme';
@@ -45,7 +45,11 @@ const Collabsible: React.FC<React.PropsWithChildren<Props>> = ({
4545
onClick={togglePanel}
4646
type="button"
4747
>
48-
{isOpen ? <IconAngleUp size="m" /> : <IconAngleDown size="m" />}
48+
{isOpen ? (
49+
<IconAngleUp size={IconSize.Medium} />
50+
) : (
51+
<IconAngleDown size={IconSize.Medium} />
52+
)}
4953
<span>{title}</span>
5054
</button>
5155
</div>

‎src/common/components/combobox/Combobox.tsx‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎src/common/components/combobox/combobox.module.scss‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)