feat(zopafooter): allow us to have multiline legal copy in the footer

src/components/molecules/ZopaFooter/ZopaFooter.md

@@ -34,3 +34,15 @@ const renderLink = ({ href, children }) => <CustomLink href={href}>{children}</C
 
 <ZopaFooter renderLink={renderLink} />;
 ```
+
+### Adding custom legal copy
+
+Its possible partners will want to customise the copy contained within the Footer. This can be done by passing in a `mainCustomLegalCopy` prop.
+
+To enable line breaks we allow passing a string array. This will render each string as a separate paragraph.
+
+```tsx
+import { ZopaFooter } from '@zopauk/react-components';
+
+<ZopaFooter mainCustomLegalCopy={['This is my first line of legal copy', 'This is my second line of legal copy']} />;
+```

src/components/molecules/ZopaFooter/ZopaFooter.test.tsx

@@ -43,6 +43,14 @@ describe('<ZopaFooter />', () => {
     expect(unexpectedText.length).toBe(0);
   });
 
+  it('allows a user to render a multiline custom main legal block', () => {
+    render(<ZopaFooter mainCustomLegalCopy={['Hello Line1', 'Hello Line2']} />);
+    const expectedText1 = screen.getByText('Hello Line1');
+    const expectedText2 = screen.getByText('Hello Line2');
+    expect(expectedText1).toBeDefined();
+    expect(expectedText2).toBeDefined();
+  });
+
   it('renders the component with no a11y violations', async () => {
     const { container } = render(<ZopaFooter />);
     expect(container.firstChild).toMatchSnapshot();

src/components/molecules/ZopaFooter/ZopaFooter.tsx

@@ -19,14 +19,14 @@ import { Footer, Heading, LegalBlock, List, LogoBlock, SocialBlock, SocialLink }
  *
  * @param baseUrl {string} the url the links will use as a base
  * @param renderLink {(props: LinkProps) => React.ReactNode} a callback function allowing an application to render the Logo component
- * @param mainCustomLegalCopy {string} if you need to pass some specific main legal copy from another partner use this
+ * @param mainCustomLegalCopy {string|string[]} if you need to pass some specific main legal copy from another partner use this
  * @param additionalCopy {string[]} if you need to pass additional copy after the legal copy
  */
 
 export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
   baseUrl?: string;
   renderLink?: (props: LinkProps) => React.ReactNode;
-  mainCustomLegalCopy?: string;
+  mainCustomLegalCopy?: string | string[];
   additionalCopy?: string[];
 }
 
@@ -56,12 +56,25 @@ const MainZopaLegalCopy = () => {
   );
 };
 
-const MainCustomLegalCopy = ({ copy }: Record<'copy', string>) => {
+const MainCustomLegalCopy = ({ copy }: { copy: FooterProps['mainCustomLegalCopy'] }) => {
   const theme = useThemeContext();
+  const copyArray = Array.isArray(copy) ? copy : [copy];
   return (
-    <Text as="p" color={theme.footer.legalBlock.color} size="small" className="mb-4">
-      {copy}
-    </Text>
+    <>
+      {copyArray.map((copy, i) => {
+        return (
+          <Text
+            as="p"
+            color={theme.footer.legalBlock.color}
+            size="small"
+            key={i}
+            className={i > copyArray.length ? '' : 'mb-4'}
+          >
+            {copy}
+          </Text>
+        );
+      })}
+    </>
   );
 };