feat: footer add Helsinki profile support information HP-2459

City-of-Helsinki · Jun 7, 2024 · 04a1954 · 04a1954
1 parent e6dc4b6
commit 04a1954
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 15 deletions.
diff --git a/src/common/footer/Footer.module.css b/src/common/footer/Footer.module.css
@@ -0,0 +1,26 @@
+.utility-group a {
+  text-decoration: underline;
+}
+
+.utility-group-heading {
+  margin: 0;
+}
+
+.utility-group-heading:focus {
+  outline: none !important;
+}
+
+.utility-group-heading:hover:not(:focus) {
+  cursor: inherit;
+  text-decoration: none !important;
+}
+
+.contacts-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.link-with-icon svg {
+  margin-right: var(--spacing-3-xs);
+}
diff --git a/src/common/footer/Footer.tsx b/src/common/footer/Footer.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Footer as HDSFooter, Logo, logoFiDark, logoSvDark } from 'hds-react';
+import {
+  Footer as HDSFooter,
+  IconPhone,
+  Logo,
+  logoFiDark,
+  logoSvDark,
+} from 'hds-react';
 import { Link } from 'react-router-dom';
 
 import getLanguageCode from '../helpers/getLanguageCode';
 import config from '../../config';
+import styles from './Footer.module.css';
 
 const Footer = () => {
   const { t, i18n } = useTranslation();
@@ -33,20 +40,57 @@ const Footer = () => {
       title={t('appName')}
     >
       <HDSFooter.Utilities>
-        <HDSFooter.Link
-          aria-label={createAriaLabel(t('footer.contactUs'))}
-          external
-          href={t('footer.contactUsLink')}
-          label={t('footer.contactUs')}
-          target="_blank"
-        />
-        <HDSFooter.Link
-          aria-label={createAriaLabel(t('footer.feedback'))}
-          external
-          href={t('footer.feedbackLink')}
-          label={t('footer.feedback')}
-          target="_blank"
-        />
+        <HDSFooter.UtilityGroup
+          headingLink={
+            <HDSFooter.GroupHeading
+              label={t('footer.needHelp')}
+              className={styles['utility-group-heading']}
+              as="h3"
+            />
+          }
+          className={styles['utility-group']}
+        >
+          <HDSFooter.Link href={'/guide'} label={t('footer.userGuide')} />
+          <div>
+            <span>{t('footer.helsinkiProfileSupport')}</span>
+            <ul className={styles['contacts-list']}>
+              <li>{t('footer.openingHours')}</li>
+              <li>
+                <HDSFooter.Link
+                  className={styles['link-with-icon']}
+                  href={'tel:0931088800'}
+                  label={'09 310 88800'}
+                  icon={<IconPhone />}
+                />
+              </li>
+            </ul>
+          </div>
+        </HDSFooter.UtilityGroup>
+        <HDSFooter.UtilityGroup
+          headingLink={
+            <HDSFooter.GroupHeading
+              label={t('footer.otherContactInformation')}
+              className={styles['utility-group-heading']}
+              as="h3"
+            />
+          }
+          className={styles['utility-group']}
+        >
+          <HDSFooter.Link
+            aria-label={createAriaLabel(t('footer.contactUs'))}
+            external
+            href={t('footer.contactUsLink')}
+            label={t('footer.contactUs')}
+            target="_blank"
+          />
+          <HDSFooter.Link
+            aria-label={createAriaLabel(t('footer.feedback'))}
+            external
+            href={t('footer.feedbackLink')}
+            label={t('footer.feedback')}
+            target="_blank"
+          />
+        </HDSFooter.UtilityGroup>
       </HDSFooter.Utilities>
       <HDSFooter.Base
         copyrightHolder={t('cityOfHelsinki')}

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -75,6 +75,10 @@
     "copyright": "Copyright {{year}}",
     "feedback": "Give feedback",
     "feedbackLink": "https://palautteet.hel.fi/en/",
+    "helsinkiProfileSupport": "Helsinki profile support:",
+    "needHelp": "Need help?",
+    "openingHours": "Mon-Fri 8-18",
+    "otherContactInformation": "Other contact information",
     "privacy": "Privacy policy",
     "reserveRights": "All rights reserved",
     "contactUs": "Contact us",

diff --git a/src/i18n/fi.json b/src/i18n/fi.json
@@ -75,6 +75,10 @@
     "copyright": "Tekijänoikeus {{year}}",
     "feedback": "Anna palautetta",
     "feedbackLink": "https://palautteet.hel.fi/fi/",
+    "helsinkiProfileSupport": "Helsinki-profiilin tuki:",
+    "needHelp": "Tarvitsetko apua?",
+    "openingHours": "ma-pe klo 8-18",
+    "otherContactInformation": "Muut yhteystiedot",
     "privacy": "Tietosuojaseloste",
     "reserveRights": "Kaikki oikeudet pidätetään",
     "contactUs": "Ota yhteyttä",

diff --git a/src/i18n/sv.json b/src/i18n/sv.json
@@ -75,6 +75,10 @@
     "copyright": "Upphovsrätt {{year}}",
     "feedback": "Ge feedback",
     "feedbackLink": "https://palautteet.hel.fi/sv/",
+    "helsinkiProfileSupport": "Helsingfors profilens stöd:",
+    "needHelp": "Behöver du hjälp?",
+    "openingHours": "mån-fre 8-18",
+    "otherContactInformation": "Andra kontaktuppgifter",
     "privacy": "Integritetspolicy",
     "reserveRights": "Alla rättigheter förbehållna",
     "contactUs": "Ta kontakt",