HP-2047 New HDS into use

.gitignore

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

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",
@@ -37,17 +36,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.8.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.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.module.css

@@ -21,11 +21,14 @@ button.button {
 }
 
 .content h1 {
-  margin-top: var(--common-top-spacing);
+  margin-top: var(--spacing-layout-m);
+  margin-bottom: 0;
+  line-height: var(--lineheight-s);;
 }
 
 .ingress {
+  margin-top: var(--spacing-layout-l);
+  margin-bottom: var(--spacing-layout-m);
   line-height: var(--lineheight-l);
   font-size: var(--fontsize-body-l);
-  font-weight: bold;
 }

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

@@ -1,69 +1,85 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Footer as HDSFooter, IconLinkExternal } from 'hds-react';
+import { Footer as HDSFooter, Logo, logoFiDark, logoSvDark } from 'hds-react';
 import { Link } from 'react-router-dom';
 
-import styles from './Footer.module.css';
 import getLanguageCode from '../helpers/getLanguageCode';
 import config from '../../config';
 
-function Footer(): React.ReactElement {
+const Footer = () => {
   const { t, i18n } = useTranslation();
   const lang = getLanguageCode(i18n.languages[0]);
-  const logoLanguage = lang === 'sv' ? 'sv' : 'fi';
+  const logoSrcFromLanguage = lang === 'sv' ? logoSvDark : logoFiDark;
 
   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')} logoLanguage={logoLanguage}>
-      <HDSFooter.Utilities backToTopLabel={t('footer.backToTop')}>
-        <HDSFooter.Item
+    <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'))}
+          external
           href={t('footer.contactUsLink')}
           label={t('footer.contactUs')}
-          aria-label={createAriaLabel(t('footer.contactUs'))}
-          className={styles['link-with-icon']}
           target="_blank"
-        >
-          <IconLinkExternal aria-hidden size={'s'} />
-        </HDSFooter.Item>
-        <HDSFooter.Item
+        />
+        <HDSFooter.Link
+          aria-label={createAriaLabel(t('footer.feedback'))}
+          external
           href={t('footer.feedbackLink')}
           label={t('footer.feedback')}
-          aria-label={createAriaLabel(t('footer.feedback'))}
-          className={styles['link-with-icon']}
           target="_blank"
-        >
-          <IconLinkExternal aria-hidden size={'s'} />
-        </HDSFooter.Item>
+        />
       </HDSFooter.Utilities>
       <HDSFooter.Base
         copyrightHolder={t('cityOfHelsinki')}
         copyrightText={t('footer.reserveRights')}
+        backToTopLabel={t('footer.backToTop')}
+        logo={
+          <Logo
+            src={logoSrcFromLanguage}
+            size="medium"
+            alt="Helsingin kaupunki"
+          />
+        }
+        logoHref="https://hel.fi"
       >
-        <HDSFooter.Item
+        <HDSFooter.Link
+          aria-label={createAriaLabel(t('footer.privacy'))}
+          external
           href={t('profileForm.termsFileDescriptionLink')}
           label={t('footer.privacy')}
-          aria-label={createAriaLabel(t('footer.privacy'))}
-          className={styles['base-link-with-icon']}
           target="_blank"
-        >
-          <IconLinkExternal aria-hidden size={'xs'} />
-        </HDSFooter.Item>
-        <HDSFooter.Item as={Link} to="/accessibility">
-          {t('footer.accessibility')}
-        </HDSFooter.Item>
-        <HDSFooter.Item as={Link} to={config.cookiePagePath}>
-          {t('cookies.pageName')}
-        </HDSFooter.Item>
+        />
+        <HDSFooter.Link
+          as={Link}
+          to="/accessibility"
+          label={t('footer.accessibility')}
+        />
+        <HDSFooter.Link
+          as={Link}
+          to={config.cookiePagePath}
+          label={t('cookies.pageName')}
+        />
       </HDSFooter.Base>
     </HDSFooter>
   );
-}
+};
 
 export default Footer;