@comicrelief/component-library 8.51.2 → 8.51.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.51.2",
+  "version": "8.51.4",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -48,8 +48,8 @@ export const InputWrapper = styled.div`
   width: 100%;
   overflow: visible;
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    width: auto;
-    min-width: 360px;
+    width: 100%;
+    max-width: 364px;
   }
 `;
 
@@ -69,7 +69,8 @@ export const StyledEmailInput = styled(Input)`
       font-family: ${theme.fontFamilies('Montserrat')};
       background-color: ${theme.color('grey_5')};
       border-color: transparent;
-      padding-left: 18px;
+      height: 44px;
+      padding: 12px 2.4rem 12px 18px;
       transition: background-color 0.2s ease, text-indent 0.18s ease;
       border: 1px solid ${theme.color('white')};
       color: ${theme.color('white')};
@@ -90,19 +91,25 @@ export const ButtonWrapper = styled.div`
   justify-content: center;
   width: 100%;
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    width: auto;
+  width: 100%;
+  max-width: 123px;
+  flex: 0 0 auto;
   }
 `;
 
 export const StyledEmailSignUpButton = styled(Button)`
   margin: 0;
   font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
-  padding: ${spacing('md')};
+  height: 44px;
+  padding: 0 ${spacing('md')};
   border-radius: 0.5rem;
   overflow: hidden;
+  min-width: max-content;
+  width: 100%;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     margin: 0;
+    max-width: 123px;
   }
 
   .emailSignUpButtonContent {
@@ -113,14 +120,18 @@ export const StyledEmailSignUpButton = styled(Button)`
     align-items: center;
     justify-content: center;
     line-height: 1;
+    white-space: nowrap;
   }
 
   .emailSignUpButtonLabel {
     display: inline-block;
+    font-size: 16px;
+    line-height: 1;
     /* Counterbalance the reserved arrow slot so the label is centered at rest */
     transform: translateX(13px);
     transition: transform 0.22s ease;
     will-change: transform;
+    white-space: nowrap;
   }
 
   .emailSignUpButtonArrow {

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

@@ -45,9 +45,7 @@ const FooterNew = ({
   // 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
@@ -141,7 +139,7 @@ const FooterNew = ({
           <SecondaryNav navItems={secondaryLinksList} {...rest} />
 
           <FooterCopyright>
-            {displayCopyrightText && (
+            {displayCopyrightText.length > 0 && (
               <FooterCopyrightText>
                 {displayCopyrightText}
               </FooterCopyrightText>

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

@@ -25,11 +25,16 @@ const InnerWrapper = styled.div`
   display: block;
   width: 100%;
   height: 100%;
-  max-width: 1200px;
+  max-width: 1424px; // 1200 + 64px padding on each side
   margin: 0 auto;
-  padding: 0 ${spacing('l')};
+  padding: 0 ${spacing('md')};
+
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
+    padding: 0 ${spacing('l')};
+  }
+
   @media ${({ theme }) => theme.breakpoints2026('L')} {
-    padding: 0 9rem;
+    padding: 0 ${spacing('xl')};
   }
 `;
 
@@ -53,6 +58,7 @@ const TopSection = styled.div`
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     flex-direction: row;
     justify-content: space-between;
+    column-gap: ${spacing('lg')};
     align-items: ${({ $hasEmailSignup }) => ($hasEmailSignup ? 'flex-start' : 'center')};
   }
 `;
@@ -64,7 +70,8 @@ const TopSectionLeft = styled.div`
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     flex-direction: column;
-    flex: 0 0 auto;
+    flex: 1 1 auto;
+    min-width: 0;
   }
 `;
 
@@ -120,7 +127,7 @@ const PrimaryNavLink = styled(Link)`
   color: ${({ theme }) => theme.color('white')};
   text-decoration: none;
   font-weight: bold;
-  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-size: 16px;
 
   &:hover,
   &:focus {
@@ -132,6 +139,7 @@ const PrimaryNavLink = styled(Link)`
 const PrimaryNavText = styled(Text)`
   color: ${({ theme }) => theme.color('white')};
   font-weight: bold;
+  font-size: 16px;
 `;
 
 const SecondaryNav = styled.nav`
@@ -168,18 +176,12 @@ const SecondaryNavLink = styled(Link)`
   > span {
     color: ${({ theme }) => theme.color('white')};
     opacity: 0.8;
-    text-decoration: underline;
+    text-decoration: none;
     text-decoration-color: ${({ theme }) => theme.color('white')};
     font-weight: normal;
     font-size: 0.875rem;
   }
 
-  @media ${({ theme }) => theme.breakpoints2026('M')} {
-    > span {
-      text-decoration: none;
-    }
-  }
-
   &:hover,
   &:focus {
     text-decoration: underline;
@@ -200,7 +202,7 @@ const LogosContainer = styled.div`
   align-items: center;
   gap: ${spacing('l')};
   justify-content: ${({ $mobileOnly }) => ($mobileOnly ? 'flex-start' : 'center')};
-  margin-bottom: ${({ $mobileOnly }) => ($mobileOnly ? spacing('l') : '0')};
+  padding-bottom: ${({ $mobileOnly }) => ($mobileOnly ? spacing('l') : '0')};
 
   /* Hide desktop containers on mobile */
   ${({ $desktopOnly }) => $desktopOnly && 'display: none;'}

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

@@ -22,3 +22,15 @@ it('renders correctly', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('does not render copyright text when not supplied', () => {
+  const tree = renderWithTheme(
+    <FooterNew
+      primaryLinksList={testPrimaryLinksList}
+      secondaryLinksList={testSecondaryLinksList}
+      legalText={footerCopy.copy}
+    />
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});