LINK-1759 HDS v4

e2e/tests/events.spec.ts

@@ -73,9 +73,9 @@ test.describe('Event search page', () => {
     // Results
     await expect(page.getByLabel('Viimeksi muokattu, laskeva')).toBeVisible();
     await expect(
-      page.getByTestId('hds-pagination-previous-button')
+      page.getByRole('button', { name: 'Edellinen' })
     ).toBeDisabled();
-    await expect(page.getByTestId('hds-pagination-next-button')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Seuraava' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Anna palautetta' })
     ).toBeVisible();

package.json

@@ -6,23 +6,24 @@
     "node": ">=22.13.0"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.8",
+    "@apollo/client": "^3.10.1",
     "@ckeditor/ckeditor5-build-classic": "43.1.1",
     "@ckeditor/ckeditor5-react": "^6.2.0",
     "@emotion/react": "^11.11.4",
     "@faker-js/faker": "^8.4.1",
     "@nabla/vite-plugin-eslint": "^2.0.5",
     "@sentry/react": "^9.15.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "15.0.7",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/dompurify": "^3.0.5",
     "@types/leaflet": "1.9.8",
     "@types/leaflet-draw": "^1.0.11",
     "@types/lodash": "^4.17.0",
     "@types/node": "^22.13.0",
-    "@types/react": "18.2.65",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-modal": "^3.16.3",
     "@types/react-scroll": "^1.8.10",
@@ -45,8 +46,8 @@
     "focus-visible": "^5.2.0",
     "formik": "2.4.5",
     "gzipper": "^7.2.0",
-    "hds-core": "^3.8.0",
-    "hds-react": "^3.8.0",
+    "hds-core": "^4.7.1",
+    "hds-react": "^4.7.1",
     "history": "^5.3.0",
     "html-tags": "^3.3.1",
     "i18next": "^23.10.1",
@@ -56,8 +57,8 @@
     "object-keys-normalizer": "^1.0.1",
     "pretty": "^2.0.0",
     "qs": "^6.12.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^14.1.0",
     "react-image-crop": "^11.0.5",
@@ -113,10 +114,12 @@
     "@playwright/test": "^1.51.1",
     "@vitest/coverage-istanbul": "^3.0.9",
     "eslint": "^8.57.0",
+    "fake-indexeddb": "^6.0.0",
     "graphql": "16.8.1",
     "husky": "^9.0.11",
     "jsdom": "^26.1.0",
     "prettier": "^3.2.5",
+    "shadow-dom-testing-library": "^1.11.3",
     "snyk": "^1.1297.3",
     "vite-bundle-visualizer": "^1.2.1"
   },

src/assets/theme/theme.ts

@@ -327,32 +327,23 @@ const theme: Theme = {
     '--dropdown-border-color-hover-invalid': 'var(--color-error-dark)',
     '--dropdown-border-color-focus': 'var(--color-black-90)',
     '--dropdown-border-color-invalid': 'var(--color-error)',
-    '--dropdown-border-color-disabled': 'var(--color-black-10)',
     '--dropdown-color-default': 'var(--color-black-90)',
     '--dropdown-color-disabled': 'var(--color-black-40)',
     '--focus-outline-color': 'var(--color-coat-of-arms)',
-    '--helper-color-default': 'var(--color-black-60)',
+    '--assistive-color': 'var(--color-black-60)',
     '--menu-divider-color': 'var(--color-black-20)',
-    '--menu-item-background-default': 'var(--color-white)',
-    '--menu-item-background-hover': 'var(--color-black-10)',
-    '--menu-item-background-selected': 'var(--color-white)',
-    '--menu-item-background-selected-hover': 'var(--color-black-10)',
-    '--menu-item-background-disabled': 'var(--color-white)',
+    '--menu-item-background-color-default': 'var(--color-white)',
+    '--menu-item-background-color-hover': 'var(--color-black-10)',
+    '--menu-item-background-color-selected': 'var(--color-white)',
+    '--menu-item-background-color-selected-hover': 'var(--color-black-10)',
+    '--menu-item-background-color-disabled': 'var(--color-white)',
     '--menu-item-color-default': 'var(--color-black-90)',
     '--menu-item-color-hover': 'var(--color-black-90)',
     '--menu-item-color-selected': 'var(--color-black-90)',
     '--menu-item-color-selected-hover': 'var(--color-black-90)',
     '--menu-item-color-disabled': 'var(--color-black-40)',
-    '--menu-item-icon-color-selected': 'var(--color-white)',
+    '--menu-item-icon-color-selected': 'var(--color-black-90)',
     '--menu-item-icon-color-disabled': 'var(--color-black-40)',
-    '--multiselect-checkbox-background-selected': 'var(--color-bus)',
-    '--multiselect-checkbox-background-disabled': 'var(--color-black-10)',
-    '--multiselect-checkbox-border-default': 'var(--color-black-50)',
-    '--multiselect-checkbox-border-hover': 'var(--color-black-90)',
-    '--multiselect-checkbox-border-disabled': 'var(--color-black-10)',
-    '--multiselect-checkbox-color-default': 'transparent',
-    '--multiselect-checkbox-color-selected': 'var(--color-white)',
-    '--multiselect-checkbox-color-selected-disabled': 'var(--color-white)',
     '--placeholder-color': 'var(--color-black-60)',
   },
   sideNavigation: {

src/common/components/breadcrumb/Breadcrumb.tsx

@@ -10,7 +10,7 @@ import { useTheme } from '../../../domain/app/theme/Theme';
 
 export type BreadcrumbProps = { ariaLabel?: string } & Omit<
   HdsBreadcrumbProps,
-  'ariaLabel'
+  'aria-label'
 >;
 
 const Breadcrumb = ({
@@ -23,7 +23,7 @@ const Breadcrumb = ({
   return (
     <HdsBreadcrumb
       {...rest}
-      ariaLabel={ariaLabel ?? t('common.breadcrumb')}
+      aria-label={ariaLabel ?? t('common.breadcrumb')}
       theme={theme.breadcrumb as BreadcrumbCustomTheme}
     />
   );

src/common/components/button/Button.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../../../domain/app/theme/Theme';
 import styles from './button.module.scss';
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'primary', ...rest }, ref) => {
+  ({ className, variant = ButtonVariant.Primary, ...rest }, ref) => {
     const { theme } = useTheme();
     return (
       <ClassNames>

src/common/components/buttonPanel/ButtonPanel.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { IconArrowLeft, IconMenuDots } from 'hds-react';
+import { ButtonVariant, IconArrowLeft, IconMenuDots } from 'hds-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -86,11 +86,11 @@ const ButtonPanel: React.FC<ButtonPanelProps> = ({
               {onBack && (
                 <Button
                   className={classNames(styles.backButton, styles.smallButton)}
-                  iconLeft={<IconArrowLeft aria-hidden />}
+                  iconStart={<IconArrowLeft aria-hidden />}
                   fullWidth={true}
                   onClick={onBack}
                   type="button"
-                  variant="secondary"
+                  variant={ButtonVariant.Secondary}
                 >
                   {t('common.buttonBack')}
                 </Button>

src/common/components/closeButton/CloseButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { IconCross } from 'hds-react';
+import { IconCross, IconSize } from 'hds-react';
 import React from 'react';
 
 import styles from './closeButton.module.scss';
@@ -25,7 +25,7 @@ const CloseButton: React.FC<Props> = ({
       onClick={onClick}
       type={type}
     >
-      <IconCross size="s" />
+      <IconCross size={IconSize.Small} />
     </button>
   );
 };

src/common/components/collapsible/Collapsible.tsx

@@ -1,5 +1,5 @@
 import { ClassNames } from '@emotion/react';
-import { IconAngleDown, IconAngleUp } from 'hds-react';
+import { IconAngleDown, IconAngleUp, IconSize } from 'hds-react';
 import React from 'react';
 
 import { useTheme } from '../../../domain/app/theme/Theme';
@@ -45,7 +45,11 @@ const Collabsible: React.FC<React.PropsWithChildren<Props>> = ({
               onClick={togglePanel}
               type="button"
             >
-              {isOpen ? <IconAngleUp size="m" /> : <IconAngleDown size="m" />}
+              {isOpen ? (
+                <IconAngleUp size={IconSize.Medium} />
+              ) : (
+                <IconAngleDown size={IconSize.Medium} />
+              )}
               <span>{title}</span>
             </button>
           </div>

src/common/components/deleteButton/DeleteButton.tsx

@@ -1,5 +1,5 @@
 import { ClassNames } from '@emotion/react';
-import { IconMinusCircle } from 'hds-react';
+import { ButtonVariant, IconMinusCircle } from 'hds-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -36,12 +36,12 @@ const DeleteButton: React.FC<Props> = ({
             className,
             css(theme.deleteButton)
           )}
-          iconLeft={<IconMinusCircle aria-hidden={true} />}
+          iconStart={<IconMinusCircle aria-hidden={true} />}
           onClick={onClick}
           type={type}
-          variant="supplementary"
+          variant={ButtonVariant.Supplementary}
         >
-          <span className={styles.label}>{label ?? t('common.delete')}</span>
+          {label ?? t('common.delete')}
         </Button>
       )}
     </ClassNames>

src/common/components/deleteButton/deleteButton.module.scss

@@ -7,9 +7,5 @@
   color: var(--delete-button-color-icon) !important;
   height: var(--delete-button-height);
 
-  .label {
-    color: var(--delete-button-color);
-  }
-
   @include focus-outline();
 }

src/common/components/dialog/confirmModal/ConfirmModal.tsx

@@ -1,4 +1,6 @@
 import {
+  ButtonPresetTheme,
+  ButtonVariant,
   Dialog,
   DialogVariant,
   IconAlertCircle,
@@ -75,7 +77,7 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
     >
       <Dialog.Header
         id={titleId}
-        iconLeft={
+        iconStart={
           variant === 'primary' ? (
             <IconInfoCircle aria-hidden={true} />
           ) : (
@@ -101,16 +103,20 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
           loading={isSaving}
           onClick={handleConfirm}
           type="button"
-          variant={variant === 'danger' ? 'danger' : 'primary'}
+          variant={
+            variant === ButtonVariant.Danger
+              ? ButtonVariant.Danger
+              : ButtonVariant.Primary
+          }
         >
           {confirmButtonText}
         </LoadingButton>
         <Button
           disabled={isSaving}
           onClick={handleClose}
-          theme="black"
+          theme={ButtonPresetTheme.Black}
           type="button"
-          variant="secondary"
+          variant={ButtonVariant.Secondary}
         >
           {t('common.cancel')}
         </Button>

src/common/components/dialog/infoModal/InfoModal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, IconInfoCircle } from 'hds-react';
+import { ButtonVariant, Dialog, IconInfoCircle } from 'hds-react';
 import React from 'react';
 
 import Button from '../../button/Button';
@@ -47,14 +47,18 @@ const InfoModal: React.FC<InfoModalProps> = ({
     >
       <Dialog.Header
         id={titleId}
-        iconLeft={<IconInfoCircle aria-hidden={true} />}
+        iconStart={<IconInfoCircle aria-hidden={true} />}
         title={heading}
       />
       <Dialog.Content>
         <p id={descriptionId}>{description}</p>
       </Dialog.Content>
       <Dialog.ActionButtons>
-        <Button onClick={handleClose} type="button" variant="primary">
+        <Button
+          onClick={handleClose}
+          type="button"
+          variant={ButtonVariant.Primary}
+        >
           {closeButtonText}
         </Button>
       </Dialog.ActionButtons>