@comicrelief/component-library 8.51.2 → 8.51.4

package/dist/components/Molecules/EmailSignUp/EmailSignUp.style.js

@@ -58,7 +58,7 @@ const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConf
 const InputWrapper = exports.InputWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__InputWrapper",
   componentId: "sc-d38yg6-4"
-})(["flex:1;display:flex;align-items:center;width:100%;overflow:visible;@media ", "{width:auto;min-width:360px;}"], _ref6 => {
+})(["flex:1;display:flex;align-items:center;width:100%;overflow:visible;@media ", "{width:100%;max-width:364px;}"], _ref6 => {
   let {
     theme
   } = _ref6;
@@ -76,12 +76,12 @@ const StyledEmailInput = exports.StyledEmailInput = (0, _styledComponents.defaul
   let {
     theme
   } = _ref8;
-  return (0, _styledComponents.css)(["font-size:1rem;line-height:1.25rem;font-family:", ";background-color:", ";border-color:transparent;padding-left:18px;transition:background-color 0.2s ease,text-indent 0.18s ease;border:1px solid ", ";color:", ";&::placeholder{color:", ";}&:hover,&:focus{background-color:", ";}"], theme.fontFamilies('Montserrat'), theme.color('grey_5'), theme.color('white'), theme.color('white'), theme.color('grey_2'), theme.color('grey_4_hover'));
+  return (0, _styledComponents.css)(["font-size:1rem;line-height:1.25rem;font-family:", ";background-color:", ";border-color:transparent;height:44px;padding:12px 2.4rem 12px 18px;transition:background-color 0.2s ease,text-indent 0.18s ease;border:1px solid ", ";color:", ";&::placeholder{color:", ";}&:hover,&:focus{background-color:", ";}"], theme.fontFamilies('Montserrat'), theme.color('grey_5'), theme.color('white'), theme.color('white'), theme.color('grey_2'), theme.color('grey_4_hover'));
 });
 const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.withConfig({
   displayName: "EmailSignUpstyle__ButtonWrapper",
   componentId: "sc-d38yg6-6"
-})(["display:flex;align-items:center;justify-content:center;width:100%;@media ", "{width:auto;}"], _ref9 => {
+})(["display:flex;align-items:center;justify-content:center;width:100%;@media ", "{width:100%;max-width:123px;flex:0 0 auto;}"], _ref9 => {
   let {
     theme
   } = _ref9;
@@ -90,7 +90,7 @@ const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div.with
 const StyledEmailSignUpButton = exports.StyledEmailSignUpButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "EmailSignUpstyle__StyledEmailSignUpButton",
   componentId: "sc-d38yg6-7"
-})(["margin:0;font-family:", ";padding:", ";border-radius:0.5rem;overflow:hidden;@media ", "{margin:0;}.emailSignUpButtonContent{display:inline-grid;grid-auto-flow:column;grid-template-columns:auto 18px;column-gap:0.5rem;align-items:center;justify-content:center;line-height:1;}.emailSignUpButtonLabel{display:inline-block;transform:translateX(13px);transition:transform 0.22s ease;will-change:transform;}.emailSignUpButtonArrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:0;transform:translateX(-13px);transition:opacity 0.22s ease,transform 0.22s ease;will-change:transform,opacity;svg{fill:currentColor !important;}}&:hover,&:focus{background-color:", ";color:", ";.emailSignUpButtonLabel{transform:translateX(0);}.emailSignUpButtonArrow{opacity:1;transform:translateX(0);}}"], _ref10 => {
+})(["margin:0;font-family:", ";height:44px;padding:0 ", ";border-radius:0.5rem;overflow:hidden;min-width:max-content;width:100%;@media ", "{margin:0;max-width:123px;}.emailSignUpButtonContent{display:inline-grid;grid-auto-flow:column;grid-template-columns:auto 18px;column-gap:0.5rem;align-items:center;justify-content:center;line-height:1;white-space:nowrap;}.emailSignUpButtonLabel{display:inline-block;font-size:16px;line-height:1;transform:translateX(13px);transition:transform 0.22s ease;will-change:transform;white-space:nowrap;}.emailSignUpButtonArrow{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:0;transform:translateX(-13px);transition:opacity 0.22s ease,transform 0.22s ease;will-change:transform,opacity;svg{fill:currentColor !important;}}&:hover,&:focus{background-color:", ";color:", ";.emailSignUpButtonLabel{transform:translateX(0);}.emailSignUpButtonArrow{opacity:1;transform:translateX(0);}}"], _ref10 => {
   let {
     theme
   } = _ref10;

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

@@ -38,9 +38,7 @@ const FooterNew = _ref => {
   } = _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 displayCopyrightText = typeof copyrightText === 'string' ? copyrightText.trim() : '';
   const validationSchema = yup.object({
     email: yup.string().nullable().transform(value => value === '' ? null : value).email('Please provide a valid email address')
   });
@@ -128,7 +126,7 @@ const FooterNew = _ref => {
     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, {
+  }, rest)), /*#__PURE__*/_react.default.createElement(_FooterNew.FooterCopyright, null, displayCopyrightText.length > 0 && /*#__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, {

package/dist/components/Organisms/FooterNew/FooterNew.md

@@ -11,6 +11,7 @@ import { primaryLinksList, secondaryLinksList } from './dev-data/data';
   primaryLinksList={primaryLinksList}
   secondaryLinksList={secondaryLinksList}
   legalText={footerCopy.copy}
+  copyrightText="© 2026 Comic Relief"
   campaign="Comic Relief"
   showFundraisingRegulatorLogo
   showFacebookSocialIcon

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

@@ -34,90 +34,95 @@ const FooterWrapper = exports.FooterWrapper = _styledComponents.default.footer.a
 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 9rem;}"], (0, _spacing.default)('l'), _ref4 => {
+})(["position:relative;display:block;width:100%;height:100%;max-width:1424px;margin:0 auto;padding:0 ", ";@media ", "{padding:0 ", ";}@media ", "{padding:0 ", ";}"], (0, _spacing.default)('md'), _ref4 => {
   let {
     theme
   } = _ref4;
+  return theme.breakpoints2026('M');
+}, (0, _spacing.default)('l'), _ref5 => {
+  let {
+    theme
+  } = _ref5;
   return theme.breakpoints2026('L');
-});
+}, (0, _spacing.default)('xl'));
 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:", ";opacity:0.8;"], (0, _spacing.default)('md'), _ref5 => {
+})(["text-align:left;margin-top:1rem;margin-bottom:", ";line-height:1.5rem;color:", ";opacity:0.8;"], (0, _spacing.default)('md'), _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.color('white');
 });
 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'), _ref6 => {
+})(["display:flex;flex-direction:column;margin-bottom:", ";gap:", ";@media ", "{flex-direction:row;justify-content:space-between;column-gap:", ";align-items:", ";}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.breakpoints2026('M');
-}, _ref7 => {
+}, (0, _spacing.default)('lg'), _ref8 => {
   let {
     $hasEmailSignup
-  } = _ref7;
+  } = _ref8;
   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'), _ref8 => {
+})(["display:flex;flex-direction:column;gap:", ";@media ", "{flex-direction:column;flex:1 1 auto;min-width:0;}"], (0, _spacing.default)('md'), _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   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%;}"], _ref9 => {
+})(["max-width:100%;@media ", "{max-width:100%;}"], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   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'), _ref10 => {
+})(["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'), _ref11 => {
   let {
     $desktopOnly
-  } = _ref10;
+  } = _ref11;
   if ($desktopOnly) return 'none';
   return 'block';
-}, _ref11 => {
+}, _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.breakpoints2026('M');
-}, _ref12 => {
+}, _ref13 => {
   let {
     $mobileOnly,
     $inTopSection
-  } = _ref12;
+  } = _ref13;
   if ($mobileOnly) return 'none';
   if ($inTopSection) return 'flex';
   return 'block';
-}, _ref13 => {
+}, _ref14 => {
   let {
     $inTopSection
-  } = _ref13;
+  } = _ref14;
   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'), _ref14 => {
+})(["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'), _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.breakpoints2026('M');
 }, (0, _spacing.default)('m'));
 const PrimaryNavItem = exports.PrimaryNavItem = _styledComponents.default.li.withConfig({
@@ -127,16 +132,11 @@ const PrimaryNavItem = exports.PrimaryNavItem = _styledComponents.default.li.wit
 const PrimaryNavLink = exports.PrimaryNavLink = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "FooterNewstyle__PrimaryNavLink",
   componentId: "sc-17mkhu6-9"
-})(["color:", ";text-decoration:none;font-weight:bold;font-size:", ";&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.color('white');
-}, _ref16 => {
+})(["color:", ";text-decoration:none;font-weight:bold;font-size:16px;&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref16 => {
   let {
     theme
   } = _ref16;
-  return theme.fontSize('s');
+  return theme.color('white');
 }, _ref17 => {
   let {
     theme
@@ -146,7 +146,7 @@ const PrimaryNavLink = exports.PrimaryNavLink = (0, _styledComponents.default)(_
 const PrimaryNavText = exports.PrimaryNavText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "FooterNewstyle__PrimaryNavText",
   componentId: "sc-17mkhu6-10"
-})(["color:", ";font-weight:bold;"], _ref18 => {
+})(["color:", ";font-weight:bold;font-size:16px;"], _ref18 => {
   let {
     theme
   } = _ref18;
@@ -173,7 +173,7 @@ const SecondaryNavItem = exports.SecondaryNavItem = _styledComponents.default.li
 const SecondaryNavLink = exports.SecondaryNavLink = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "FooterNewstyle__SecondaryNavLink",
   componentId: "sc-17mkhu6-13"
-})(["text-decoration:none;> span{color:", ";opacity:0.8;text-decoration:underline;text-decoration-color:", ";font-weight:normal;font-size:0.875rem;}@media ", "{> span{text-decoration:none;}}&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref21 => {
+})(["text-decoration:none;> span{color:", ";opacity:0.8;text-decoration:none;text-decoration-color:", ";font-weight:normal;font-size:0.875rem;}&:hover,&:focus{text-decoration:underline;text-decoration-color:", ";}"], _ref21 => {
   let {
     theme
   } = _ref21;
@@ -187,58 +187,53 @@ const SecondaryNavLink = exports.SecondaryNavLink = (0, _styledComponents.defaul
   let {
     theme
   } = _ref23;
-  return theme.breakpoints2026('M');
-}, _ref24 => {
-  let {
-    theme
-  } = _ref24;
   return theme.color('white');
 });
 const SecondaryNavText = exports.SecondaryNavText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "FooterNewstyle__SecondaryNavText",
   componentId: "sc-17mkhu6-14"
-})(["color:", ";opacity:0.8;font-weight:normal;"], _ref25 => {
+})(["color:", ";opacity:0.8;font-weight:normal;"], _ref24 => {
   let {
     theme
-  } = _ref25;
+  } = _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-bottom:", ";", " @media ", "{flex:0 0 auto;margin-top:0;margin-bottom:0;padding-top:", ";display:", ";justify-content:", ";}}@media ", "{display:", ";}"], (0, _spacing.default)('l'), _ref26 => {
+})(["display:flex;flex-direction:row;align-items:center;gap:", ";justify-content:", ";padding-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
-  } = _ref26;
+  } = _ref25;
   return $mobileOnly ? 'flex-start' : 'center';
-}, _ref27 => {
+}, _ref26 => {
   let {
     $mobileOnly
-  } = _ref27;
+  } = _ref26;
   return $mobileOnly ? (0, _spacing.default)('l') : '0';
-}, _ref28 => {
+}, _ref27 => {
   let {
     $desktopOnly
-  } = _ref28;
+  } = _ref27;
   return $desktopOnly && 'display: none;';
-}, _ref29 => {
+}, _ref28 => {
   let {
     theme
-  } = _ref29;
+  } = _ref28;
   return theme.breakpoints2026('M');
-}, _ref30 => {
+}, _ref29 => {
   let {
     $desktopOnly
-  } = _ref30;
+  } = _ref29;
   return $desktopOnly ? (0, _spacing.default)('l') : '0';
-}, _ref31 => {
+}, _ref30 => {
   let {
     $desktopOnly,
     $mobileOnly,
     $showCRLogoOnly,
     $showPairedLogos,
     $showFundraiserAtBottom
-  } = _ref31;
+  } = _ref30;
   // Mobile containers
   if ($mobileOnly && $showFundraiserAtBottom) return 'flex';
   if ($mobileOnly) return 'none';
@@ -248,29 +243,29 @@ const LogosContainer = exports.LogosContainer = _styledComponents.default.div.wi
   if ($desktopOnly && $showPairedLogos) return 'none';
   if ($desktopOnly) return 'none';
   return 'flex';
-}, _ref32 => {
+}, _ref31 => {
   let {
     $desktopOnly,
     $showCRLogoOnly,
     $showFundraiserAtBottom
-  } = _ref32;
+  } = _ref31;
   if ($showFundraiserAtBottom) return 'flex-start';
   if ($desktopOnly && $showCRLogoOnly) return 'flex-end';
   if ($desktopOnly) return 'flex-end';
   return 'center';
-}, _ref33 => {
+}, _ref32 => {
   let {
     theme
-  } = _ref33;
+  } = _ref32;
   return theme.breakpoints2026('L');
-}, _ref34 => {
+}, _ref33 => {
   let {
     $desktopOnly,
     $mobileOnly,
     $showCRLogoOnly,
     $showPairedLogos,
     $showFundraiserAtBottom
-  } = _ref34;
+  } = _ref33;
   // Hide fundraiser at bottom for L+ (it's in TopSection)
   if ($mobileOnly && $showFundraiserAtBottom) return 'none';
   if ($mobileOnly) return 'none';
@@ -284,19 +279,19 @@ const LogosContainer = exports.LogosContainer = _styledComponents.default.div.wi
 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 => {
+})(["color:transparent;border:0;:hover{border:0;}", ""], _ref34 => {
   let {
     animateRotate
-  } = _ref35;
+  } = _ref34;
   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;margin-bottom:", ";@media ", "{margin-bottom:0;}"], (0, _spacing.default)('l'), _ref36 => {
+})(["display:block;width:100%;height:100%;text-align:left;margin-bottom:", ";@media ", "{margin-bottom:0;}"], (0, _spacing.default)('l'), _ref35 => {
   let {
     theme
-  } = _ref36;
+  } = _ref35;
   return theme.breakpoints2026('L');
 });
 const FooterCopyrightText = exports.FooterCopyrightText = (0, _styledComponents.default)(_Text.default).attrs({
@@ -304,9 +299,9 @@ const FooterCopyrightText = exports.FooterCopyrightText = (0, _styledComponents.
 }).withConfig({
   displayName: "FooterNewstyle__FooterCopyrightText",
   componentId: "sc-17mkhu6-18"
-})(["color:", ";opacity:0.8;font-size:0.875rem;margin-bottom:", ";"], _ref37 => {
+})(["color:", ";opacity:0.8;font-size:0.875rem;margin-bottom:", ";"], _ref36 => {
   let {
     theme
-  } = _ref37;
+  } = _ref36;
   return theme.color('white');
 }, (0, _spacing.default)('sm'));

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

@@ -17,4 +17,12 @@ it('renders correctly', () => {
     copyrightText: "\xA9 2026 Comic Relief"
   })).toJSON();
   expect(tree).toMatchSnapshot();
+});
+it('does not render copyright text when not supplied', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_FooterNew.default, {
+    primaryLinksList: _data.testPrimaryLinksList,
+    secondaryLinksList: _data.testSecondaryLinksList,
+    legalText: _footerCopy.default.copy
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
 });