@comicrelief/component-library 8.44.3 → 8.45.0

package/src/components/Organisms/FooterNew/FooterNew.js

@@ -0,0 +1,211 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useForm, FormProvider } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import Logo from '../../Atoms/Logo/Logo';
+import SocialIcons from '../../Atoms/SocialIcons/SocialIcons';
+import EmailSignUp from '../../Molecules/EmailSignUp/EmailSignUp';
+import PrimaryNav from './Nav/PrimaryNav';
+import SecondaryNav from './Nav/SecondaryNav';
+import FundraisingRegulatorLogo from '../Footer/FundraisingRegulatorLogo/FundraisingRegulatorLogo';
+
+import {
+  FooterWrapper,
+  InnerWrapper,
+  FooterLegalLine,
+  TopSection,
+  TopSectionLeft,
+  NewsletterSignUpWrapper,
+  SocialIconWrapper,
+  LogosContainer,
+  FooterCopyright,
+  FooterCopyrightText,
+  Brand
+} from './FooterNew.style';
+
+const FooterNew = ({
+  legalText,
+  copyrightText,
+  showFacebookSocialIcon,
+  showInstagramSocialIcon,
+  showXSocialIcon,
+  showTikTokSocialIcon,
+  showYouTubeSocialIcon,
+  onNewsletterSubmit,
+  primaryLinksList = [],
+  secondaryLinksList = [],
+  campaign = 'Comic Relief',
+  additionalLegalLine = '',
+  showFundraisingRegulatorLogo = false,
+  showEmailSignup = true,
+  animateRotate = true,
+  ...rest
+}) => {
+  // Remove white space between words
+  const campaignName = campaign.replace(/\s/g, '').toLowerCase();
+
+  const currentYear = new Date().getFullYear();
+  const defaultCopyrightText = `© ${currentYear} Comic Relief`;
+  const displayCopyrightText = copyrightText !== undefined ? copyrightText : defaultCopyrightText;
+
+  const validationSchema = yup.object({
+    email: yup
+      .string()
+      .nullable()
+      .transform(value => (value === '' ? null : value))
+      .email('Please provide a valid email address')
+  });
+
+  const formMethods = useForm({
+    mode: 'onBlur',
+    resolver: yupResolver(validationSchema)
+  });
+
+  const { handleSubmit } = formMethods;
+
+  const handleNewsletterSubmit = data => {
+    if (onNewsletterSubmit) {
+      onNewsletterSubmit(data.email);
+    }
+  };
+
+  return (
+    <div>
+      <FooterWrapper {...rest}>
+        <InnerWrapper>
+          {additionalLegalLine && (
+            <FooterLegalLine>
+              {additionalLegalLine}
+            </FooterLegalLine>
+          )}
+
+          <LogosContainer $mobileOnly>
+            <Brand href="/" title={`Go to ${campaign} homepage`} animateRotate={animateRotate}>
+              <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
+            </Brand>
+          </LogosContainer>
+
+          <TopSection $hasEmailSignup={showEmailSignup}>
+            <TopSectionLeft>
+              {showEmailSignup && (
+                <NewsletterSignUpWrapper>
+                  <FormProvider {...formMethods}>
+                    <form onSubmit={handleSubmit(handleNewsletterSubmit)} noValidate>
+                      <EmailSignUp formContext={formMethods} />
+                    </form>
+                  </FormProvider>
+                </NewsletterSignUpWrapper>
+              )}
+              <SocialIconWrapper $desktopOnly $inTopSection>
+                <SocialIcons
+                  campaign={campaignName}
+                  newStyle
+                  invertColor
+                  showFacebookSocialIcon={showFacebookSocialIcon}
+                  showInstagramSocialIcon={showInstagramSocialIcon}
+                  showXSocialIcon={showXSocialIcon}
+                  showTikTokSocialIcon={showTikTokSocialIcon}
+                  showYouTubeSocialIcon={showYouTubeSocialIcon}
+                />
+              </SocialIconWrapper>
+            </TopSectionLeft>
+            <LogosContainer $desktopOnly $showCRLogoOnly>
+              <Brand href="/" title={`Go to ${campaign} homepage`} animateRotate={animateRotate}>
+                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+              </Brand>
+            </LogosContainer>
+            <LogosContainer $desktopOnly $showPairedLogos>
+              <Brand href="/" title={`Go to ${campaign} homepage`} animateRotate={animateRotate}>
+                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+              </Brand>
+              {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo animateOnHover noMargin />}
+            </LogosContainer>
+          </TopSection>
+
+          <PrimaryNav navItems={primaryLinksList} {...rest} />
+
+          <SocialIconWrapper $mobileOnly>
+            <SocialIcons
+              campaign={campaignName}
+              newStyle
+              invertColor
+              showFacebookSocialIcon={showFacebookSocialIcon}
+              showInstagramSocialIcon={showInstagramSocialIcon}
+              showXSocialIcon={showXSocialIcon}
+              showTikTokSocialIcon={showTikTokSocialIcon}
+              showYouTubeSocialIcon={showYouTubeSocialIcon}
+            />
+          </SocialIconWrapper>
+
+          <SecondaryNav navItems={secondaryLinksList} {...rest} />
+
+          <FooterCopyright>
+            {displayCopyrightText && (
+              <FooterCopyrightText>
+                {displayCopyrightText}
+              </FooterCopyrightText>
+            )}
+            {legalText && (
+              <FooterCopyrightText>
+                {legalText}
+              </FooterCopyrightText>
+            )}
+          </FooterCopyright>
+
+          <LogosContainer $mobileOnly $showFundraiserAtBottom>
+            {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo />}
+          </LogosContainer>
+        </InnerWrapper>
+      </FooterWrapper>
+    </div>
+  );
+};
+
+FooterNew.propTypes = {
+  /** Array of primary navigation link objects */
+  primaryLinksList: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    path: PropTypes.string,
+    url: PropTypes.string,
+    reference: PropTypes.shape({
+      path: PropTypes.string
+    }),
+    internal: PropTypes.shape({
+      type: PropTypes.string
+    })
+  })),
+  /** Array of secondary navigation link objects */
+  secondaryLinksList: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    path: PropTypes.string,
+    url: PropTypes.string,
+    reference: PropTypes.shape({
+      path: PropTypes.string
+    }),
+    internal: PropTypes.shape({
+      type: PropTypes.string
+    })
+  })),
+  /** Legal text displayed at bottom of footer */
+  legalText: PropTypes.string,
+  /** Optional copyright text displayed at bottom of footer */
+  copyrightText: PropTypes.string,
+  /** Campaign name, used for logo and social links */
+  campaign: PropTypes.string,
+  /** Optional legal line displayed at top of footer */
+  additionalLegalLine: PropTypes.string,
+  showFundraisingRegulatorLogo: PropTypes.bool,
+  showEmailSignup: PropTypes.bool,
+  showFacebookSocialIcon: PropTypes.bool,
+  showInstagramSocialIcon: PropTypes.bool,
+  showXSocialIcon: PropTypes.bool,
+  showTikTokSocialIcon: PropTypes.bool,
+  showYouTubeSocialIcon: PropTypes.bool,
+  /** Animate logo rotation on hover */
+  animateRotate: PropTypes.bool,
+  /** Optional function to handle newsletter signup form submission */
+  onNewsletterSubmit: PropTypes.func
+};
+
+export default FooterNew;

package/src/components/Organisms/FooterNew/FooterNew.md

@@ -0,0 +1,47 @@
+# FooterNew
+
+## FooterNew with email signup
+
+```js
+import FooterNew from './FooterNew';
+import footerCopy from '../Footer/data/footerCopy';
+import { primaryLinksList, secondaryLinksList } from './dev-data/data';
+
+<FooterNew
+  primaryLinksList={primaryLinksList}
+  secondaryLinksList={secondaryLinksList}
+  legalText={footerCopy.copy}
+  campaign="Comic Relief"
+  showFundraisingRegulatorLogo
+  showFacebookSocialIcon
+  showInstagramSocialIcon
+  showXSocialIcon
+  showTikTokSocialIcon
+  showYouTubeSocialIcon
+  animateRotate
+  onNewsletterSubmit={(email) => console.log('Newsletter submitted. Normally at this point, the frontend would run its own function to send.', email)}
+/>
+```
+
+## FooterNew without email signup
+
+```js
+import FooterNew from './FooterNew';
+import footerCopy from '../Footer/data/footerCopy';
+import { primaryLinksList, secondaryLinksList } from './dev-data/data';
+
+<FooterNew
+  primaryLinksList={primaryLinksList}
+  secondaryLinksList={secondaryLinksList}
+  legalText={footerCopy.copy}
+  campaign="Comic Relief"
+  showEmailSignup={false}
+  showFundraisingRegulatorLogo
+  showFacebookSocialIcon
+  showInstagramSocialIcon
+  showXSocialIcon
+  showTikTokSocialIcon
+  showYouTubeSocialIcon
+  animateRotate
+/>
+```

package/src/components/Organisms/FooterNew/FooterNew.style.js

@@ -0,0 +1,294 @@
+import styled from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+import Link from '../../Atoms/Link/Link';
+import Text from '../../Atoms/Text/Text';
+import { logoRotateAnimation } from '../../../theme/shared/animations';
+
+const FooterWrapper = styled.footer.attrs(() => ({
+  role: 'banner'
+}))`
+  text-align: left;
+  background: ${({ theme }) => theme.color('grey_5')};
+  padding-top: 6rem;
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    padding-bottom: ${spacing('lg')};
+  }
+`;
+
+const InnerWrapper = styled.div`
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 ${spacing('md')};
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding: 0 ${spacing('md')}};
+  }
+`;
+
+const FooterLegalLine = styled(Text).attrs({
+  tag: 'p'
+})`
+  text-align: left;
+  margin-top: 1rem;
+  margin-bottom: ${spacing('md')};
+  line-height: 1.5rem;
+  color: ${({ theme }) => theme.color('grey')};
+`;
+
+const TopSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${spacing('md')};
+  gap: ${spacing('md')};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: ${({ $hasEmailSignup }) => ($hasEmailSignup ? 'flex-start' : 'center')};
+  }
+`;
+
+const TopSectionLeft = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing('md')};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    flex-direction: column;
+    flex: 0 0 auto;
+  }
+`;
+
+const NewsletterSignUpWrapper = styled.div`
+  max-width: 100%;
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    max-width: 100%;
+  }
+`;
+
+const SocialIconWrapper = styled.div`
+margin-bottom: ${spacing('md')};
+box-sizing: content-box;
+gap: ${spacing('md')};
+  display: ${({ $desktopOnly }) => {
+    if ($desktopOnly) return 'none';
+    return 'block';
+  }};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+  box-sizing: border-box;
+    display: ${({ $mobileOnly, $inTopSection }) => {
+    if ($mobileOnly) return 'none';
+    if ($inTopSection) return 'flex';
+    return 'block';
+  }};
+    margin-bottom: ${({ $inTopSection }) => ($inTopSection ? '0' : spacing('md'))};
+    align-items: center;
+  }
+`;
+
+const PrimaryNav = styled.nav`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: ${spacing('md')} 0;
+  margin: 0 0 ${spacing('md')} 0;
+  gap: ${spacing('l')};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: ${spacing('m')};
+  }
+`;
+
+const PrimaryNavItem = styled.li`
+  margin: 0;
+`;
+
+const PrimaryNavLink = styled(Link)`
+  color: ${({ theme }) => theme.color('white')};
+  text-decoration: none;
+  font-weight: bold;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    text-decoration-color: ${({ theme }) => theme.color('white')};
+  }
+`;
+
+const PrimaryNavText = styled(Text)`
+  color: ${({ theme }) => theme.color('white')};
+  font-weight: bold;
+`;
+
+const SecondaryNav = styled.nav`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 ${spacing('md')} 0;
+  gap: ${spacing('sm')};
+  align-items: center;
+`;
+
+const SecondaryNavItem = styled.li`
+  margin: 0;
+  display: flex;
+  align-items: center;
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    display: inline;
+  }
+
+  &:not(:last-child)::after {
+    content: '|';
+    margin-left: ${spacing('sm')};
+    color: ${({ theme }) => theme.color('grey')};
+  }
+`;
+
+const SecondaryNavLink = styled(Link)`
+  text-decoration: none;
+
+  > span {
+    color: ${({ theme }) => theme.color('grey')};
+    text-decoration: underline;
+    text-decoration-color: ${({ theme }) => theme.color('grey')};
+    font-weight: normal;
+    font-size: ${({ theme }) => theme.fontSize('xs')};
+  }
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    > span {
+      text-decoration: none;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    text-decoration-color: ${({ theme }) => theme.color('grey')};
+  }
+
+`;
+
+const SecondaryNavText = styled(Text)`
+  color: ${({ theme }) => theme.color('white')};
+  font-weight: normal;
+`;
+
+const LogosContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${spacing('l')};
+  justify-content: ${({ $mobileOnly }) => ($mobileOnly ? 'flex-start' : 'center')};
+  margin-top: ${({ $mobileOnly }) => ($mobileOnly ? spacing('md') : '0')};
+  margin-bottom: ${({ $mobileOnly }) => ($mobileOnly ? spacing('l') : '0')};
+
+  /* Hide desktop containers on mobile */
+  ${({ $desktopOnly }) => $desktopOnly && 'display: none;'}
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    flex: 0 0 auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: ${({ $desktopOnly }) => ($desktopOnly ? spacing('l') : '0')};
+
+    display: ${({
+    $desktopOnly, $mobileOnly, $showCRLogoOnly, $showPairedLogos, $showFundraiserAtBottom
+  }) => {
+    // Mobile containers
+    if ($mobileOnly && $showFundraiserAtBottom) return 'flex';
+    if ($mobileOnly) return 'none';
+
+    // Desktop containers
+    if ($desktopOnly && $showCRLogoOnly) return 'flex';
+    if ($desktopOnly && $showPairedLogos) return 'none';
+    if ($desktopOnly) return 'none';
+
+    return 'flex';
+  }};
+
+    justify-content: ${({ $desktopOnly, $showCRLogoOnly, $showFundraiserAtBottom }) => {
+    if ($showFundraiserAtBottom) return 'flex-start';
+    if ($desktopOnly && $showCRLogoOnly) return 'flex-end';
+    if ($desktopOnly) return 'flex-end';
+    return 'center';
+  }};
+  }
+
+
+  }
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    display: ${({
+    $desktopOnly, $mobileOnly, $showCRLogoOnly, $showPairedLogos, $showFundraiserAtBottom
+  }) => {
+    // Hide fundraiser at bottom for L+ (it's in TopSection)
+    if ($mobileOnly && $showFundraiserAtBottom) return 'none';
+    if ($mobileOnly) return 'none';
+
+    // Desktop containers
+    if ($desktopOnly && $showCRLogoOnly) return 'none';
+    if ($desktopOnly && $showPairedLogos) return 'flex';
+    if ($desktopOnly) return 'none';
+
+    return 'flex';
+  }};
+  }
+`;
+
+const Brand = styled(Link)`
+  color: transparent;
+  border: 0;
+  :hover {
+    border: 0;
+  }
+
+  ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
+`;
+
+const FooterCopyright = styled.div`
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: left;
+`;
+
+const FooterCopyrightText = styled(Text).attrs({
+  tag: 'p'
+})`
+  color: ${({ theme }) => theme.color('grey')};
+  font-size: ${({ theme }) => theme.fontSize('xs')};
+  margin-bottom: ${spacing('sm')};
+`;
+
+export {
+  FooterWrapper,
+  InnerWrapper,
+  FooterLegalLine,
+  TopSection,
+  TopSectionLeft,
+  NewsletterSignUpWrapper,
+  SocialIconWrapper,
+  PrimaryNav,
+  PrimaryNavItem,
+  PrimaryNavLink,
+  PrimaryNavText,
+  SecondaryNav,
+  SecondaryNavItem,
+  SecondaryNavLink,
+  SecondaryNavText,
+  LogosContainer,
+  FooterCopyright,
+  FooterCopyrightText,
+  Brand
+};

package/src/components/Organisms/FooterNew/FooterNew.test.js

@@ -0,0 +1,24 @@
+/* eslint-disable react/jsx-wrap-multilines */
+import React from 'react';
+import 'jest-styled-components';
+import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
+import FooterNew from './FooterNew';
+
+import footerCopy from '../Footer/data/footerCopy';
+import {
+  testPrimaryLinksList,
+  testSecondaryLinksList
+} from './dev-data/data';
+
+it('renders correctly', () => {
+  const tree = renderWithTheme(
+    <FooterNew
+      primaryLinksList={testPrimaryLinksList}
+      secondaryLinksList={testSecondaryLinksList}
+      legalText={footerCopy.copy}
+      copyrightText="© 2026 Comic Relief"
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

package/src/components/Organisms/FooterNew/Nav/PrimaryNav.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavHelper } from '../../../../utils/navHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
+import {
+  PrimaryNav as StyledPrimaryNav,
+  PrimaryNavItem,
+  PrimaryNavLink,
+  PrimaryNavText
+} from '../FooterNew.style';
+
+const PrimaryNav = ({ navItems = [], ...rest }) => {
+  if (!navItems || navItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledPrimaryNav aria-label="Primary footer navigation" role="navigation">
+      {navItems.map(item => {
+        const thisUrl = InternalLinkHelper(NavHelper(item));
+
+        return (
+          <PrimaryNavItem key={`primary-${thisUrl}-${item.title}`}>
+            <PrimaryNavLink
+              href={thisUrl}
+              {...rest}
+            >
+              <PrimaryNavText>
+                {item.title}
+              </PrimaryNavText>
+            </PrimaryNavLink>
+          </PrimaryNavItem>
+        );
+      })}
+    </StyledPrimaryNav>
+  );
+};
+
+PrimaryNav.propTypes = {
+  /** Array of primary navigation link objects */
+  navItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    url: PropTypes.string,
+    reference: PropTypes.shape({
+      path: PropTypes.string
+    }),
+    internal: PropTypes.shape({
+      type: PropTypes.string
+    })
+  }))
+};
+
+export default PrimaryNav;

package/src/components/Organisms/FooterNew/Nav/SecondaryNav.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavHelper } from '../../../../utils/navHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
+import {
+  SecondaryNav as StyledSecondaryNav,
+  SecondaryNavItem,
+  SecondaryNavLink,
+  SecondaryNavText
+} from '../FooterNew.style';
+
+const SecondaryNav = ({ navItems = [], ...rest }) => {
+  if (!navItems || navItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledSecondaryNav aria-label="Secondary footer navigation" role="navigation">
+      {navItems.map(item => {
+        const thisUrl = InternalLinkHelper(NavHelper(item));
+
+        return (
+          <SecondaryNavItem key={`secondary-${thisUrl}-${item.title}`}>
+            <SecondaryNavLink
+              href={thisUrl}
+              {...rest}
+            >
+              <SecondaryNavText>
+                {item.title}
+              </SecondaryNavText>
+            </SecondaryNavLink>
+          </SecondaryNavItem>
+        );
+      })}
+    </StyledSecondaryNav>
+  );
+};
+
+SecondaryNav.propTypes = {
+  /** Array of secondary navigation link objects */
+  navItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    url: PropTypes.string,
+    reference: PropTypes.shape({
+      path: PropTypes.string
+    }),
+    internal: PropTypes.shape({
+      type: PropTypes.string
+    })
+  }))
+};
+
+export default SecondaryNav;