From f0278f44be6b7a27569766c22ba175307a2509a5 Mon Sep 17 00:00:00 2001
From: Jake Barron <jake.barron1@nhs.net>
Date: Mon, 20 May 2024 10:19:40 +0100
Subject: [PATCH] Fix issue with the footer copyright not being rendered in the
 correct location if there are multiple link columns

---
 src/components/navigation/footer/Footer.tsx   | 14 ++++++--
 .../footer/__tests__/Footer.test.tsx          | 36 +++++++++++++++++++
 stories/Navigation/Footer.stories.tsx         |  2 +-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
index e9e82bb3..d0a47e7e 100644
--- a/src/components/navigation/footer/Footer.tsx
+++ b/src/components/navigation/footer/Footer.tsx
@@ -60,10 +60,19 @@ const Footer: Footer = ({ className, children, visuallyHiddenText = 'Support lin
   const footerCols = Children.toArray(children).filter((child) =>
     childIsOfComponentType(child, FooterList),
   );
+  const footerCopyright = Children.toArray(children).filter((child) =>
+    childIsOfComponentType(child, FooterCopyright),
+  );
 
-  let newChildren = children;
+  let newChildren;
+  const footerHasMultipleColumns = footerCols.length > 1;
 
-  if (footerCols.length === 1) {
+  if (footerHasMultipleColumns) {
+    // Remove the copyright from being rendered inside the 'nhsuk-footer' div
+    newChildren = Children.toArray(children).filter(
+      (child) => !childIsOfComponentType(child, FooterCopyright),
+    );
+  } else {
     newChildren = Children.map(children, (child) =>
       childIsOfComponentType(child, FooterList)
         ? cloneElement(child, { singleColumn: true })
@@ -79,6 +88,7 @@ const Footer: Footer = ({ className, children, visuallyHiddenText = 'Support lin
             <h2 className="nhsuk-u-visually-hidden">{visuallyHiddenText}</h2>
           ) : null}
           <div className="nhsuk-footer">{newChildren}</div>
+          {footerHasMultipleColumns ? <div>{footerCopyright}</div> : undefined}
         </Container>
       </div>
     </footer>
diff --git a/src/components/navigation/footer/__tests__/Footer.test.tsx b/src/components/navigation/footer/__tests__/Footer.test.tsx
index b7fd8b70..785ecdf0 100644
--- a/src/components/navigation/footer/__tests__/Footer.test.tsx
+++ b/src/components/navigation/footer/__tests__/Footer.test.tsx
@@ -42,6 +42,42 @@ describe('Footer', () => {
     );
   });
 
+  it('Renders the copyright within the nhsuk-footer when there is only one column', () => {
+    const { container } = render(
+      <Footer>
+        <Footer.List>
+          <Footer.ListItem id="test-listItem"></Footer.ListItem>
+        </Footer.List>
+        <Footer.Copyright>This is the copyright</Footer.Copyright>
+      </Footer>,
+    );
+    expect(container.querySelectorAll('.nhsuk-footer__copyright').length).toBe(1);
+    expect(
+      container.querySelector('.nhsuk-footer')?.querySelector('.nhsuk-footer__copyright'),
+    ).not.toBeNull();
+  });
+
+  it('Renders the copyright outside of the nhsuk-footer when there is more than one column', () => {
+    const { container } = render(
+      <Footer>
+        <Footer.List>
+          <Footer.ListItem id="test-listItem"></Footer.ListItem>
+        </Footer.List>
+        <Footer.List>
+          <Footer.ListItem id="test-listItem2"></Footer.ListItem>
+        </Footer.List>
+        <Footer.Copyright>This is the copyright</Footer.Copyright>
+      </Footer>,
+    );
+    expect(container.querySelectorAll('.nhsuk-footer__copyright').length).toBe(1);
+    expect(
+      container.querySelector('.nhsuk-width-container')?.querySelector('.nhsuk-footer__copyright'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('.nhsuk-footer')?.querySelector('.nhsuk-footer__copyright'),
+    ).toBeNull();
+  });
+
   it('Does not include the single column class on ListItem when there is more than one column', () => {
     const { container } = render(
       <Footer>
diff --git a/stories/Navigation/Footer.stories.tsx b/stories/Navigation/Footer.stories.tsx
index f872da1a..b22b92e2 100644
--- a/stories/Navigation/Footer.stories.tsx
+++ b/stories/Navigation/Footer.stories.tsx
@@ -61,7 +61,7 @@ export const WithLinksArrangedInColumns: Story = {
           <Footer.ListItem href="#">Profile editor login</Footer.ListItem>
         </Footer.List>
 
-        <Footer.List>
+        <Footer.List className="nhsuk-footer__meta">
           <Footer.ListItem href="#">About us</Footer.ListItem>
           <Footer.ListItem href="#">Accessibility statement</Footer.ListItem>
           <Footer.ListItem href="#">Our policies</Footer.ListItem>