@comicrelief/component-library 8.44.3 → 8.45.0

package/dist/components/Organisms/FooterNew/FooterNew.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _yup = require("@hookform/resolvers/yup");
+var yup = _interopRequireWildcard(require("yup"));
+var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
+var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/SocialIcons"));
+var _EmailSignUp = _interopRequireDefault(require("../../Molecules/EmailSignUp/EmailSignUp"));
+var _PrimaryNav = _interopRequireDefault(require("./Nav/PrimaryNav"));
+var _SecondaryNav = _interopRequireDefault(require("./Nav/SecondaryNav"));
+var _FundraisingRegulatorLogo = _interopRequireDefault(require("../Footer/FundraisingRegulatorLogo/FundraisingRegulatorLogo"));
+var _FooterNew = require("./FooterNew.style");
+const FooterNew = _ref => {
+  let {
+    legalText,
+    copyrightText,
+    showFacebookSocialIcon,
+    showInstagramSocialIcon,
+    showXSocialIcon,
+    showTikTokSocialIcon,
+    showYouTubeSocialIcon,
+    onNewsletterSubmit,
+    primaryLinksList = [],
+    secondaryLinksList = [],
+    campaign = 'Comic Relief',
+    additionalLegalLine = '',
+    showFundraisingRegulatorLogo = false,
+    showEmailSignup = true,
+    animateRotate = true,
+    ...rest
+  } = _ref;
+  // 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 = (0, _reactHookForm.useForm)({
+    mode: 'onBlur',
+    resolver: (0, _yup.yupResolver)(validationSchema)
+  });
+  const {
+    handleSubmit
+  } = formMethods;
+  const handleNewsletterSubmit = data => {
+    if (onNewsletterSubmit) {
+      onNewsletterSubmit(data.email);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_FooterNew.FooterWrapper, rest, /*#__PURE__*/_react.default.createElement(_FooterNew.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_FooterNew.FooterLegalLine, null, additionalLegalLine), /*#__PURE__*/_react.default.createElement(_FooterNew.LogosContainer, {
+    $mobileOnly: true
+  }, /*#__PURE__*/_react.default.createElement(_FooterNew.Brand, {
+    href: "/",
+    title: `Go to ${campaign} homepage`,
+    animateRotate: animateRotate
+  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    sizeSm: "48px",
+    sizeMd: "72px",
+    rotate: false,
+    campaign: campaign
+  }))), /*#__PURE__*/_react.default.createElement(_FooterNew.TopSection, {
+    $hasEmailSignup: showEmailSignup
+  }, /*#__PURE__*/_react.default.createElement(_FooterNew.TopSectionLeft, null, showEmailSignup && /*#__PURE__*/_react.default.createElement(_FooterNew.NewsletterSignUpWrapper, null, /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, formMethods, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(handleNewsletterSubmit),
+    noValidate: true
+  }, /*#__PURE__*/_react.default.createElement(_EmailSignUp.default, {
+    formContext: formMethods
+  })))), /*#__PURE__*/_react.default.createElement(_FooterNew.SocialIconWrapper, {
+    $desktopOnly: true,
+    $inTopSection: true
+  }, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+    campaign: campaignName,
+    newStyle: true,
+    invertColor: true,
+    showFacebookSocialIcon: showFacebookSocialIcon,
+    showInstagramSocialIcon: showInstagramSocialIcon,
+    showXSocialIcon: showXSocialIcon,
+    showTikTokSocialIcon: showTikTokSocialIcon,
+    showYouTubeSocialIcon: showYouTubeSocialIcon
+  }))), /*#__PURE__*/_react.default.createElement(_FooterNew.LogosContainer, {
+    $desktopOnly: true,
+    $showCRLogoOnly: true
+  }, /*#__PURE__*/_react.default.createElement(_FooterNew.Brand, {
+    href: "/",
+    title: `Go to ${campaign} homepage`,
+    animateRotate: animateRotate
+  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    sizeSm: "59px",
+    sizeMd: "59px",
+    rotate: false,
+    campaign: campaign
+  }))), /*#__PURE__*/_react.default.createElement(_FooterNew.LogosContainer, {
+    $desktopOnly: true,
+    $showPairedLogos: true
+  }, /*#__PURE__*/_react.default.createElement(_FooterNew.Brand, {
+    href: "/",
+    title: `Go to ${campaign} homepage`,
+    animateRotate: animateRotate
+  }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+    sizeSm: "59px",
+    sizeMd: "59px",
+    rotate: false,
+    campaign: campaign
+  })), showFundraisingRegulatorLogo && /*#__PURE__*/_react.default.createElement(_FundraisingRegulatorLogo.default, {
+    animateOnHover: true,
+    noMargin: true
+  }))), /*#__PURE__*/_react.default.createElement(_PrimaryNav.default, Object.assign({
+    navItems: primaryLinksList
+  }, rest)), /*#__PURE__*/_react.default.createElement(_FooterNew.SocialIconWrapper, {
+    $mobileOnly: true
+  }, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+    campaign: campaignName,
+    newStyle: true,
+    invertColor: true,
+    showFacebookSocialIcon: showFacebookSocialIcon,
+    showInstagramSocialIcon: showInstagramSocialIcon,
+    showXSocialIcon: showXSocialIcon,
+    showTikTokSocialIcon: showTikTokSocialIcon,
+    showYouTubeSocialIcon: showYouTubeSocialIcon
+  })), /*#__PURE__*/_react.default.createElement(_SecondaryNav.default, Object.assign({
+    navItems: secondaryLinksList
+  }, rest)), /*#__PURE__*/_react.default.createElement(_FooterNew.FooterCopyright, null, displayCopyrightText && /*#__PURE__*/_react.default.createElement(_FooterNew.FooterCopyrightText, null, displayCopyrightText), legalText && /*#__PURE__*/_react.default.createElement(_FooterNew.FooterCopyrightText, null, legalText)), /*#__PURE__*/_react.default.createElement(_FooterNew.LogosContainer, {
+    $mobileOnly: true,
+    $showFundraiserAtBottom: true
+  }, showFundraisingRegulatorLogo && /*#__PURE__*/_react.default.createElement(_FundraisingRegulatorLogo.default, null)))));
+};
+var _default = exports.default = FooterNew;

package/dist/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/dist/components/Organisms/FooterNew/FooterNew.style.js

@@ -0,0 +1,312 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopSectionLeft = exports.TopSection = exports.SocialIconWrapper = exports.SecondaryNavText = exports.SecondaryNavLink = exports.SecondaryNavItem = exports.SecondaryNav = exports.PrimaryNavText = exports.PrimaryNavLink = exports.PrimaryNavItem = exports.PrimaryNav = exports.NewsletterSignUpWrapper = exports.LogosContainer = exports.InnerWrapper = exports.FooterWrapper = exports.FooterLegalLine = exports.FooterCopyrightText = exports.FooterCopyright = exports.Brand = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
+var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _animations = require("../../../theme/shared/animations");
+const FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.attrs(() => ({
+  role: 'banner'
+})).withConfig({
+  displayName: "FooterNewstyle__FooterWrapper",
+  componentId: "sc-17mkhu6-0"
+})(["text-align:left;background:", ";padding-top:6rem;@media ", "{padding-bottom:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('grey_5');
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('M');
+}, (0, _spacing.default)('lg'));
+const InnerWrapper = exports.InnerWrapper = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__InnerWrapper",
+  componentId: "sc-17mkhu6-1"
+})(["position:relative;display:block;width:100%;height:100%;max-width:1200px;margin:0 auto;padding:0 ", ";@media ", "{padding:0 ", "};}"], (0, _spacing.default)('md'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('L');
+}, (0, _spacing.default)('md'));
+const FooterLegalLine = exports.FooterLegalLine = (0, _styledComponents.default)(_Text.default).attrs({
+  tag: 'p'
+}).withConfig({
+  displayName: "FooterNewstyle__FooterLegalLine",
+  componentId: "sc-17mkhu6-2"
+})(["text-align:left;margin-top:1rem;margin-bottom:", ";line-height:1.5rem;color:", ";"], (0, _spacing.default)('md'), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.color('grey');
+});
+const TopSection = exports.TopSection = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__TopSection",
+  componentId: "sc-17mkhu6-3"
+})(["display:flex;flex-direction:column;margin-bottom:", ";gap:", ";@media ", "{flex-direction:row;justify-content:space-between;align-items:", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.breakpoints2026('M');
+}, _ref6 => {
+  let {
+    $hasEmailSignup
+  } = _ref6;
+  return $hasEmailSignup ? 'flex-start' : 'center';
+});
+const TopSectionLeft = exports.TopSectionLeft = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__TopSectionLeft",
+  componentId: "sc-17mkhu6-4"
+})(["display:flex;flex-direction:column;gap:", ";@media ", "{flex-direction:column;flex:0 0 auto;}"], (0, _spacing.default)('md'), _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('M');
+});
+const NewsletterSignUpWrapper = exports.NewsletterSignUpWrapper = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__NewsletterSignUpWrapper",
+  componentId: "sc-17mkhu6-5"
+})(["max-width:100%;@media ", "{max-width:100%;}"], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.breakpoints2026('M');
+});
+const SocialIconWrapper = exports.SocialIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__SocialIconWrapper",
+  componentId: "sc-17mkhu6-6"
+})(["margin-bottom:", ";box-sizing:content-box;gap:", ";display:", ";@media ", "{box-sizing:border-box;display:", ";margin-bottom:", ";align-items:center;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref9 => {
+  let {
+    $desktopOnly
+  } = _ref9;
+  if ($desktopOnly) return 'none';
+  return 'block';
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.breakpoints2026('M');
+}, _ref11 => {
+  let {
+    $mobileOnly,
+    $inTopSection
+  } = _ref11;
+  if ($mobileOnly) return 'none';
+  if ($inTopSection) return 'flex';
+  return 'block';
+}, _ref12 => {
+  let {
+    $inTopSection
+  } = _ref12;
+  return $inTopSection ? '0' : (0, _spacing.default)('md');
+});
+const PrimaryNav = exports.PrimaryNav = _styledComponents.default.nav.withConfig({
+  displayName: "FooterNewstyle__PrimaryNav",
+  componentId: "sc-17mkhu6-7"
+})(["display:flex;flex-direction:column;list-style:none;padding:", " 0;margin:0 0 ", " 0;gap:", ";@media ", "{flex-direction:row;flex-wrap:wrap;gap:", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.breakpoints2026('M');
+}, (0, _spacing.default)('m'));
+const PrimaryNavItem = exports.PrimaryNavItem = _styledComponents.default.li.withConfig({
+  displayName: "FooterNewstyle__PrimaryNavItem",
+  componentId: "sc-17mkhu6-8"
+})(["margin:0;"]);
+const PrimaryNavLink = exports.PrimaryNavLink = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "FooterNewstyle__PrimaryNavLink",
+  componentId: "sc-17mkhu6-9"
+})(["color:", ";text-decoration:none;font-weight:bold;&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.color('white');
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.color('white');
+});
+const PrimaryNavText = exports.PrimaryNavText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "FooterNewstyle__PrimaryNavText",
+  componentId: "sc-17mkhu6-10"
+})(["color:", ";font-weight:bold;"], _ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.color('white');
+});
+const SecondaryNav = exports.SecondaryNav = _styledComponents.default.nav.withConfig({
+  displayName: "FooterNewstyle__SecondaryNav",
+  componentId: "sc-17mkhu6-11"
+})(["display:flex;flex-direction:row;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 ", " 0;gap:", ";align-items:center;"], (0, _spacing.default)('md'), (0, _spacing.default)('sm'));
+const SecondaryNavItem = exports.SecondaryNavItem = _styledComponents.default.li.withConfig({
+  displayName: "FooterNewstyle__SecondaryNavItem",
+  componentId: "sc-17mkhu6-12"
+})(["margin:0;display:flex;align-items:center;@media ", "{display:inline;}&:not(:last-child)::after{content:'|';margin-left:", ";color:", ";}"], _ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.breakpoints2026('M');
+}, (0, _spacing.default)('sm'), _ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.color('grey');
+});
+const SecondaryNavLink = exports.SecondaryNavLink = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "FooterNewstyle__SecondaryNavLink",
+  componentId: "sc-17mkhu6-13"
+})(["text-decoration:none;> span{color:", ";text-decoration:underline;text-decoration-color:", ";font-weight:normal;font-size:", ";}@media ", "{> span{text-decoration:none;}}&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.color('grey');
+}, _ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.color('grey');
+}, _ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontSize('xs');
+}, _ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.breakpoints2026('M');
+}, _ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.color('grey');
+});
+const SecondaryNavText = exports.SecondaryNavText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "FooterNewstyle__SecondaryNavText",
+  componentId: "sc-17mkhu6-14"
+})(["color:", ";font-weight:normal;"], _ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.color('white');
+});
+const LogosContainer = exports.LogosContainer = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__LogosContainer",
+  componentId: "sc-17mkhu6-15"
+})(["display:flex;flex-direction:row;align-items:center;gap:", ";justify-content:", ";margin-top:", ";margin-bottom:", ";", " @media ", "{flex:0 0 auto;margin-top:0;margin-bottom:0;padding-top:", ";display:", ";justify-content:", ";}}@media ", "{display:", ";}"], (0, _spacing.default)('l'), _ref25 => {
+  let {
+    $mobileOnly
+  } = _ref25;
+  return $mobileOnly ? 'flex-start' : 'center';
+}, _ref26 => {
+  let {
+    $mobileOnly
+  } = _ref26;
+  return $mobileOnly ? (0, _spacing.default)('md') : '0';
+}, _ref27 => {
+  let {
+    $mobileOnly
+  } = _ref27;
+  return $mobileOnly ? (0, _spacing.default)('l') : '0';
+}, _ref28 => {
+  let {
+    $desktopOnly
+  } = _ref28;
+  return $desktopOnly && 'display: none;';
+}, _ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.breakpoints2026('M');
+}, _ref30 => {
+  let {
+    $desktopOnly
+  } = _ref30;
+  return $desktopOnly ? (0, _spacing.default)('l') : '0';
+}, _ref31 => {
+  let {
+    $desktopOnly,
+    $mobileOnly,
+    $showCRLogoOnly,
+    $showPairedLogos,
+    $showFundraiserAtBottom
+  } = _ref31;
+  // 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';
+}, _ref32 => {
+  let {
+    $desktopOnly,
+    $showCRLogoOnly,
+    $showFundraiserAtBottom
+  } = _ref32;
+  if ($showFundraiserAtBottom) return 'flex-start';
+  if ($desktopOnly && $showCRLogoOnly) return 'flex-end';
+  if ($desktopOnly) return 'flex-end';
+  return 'center';
+}, _ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.breakpoints2026('L');
+}, _ref34 => {
+  let {
+    $desktopOnly,
+    $mobileOnly,
+    $showCRLogoOnly,
+    $showPairedLogos,
+    $showFundraiserAtBottom
+  } = _ref34;
+  // 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 = exports.Brand = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "FooterNewstyle__Brand",
+  componentId: "sc-17mkhu6-16"
+})(["color:transparent;border:0;:hover{border:0;}", ""], _ref35 => {
+  let {
+    animateRotate
+  } = _ref35;
+  return (0, _animations.logoRotateAnimation)(animateRotate);
+});
+const FooterCopyright = exports.FooterCopyright = _styledComponents.default.div.withConfig({
+  displayName: "FooterNewstyle__FooterCopyright",
+  componentId: "sc-17mkhu6-17"
+})(["display:block;width:100%;height:100%;text-align:left;"]);
+const FooterCopyrightText = exports.FooterCopyrightText = (0, _styledComponents.default)(_Text.default).attrs({
+  tag: 'p'
+}).withConfig({
+  displayName: "FooterNewstyle__FooterCopyrightText",
+  componentId: "sc-17mkhu6-18"
+})(["color:", ";font-size:", ";margin-bottom:", ";"], _ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.color('grey');
+}, _ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.fontSize('xs');
+}, (0, _spacing.default)('sm'));

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _FooterNew = _interopRequireDefault(require("./FooterNew"));
+var _footerCopy = _interopRequireDefault(require("../Footer/data/footerCopy"));
+var _data = require("./dev-data/data");
+/* eslint-disable react/jsx-wrap-multilines */
+
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_FooterNew.default, {
+    primaryLinksList: _data.testPrimaryLinksList,
+    secondaryLinksList: _data.testSecondaryLinksList,
+    legalText: _footerCopy.default.copy,
+    copyrightText: "\xA9 2026 Comic Relief"
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _navHelper = require("../../../../utils/navHelper");
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
+var _FooterNew = require("../FooterNew.style");
+const PrimaryNav = _ref => {
+  let {
+    navItems = [],
+    ...rest
+  } = _ref;
+  if (!navItems || navItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_FooterNew.PrimaryNav, {
+    "aria-label": "Primary footer navigation",
+    role: "navigation"
+  }, navItems.map(item => {
+    const thisUrl = (0, _internalLinkHelper.InternalLinkHelper)((0, _navHelper.NavHelper)(item));
+    return /*#__PURE__*/_react.default.createElement(_FooterNew.PrimaryNavItem, {
+      key: `primary-${thisUrl}-${item.title}`
+    }, /*#__PURE__*/_react.default.createElement(_FooterNew.PrimaryNavLink, Object.assign({
+      href: thisUrl
+    }, rest), /*#__PURE__*/_react.default.createElement(_FooterNew.PrimaryNavText, null, item.title)));
+  }));
+};
+var _default = exports.default = PrimaryNav;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _navHelper = require("../../../../utils/navHelper");
+var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
+var _FooterNew = require("../FooterNew.style");
+const SecondaryNav = _ref => {
+  let {
+    navItems = [],
+    ...rest
+  } = _ref;
+  if (!navItems || navItems.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_FooterNew.SecondaryNav, {
+    "aria-label": "Secondary footer navigation",
+    role: "navigation"
+  }, navItems.map(item => {
+    const thisUrl = (0, _internalLinkHelper.InternalLinkHelper)((0, _navHelper.NavHelper)(item));
+    return /*#__PURE__*/_react.default.createElement(_FooterNew.SecondaryNavItem, {
+      key: `secondary-${thisUrl}-${item.title}`
+    }, /*#__PURE__*/_react.default.createElement(_FooterNew.SecondaryNavLink, Object.assign({
+      href: thisUrl
+    }, rest), /*#__PURE__*/_react.default.createElement(_FooterNew.SecondaryNavText, null, item.title)));
+  }));
+};
+var _default = exports.default = SecondaryNav;