Fix issue with the footer copyright not being rendered in the correct location if there are multiple link columns

Author: jakeb-nhs

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>

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>

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>