@comicrelief/component-library 8.44.3 → 8.45.0

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

@@ -665,15 +665,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -737,8 +733,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
           >
             <span
               className="c16"
-              color="inherit"
-              size="l"
             >
               Enter an amount to give
             </span>
@@ -752,7 +746,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             >
               <span
                 className="c20 c21"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -1473,15 +1466,11 @@ exports[`Monthly donation renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -1545,8 +1534,6 @@ exports[`Monthly donation renders correctly 1`] = `
           >
             <span
               className="c15"
-              color="inherit"
-              size="l"
             >
               Choose an amount to give
             </span>
@@ -1556,8 +1543,6 @@ exports[`Monthly donation renders correctly 1`] = `
           >
             <span
               className="c17 c18"
-              color="inherit"
-              size="s"
             >
               Other amount
             </span>
@@ -1567,7 +1552,6 @@ exports[`Monthly donation renders correctly 1`] = `
             >
               <span
                 className="c21 c22"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -2306,15 +2290,11 @@ exports[`Single donation renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -2335,8 +2315,6 @@ exports[`Single donation renders correctly 1`] = `
           >
             <span
               className="c10"
-              color="inherit"
-              size="l"
             >
               Choose an amount to give
             </span>
@@ -2350,7 +2328,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2387,7 +2364,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2424,7 +2400,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "",
@@ -2461,8 +2436,6 @@ exports[`Single donation renders correctly 1`] = `
           >
             <span
               className="c21 c22"
-              color="inherit"
-              size="s"
             >
               Other amount
             </span>
@@ -2472,7 +2445,6 @@ exports[`Single donation renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",
@@ -3045,15 +3017,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
       >
         <h2
           className="c4"
-          color="white"
-          size="big"
         >
           Donate Now
         </h2>
         <p
           className="c5"
-          color="white"
-          size="m"
         >
           Please help us fund life-changing projects in the UK and around the world.
         </p>
@@ -3074,8 +3042,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           >
             <span
               className="c10"
-              color="inherit"
-              size="l"
             >
               Overridden via the 'choose amount text' props
             </span>
@@ -3089,7 +3055,6 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
             >
               <span
                 className="c14 c15"
-                color="inherit"
                 dangerouslySetInnerHTML={
                   Object {
                     "__html": "£",

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

@@ -342,8 +342,6 @@ exports[`renders correctly 1`] = `
   >
     <h2
       className="c1 c2"
-      color="inherit"
-      size="xxl"
     >
       sign up letter
     </h2>
@@ -352,7 +350,6 @@ exports[`renders correctly 1`] = `
     >
       <span
         className="c4"
-        color="inherit"
       >
         <div
           className="c5"
@@ -376,7 +373,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4 c10"
-            color="inherit"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "First Name",
@@ -412,7 +408,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4 c10"
-            color="inherit"
             dangerouslySetInnerHTML={
               Object {
                 "__html": "Last Name",
@@ -449,7 +444,6 @@ exports[`renders correctly 1`] = `
       >
         <span
           className="c4 c10"
-          color="inherit"
           dangerouslySetInnerHTML={
             Object {
               "__html": "Email Address",
@@ -490,7 +484,6 @@ exports[`renders correctly 1`] = `
         >
           <span
             className="c4"
-            color="inherit"
           >
             Subscribe
           </span>
@@ -505,7 +498,6 @@ exports[`renders correctly 1`] = `
     >
       <span
         className="c4"
-        color="inherit"
       >
         <div
           className="c5"

package/src/components/Organisms/Footer/Footer.md

@@ -1,6 +1,7 @@
 # Footer
 
 ```js
+import Footer from './Footer';
 import data from './data/data';
 import footerCopy from './data/footerCopy';
 
@@ -9,19 +10,19 @@ import footerCopy from './data/footerCopy';
     <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
 
     <p>Overrides allowList functionality for external usage</p>
-    <Footer 
-      navItems={data} 
-      footerCopy={footerCopy.copy} 
-      campaign="Comic Relief" 
-      overrideallowList 
+    <Footer
+      navItems={data}
+      footerCopy={footerCopy.copy}
+      campaign="Comic Relief"
+      overrideallowList
     />
-    
+
     <p>Adding an additionalLegalLine to the top of the footer, add FR logo</p>
-    <Footer 
-      additionalLegalLine="CHICKEN RUN: DAWN OF THE NUGGET ™/ © Aardman. Netflix ™/© Netflix. Used with permission/Wallace & Gromit Ltd. All rights reserved/ Shaun the Sheep © & TM /Morph ©/TM Aardman Animations Ltd. All rights reserved." 
-      navItems={data} 
-      footerCopy={footerCopy.copy} 
-      campaign="Comic Relief" 
+    <Footer
+      additionalLegalLine="CHICKEN RUN: DAWN OF THE NUGGET ™/ © Aardman. Netflix ™/© Netflix. Used with permission/Wallace & Gromit Ltd. All rights reserved/ Shaun the Sheep © & TM /Morph ©/TM Aardman Animations Ltd. All rights reserved."
+      navItems={data}
+      footerCopy={footerCopy.copy}
+      campaign="Comic Relief"
       showFundraisingRegulatorLogo
     />
 </>

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

@@ -1,20 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import spacing from '../../../../theme/shared/spacing';
+import { springScaleAnimation } from '../../../../theme/shared/animations';
 
 const FundraisingRegulatorWrapper = styled.div`
   // Overriding the baked-in styles for ease of update
   width: 75%;
-  margin: ${spacing('lg')} 0;
+  margin: ${({ $noMargin }) => ($noMargin ? '0' : `${spacing('lg')} 0`)};
   max-width: 200px;
 
   img {
     display: block;
   }
+
+  ${({ animateOnHover }) => animateOnHover && springScaleAnimation(true)}
 `;
 
-const FundraisingRegulatorLogo = () => (
-  <FundraisingRegulatorWrapper>
+const FundraisingRegulatorLogo = ({ animateOnHover = false, noMargin = false }) => (
+  <FundraisingRegulatorWrapper animateOnHover={animateOnHover} $noMargin={noMargin}>
     {/* Code from https://www.fundraisingregulator.org.uk/ */}
     {/* eslint-disable-next-line react/jsx-no-target-blank */}
     <a href="https://www.fundraisingregulator.org.uk/validate?registrant=COMIC+RELIEF" className="fr-digital-badge" style={{ height: 'auto', width: '150px', textDecoration: 'none' }} target="_blank">
@@ -24,3 +28,10 @@ const FundraisingRegulatorLogo = () => (
 );
 
 export default FundraisingRegulatorLogo;
+
+FundraisingRegulatorLogo.propTypes = {
+  /** Animate the logo on hover with spring scale animation */
+  animateOnHover: PropTypes.bool,
+  /** Remove the default margin. The redesigned footer does not need it in some cases. */
+  noMargin: PropTypes.bool
+};

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

@@ -52,7 +52,7 @@ const SubNavMenu = styled.ul`
     }
   }
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
     max-height: none;
     height: auto;
 
@@ -74,7 +74,7 @@ const SubNavItem = styled.li`
   background-color: inherit;
   padding: 8px 0;
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
     height: auto;
     margin-top: 12px;
     padding: 0;
@@ -100,7 +100,7 @@ const SubNavItem = styled.li`
     }
   }
 
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
     ${({ column }) => (column === true ? 'flex: 0 0 100%;' : null)};
   }
 `;
@@ -123,7 +123,7 @@ const NavMenu = styled.ul`
   padding: 0 0  ${spacing('xl')};
   border-bottom: 1px solid ${({ theme }) => theme.color('white')};
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
     display: flex;
     flex-wrap: wrap;
     justify-content: start;
@@ -146,12 +146,12 @@ const NavItem = styled.li`
   margin: 0;
   margin-bottom: 1rem;
 
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  @media ${({ theme }) => theme.breakpoints2026('M')} {
     flex: 0 0 30%;
     margin: 0;
   }
 
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
     /* Minus 9% to remove 3 x 1.5% margins from previous rule */
     flex: 0 0 calc(25% - 1rem);
     margin-right: 1rem;
@@ -172,7 +172,7 @@ const NavItem = styled.li`
     line-height: 40px;
     font-weight: 700;
 
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
       font-size: 20px;
       line-height: 40px;
     }
@@ -193,7 +193,7 @@ const NavItem = styled.li`
       right: -25px;
     }
 
-    @media ${({ theme }) => theme.allBreakpoints('M')} {
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
       cursor: default;
       display: inline;