@comicrelief/component-library 8.77.4 → 8.77.5

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -42,11 +42,22 @@ exports[`renders correctly with data prop 1`] = `
   object-fit: cover;
 }
 
+.c17 {
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  transition: opacity 0.15s 0.1s;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .c22 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
   transform: scale(1);
   transform-origin: center;
 }
@@ -103,17 +114,7 @@ exports[`renders correctly with data prop 1`] = `
   text-decoration: none;
   position: relative;
   display: inline-block;
-}
-
-.c17 {
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
+  transition: color 0.35s;
 }
 
 .c4 {
@@ -124,6 +125,7 @@ exports[`renders correctly with data prop 1`] = `
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
+  transition: box-shadow 0.35s;
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
   text-decoration: none;
   overflow: hidden;
@@ -131,9 +133,14 @@ exports[`renders correctly with data prop 1`] = `
   box-sizing: border-box;
 }
 
-.c4 img {
+.c4:hover,
+.c4:focus {
+  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+}
+
+.c4 .c5 img {
   transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
 }
 
 .c2 {
@@ -211,7 +218,7 @@ exports[`renders correctly with data prop 1`] = `
   }
 }
 
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
   .c20 {
     background: #222222;
   }
@@ -285,10 +292,27 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width: 740px) {
+  .c4:hover .c14,
+  .c4:focus .c14 {
+    color: #E52630;
+  }
+
+  .c4:hover .c16,
+  .c4:focus .c16 {
+    opacity: 1;
+  }
+
+  .c4:hover .c19 .c21,
+  .c4:focus .c19 .c21 {
+    transform: scale(1.2);
+  }
+}
+
+@media (min-width: 1024px) {
   .c4 {
     transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     transform-origin: center;
-    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
   }
 
   .c4:hover,
@@ -296,23 +320,28 @@ exports[`renders correctly with data prop 1`] = `
     transform: translateY(-10px);
   }
 
-  .c4:hover {
-    box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
-  }
-
-  .c4:hover .c5 img {
+  .c4:hover .c5 img,
+  .c4:focus .c5 img {
     transform: scale(1.06);
   }
 
-  .c4:hover .c14 {
-    text-decoration: none;
+  .c4:hover .c14,
+  .c4:focus .c14 {
+    color: #E52630;
   }
 
-  .c4:hover .c16 {
+  .c4:hover .c16,
+  .c4:focus .c16 {
     opacity: 1;
   }
 
-  .c4:hover .c19 .c21 {
+  .c4:hover .c19,
+  .c4:focus .c19 {
+    background: #E52630;
+  }
+
+  .c4:hover .c19 .c21,
+  .c4:focus .c19 .c21 {
     transform: scale(1.2);
   }
 }
@@ -501,11 +530,22 @@ exports[`renders correctly without image 1`] = `
   text-decoration: none;
 }
 
+.c13 {
+  height: 4px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -5px;
+  transition: opacity 0.15s 0.1s;
+  opacity: 0;
+  pointer-events: none;
+}
+
 .c18 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16);
   transform: scale(1);
   transform-origin: center;
 }
@@ -547,17 +587,7 @@ exports[`renders correctly without image 1`] = `
   text-decoration: none;
   position: relative;
   display: inline-block;
-}
-
-.c13 {
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
+  transition: color 0.35s;
 }
 
 .c4 {
@@ -568,6 +598,7 @@ exports[`renders correctly without image 1`] = `
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
+  transition: box-shadow 0.35s;
   box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
   text-decoration: none;
   overflow: hidden;
@@ -575,9 +606,9 @@ exports[`renders correctly without image 1`] = `
   box-sizing: border-box;
 }
 
-.c4 img {
-  transform: scale(1);
-  transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
+.c4:hover,
+.c4:focus {
+  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
 }
 
 .c2 {
@@ -655,7 +686,7 @@ exports[`renders correctly without image 1`] = `
   }
 }
 
-@media (min-width:1024px) {
+@media (min-width: 1024px) {
   .c16 {
     background: #222222;
   }
@@ -696,10 +727,27 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width: 740px) {
+  .c4:hover .c10,
+  .c4:focus .c10 {
+    color: #E52630;
+  }
+
+  .c4:hover .c12,
+  .c4:focus .c12 {
+    opacity: 1;
+  }
+
+  .c4:hover .c15 .c17,
+  .c4:focus .c15 .c17 {
+    transform: scale(1.2);
+  }
+}
+
+@media (min-width: 1024px) {
   .c4 {
     transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
     transform-origin: center;
-    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
   }
 
   .c4:hover,
@@ -707,19 +755,23 @@ exports[`renders correctly without image 1`] = `
     transform: translateY(-10px);
   }
 
-  .c4:hover {
-    box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
+  .c4:hover .c10,
+  .c4:focus .c10 {
+    color: #E52630;
   }
 
-  .c4:hover .c10 {
-    text-decoration: none;
+  .c4:hover .c12,
+  .c4:focus .c12 {
+    opacity: 1;
   }
 
-  .c4:hover .c12 {
-    opacity: 1;
+  .c4:hover .c15,
+  .c4:focus .c15 {
+    background: #E52630;
   }
 
-  .c4:hover .c15 .c17 {
+  .c4:hover .c15 .c17,
+  .c4:focus .c15 .c17 {
     transform: scale(1.2);
   }
 }

package/src/components/Molecules/CTA/shared/CTACard.js

@@ -4,6 +4,8 @@ import Picture from '../../../Atoms/Picture/Picture';
 import Link from '../../../Atoms/Link/Link';
 import ArrowIcon from '../../shared/ctaArrow/ArrowIcon';
 import altCtaUnderline from '../../../../theme/shared/assets/alt_cta_underline.svg';
+import { CtaTextUnderline } from '../../shared/ctaText/ctaText.style';
+
 import {
   CardLink,
   ImageWrapper,
@@ -12,7 +14,6 @@ import {
   CardLabel,
   CTA,
   CTAText,
-  CTATextUnderline,
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,
@@ -58,7 +59,7 @@ const CTACard = ({
         {...(hasLink ? { href: link, target, rel: external } : {})}
         $isCarousel={isCarousel}
         $isSingleCard={isSingleCard}
-        $isInteractive={hasLink}
+        $hasLink={hasLink}
       >
         {imageLow && (
           <ImageWrapper $isSingleCard={isSingleCard}>
@@ -86,7 +87,7 @@ const CTACard = ({
             <CTA>
               <CTAText>
                 {linkLabel}
-                <CTATextUnderline
+                <CtaTextUnderline
                   src={altCtaUnderline}
                   alt=""
                   aria-hidden="true"

package/src/components/Molecules/CTA/shared/CTACard.style.js

@@ -4,6 +4,7 @@ import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
 import fontHelper from '../../../../theme/crTheme/fontHelper';
 import defaultBoxShadow from '../../../../theme/shared/boxShadows';
 import { ArrowIconInner, ArrowIconOuter, ArrowIconWrapper } from '../../shared/ctaArrow/CtaArrowCircle.style';
+import { CtaTextUnderline } from '../../shared/ctaText/ctaText.style';
 
 const ImageWrapper = styled.div`
   width: 100%;
@@ -54,25 +55,15 @@ const ImageWrapper = styled.div`
 const CTAText = styled.span`
   ${({ theme }) => fontHelper(theme, 'span')}
   color: ${({ theme }) => theme.color('red')};
-
-  @media (min-width: ${breakpointValues.L}px) {
-    color: ${({ theme }) => theme.color('grey_4')};
-  }
   font-weight: bold;
   text-decoration: none;
   position: relative;
   display: inline-block;
-`;
+  transition: color 0.35s;
 
-const CTATextUnderline = styled.img`
-  height: 4px;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -5px;
-  transition: opacity 0.15s 0.1s;
-  opacity: 0;
-  pointer-events: none;
+  @media (min-width: ${breakpointValues.L}px) {
+    color: ${({ theme }) => theme.color('grey_4')};
+  }
 `;
 
 // Card wrapper link - makes entire card clickable
@@ -84,12 +75,18 @@ const CardLink = styled.a`
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
+  transition: box-shadow 0.35s;
   ${defaultBoxShadow()}
   text-decoration: none;
   overflow: hidden;
-  cursor: ${({ $isInteractive }) => ($isInteractive ? 'pointer' : 'default')};
+  cursor: ${({ $hasLink }) => ($hasLink ? 'pointer' : 'default')};
   box-sizing: border-box;
 
+  &:hover,
+  &:focus {
+    ${defaultBoxShadow(true)}
+  }
+
   // Side-by-side layout for single card desktop view
   ${({ $isSingleCard }) => $isSingleCard && css`
     @media ${({ theme }) => theme.breakpoints2026('M')} {
@@ -104,39 +101,58 @@ const CardLink = styled.a`
     }
   `}
 
-  ${({ $isInteractive }) => $isInteractive && css`
-    img {
+  ${({ $hasLink }) => $hasLink && css`
+    ${ImageWrapper} img {
       ${imageZoom({ initialScale: 1 })}
     }
 
-    // Desktop-only hover effects
     @media ${({ theme }) => theme.allBreakpoints('M')} {
-      ${bounceUpAnimation(true, 10, 1)};
-      /* override the bounceUpAnimation transition */
-      transition: transform 0.4s cubic-bezier(0.68, -1.15, 0.265, 2.35);
+      &:hover,
+      &:focus {
+
+        ${CTAText} {
+          color: ${({ theme }) => theme.color('red')};
+        }
+
+        ${CtaTextUnderline} {
+          opacity: 1;
+        }
 
-      &:hover {
-        ${defaultBoxShadow(true)}
+        ${ArrowIconWrapper} {
+          @media (min-width: ${breakpointValues.L}px) {
+            background: ${({ theme }) => theme.color('red')};
+          }
+
+          ${ArrowIconInner} {
+            transform: scale(1.2);
+          }
+        }
+      }
+    }
 
+    // Desktop-only hover/focus effects
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
+    
+      ${bounceUpAnimation(true, 10, 1)};
+      /* override the bounceUpAnimation transition, ensuring we don't lose the box-shadow animation */
+      transition: transform 0.35s cubic-bezier(0.68, -1.15, 0.265, 2.35), box-shadow 0.35s;
+
+      &:hover,
+      &:focus {
         ${ImageWrapper} img {
           ${imageZoom({ zoomed: true, finalScale: 1.06 })}
         }
 
         ${CTAText} {
-          text-decoration: none;
-          @media (min-width: ${breakpointValues.L}px) {
-            color: ${({ theme }) => theme.color('red')};
-          }
+          color: ${({ theme }) => theme.color('red')};
         }
 
-        ${CTATextUnderline} {
+        ${CtaTextUnderline} {
           opacity: 1;
         }
 
         ${ArrowIconWrapper} {
-          @media (min-width: ${breakpointValues.L}px) {
-            background: ${({ theme }) => theme.color('red')};
-          }
+          background: ${({ theme }) => theme.color('red')};
 
           ${ArrowIconInner} {
             transform: scale(1.2);
@@ -305,14 +321,13 @@ const CTA = styled.div`
 
 export {
   CardLink,
-  // CardsContainer,
   ImageWrapper,
   CopyAndLinkSection,
   Copy,
   CardLabel,
   CTA,
   CTAText,
-  CTATextUnderline,
+  CtaTextUnderline,
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,

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

@@ -61,17 +61,16 @@ const HeroBanner = ({
         <CTAWrapper $variant={variant}>
           {(variant !== variants.TEXT_BANNER) ? (
             <>
-              <CtaText className="cta">
+              <CtaText>
                 {ctaText}
                 <CtaTextUnderline
                   src={altCtaUnderline}
                   alt={ctaText}
-                  className="cta-text-underline"
                 />
               </CtaText>
 
               <CtaIconWrapper>
-                <ArrowIconWrapper $preventHoverColourChange>
+                <ArrowIconWrapper>
                   <ArrowIconInner>
                     <ArrowIcon />
                   </ArrowIconInner>

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

@@ -4,6 +4,7 @@ import { bounceUpAnimation, playPauseReveal } from '../../../theme/shared/animat
 import defaultBoxShadow from '../../../theme/shared/boxShadows';
 import { ArrowIconWrapper, ArrowIconInner } from '../shared/ctaArrow/CtaArrowCircle.style';
 import Picture from '../../Atoms/Picture/Picture';
+import { CtaText, CtaTextUnderline } from '../shared/ctaText/ctaText.style';
 
 // Lil helper function to streamline things somewhat:
 const handleVariant = variant => {
@@ -85,12 +86,13 @@ const MediaWrapper = styled.div`
 
       // Zoom the image in slightly by default so the 'bounce' animation doesn't cause issues
       transform: scale(1.02);
-      transition: transform 0.4s cubic-bezier(0.68, -1.15, 0.265, 2.35);
+      transition: transform 0.35s cubic-bezier(0.68, -1.15, 0.265, 2.35);
 
       ${({ $variant }) => ($variant === variants.HALF_HEIGHT && 'min-height: 450px;')};
    }
 
-    &:has(+ div a:hover) {
+    &:has(+ div a:hover),
+    &:has(+ div a:focus) {
       > div > img {
         transform: scale(1.04);
       }
@@ -196,9 +198,14 @@ const CTAWrapper = styled.div`
   ${({ $variant }) => ($variant !== variants.TEXT_BANNER && css`
     padding-right: 2.5rem;
 
-    span {
+    ${CtaText} {
       font-weight: bold;
+      transition: color 0.35s;
       color: ${({ theme }) => theme.color('red')};
+
+      @media ${({ theme }) => theme.breakpoints2026('L')} {
+        color: ${({ theme }) => theme.color('black')};
+      }
     }
   `)}
 `;
@@ -212,10 +219,30 @@ const HeroBannerLink = styled.a`
     ${defaultBoxShadow()}
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     > div {
       ${defaultBoxShadow(true)}
     }
+
+    @media ${({ theme }) => theme.breakpoints2026('L')} {
+      ${CtaText} {
+        color: ${({ theme }) => theme.color('red')};
+      }
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    &:hover,
+    &:focus {
+      ${CtaTextUnderline}  {
+        opacity: 1;
+      }
+
+      ${ArrowIconWrapper} ${ArrowIconInner} {
+        transform: scale(1.2);
+      }
+    }
   }
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
@@ -229,18 +256,10 @@ const HeroBannerLink = styled.a`
       width: 100%;
     }
 
-    // Fade in the 'Alt CTA'-style squiggley underline:
-    &:hover {
-      img.cta-text-underline {
-        opacity: 1;
-      }
-    }
-  }
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    &:hover {
-      ${ArrowIconWrapper} ${ArrowIconInner} {
-        transform: scale(1.2);
+    &:hover,
+    &:focus {
+      ${ArrowIconWrapper} {
+        background: ${({ theme }) => theme.color('red')};
       }
     }
   }

package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap

@@ -168,10 +168,11 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
     object-position: top center;
     height: 100%;
     transform: scale(1.02);
-    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
 
-  .c2:has(+ div a:hover) >div>img {
+  .c2:has(+ div a:hover) >div>img,
+  .c2:has(+ div a:focus) >div>img {
     transform: scale(1.04);
   }
 }
@@ -441,11 +442,12 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
     object-position: top center;
     height: 100%;
     transform: scale(1.02);
-    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35);
     min-height: 450px;
   }
 
-  .c2:has(+ div a:hover) >div>img {
+  .c2:has(+ div a:hover) >div>img,
+  .c2:has(+ div a:focus) >div>img {
     transform: scale(1.04);
   }
 }
@@ -960,10 +962,11 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
     object-position: top center;
     height: 100%;
     transform: scale(1.02);
-    transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
+    transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35);
   }
 
-  .c2:has(+ div a:hover) >div>img {
+  .c2:has(+ div a:hover) >div>img,
+  .c2:has(+ div a:focus) >div>img {
     transform: scale(1.04);
   }
 }

package/src/components/Molecules/shared/ctaArrow/CtaArrowCircle.style.js

@@ -1,11 +1,10 @@
-import styled, { css } from 'styled-components';
-import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
+import styled from 'styled-components';
 
 const ArrowIconInner = styled.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: transform 0.3s cubic-bezier(0.65, -0.19, 0.37, 1.16);
+  transition: transform 0.35s cubic-bezier(0.65, -0.19, 0.37, 1.16);
   transform: scale(1);
   transform-origin: center;
 `;
@@ -16,11 +15,9 @@ const ArrowIconWrapper = styled.div`
   border-radius: 50%;
   background: ${({ theme }) => theme.color('red')};
 
-  ${({ $preventHoverColourChange }) => !$preventHoverColourChange && css`
-    @media (min-width: ${breakpointValues.L}px) {
-      background: ${({ theme }) => theme.color('grey_4')};
-    }
-  `}
+  @media ${({ theme }) => theme.breakpoints2026('L')} {
+    background: ${({ theme }) => theme.color('grey_4')};
+  }
 
   display: flex;
   align-items: center;

package/src/components/Molecules/shared/ctaText/ctaText.style.js

@@ -9,6 +9,7 @@ const CtaTextUnderline = styled.img`
   bottom: -5px;
   transition: opacity 0.15s 0.1s;
   opacity: 0;
+  pointer-events: none;
 `;
 
 const CtaIconWrapper = styled.div`

package/src/components/Organisms/DonateBanner/Form/PopUpComponent.js

@@ -38,7 +38,7 @@ const StyledPopUp = styled.div`
   overflow: hidden;
   max-height: 350px;
   opacity: 1;
-  animation: 0.4s ${props => props.fadeOpen} ease;
+  animation: 0.35s ${props => props.fadeOpen} ease;
   ${props => props.isClosed && css`
     animation: ${closeDuration}s ${props.fadeClose} ease forwards;
   `}

package/src/theme/shared/animations.js

@@ -31,7 +31,7 @@ const pulseOut = keyframes`
 `;
 
 const pulseInAnimation = css`
-  animation: ${pulseIn} 0.4s ease-in-out forwards;
+  animation: ${pulseIn} 0.35s ease-in-out forwards;
 `;
 
 const pulseOutAnimation = css`
@@ -120,7 +120,9 @@ const imageZoom = (params = {}) => {
 
   return !zoomed ? css`
     transform: scale(${initialScale});
-    transition: transform 0.3s cubic-bezier(0.65, -0.19, 0.37, 1.16);
+    // Also including the box-shadow transform so we don't override it on breakpoints this 
+    // transform is applied to (especially since we're generally using them together):
+    transition: transform 0.35s cubic-bezier(0.65, -0.19, 0.37, 1.16), box-shadow 0.35s;
   ` : css`
     transform: scale(${finalScale});
   `;