@comicrelief/component-library 8.79.0 → 8.80.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.79.0",
+  "version": "8.80.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [

package/src/components/Atoms/Logos/Logo.js

@@ -1,33 +1,13 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import zIndex from '../../../theme/shared/zIndex';
-import spacing from '../../../theme/shared/spacing';
+import { Image, LogoWrapper } from './Logo.style';
+
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
 import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
 import crLogoWide from './assets/cr-logo--wide.svg';
 
-const Image = styled.img`
-  object-fit: cover;
-  width: 100%;
-  display: block;
-  height: auto;
-  margin-right: ${spacing('md')};
-`;
-
-const LogoWrapper = styled.div`
-  display: inline-block;
-  ${zIndex('high')}
-  width: ${props => props.$sizeSm};
-  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
-  vertical-align: bottom; // height fix
-  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
-    width: ${props => props.$sizeMd};
-  }
-`;
-
 const themeSwitcher = theme => {
   switch (theme) {
     case 'Sport Relief':
@@ -42,9 +22,9 @@ const themeSwitcher = theme => {
 };
 
 const Logo = ({
-  rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
+  rotate = false, sizeSm = '51px', sizeMd = '51px', sizeLg = '70px', campaign = 'Comic Relief'
 }) => (
-  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd}>
+  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd} $sizeLg={sizeLg}>
     <Image
       src={themeSwitcher(campaign)}
       alt={
@@ -61,6 +41,7 @@ Logo.propTypes = {
   rotate: PropTypes.bool,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
   campaign: PropTypes.string
 };
 

package/src/components/Atoms/Logos/Logo.style.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import zIndex from '../../../theme/shared/zIndex';
+import spacing from '../../../theme/shared/spacing';
+
+const Image = styled.img`
+  object-fit: cover;
+  width: 100%;
+  display: block;
+  height: auto;
+  margin-right: ${spacing('md')};
+`;
+
+const LogoWrapper = styled.div`
+  display: inline-block;
+  ${zIndex('high')}
+  width: ${props => props.$sizeSm};
+  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
+  vertical-align: bottom; // height fix
+  
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: ${props => props.$sizeMd};
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: ${props => props.$sizeLg};
+  }
+`;
+
+export { Image, LogoWrapper };

package/src/components/Atoms/Logos/Logo.test.js

@@ -23,6 +23,12 @@ it('renders correctly', () => {
   vertical-align: bottom;
 }
 
+@media (min-width: 740px) {
+  .c0 {
+    width: 51px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c0 {
     width: 70px;

package/src/components/Atoms/Logos/LogoExample.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import Logo from './Logo';
 import LogoNav2026 from '../LogoNav2026/_LogoNav2026';
 import { ExampleContainer } from '../../../demos/SharedStyles';
@@ -9,12 +8,12 @@ export default function LogoExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Sport Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" campaign="Sport Relief" />
       </ExampleContainer>
 
       <ExampleContainer>

package/src/components/Molecules/LogoLinked/LogoLinked.js

@@ -5,7 +5,7 @@ import Logo from '../../Atoms/Logos/Logo';
 import { TitleLabel, LogoLink } from './LogoLinked.style';
 
 const LogoLinked = ({
-  sizeSm, sizeMd,
+  sizeSm, sizeMd, sizeLg,
   campaign = 'Comic Relief',
   title = 'Go to Comic Relief homepage',
   url = '/',
@@ -25,6 +25,9 @@ const LogoLinked = ({
           rotate={false}
           campaign="Sport Relief"
           title="Sport Relief in homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Sport Relief homepage</TitleLabel>
       </LogoLink>
@@ -45,6 +48,7 @@ const LogoLinked = ({
           title="Go to Comic Relief homepage"
           sizeSm={sizeSm}
           sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
@@ -67,6 +71,7 @@ const LogoLinked = ({
           title="Go to Comic Relief homepage"
           sizeSm={sizeSm}
           sizeMd={sizeMd}
+          sizeLg={sizeLg}
         />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
@@ -86,6 +91,7 @@ const LogoLinked = ({
         title={title}
         sizeSm={sizeSm}
         sizeMd={sizeMd}
+        sizeLg={sizeLg}
       />
       <TitleLabel>{title}</TitleLabel>
     </LogoLink>
@@ -100,6 +106,7 @@ LogoLinked.propTypes = {
   url: PropTypes.string,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
   newTab: PropTypes.bool
 };
 

package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx

@@ -7,7 +7,7 @@ export default function LogoLinkedExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief (default)</h3>
-        <LogoLinked sizeSm="50px" sizeMd="60px" />
+        <LogoLinked sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
@@ -16,6 +16,7 @@ export default function LogoLinkedExample() {
           campaign="Comic Relief wide"
           sizeSm="150px"
           sizeMd="150px"
+          sizeLg="150px"
           url="https://www.comicrelief.com"
           newTab
           animatePulse
@@ -27,7 +28,8 @@ export default function LogoLinkedExample() {
         <LogoLinked
           campaign="Sport Relief"
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
         />
       </ExampleContainer>
 
@@ -36,7 +38,8 @@ export default function LogoLinkedExample() {
         <LogoLinked
           campaign="Pride"
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
         />
       </ExampleContainer>
 
@@ -44,7 +47,8 @@ export default function LogoLinkedExample() {
         <h3>Comic Relief (default) w/rotation animation</h3>
         <LogoLinked
           sizeSm="50px"
-          sizeMd="60px"
+          sizeMd="50px"
+          sizeLg="60px"
           animateRotate
         />
       </ExampleContainer>

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

@@ -35,7 +35,7 @@ const Footer = ({
             </SocialIconWrapper>
 
             <Brand href="/" title={`Go to ${campaign} homepage`} data-test="footer-logo">
-              <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="48px" sizeMd="48px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
           <FooterNav navItems={navItems} overrideallowList={overrideallowList} {...rest} />

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

@@ -403,6 +403,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c10 {
+    width: 48px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c10 {
     width: 72px;

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

@@ -80,7 +80,7 @@ const FooterNew = ({
 
           <LogosContainer $mobileOnly>
             <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-              <Logo sizeSm="59px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="59px" sizeMd="59px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </LogosContainer>
 
@@ -110,12 +110,12 @@ const FooterNew = ({
             </TopSectionLeft>
             <LogosContainer $desktopOnly $showCRLogoOnly>
               <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="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} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="59px" rotate={false} campaign={campaign} />
               </Brand>
               {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo animateOnHover noMargin />}
             </LogosContainer>

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

@@ -625,12 +625,24 @@ exports[`does not render copyright text when not supplied 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;
@@ -1953,12 +1965,24 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;

package/src/components/Organisms/Header2025/Header2025.js

@@ -18,7 +18,8 @@ const Header2025 = ({
         <LogoLinked
           campaign={campaign}
           sizeSm="50px"
-          sizeMd="55px"
+          sizeMd="50px"
+          sizeLg="55px"
           animateRotate
         />
       </Brand>