Merge pull request #6544 from uktrade/fix/footer

Allow overriding links in the Footer component
uktrade · Feb 29, 2024 · 8464c63 · 8464c63
2 parents 36fe440 + 0d3f0aa
commit 8464c63
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 52 deletions.
diff --git a/src/client/components/Footer/__stories__/Footer.stories.jsx b/src/client/components/Footer/__stories__/Footer.stories.jsx
@@ -7,3 +7,12 @@ export default {
   title: 'Footer',
 }
 export const Footer = () => <Component />
+export const CustomLinks = () => (
+  <Component
+    links={{
+      Foo: '/foo',
+      Bar: '/bar',
+      Baz: '/baz',
+    }}
+  />
+)
diff --git a/src/client/components/Footer/index.jsx b/src/client/components/Footer/index.jsx
@@ -108,64 +108,37 @@ const Container = styled(InnerContainer)`
   flex-wrap: wrap;
 `
 
+export const LINKS = {
+  'Request Support': urls.support(),
+  'Help Centre': urls.external.helpCentre.dhHomepage(),
+  'Privacy Notice': urls.external.helpCentre.privacyNotice(),
+  Cookies: urls.external.helpCentre.cookies(),
+  'Accessibility Statement': urls.external.helpCentre.accessibilityStatement(),
+}
+
 /**
  * The Footer displayed in all pages across the Data Hub site.
+ * @param {Object} props - Accepts all the attributes of `<footer/>` element
+ * which wraps this component.
+ * @param {Record<string, string>} [props.links = typeof LINKS] - bla
  */
-export default function Footer() {
+export default function Footer({ links = LINKS, ...props }) {
   return (
-    <StyledFooter>
+    <StyledFooter {...props}>
       <Container>
         <StyleList>
-          <li>
-            <FooterLink
-              href={urls.support()}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Request Support (opens in new tab)"
-            >
-              Request Support
-            </FooterLink>
-          </li>
-          <li>
-            <FooterLink
-              href={urls.external.helpCentre.dhHomepage()}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Help Centre (opens in new tab)"
-            >
-              Help Centre
-            </FooterLink>
-          </li>
-          <li>
-            <FooterLink
-              href={urls.external.helpCentre.privacyNotice()}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Privacy Notice (opens in new tab)"
-            >
-              Privacy Notice
-            </FooterLink>
-          </li>
-          <li>
-            <FooterLink
-              href={urls.external.helpCentre.cookies()}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Cookies (opens in new tab)"
-            >
-              Cookies
-            </FooterLink>
-          </li>
-          <li>
-            <FooterLink
-              href={urls.external.helpCentre.accessibilityStatement()}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Accessibility Statement (opens in new tab)"
-            >
-              Accessibility Statement
-            </FooterLink>
-          </li>
+          {Object.entries(links).map(([label, href]) => (
+            <li key={label}>
+              <FooterLink
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`${label} (opens in new tab)`}
+              >
+                {label}
+              </FooterLink>
+            </li>
+          ))}
         </StyleList>
         <CopyrightLink
           href={urls.external.copyright}