GREG-41: Adding a footer component

frontend/public/locales/en/common.json

@@ -5,5 +5,7 @@
   },
   "language": {
     "change": "Change language to {{lang}}"
-  }
+  },
+  "termsHeader": "Terms",
+  "staging": "Staging"
 }

frontend/public/locales/en/footer.json

 {
-  "footerInfo": "This is a footer namespace value"
+  "footerInfo": "This is a footer namespace value",
+  "contactSectionHeader": "Need help?",
+  "contactHelp": "Contact",
+  "contactHelpMail": "Contact",
+  "responsibleOrganizationHeader": "Maintained by"
 }

frontend/public/locales/nb/common.json

@@ -5,5 +5,7 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "termsHeader": "Vilkår",
+  "staging": "Staging"
 }

frontend/public/locales/nb/footer.json

 {
-  "footerInfo": "Verdi i namespace footer"
+  "footerInfo": "Verdi i namespace footer",
+  "contactSectionHeader": "Trenger du hjelp?",
+  "contactHelp": "Kontakt",
+  "contactHelpMail": "Kontaktveileder",
+  "responsibleOrganizationHeader": "Ansvarlig for tjenesten"
 }

frontend/public/locales/nn/common.json

@@ -5,5 +5,7 @@
   },
   "language": {
     "change": "Bytt språk til {{lang}}"
-  }
+  },
+  "termsHeader": "Vilkår",
+  "staging": "Staging"
 }

frontend/public/locales/nn/footer.json

 {
-  "footerInfo": "Verdi i namespace footer"
+  "footerInfo": "Verdi i namespace footer",
+  "contactSectionHeader": "Trenger du hjelp?",
+  "contactHelp": "Kontakt",
+  "contactHelpMail": "Kontaktrettleiar",
+  "responsibleOrganizationHeader": "Ansvarleg for tenesta"
 }

frontend/src/Footer.tsx

+import React from 'react';
+import {useTranslation} from 'react-i18next';
+
+import {
+    appStagingWarning,
+    appTechnicalSupportLink,
+    appTechnicalSupportMail,
+} from 'appConfig';
+import Link from 'components/link';
+import styled from "styled-components/macro";
+
+
+const FooterWrapper = styled.footer`
+  ${({theme}) => `
+    background: ${theme.footerBackgroundColor};
+  `
+  }
+  padding: 4rem 0;
+`
+
+
+const FooterInternal = styled.footer`
+  height: 'fit-content',
+  ${({theme}) => `
+          max-width: ${theme.appMaxWidth};
+          padding: 0rem ${theme.horizontalPadding}
+  `
+  }
+  margin: 0 auto;
+`
+
+const FooterSection = styled.section`
+
+  :not(:last-child) {
+    margin-bottom: 3rem;
+  }
+
+  header {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .content {
+    font-size: 1.4rem;
+    line-height: 2rem;
+
+    :not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+  }
+`
+
+const ContentContainer = styled.div`
+  width: fit-content;
+  margin: 0 auto;
+
+  ${({theme}) => `
+    color: ${theme.footerTextColor};
+    ${theme.breakpoints.mdQuery} {
+        display: flex;
+        width: initial;
+        flex-wrap: nowrap;
+        justify-content: ${theme.footerJustifyContent};
+        padding-right: 5rem;
+        margin: 0;
+     }
+`}
+`
+
+const Footer: React.FunctionComponent = () => {
+    const {i18n, t} = useTranslation(['common', 'footer']);
+
+    return (
+        <>
+            <FooterWrapper>
+                <FooterInternal>
+                    <ContentContainer>
+                        <FooterSection>
+                            <header>{t('footer:contactSectionHeader')}</header>
+                            <div className="content">
+                                <div>
+                                    {appTechnicalSupportLink ? (
+                                        <Link
+                                            external
+                                            to={appTechnicalSupportLink}
+                                            inheritColor
+                                            underline
+                                        >
+                                            {t('footer:contactHelp')}
+                                        </Link>
+                                    ) : (
+                                        <Link
+                                            mail
+                                            to={appTechnicalSupportMail}
+                                            inheritColor
+                                            underline
+                                        >
+                                            {t('footer:contactHelpMail')}
+                                        </Link>
+                                    )}
+                                </div>
+                            </div>
+                        </FooterSection>
+
+                        <FooterSection>
+                            <header>{t('footer:responsibleOrganizationHeader')}</header>
+                        </FooterSection>
+                    </ContentContainer>
+                </FooterInternal>
+            </FooterWrapper>
+            {appStagingWarning && (
+                <div className="alert">
+                    {t('staging')}
+                </div>
+            )}
+        </>
+    )
+};
+
+export default Footer;