chore: migrate to HDS v3 (#3466)

* chore: upgrade to HDS v3 * fix(benefit): migrate to renamed euro sign * feat(shared): introduce shared Header v3 component * feat(benefit): use HDS v3 <Header> * fix(benefit): reformat <Header>'s custom items * chore(benefit): migrate to new footer * chore: update hds-react to 3.11 * chore: update tet-youth * chore: update tet-admin * fix: headerV3 props * fix: hds 3.11 was missing from yarn.lock * fix: headerV3 types * fix: tet-admin ssr issues * fix: tet-youth ssr issues * fix: remove desing tokens 3.11 that was accidentally in yarn.lock * fix: add missing keys to loops * fix: linter and unit tests * fix: migrate to displaying primary languages as links * chore: add translation to footer backToTop link * chore: update hds in kesaseteli to v3 * fix: remove unused import * fix: header language selection test * chore: remove old shared header * fix: linter issues in tests * fix: adjust e2e test * fix: e2e test selector * fix: revert login links dynamic wrapper change * fix: switch link to button * fix: linter error * chore: test what line fails * chore: test what line fails * fix: language change unit test * fix: linter error and logout test * fix: tet admin browser test * fix: user aria-label test * chore: rename HeaderV3 to Header * fix: hds header import * fix: login button selector * chore: update hds design tokens * fix: typos and array --------- Co-authored-by: Mikko Riippi <[email protected]>
City-of-Helsinki · Dec 16, 2024 · 8bf6c73 · 8bf6c73
1 parent 192dc77
commit 8bf6c73
Show file tree

Hide file tree

Showing 64 changed files with 676 additions and 501 deletions.
diff --git a/frontend/benefit/applicant/package.json b/frontend/benefit/applicant/package.json
@@ -27,8 +27,8 @@
     "dotenv": "^16.0.0",
     "finnish-ssn": "^2.1.2",
     "formik": "^2.2.9",
-    "hds-design-tokens": "^2.17.1",
-    "hds-react": "^2.17.1",
+    "hds-design-tokens": "^3.11.0",
+    "hds-react": "^3.11.0",
     "lodash": "^4.17.21",
     "next": "14.2.12",
     "next-router-mock": "0.9.12",

diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -588,7 +588,8 @@
     "aboutTheService": "About the service",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/en/administration/information/information/accessibility",
     "aboutTheServiceLink": "https://www.hel.fi/en/business-and-work/employers/helsinki-benefit-for-employers",
-    "cookieSettings": "Cookie settings"
+    "cookieSettings": "Cookie settings",
+    "backToTop": "Back to top"
   },
   "notifications": {
     "applicationSubmitted": {

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -588,7 +588,8 @@
     "aboutTheService": "Tietoa palvelusta",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/fi/kaupunki-ja-hallinto/tietoa-helsingista/tietoa-hel-fista/saavutettavuus/saavutettavuusselosteet",
     "aboutTheServiceLink": "https://www.hel.fi/fi/yritykset-ja-tyo/tyonantajat/taloudelliset-tuet/tyonantajan-helsinki-lisa",
-    "cookieSettings": "Evästeasetukset"
+    "cookieSettings": "Evästeasetukset",
+    "backToTop": "Takaisin ylös"
   },
   "notifications": {
     "applicationSubmitted": {

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -588,7 +588,8 @@
     "aboutTheService": "Information om tjänsten",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/sv/stad-och-forvaltning/information/information/tillganglighet",
     "aboutTheServiceLink": "https://www.hel.fi/sv/foretag-och-arbete/arbetsgivare/arbetsgivarens-helsingforstillagg",
-    "cookieSettings": "Cookie -inställningar"
+    "cookieSettings": "Cookie -inställningar",
+    "backToTop": "Tillbaka till toppen"
   },
   "notifications": {
     "applicationSubmitted": {

diff --git a/frontend/benefit/applicant/src/components/footer/Footer.tsx b/frontend/benefit/applicant/src/components/footer/Footer.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'benefit/applicant/i18n';
-import { Footer } from 'hds-react';
+import { Footer, Logo, logoFiDark } from 'hds-react';
 import React from 'react';
 import useLocale from 'shared/hooks/useLocale';
 
@@ -15,20 +15,24 @@ const FooterSection: React.FC = () => {
         <Footer.Base
           copyrightHolder={t('common:footer.copyrightText')}
           copyrightText={t('common:footer.allRightsReservedText')}
+          backToTopLabel={t('common:footer.backToTop')}
+          logo={
+            <Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />
+          }
         >
-          <Footer.Item
+          <Footer.Link
             as="a"
             rel="noopener noreferrer"
             target="_blank"
             href={`/${locale}/accessibility-statement`}
             label={t('common:footer.accessibilityStatement')}
           />
-          <Footer.Item
+          <Footer.Link
             as="a"
             href={`/${locale}/cookie-settings`}
             label={t('common:footer.cookieSettings')}
           />
-          <Footer.Item
+          <Footer.Link
             as="a"
             rel="noopener noreferrer"
             target="_blank"

diff --git a/frontend/benefit/applicant/src/components/header/useHeader.ts b/frontend/benefit/applicant/src/components/header/useHeader.ts
@@ -19,10 +19,7 @@ type ExtendedComponentProps = {
   navigationItems: NavigationItem[];
   isNavigationVisible: boolean;
   hasMessenger: boolean;
-  handleLanguageChange: (
-    e: React.SyntheticEvent<unknown>,
-    newLanguage: OptionType<string>
-  ) => void;
+  handleLanguageChange: (newLanguage: SUPPORTED_LANGUAGES) => void;
   handleNavigationItemClick: (url: string) => void;
   unreadMessagesCount: number | undefined | null;
   setMessagesDrawerVisiblity: (state: boolean) => void;
@@ -141,18 +138,13 @@ const useHeader = (): ExtendedComponentProps => {
     );
   }, [status, setHasMessenger]);
 
-  const handleLanguageChange = (
-    e: React.SyntheticEvent<unknown>,
-    newLanguage: OptionType<string>
-  ): void => {
-    e.preventDefault();
-
+  const handleLanguageChange = (newLanguage: SUPPORTED_LANGUAGES): void => {
     void axios.get(BackendEndpoint.USER_OPTIONS, {
-      params: { lang: newLanguage.value },
+      params: { lang: newLanguage },
     });
 
     void router.push({ pathname, query }, asPath, {
-      locale: newLanguage.value,
+      locale: newLanguage,
     });
   };
 

diff --git a/frontend/benefit/handler/package.json b/frontend/benefit/handler/package.json
@@ -35,8 +35,8 @@
     "finnish-ssn": "^2.1.2",
     "formik": "^2.2.9",
     "fuse.js": "^6.6.2",
-    "hds-design-tokens": "^2.17.1",
-    "hds-react": "^2.17.1",
+    "hds-design-tokens": "^3.11.0",
+    "hds-react": "^3.11.0",
     "ibantools": "^4.3.4",
     "lodash": "^4.17.21",
     "next": "14.2.12",

diff --git a/...handler/src/components/applicationReview/employeeView/EmployeeActions/EmployeeActions.tsx b/...handler/src/components/applicationReview/employeeView/EmployeeActions/EmployeeActions.tsx
@@ -1,6 +1,6 @@
 import { ROUTES } from 'benefit/handler/constants';
 import { UploadProps } from 'benefit/handler/types/application';
-import { Button, IconGlyphEuro } from 'hds-react';
+import { Button, IconEuroSign } from 'hds-react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
@@ -33,7 +33,7 @@ const EmployeeActions: React.FC<UploadProps> = () => {
             onClick={handleCloseClick}
             theme="black"
             variant="secondary"
-            iconLeft={<IconGlyphEuro />}
+            iconLeft={<IconEuroSign />}
           >
             {t(`${translationsBase}.addPreviouslyGrantedBenefit`)}
           </Button>

diff --git a/...it/handler/src/components/applicationReview/handlingView/DecisionCalculationAccordion.tsx b/...it/handler/src/components/applicationReview/handlingView/DecisionCalculationAccordion.tsx
@@ -15,7 +15,7 @@ import {
   CALCULATION_ROW_TYPES,
 } from 'benefit-shared/constants';
 import { Application } from 'benefit-shared/types/application';
-import { Accordion, IconGlyphEuro, IconMoneyBag } from 'hds-react';
+import { Accordion, IconEuroSign, IconMoneyBag } from 'hds-react';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
 import { $ViewField } from 'shared/components/benefit/summaryView/SummaryView.sc';
@@ -49,7 +49,7 @@ const DecisionCalculationAccordion: React.FC<Props> = ({ data }) => {
     <>
       <$DecisionCalculatorAccordion>
         <$DecisionCalculatorAccordionIconContainer aria-hidden="true">
-          <IconGlyphEuro />
+          <IconEuroSign />
         </$DecisionCalculatorAccordionIconContainer>
         <Accordion
           heading={t('common:applications.decision.calculation')}

diff --git a/frontend/benefit/handler/src/components/footer/Footer.tsx b/frontend/benefit/handler/src/components/footer/Footer.tsx
@@ -1,5 +1,5 @@
 import AppContext from 'benefit/handler/context/AppContext';
-import { Footer } from 'hds-react';
+import { Footer, Logo, logoFiDark } from 'hds-react';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 
@@ -20,6 +20,9 @@ const FooterSection: React.FC = () => {
         <Footer.Base
           copyrightHolder={t('footer.copyrightText')}
           copyrightText={t('footer.allRightsReservedText')}
+          logo={
+            <Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />
+          }
         />
       </Footer>
     </$FooterWrapper>

diff --git a/frontend/benefit/handler/src/components/header/Header.sc.ts b/frontend/benefit/handler/src/components/header/Header.sc.ts
@@ -7,6 +7,17 @@ export const $BaseHeader = styled(BaseHeader)`
   background: #1a1a1a;
 `;
 
+export const $HeaderCustomItems = styled.ul`
+  display: flex;
+  align-items: center;
+  margin-right: var(--spacing-s);
+  list-style-type: none;
+  margin: 0;
+  > li {
+    margin-right: var(--spacing-xs);
+  }
+`;
+
 export const $ToggleButton = styled.button`
   all: initial;
   border-radius: 50%;

diff --git a/frontend/benefit/handler/src/components/header/Header.tsx b/frontend/benefit/handler/src/components/header/Header.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { getFullName } from 'shared/utils/application.utils';
 import { DefaultTheme } from 'styled-components';
 
-import { $BaseHeader } from './Header.sc';
+import { $BaseHeader, $HeaderCustomItems } from './Header.sc';
 import HeaderNotifier from './HeaderNotifier';
 import { useHeader } from './useHeader';
 
@@ -34,15 +34,23 @@ const Header: React.FC = () => {
     }
   );
 
+  const customItems = (
+    <$HeaderCustomItems key="custom-items">
+      <li key="header-notifier">
+        <HeaderNotifier />
+      </li>
+      {process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== 'production' ? (
+        <li key="ahjo-mode-switch">
+          <TemporaryAhjoModeSwitch />
+        </li>
+      ) : null}
+    </$HeaderCustomItems>
+  );
+
   return (
     <$BaseHeader
       title={t('common:appName')}
-      customItems={[
-        process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== 'production' ? (
-          <TemporaryAhjoModeSwitch />
-        ) : null,
-        <HeaderNotifier />,
-      ]}
+      customItems={customItems}
       titleUrl={ROUTES.HOME}
       skipToContentLabel={t('common:header.linkSkipToContent')}
       menuToggleAriaLabel={t('common:header.menuToggleAriaLabel')}

diff --git a/frontend/benefit/handler/src/components/header/useHeader.tsx b/frontend/benefit/handler/src/components/header/useHeader.tsx
@@ -28,10 +28,7 @@ type ExtendedComponentProps = {
   languageOptions: OptionType<string>[];
   isNavigationVisible?: boolean;
   navigationItems?: NavigationItem[];
-  handleLanguageChange: (
-    e: React.SyntheticEvent<unknown>,
-    newLanguage: OptionType<string>
-  ) => void;
+  handleLanguageChange: (newLanguage: SUPPORTED_LANGUAGES) => void;
   handleNavigationItemClick: (pathname: string) => void;
   handleTitleClick: () => void;
 };
@@ -108,12 +105,8 @@ const useHeader = (): ExtendedComponentProps => {
     [items.default, items.newAhjo, isNewAhjoMode]
   );
 
-  const handleLanguageChange = (
-    e: React.SyntheticEvent<unknown>,
-    newLanguage: OptionType<string>
-  ): void => {
-    e.preventDefault();
-    void router.push('/', '/', { locale: newLanguage.value });
+  const handleLanguageChange = (newLanguage: SUPPORTED_LANGUAGES): void => {
+    void router.push('/', '/', { locale: newLanguage });
   };
 
   const handleNavigationItemClick = (pathname: string): void => {

diff --git a/frontend/benefit/shared/package.json b/frontend/benefit/shared/package.json
@@ -18,7 +18,7 @@
     "camelcase-keys": "^7.0.1",
     "date-fns": "^2.24.0",
     "formik": "^2.2.9",
-    "hds-react": "^2.17.1",
+    "hds-react": "^3.11.0",
     "ibantools": "^4.1.5",
     "next": "14.2.12",
     "next-i18next": "^13.0.3",

diff --git a/frontend/kesaseteli/employer/next-env.d.ts b/frontend/kesaseteli/employer/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/frontend/kesaseteli/employer/package.json b/frontend/kesaseteli/employer/package.json
@@ -24,8 +24,8 @@
     "@sentry/nextjs": "^7.16.0",
     "axios": "^0.27.2",
     "dotenv": "^16.0.0",
-    "hds-design-tokens": "^2.17.1",
-    "hds-react": "^2.17.1",
+    "hds-design-tokens": "^3.11.0",
+    "hds-react": "^3.11.0",
     "ibantools": "^4.1.5",
     "lodash": "^4.17.21",
     "next": "14.2.12",

diff --git a/frontend/kesaseteli/employer/public/locales/en/common.json b/frontend/kesaseteli/employer/public/locales/en/common.json
@@ -156,7 +156,8 @@
     "accessibilityStatement": "Accessibility statement",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/en/administration/information/information/accessibility",
     "information": "Information on the service",
-    "informationLink": "https://kesaseteli.fi/en/"
+    "informationLink": "https://kesaseteli.fi/en/",
+    "backToTop": "Back to top"
   },
   "languages": {
     "fi": "Suomeksi",

diff --git a/frontend/kesaseteli/employer/public/locales/fi/common.json b/frontend/kesaseteli/employer/public/locales/fi/common.json
@@ -156,7 +156,8 @@
     "accessibilityStatement": "Saavutettavuusseloste",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/fi/kaupunki-ja-hallinto/tietoa-helsingista/tietoa-hel-fista/saavutettavuus/saavutettavuusselosteet",
     "information": "Tietoa palvelusta",
-    "informationLink": "https://kesaseteli.fi/"
+    "informationLink": "https://kesaseteli.fi/",
+    "backToTop": "Takaisin ylös"
   },
   "languages": {
     "fi": "Suomeksi",

diff --git a/frontend/kesaseteli/employer/public/locales/sv/common.json b/frontend/kesaseteli/employer/public/locales/sv/common.json
@@ -156,7 +156,8 @@
     "accessibilityStatement": "Tillgänglighetsutlåtande",
     "accessibilityStatementLink": "https://www.hel.fi/helsinki/sv/stad-och-forvaltning/information/information/tillganglighet",
     "information": "Information om servicen",
-    "informationLink": "https://kesaseteli.fi/sv/"
+    "informationLink": "https://kesaseteli.fi/sv/",
+    "backToTop": "Tillbaka till toppen"
   },
   "languages": {
     "fi": "Suomeksi",

diff --git a/frontend/kesaseteli/employer/src/components/footer/Footer.tsx b/frontend/kesaseteli/employer/src/components/footer/Footer.tsx
@@ -1,4 +1,4 @@
-import { Footer } from 'hds-react';
+import { Footer, Logo, logoFiDark } from 'hds-react';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 
@@ -12,15 +12,19 @@ const FooterSection: React.FC = () => {
         <Footer.Base
           copyrightHolder={t('common:footer.copyrightText')}
           copyrightText={t('common:footer.allRightsReservedText')}
+          backToTopLabel={t('common:footer.backToTop')}
+          logo={
+            <Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />
+          }
         >
-          <Footer.Item
+          <Footer.Link
             as="a"
             rel="noopener noreferrer"
             target="_blank"
             href={t('common:footer.informationLink')}
             label={t('common:footer.information')}
           />
-          <Footer.Item
+          <Footer.Link
             as="a"
             rel="noopener noreferrer"
             target="_blank"

diff --git a/frontend/kesaseteli/employer/src/components/header/Header.tsx b/frontend/kesaseteli/employer/src/components/header/Header.tsx
@@ -23,11 +23,7 @@ const Header: React.FC = () => {
   );
 
   const handleLanguageChange = React.useCallback(
-    (
-      e: React.SyntheticEvent<unknown>,
-      { value: lang }: OptionType<string>
-    ): void => {
-      e.preventDefault();
+    (lang: string): void => {
       void router.push(asPath, asPath, {
         locale: lang,
       });

diff --git a/frontend/kesaseteli/employer/src/components/header/__tests__/Header.test.tsx b/frontend/kesaseteli/employer/src/components/header/__tests__/Header.test.tsx
@@ -13,6 +13,9 @@ import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from 'shared/i18n/i18n';
 
 const fakeObjectFactory = new FakeObjectFactory();
 
+// Languages need to start with something else than 'fi' to avoid the default language
+const REVERSED_LANGUAGES = [...SUPPORTED_LANGUAGES].reverse();
+
 describe('frontend/kesaseteli/employer/src/components/header/Header.tsx', () => {
   it('Redirects to backend when clicked login button', async () => {
     expectUnauthorizedReply();
@@ -51,8 +54,8 @@ describe('frontend/kesaseteli/employer/src/components/header/Header.tsx', () =>
     const spyRouterPush = jest.fn();
     renderComponent(<Header />, { push: spyRouterPush });
     await headerApi.expectations.userIsLoggedOut();
-    for (const lang of SUPPORTED_LANGUAGES) {
-      await headerApi.actions.changeLanguage('fi', lang);
+    for (const lang of REVERSED_LANGUAGES) {
+      await headerApi.actions.changeLanguage(lang);
       await waitFor(() =>
         expect(spyRouterPush).toHaveBeenCalledWith(undefined, undefined, {
           locale: String(lang),

diff --git a/frontend/kesaseteli/handler/next-env.d.ts b/frontend/kesaseteli/handler/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/frontend/kesaseteli/handler/package.json b/frontend/kesaseteli/handler/package.json
@@ -25,8 +25,8 @@
     "axios": "^0.27.2",
     "dotenv": "^16.0.0",
     "finnish-ssn": "^2.1.2",
-    "hds-design-tokens": "^2.17.1",
-    "hds-react": "^2.17.1",
+    "hds-design-tokens": "^3.11.0",
+    "hds-react": "^3.11.0",
     "lodash": "^4.17.21",
     "next": "14.2.12",
     "next-compose-plugins": "^2.2.1",