@comicrelief/component-library 8.44.4 → 8.45.0

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;