@comicrelief/component-library 8.47.2 → 8.47.4

package/dist/theme/shared/animations.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.springScaleAnimation = exports.logoRotateAnimation = exports.bounceUpAnimation = void 0;
+exports.springScaleAnimation = exports.logoRotateAnimation = exports.formFieldInputAnimation = exports.bounceUpAnimation = void 0;
 var _styledComponents = require("styled-components");
 /**
  * Logo rotation animation on hover
@@ -44,6 +44,18 @@ const springScaleAnimation = function (animateScale) {
   return (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:scale(", ");}"], duration, pullBack, overshoot, scaleFactor);
 };
 
+/**
+ * formFieldInputAnimation on hover / focus-within
+ * Slides the text inside an input a few pixels to the right.
+ * @param {number} shiftPx - Pixel amount to indent the text (default: 4)
+ * @returns {css}
+ */
+exports.springScaleAnimation = springScaleAnimation;
+const formFieldInputAnimation = function () {
+  let shiftPx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
+  return (0, _styledComponents.css)(["input,textarea{text-indent:0;transition:text-indent 0.18s ease;}&:hover input,&:hover textarea,&:focus-within input,&:focus-within textarea{text-indent:", "px;}"], shiftPx);
+};
+
 /**
  * bounceUpAnimation animation on hover
  * Applies a smooth spring-like position transition that moves the element up on hover/focus
@@ -52,7 +64,7 @@ const springScaleAnimation = function (animateScale) {
  * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
  * @returns {css} template literal for the animation
  */
-exports.springScaleAnimation = springScaleAnimation;
+exports.formFieldInputAnimation = formFieldInputAnimation;
 const bounceUpAnimation = function (animateScale) {
   let pixelMovement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
   let bounceIntensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;

package/package.json

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

package/src/components/Atoms/SocialIcons/Icon/Icon.js

@@ -73,6 +73,7 @@ const StyledLink = styled.a`
     background-color: ${({ theme }) => theme.color('grey_4')};
     border-radius: 0.5rem;
     padding: 0.5rem;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/Atoms/SocialIcons/SocialIcons.js

@@ -8,8 +8,10 @@ import spacing from '../../../theme/shared/spacing';
 
 const StyledList = styled.ul`
   display: flex;
+  flex-wrap: ${({ newStyle }) => (newStyle ? 'wrap' : 'nowrap')};
+  gap: ${({ newStyle }) => (newStyle ? `${spacing('l')}` : '0')};
   list-style-type: none;
-  justify-content: ${newStyle => (newStyle ? 'space-around' : 'center')};
+  justify-content: ${newStyle => (newStyle ? 'flex-start' : 'center')};
   margin: ${({ newStyle }) => (newStyle ? `${spacing('lg')} 0` : '0 auto 0 0')};
   padding: 0;
   align-items: center;
@@ -21,11 +23,13 @@ const StyledList = styled.ul`
 `;
 
 const StyledItem = styled.li`
-  width: 48px;
+  width: ${({ newStyle }) => (newStyle ? '54px' : '48px')};
+  height: ${({ newStyle }) => (newStyle ? '54px' : 'auto')};
+  flex: 0 0 ${({ newStyle }) => (newStyle ? '54px' : '48px')};
   margin-right: ${({ newStyle }) => (newStyle ? '0' : spacing('m'))};
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    margin-right: ${({ newStyle }) => (newStyle ? spacing('md') : spacing('m'))};
+    margin-right: ${({ newStyle }) => (newStyle ? 0 : spacing('m'))};
   }
 `;
 

package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -25,11 +25,15 @@ exports[`renders correctly with Comic Relief links 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  gap: 0;
   list-style-type: none;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
@@ -40,6 +44,10 @@ exports[`renders correctly with Comic Relief links 1`] = `
 
 .c1 {
   width: 48px;
+  height: auto;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
   margin-right: 1.5rem;
 }
 
@@ -166,11 +174,15 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  gap: 0;
   list-style-type: none;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
@@ -181,6 +193,10 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 
 .c1 {
   width: 48px;
+  height: auto;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
   margin-right: 1.5rem;
 }
 
@@ -307,11 +323,15 @@ exports[`renders correctly with Sport Relief links 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  gap: 0;
   list-style-type: none;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
@@ -322,6 +342,10 @@ exports[`renders correctly with Sport Relief links 1`] = `
 
 .c1 {
   width: 48px;
+  height: auto;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
   margin-right: 1.5rem;
 }
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Arrow from '../../Atoms/Icons/Arrow';
 import {
   EmailSignUpWrapper,
   LabelWrapper,
@@ -39,7 +40,12 @@ const EmailSignUp = ({ formContext, ...rest }) => {
         </InputWrapper>
         <ButtonWrapper>
           <StyledEmailSignUpButton type="submit" color="white">
-            Sign up
+            <span className="emailSignUpButtonContent">
+              <span className="emailSignUpButtonLabel">Sign up</span>
+              <span className="emailSignUpButtonArrow" aria-hidden="true">
+                <Arrow direction="right" colour="white" size={18} />
+              </span>
+            </span>
           </StyledEmailSignUpButton>
         </ButtonWrapper>
       </FormWrapper>

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

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import Input from '../../Atoms/Input/Input';
 import Button from '../../Atoms/Button/Button';
 import spacing from '../../../theme/shared/spacing';
-import { springScaleAnimation } from '../../../theme/shared/animations';
+import { formFieldInputAnimation } from '../../../theme/shared/animations';
 import fontHelper from '../../../theme/crTheme/fontHelper';
 
 export const EmailSignUpWrapper = styled.div`
@@ -57,15 +57,20 @@ export const StyledEmailInput = styled(Input)`
   overflow: visible;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    ${springScaleAnimation(true, 1.04, 1)}
+    ${formFieldInputAnimation(4)}
   }
 
   input {
     ${({ theme }) => css`
-      ${fontHelper(theme, 'formFieldInput')}
+      // Here we're not using the fontHelper because we want to override the font size. It's a special case where we don't
+      // want the default size for the formFieldInput field type.
+      font-size: 1rem;
+      line-height: 1.25rem;
+      font-family: ${theme.fontFamilies('Montserrat')};
       background-color: ${theme.color('grey_5')};
       border-color: transparent;
-      transition: background-color 0.2s ease;
+      padding-left: 18px;
+      transition: background-color 0.2s ease, text-indent 0.18s ease;
       border: 1px solid ${theme.color('white')};
       color: ${theme.color('white')};
       &::placeholder {
@@ -92,16 +97,61 @@ export const ButtonWrapper = styled.div`
 export const StyledEmailSignUpButton = styled(Button)`
   margin: 0;
   font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
+  padding: ${spacing('md')};
   border-radius: 0.5rem;
+  overflow: hidden;
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
-    ${springScaleAnimation(true, 1.02, 1)}
     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;
+    /* Counterbalance the reserved arrow slot so the label is centered at rest */
+    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;
+    /* Start from the midpoint between the label and the arrow slot */
+    transform: translateX(-13px);
+    transition: opacity 0.22s ease, transform 0.22s ease;
+    will-change: transform, opacity;
+
+    svg {
+      fill: currentColor !important;
+    }
+  }
+
   &:hover,
   &:focus {
-    background-color: ${({ theme }) => theme.color('white')};
+    background-color: ${({ theme }) => theme.color('grey_2')};
     color: ${({ theme }) => theme.color('black')};
+
+    .emailSignUpButtonLabel {
+      transform: translateX(0);
+    }
+
+    .emailSignUpButtonArrow {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 `;

package/src/components/Molecules/HeroBanner/HeroBanner.md

@@ -145,13 +145,11 @@ import variants from './_variants';
   </HeroBanner>
 
   <HeroBanner
-    pageBackgroundColour="grey"
-    textBannerCopyBackgroundColour="deep_violet"
     variant={variants.TEXT_BANNER}
     copyColour="white"
   >
     <Text tag="h1">
-      Responsive Text Banner, default padding
+      Responsive Text Banner, default padding and colours
     </Text>
     <Text tag="p">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

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

@@ -142,7 +142,6 @@ const Copy = styled.div`
     : theme.color('white')
   )};
 
-  
   ${({ variant, theme }) => (variant !== variants.TEXT_BANNER && `
     @media ${theme.breakpoints2026('L')} {
       padding: 2rem 2rem 1.75rem;

package/src/components/Organisms/Footer/FundraisingRegulatorLogo/FundraisingRegulatorLogo.js

@@ -8,13 +8,13 @@ const FundraisingRegulatorWrapper = styled.div`
   // Overriding the baked-in styles for ease of update
   width: 75%;
   margin: ${({ $noMargin }) => ($noMargin ? '0' : `${spacing('lg')} 0`)};
-  max-width: 200px;
+  max-width: 166px;
 
   img {
     display: block;
   }
 
-  ${({ animateOnHover }) => animateOnHover && springScaleAnimation(true)}
+  ${({ animateOnHover }) => animateOnHover && springScaleAnimation(true, 1.03, 1)}
 `;
 
 const FundraisingRegulatorLogo = ({ animateOnHover = false, noMargin = false }) => (

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -164,11 +164,15 @@ exports[`renders correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  gap: 0;
   list-style-type: none;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin: 0 auto 0 0;
   padding: 0;
   -webkit-align-items: center;
@@ -179,6 +183,10 @@ exports[`renders correctly 1`] = `
 
 .c4 {
   width: 48px;
+  height: auto;
+  -webkit-flex: 0 0 48px;
+  -ms-flex: 0 0 48px;
+  flex: 0 0 48px;
   margin-right: 1.5rem;
 }
 

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

@@ -82,7 +82,7 @@ const FooterNew = ({
 
           <LogosContainer $mobileOnly>
             <Brand href="/" title={`Go to ${campaign} homepage`} animateRotate={animateRotate}>
-              <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="59px" sizeMd="72px" rotate={false} campaign={campaign} />
             </Brand>
           </LogosContainer>
 
@@ -154,7 +154,7 @@ const FooterNew = ({
           </FooterCopyright>
 
           <LogosContainer $mobileOnly $showFundraiserAtBottom>
-            {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo />}
+            {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo noMargin />}
           </LogosContainer>
         </InnerWrapper>
       </FooterWrapper>

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

@@ -9,10 +9,15 @@ const FooterWrapper = styled.footer.attrs(() => ({
 }))`
   text-align: left;
   background: ${({ theme }) => theme.color('grey_5')};
-  padding-top: 6rem;
+  padding-top: 4.5rem; // Rather than using lg spacing like below, this needs a bit more space so that it sits 'under' the main content of the page, which has rounded corners behind which you see the black of this footer.
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     padding-bottom: ${spacing('lg')};
   }
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    padding-top: 5.5rem;
+    padding-bottom: 5rem;
+  }
 `;
 
 const InnerWrapper = styled.div`
@@ -22,9 +27,9 @@ const InnerWrapper = styled.div`
   height: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 ${spacing('md')};
+  padding: 0 ${spacing('l')};
   @media ${({ theme }) => theme.breakpoints2026('L')} {
-    padding: 0 ${spacing('md')}};
+    padding: 0 9rem;
   }
 `;
 
@@ -35,7 +40,8 @@ const FooterLegalLine = styled(Text).attrs({
   margin-top: 1rem;
   margin-bottom: ${spacing('md')};
   line-height: 1.5rem;
-  color: ${({ theme }) => theme.color('grey')};
+  color: ${({ theme }) => theme.color('white')};
+  opacity: 0.8;
 `;
 
 const TopSection = styled.div`
@@ -114,6 +120,7 @@ const PrimaryNavLink = styled(Link)`
   color: ${({ theme }) => theme.color('white')};
   text-decoration: none;
   font-weight: bold;
+  font-size: ${({ theme }) => theme.fontSize('s')};
 
   &:hover,
   &:focus {
@@ -150,7 +157,8 @@ const SecondaryNavItem = styled.li`
   &:not(:last-child)::after {
     content: '|';
     margin-left: ${spacing('sm')};
-    color: ${({ theme }) => theme.color('grey')};
+    color: ${({ theme }) => theme.color('white')};
+    opacity: 0.8;
   }
 `;
 
@@ -158,11 +166,12 @@ const SecondaryNavLink = styled(Link)`
   text-decoration: none;
 
   > span {
-    color: ${({ theme }) => theme.color('grey')};
+    color: ${({ theme }) => theme.color('white')};
+    opacity: 0.8;
     text-decoration: underline;
-    text-decoration-color: ${({ theme }) => theme.color('grey')};
+    text-decoration-color: ${({ theme }) => theme.color('white')};
     font-weight: normal;
-    font-size: ${({ theme }) => theme.fontSize('xs')};
+    font-size: 0.875rem;
   }
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
@@ -174,13 +183,14 @@ const SecondaryNavLink = styled(Link)`
   &:hover,
   &:focus {
     text-decoration: underline;
-    text-decoration-color: ${({ theme }) => theme.color('grey')};
+    text-decoration-color: ${({ theme }) => theme.color('white')};
   }
 
 `;
 
 const SecondaryNavText = styled(Text)`
   color: ${({ theme }) => theme.color('white')};
+  opacity: 0.8;
   font-weight: normal;
 `;
 
@@ -190,7 +200,6 @@ const LogosContainer = styled.div`
   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 */
@@ -261,13 +270,19 @@ const FooterCopyright = styled.div`
   width: 100%;
   height: 100%;
   text-align: left;
+  margin-bottom: ${spacing('l')};
+
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    margin-bottom: 0;
+  }
 `;
 
 const FooterCopyrightText = styled(Text).attrs({
   tag: 'p'
 })`
-  color: ${({ theme }) => theme.color('grey')};
-  font-size: ${({ theme }) => theme.fontSize('xs')};
+  color: ${({ theme }) => theme.color('white')};
+  opacity: 0.8;
+  font-size: 0.875rem;
   margin-bottom: ${spacing('sm')};
 `;