(HP-2047) Update buttons, header, colors, translations and some depen…

…dencies. Add nvmrc file.

.gitignore

@@ -25,3 +25,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .eslintcache
+.idea/
+.vscode/

.nvmrc

@@ -0,0 +1 @@
+v16.20.2

package.json

@@ -10,7 +10,6 @@
     "@sentry/browser": "^6.19.7",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/dompurify": "^2.2.2",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -43,17 +42,17 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jest": "^26.1.5",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-sonarjs": "^0.13.0",
     "file-saver": "^2.0.2",
     "formik": "^2.0.4",
     "graphql": "^15.2.0",
     "graphql.macro": "^1.4.2",
-    "hds-core": "^3.2.0",
-    "hds-design-tokens": "^3.2.0",
-    "hds-react": "^3.2.0",
+    "hds-core": "^3.5.0",
+    "hds-design-tokens": "^3.5.0",
+    "hds-react": "^3.5.0",
     "history": "^4.9.0",
     "http-status-typed": "^1.0.0",
     "i18n-iso-countries": "^7.0.0",

src/auth/components/login/Login.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMatomo } from '@datapunt/matomo-tracker-react';
 import classNames from 'classnames';
+import { Button } from 'hds-react';
 
 import HelsinkiLogo from '../../../common/helsinkiLogo/HelsinkiLogo';
 import styles from './Login.module.css';
 import PageLayout from '../../../common/pageLayout/PageLayout';
 import commonContentStyles from '../../../common/cssHelpers/content.module.css';
 import authService from '../../authService';
 import FocusableH1 from '../../../common/focusableH1/FocusableH1';
-import StyledButton from '../../../common/styledButton/StyledButton';
 
 function Login(): React.ReactElement {
   const { t } = useTranslation();
@@ -27,16 +27,15 @@ function Login(): React.ReactElement {
           <HelsinkiLogo />
           <FocusableH1>{t('login.title')}</FocusableH1>
           <p className={styles.ingress}>{t('login.description')}</p>
-          <StyledButton
-            variant="primary"
-            className={styles.button}
+
+          <Button
             onClick={() => {
               trackEvent({ category: 'action', action: 'Log in' });
               authService.login();
             }}
           >
             {t('login.login')}
-          </StyledButton>
+          </Button>
         </div>
       </div>
     </PageLayout>

src/common/cssHelpers/common.module.css

@@ -16,7 +16,7 @@
 .content-box {
   padding: var(--spacing-m) var(--spacing-s);
   border: 1px solid var(--color-black-40);
-  border-left: 8px solid var(--color-gold);
+  border-left: 8px solid var(--color-bus);
   border-radius: 5px;
 }
 
@@ -26,7 +26,7 @@
 
 .bottom-border {
   border: 0;
-  border-bottom: 8px solid var(--color-gold);
+  border-bottom: 8px solid var(--color-bus);
   border-radius: 0;
 }
 

src/common/cssHelpers/form.module.css

@@ -103,7 +103,7 @@ h3.label-size {
 
 .visually-hidden {
   clip-path: polygon(0 0, 0 0, 0 0, 0 0);
-  composes: hiddenFromScreen from '~hds-core/lib/base.css';
+  composes: visually-hidden from '~hds-core/lib/base.css';
   width: 1px;
 }
 

src/common/expandingPanel/ExpandingPanel.tsx

@@ -4,13 +4,18 @@ import React, {
   useLayoutEffect,
   useRef,
 } from 'react';
-import { Card, IconAngleDown, IconAngleUp, useAccordion } from 'hds-react';
+import {
+  Button,
+  Card,
+  IconAngleDown,
+  IconAngleUp,
+  useAccordion,
+} from 'hds-react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 
 import styles from './ExpandingPanel.module.css';
 import commonStyles from '../cssHelpers/common.module.css';
-import StyledButton from '../styledButton/StyledButton';
 
 type Props = PropsWithChildren<{
   title?: string;
@@ -73,9 +78,9 @@ function ExpandingPanel({
       <div className={styles['title']}>
         <h2>{title}</h2>
         <div className={styles['right-side-information']}>
-          <StyledButton
+          <Button
             title={title}
-            variant={'transparent'}
+            variant={'supplementary'}
             iconRight={<Icon aria-hidden />}
             {...buttonProps}
             {...buttonTestId}
@@ -85,22 +90,22 @@ function ExpandingPanel({
                 {buttonText}
               </span>
             )}
-          </StyledButton>
+          </Button>
         </div>
       </div>
       <Card aria-label={title} className={styles['card']} {...contentProps}>
         {children}
       </Card>
       {isOpen && (
         <div className={styles['close-button-container']}>
-          <StyledButton
+          <Button
             title={title}
-            variant={'transparent'}
+            variant={'supplementary'}
             iconRight={<Icon aria-hidden />}
             {...buttonProps}
           >
             {t('expandingPanel.closeButtonText')}
-          </StyledButton>
+          </Button>
         </div>
       )}
     </div>

src/common/footer/Footer.tsx

@@ -12,14 +12,24 @@ const Footer = () => {
 
   const createAriaLabel = (title: string) => {
     const titleWithoutLastDot =
-      title.slice(-1) === '.' ? title.substr(0, title.length - 1) : title;
+      title.slice(-1) === '.' ? title.substring(0, title.length - 1) : title;
     return t('opensInNewWindow', {
       title: titleWithoutLastDot,
     });
   };
 
+  const whiteColor = 'var(--color-white)';
+
   return (
-    <HDSFooter theme="dark" title={t('appName')}>
+    <HDSFooter
+      theme={{
+        '--footer-background': 'var(--color-bus)',
+        '--footer-color': whiteColor,
+        '--footer-divider-color': whiteColor,
+        '--footer-focus-outline-color': whiteColor,
+      }}
+      title={t('appName')}
+    >
       <HDSFooter.Utilities>
         <HDSFooter.Link
           aria-label={createAriaLabel(t('footer.contactUs'))}

src/common/header/Header.tsx

@@ -40,13 +40,13 @@ function Header(): React.ReactElement {
   const languageLabel = (langCode: string): string => {
     switch (langCode) {
       case 'fi':
-        return 'Suomeksi';
+        return 'Suomi';
       case 'sv':
-        return 'På svenska';
+        return 'Svenska';
       case 'en':
-        return 'In English';
+        return 'English';
       default:
-        return 'Suomeksi';
+        return 'Suomi';
     }
   };
 
@@ -87,8 +87,10 @@ function Header(): React.ReactElement {
         titleHref={myProfilePath}
         logo={<Logo src={logoSrcFromLanguage} alt={t('helsinkiLogo')} />}
         frontPageLabel={t('nav.goToHomePage')}
+        onMenuClick={e => e.stopPropagation()}
       >
         <HDSHeader.SimpleLanguageOptions languages={languageOptions} />
+        <hr aria-hidden="true" />
         <UserDropdown />
       </HDSHeader.ActionBar>
       {!!getProfile() && isProfilePagePath && (

src/common/header/userDropdown/UserDropdown.tsx

@@ -56,15 +56,16 @@ const UserDropdown = () => {
       ariaLabel,
     };
   };
-  const { label, userName, onClick } = getUserDataWithActions();
+  const { label, onClick } = getUserDataWithActions();
   return (
     <HDSHeader.ActionBarItem
-      label={t('nav.menuButtonLabel')}
+      label={label}
       ariaLabel={t('nav.menuButtonLabel')}
       id="header-user-dropdown"
+      fixedRightPosition
       icon={<IconUser />}
-      closeLabel={t('notification.closeButtonText')}
-      closeIcon={<IconUser />}
+      closeLabel={t('nav.close')}
+      preventButtonResize
     >
       <HDSHeader.Link
         label={label}