feat: create footer component

frameless · Aug 16, 2023 · 7e8fe74 · 7e8fe74
1 parent 0f0b0ea
commit 7e8fe74
Show file tree

Hide file tree

Showing 6 changed files with 418 additions and 4 deletions.
diff --git a/apps/frontend/src/app/[locale]/layout.tsx b/apps/frontend/src/app/[locale]/layout.tsx
@@ -1,13 +1,14 @@
-import { Article, Page, PageContent, PageFooter, PageHeader } from '@utrecht/component-library-react';
 import classnames from 'classnames';
 import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
+import { Article, Page, PageContent, PageHeader } from '@/components';
 import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
 import '@utrecht/design-tokens/dist/index.css';
+import { Footer } from '@/components/Footer';
 import { Logo } from '@/components/Logo';
 import { SearchBar } from '@/components/SearchBar';
 import { getLiveSuggestions, onSearchSubmitAction } from './search/actions';
@@ -57,6 +58,91 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
 
 const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
   const { t } = await useTranslation(locale, 'layout');
+
+  const footerData = {
+    title: t('footer.title'),
+    list: [
+      {
+        title: t('footer.list.0.title'),
+        items: [
+          {
+            title: t('footer.list.0.items.0.title'),
+            link: 'tel:14030',
+            external: false,
+          },
+          {
+            title: t('footer.list.0.items.1.title'),
+            link: 'https://utrecht.nl/contact/verkort-telefoonnummer-gemeente/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 6,
+      },
+      {
+        title: t('footer.list.1.title'),
+        items: [],
+        paragraph: 'Stadskantoor\nStadsplateau 1\n3521AZ Utrecht',
+        column: 6,
+      },
+      {
+        title: null,
+        items: [
+          {
+            title: t('footer.list.2.items.0.title'),
+            link: 'https://utrecht.nl/contact/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 12,
+      },
+      {
+        title: null,
+        items: [
+          {
+            title: t('footer.list.3.items.0.title'),
+            link: 'https://utrecht.nl/over-deze-website/',
+            external: true,
+          },
+        ],
+        paragraph: null,
+        column: 12,
+      },
+    ],
+    social_media: [
+      {
+        icon: 'facebook',
+        link: 'https://www.facebook.com/GemeenteUtrecht',
+        external: true,
+        title: t('footer.social_media.0.title'),
+      },
+      {
+        icon: 'instagram',
+        link: 'https://www.instagram.com/GemeenteUtrecht',
+        external: true,
+        title: t('footer.social_media.1.title'),
+      },
+      {
+        icon: 'linkedin',
+        link: 'https://nl.linkedin.com/company/gemeente-utrecht',
+        external: true,
+        title: t('footer.social_media.2.title'),
+      },
+      {
+        icon: 'twitter',
+        link: 'https://twitter.com/gemeenteutrecht',
+        external: true,
+        title: t('footer.social_media.3.title'),
+      },
+      {
+        icon: 'whatsapp',
+        link: 'https://api.whatsapp.com/send?phone=31624927665',
+        external: false,
+        title: t('footer.social_media.4.title'),
+      },
+    ],
+  };
   return (
     <html lang={locale} dir={dir(locale)}>
       <body
@@ -116,7 +202,7 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                 <Article>{children}</Article>
               </Main>
             </PageContent>
-            <PageFooter />
+            <Footer data={footerData} />
           </Page>
         </QueryClientProvider>
       </body>

diff --git a/apps/frontend/src/app/i18n/locales/en/layout.json b/apps/frontend/src/app/i18n/locales/en/layout.json
@@ -4,5 +4,89 @@
     "input-ariaLabel": "search terms",
     "suggestions-title": "Do you mean:",
     "hits-title": "Go straight to:"
+  },
+  "footer": {
+    "title": "Utrecht Municipality",
+    "list": [
+      {
+        "title": "Phone",
+        "items": [
+          {
+            "title": "14 030",
+            "link": "tel:14030",
+            "external": false
+          },
+          {
+            "title": "How does 14030 work?",
+            "link": "https://utrecht.nl/contact/verkort-telefoonnummer-gemeente/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 6
+      },
+      {
+        "title": "Address",
+        "items": [],
+        "paragraph": "Stadskantoor\nStadsplateau 1\n3521AZ Utrecht",
+        "column": 6
+      },
+      {
+        "title": null,
+        "items": [
+          {
+            "title": "More contact information",
+            "link": "https://utrecht.nl/contact/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 12
+      },
+      {
+        "title": null,
+        "items": [
+          {
+            "title": "About this website",
+            "link": "https://utrecht.nl/over-deze-website/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 12
+      }
+    ],
+    "social_media": [
+      {
+        "icon": "facebook",
+        "link": "https://www.facebook.com/GemeenteUtrecht",
+        "external": true,
+        "title": "Follow us on Facebook"
+      },
+      {
+        "icon": "instagram",
+        "link": "https://www.instagram.com/GemeenteUtrecht",
+        "external": true,
+        "title": "Follow us on Instagram"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://nl.linkedin.com/company/gemeente-utrecht",
+        "external": true,
+        "title": "Follow us on LinkedIn"
+      },
+      {
+        "icon": "twitter",
+        "link": "https://twitter.com/gemeenteutrecht",
+        "external": true,
+        "title": "Follow us on Twitter"
+      },
+      {
+        "icon": "whatsapp",
+        "link": "https://api.whatsapp.com/send?phone=31624927665",
+        "external": false,
+        "title": "Contact us via WhatsApp"
+      }
+    ]
   }
 }
diff --git a/apps/frontend/src/app/i18n/locales/nl/layout.json b/apps/frontend/src/app/i18n/locales/nl/layout.json
@@ -4,5 +4,89 @@
     "input-ariaLabel": "zoektermen",
     "suggestions-title": "Bedoelt u:",
     "hits-title": "Meteen naar:"
+  },
+  "footer": {
+    "title": "Gemeente Utrecht",
+    "list": [
+      {
+        "title": "Telefoon",
+        "items": [
+          {
+            "title": "14 030",
+            "link": "tel:14030",
+            "external": false
+          },
+          {
+            "title": "Hoe werkt 14030?",
+            "link": "https://utrecht.nl/contact/verkort-telefoonnummer-gemeente/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 6
+      },
+      {
+        "title": "Adres",
+        "items": [],
+        "paragraph": "Stadskantoor\nStadsplateau 1\n3521AZ Utrecht",
+        "column": 6
+      },
+      {
+        "title": null,
+        "items": [
+          {
+            "title": "Meer contactinformatie",
+            "link": "https://utrecht.nl/contact/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 12
+      },
+      {
+        "title": null,
+        "items": [
+          {
+            "title": "Over deze website",
+            "link": "https://utrecht.nl/over-deze-website/",
+            "external": true
+          }
+        ],
+        "paragraph": null,
+        "column": 12
+      }
+    ],
+    "social_media": [
+      {
+        "icon": "facebook",
+        "link": "https://www.facebook.com/GemeenteUtrecht",
+        "external": true,
+        "title": "Volg ons op Facebook"
+      },
+      {
+        "icon": "instagram",
+        "link": "https://www.instagram.com/GemeenteUtrecht",
+        "external": true,
+        "title": "Volg ons op Instagram"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://nl.linkedin.com/company/gemeente-utrecht",
+        "external": true,
+        "title": "Volg ons op LinkedIn"
+      },
+      {
+        "icon": "twitter",
+        "link": "https://twitter.com/gemeenteutrecht",
+        "external": true,
+        "title": "Volg ons op Twitter"
+      },
+      {
+        "icon": "whatsapp",
+        "link": "https://api.whatsapp.com/send?phone=31624927665",
+        "external": false,
+        "title": "Neem contact op via WhatsApp"
+      }
+    ]
   }
 }
diff --git a/apps/frontend/src/components/Footer/index.module.scss b/apps/frontend/src/components/Footer/index.module.scss
@@ -0,0 +1,56 @@
+.utrecht-footer__layout-wrapper {
+  --utrecht-footer-list-item-6-width: 100%;
+  --utrecht-footer-list-item-12-width: 100%;
+  --utrecht-footer-social-media-width: 100%;
+  --utrecht-footer-social-media-justify-content: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: baseline;
+  box-sizing: border-box;
+}
+
+.utrecht-footer__list-item--6 {
+  box-sizing: border-box;
+  display: block;
+  flex: 0 0 auto;
+  width: var(--utrecht-footer-list-item-6-width);
+}
+
+.utrecht-footer__list-item--12 {
+  box-sizing: border-box;
+  display: block;
+  flex: 0 0 auto;
+  width: var(--utrecht-footer-list-item-12-width);
+}
+
+.utrecht-footer__social-media {
+  display: flex;
+  flex: 0 0 auto;
+  width: var(--utrecht-footer-social-media-width);
+  justify-content: var(--utrecht-footer-social-media-justify-content);
+}
+
+.utrecht-footer__content {
+  display: flex;
+  flex: 0 0 auto;
+  width: 70%;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.utrecht-footer__link {
+  margin-block-end: 10px;
+}
+
+.utrecht-footer__list-title {
+  --utrecht-heading-3-margin-block-end: 14px;
+}
+
+@media (min-width: 768px) {
+  .utrecht-footer__layout-wrapper {
+    --utrecht-footer-list-item-6-width: 50%;
+    --utrecht-footer-social-media-width: 30%;
+    --utrecht-footer-social-media-justify-content: flex-end;
+  }
+}