Merge pull request #1146 from ZopaPublic/cobranding-new

feat: zopa footer accept cobranding
ZopaPublic · Aug 27, 2024 · d6ed807 · d6ed807
2 parents 017e0cc + 5552298
commit d6ed807
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/.changeset/chilled-birds-smile.md b/.changeset/chilled-birds-smile.md
@@ -0,0 +1,5 @@
+---
+'@zopauk/react-components': patch
+---
+
+zopa footer to accept co branding
diff --git a/src/components/molecules/ZopaFooter/ZopaFooter.tsx b/src/components/molecules/ZopaFooter/ZopaFooter.tsx
@@ -3,10 +3,10 @@ import Logo from '../../atoms/Logo/Logo';
 import Link, { LinkProps } from '../../atoms/Link/Link';
 import { typography, grid, spacing, colors } from '../../../constants';
 import styled, { css } from 'styled-components';
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import FlexRow from '../../layout/FlexRow/FlexRow';
 import FlexCol from '../../layout/FlexCol/FlexCol';
-import { useThemeContext } from '../../styles/Theme';
+import { AppTheme, useThemeContext, zopaTheme } from '../../styles/Theme';
 import twitter from '../../../content/images/social/twitter.svg';
 import facebook from '../../../content/images/social/facebook.svg';
 import linkedin from '../../../content/images/social/linkedin.svg';
@@ -92,7 +92,7 @@ const FullWidthWrapper = styled.div`
 export const footerLinkStyle = css`
   font-weight: ${typography.weights.regular};
   text-decoration: none;
-
+  color: ${colors.actionPlain};
   &:hover,
   &:active {
     text-decoration: underline;
@@ -394,6 +394,8 @@ export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
   mainCustomLegalCopy?: string | string[];
   additionalCopy?: string[];
   customFooterLinks?: CustomFooterLink[];
+  isCobranded?: boolean;
+  mainCobrandedLegalCopy?: ReactNode;
 }
 
 const ZopaFooter = ({
@@ -402,9 +404,19 @@ const ZopaFooter = ({
   additionalCopy = [],
   mainCustomLegalCopy,
   customFooterLinks,
+  isCobranded,
+  mainCobrandedLegalCopy,
   ...rest
 }: FooterProps) => {
-  const theme = useThemeContext();
+  const themeContext = useThemeContext();
+  let theme: AppTheme;
+  if (isCobranded) {
+    theme = zopaTheme;
+  } else {
+    theme = themeContext;
+  }
+
+  console.log('mainCobrandedLegalCopy', mainCobrandedLegalCopy);
 
   return (
     <Footer data-automation="ZA.footer" theme={theme} {...rest} className={theme.footer.className}>
@@ -421,18 +433,26 @@ const ZopaFooter = ({
           )}
           {theme.footer.showLegalBlock ? (
             <LegalBlock xs={12} l={theme.footer.legalBlock.isFullWidth ? 12 : 4} theme={theme}>
-              {mainCustomLegalCopy ? <MainCustomLegalCopy copy={mainCustomLegalCopy} /> : <MainZopaLegalCopy />}
-              {additionalCopy.map((copy, i) => (
-                <Text
-                  as="p"
-                  color={theme.footer.legalBlock.color}
-                  size="small"
-                  key={i}
-                  className={i > additionalCopy.length ? 'mb-0' : 'mb-4'}
-                >
-                  {copy}
-                </Text>
-              ))}
+              <>
+                {mainCustomLegalCopy ? (
+                  <MainCustomLegalCopy copy={mainCustomLegalCopy} />
+                ) : mainCobrandedLegalCopy ? (
+                  mainCobrandedLegalCopy
+                ) : (
+                  <MainZopaLegalCopy />
+                )}
+                {additionalCopy.map((copy, i) => (
+                  <Text
+                    as="p"
+                    color={theme.footer.legalBlock.color}
+                    size="small"
+                    key={i}
+                    className={i > additionalCopy.length ? 'mb-0' : 'mb-4'}
+                  >
+                    {copy}
+                  </Text>
+                ))}
+              </>
             </LegalBlock>
           ) : null}
           {theme.footer.showSocialBlock ? theme.footer.customSocialBlock ? <CustomSocial /> : <ZopaSocial /> : null}

diff --git a/src/components/molecules/ZopaFooter/__snapshots__/ZopaFooter.test.tsx.snap b/src/components/molecules/ZopaFooter/__snapshots__/ZopaFooter.test.tsx.snap
@@ -219,6 +219,7 @@ exports[`<ZopaFooter /> renders the component with no a11y violations 1`] = `
   font-weight: 400;
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #3B46C4;
 }
 
 .c7:hover,