testing

.github/workflows/CI.yml

@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: '14.19.1'
+          node-version: '16.19.1'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

package.json

@@ -26,8 +26,14 @@
     "@types/validator": "^13.1.4",
     "@types/yup": "^0.26.24",
     "ahooks": "^3.3.10",
+    "assert": "npm:assert-browserify",
+    "assert-browserify": "^2.0.0",
     "await-to-js": "^3.0.0",
+    "buffer": "npm:buffer-browserify",
+    "buffer-browserify": "^0.2.5",
     "classnames": "^2.2.6",
+    "crypto": "npm:crypto-browserify",
+    "crypto-browserify": "^3.12.0",
     "date-fns": "^2.9.0",
     "dompurify": "^2.2.9",
     "enzyme": "^3.11.0",
@@ -45,9 +51,9 @@
     "formik": "^2.0.4",
     "graphql": "^15.2.0",
     "graphql.macro": "^1.4.2",
-    "hds-core": "2.10.0",
-    "hds-design-tokens": "2.10.0",
-    "hds-react": "2.10.0",
+    "hds-core": "^3.2.0",
+    "hds-design-tokens": "^3.2.0",
+    "hds-react": "^3.2.0",
     "history": "^4.9.0",
     "http-status-typed": "^1.0.0",
     "i18n-iso-countries": "^7.0.0",
@@ -66,6 +72,8 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
+    "stream": "npm:stream-browserify",
+    "stream-browserify": "^3.0.0",
     "typescript": "4.5.5",
     "uuid": "^8.1.0",
     "validator": "^13.7.0",

src/common/header/Header.tsx

@@ -1,15 +1,18 @@
 import React, { MouseEvent, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
-// import { Navigation } from 'hds-react';
+import {
+  Header as HDSHeader,
+  LanguageOption,
+  Logo,
+  logoFi,
+  logoSv,
+} from 'hds-react';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 
 import { MAIN_CONTENT_ID } from '../constants';
-import LanguageSwitcher from '../../i18n/components/languageSwitcher/LanguageSwitcher';
-import UserDropdown from './userDropdown/UserDropdown';
-import styles from './Header.module.css';
 import { ProfileContext } from '../../profile/context/ProfileContext';
-import getLanguageCode from '../helpers/getLanguageCode';
+import UserDropdown from './userDropdown/UserDropdown';
 
 function Header(): React.ReactElement {
   const { t, i18n } = useTranslation();
@@ -25,49 +28,86 @@ function Header(): React.ReactElement {
   const isProfilePagePath = profilePagePaths.includes(currentPath);
 
   const onClick = (path: string, e?: MouseEvent) => {
-    e && e.preventDefault();
+    e?.preventDefault();
     history.push(path);
     trackEvent({ category: 'nav', action: `${path} click` });
   };
 
-  const lang = getLanguageCode(i18n.languages[0]);
-  const logoLanguage = lang === 'sv' ? 'sv' : 'fi';
+  const availableLanguages = i18n.options.resources
+    ? Object.keys(i18n.options.resources)
+    : [];
+
+  const languageLabel = (langCode: string): string => {
+    switch (langCode) {
+      case 'fi':
+        return 'Suomeksi';
+      case 'sv':
+        return 'På svenska';
+      case 'en':
+        return 'In English';
+      default:
+        return 'Suomeksi';
+    }
+  };
+
+  const languageOptions: LanguageOption[] = availableLanguages.map(
+    i18nLang => ({
+      value: i18nLang,
+      label: languageLabel(i18nLang),
+      isPrimary: false,
+    })
+  );
+
+  const lang = i18n.resolvedLanguage;
+  const logoSrcFromLanguage = lang === 'sv' ? logoSv : logoFi;
+
+  const changeLanguageAction = (langCode: string) => {
+    if (langCode !== lang) {
+      trackEvent({
+        category: 'action',
+        action: `Language selected ${langCode}`,
+      });
+      i18n.changeLanguage(langCode);
+    }
+  };
 
   return (
-    <span>header</span>
-    // <Navigation
-    //   skipTo={`#${MAIN_CONTENT_ID}`}
-    //   skipToContentLabel={t('skipToContent')}
-    //   menuToggleAriaLabel={t('nav.menuButtonLabel')}
-    //   title={t('appName')}
-    //   titleAriaLabel={t('nav.titleAriaLabel')}
-    //   className={styles['z-index-fix']}
-    //   logoLanguage={logoLanguage}
-    //   onTitleClick={() => onClick(myProfilePath)}
-    // >
-    //   {!!getProfile() && isProfilePagePath && (
-    //     <Navigation.Row>
-    //       <Navigation.Item
-    //         label={t('nav.information')}
-    //         href={myProfilePath}
-    //         variant="secondary"
-    //         onClick={(e: MouseEvent) => onClick(myProfilePath, e)}
-    //         active={currentPath === myProfilePath}
-    //       />
-    //       <Navigation.Item
-    //         label={t('nav.services')}
-    //         href={connectedServicesPath}
-    //         variant="secondary"
-    //         onClick={(e: MouseEvent) => onClick(connectedServicesPath, e)}
-    //         active={currentPath === connectedServicesPath}
-    //       />
-    //     </Navigation.Row>
-    //   )}
-    //   <Navigation.Actions>
-    //     <UserDropdown />
-    //     <LanguageSwitcher />
-    //   </Navigation.Actions>
-    // </Navigation>
+    <HDSHeader
+      onDidChangeLanguage={changeLanguageAction}
+      languages={languageOptions}
+      defaultLanguage={lang}
+    >
+      <HDSHeader.SkipLink
+        skipTo={`#${MAIN_CONTENT_ID}`}
+        label={t('skipToContent')}
+      />
+      <HDSHeader.ActionBar
+        title={t('appName')}
+        titleAriaLabel={t('nav.titleAriaLabel')}
+        titleHref={myProfilePath}
+        logo={<Logo src={logoSrcFromLanguage} alt={t('helsinkiLogo')} />}
+        frontPageLabel={t('nav.goToHomePage')}
+      >
+        <HDSHeader.SimpleLanguageOptions languages={languageOptions} />
+        <UserDropdown />
+      </HDSHeader.ActionBar>
+      {!!getProfile() && isProfilePagePath && (
+        <HDSHeader.NavigationMenu>
+          <HDSHeader.Link
+            active={currentPath === myProfilePath}
+            href={myProfilePath}
+            label={t('nav.information')}
+            onClick={(e: MouseEvent) => onClick(myProfilePath, e)}
+          />
+          <HDSHeader.Link
+            active={currentPath === connectedServicesPath}
+            href={connectedServicesPath}
+            label={t('nav.services')}
+            onClick={(e: MouseEvent) => onClick(connectedServicesPath, e)}
+          />
+        </HDSHeader.NavigationMenu>
+      )}
+    </HDSHeader>
   );
 }