diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx index e9e82bb3..acda168e 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; + const footerHasMultipleColumns = footerCols.length > 1; - if (footerCols.length === 1) { + if (footerHasMultipleColumns) { + // Remove the copyright from being rendered inside the 'nhsuk-footer' div + newChildren = Children.map(children, (child) => + childIsOfComponentType(child, FooterCopyright) ? undefined : child, + )?.filter((child) => child !== undefined); + } 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

{visuallyHiddenText}

) : null}
{newChildren}
+ {footerHasMultipleColumns ?
{footerCopyright}
: undefined} 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( + , + ); + 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( + , + ); + 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(