@comicrelief/component-library 8.77.4 → 8.77.6

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,11 +14,11 @@ import {
   CardLabel,
   CTA,
   CTAText,
-  CTATextUnderline,
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,
-  CardWrapper
+  CardWrapper,
+  CardLinkContent
 } from './CTACard.style';
 
 const CTACard = ({
@@ -51,16 +53,16 @@ const CTACard = ({
       $isCarousel={isCarousel}
       $isFullWidth={effectiveIsFullWidth}
       $columns={columns}
-      $hasLink={hasLink}
     >
       <CardLink
         as={hasLink ? Link : 'div'}
         {...(hasLink ? { href: link, target, rel: external } : {})}
         $isCarousel={isCarousel}
         $isSingleCard={isSingleCard}
-        $isInteractive={hasLink}
+        $hasLink={hasLink}
       >
-        {imageLow && (
+        <CardLinkContent>
+          {imageLow && (
           <ImageWrapper $isSingleCard={isSingleCard}>
             <Picture
               alt={description}
@@ -72,21 +74,21 @@ const CTACard = ({
               height="100%"
             />
           </ImageWrapper>
-        )}
-        <CopyAndLinkSection $isSingleCard={isSingleCard}>
-          <Copy>
-            {isSingleCard && label && (
+          )}
+          <CopyAndLinkSection $isSingleCard={isSingleCard}>
+            <Copy>
+              {isSingleCard && label && (
               <CardLabel>
                 {label}
               </CardLabel>
-            )}
-            {body}
-          </Copy>
-          {linkLabel && (
+              )}
+              {body}
+            </Copy>
+            {linkLabel && (
             <CTA>
               <CTAText>
                 {linkLabel}
-                <CTATextUnderline
+                <CtaTextUnderline
                   src={altCtaUnderline}
                   alt=""
                   aria-hidden="true"
@@ -100,8 +102,9 @@ const CTACard = ({
                 </ArrowIconWrapper>
               </ArrowIconOuter>
             </CTA>
-          )}
-        </CopyAndLinkSection>
+            )}
+          </CopyAndLinkSection>
+        </CardLinkContent>
       </CardLink>
     </CardWrapper>
   );

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,25 @@ 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;
+
+  @media (min-width: ${breakpointValues.L}px) {
+    color: ${({ theme }) => theme.color('grey_4')};
+  }
 `;
 
-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;
+const CardLinkContent = styled.div`
+  display: inherit;
+  flex-direction: inherit;
+  flex: inherit;
+  border-radius: inherit;
+  overflow: hidden;
+  transition: box-shadow 0.35s;
+  ${defaultBoxShadow()}
 `;
 
 // Card wrapper link - makes entire card clickable
@@ -84,12 +85,19 @@ const CardLink = styled.a`
   flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
-  ${defaultBoxShadow()}
   text-decoration: none;
-  overflow: hidden;
-  cursor: ${({ $isInteractive }) => ($isInteractive ? 'pointer' : 'default')};
+  cursor: ${({ $hasLink }) => ($hasLink ? 'pointer' : 'default')};
   box-sizing: border-box;
 
+  ${({ $hasLink }) => $hasLink && css`
+    &:hover,
+    &:focus {
+      ${CardLinkContent} {
+        ${defaultBoxShadow(true)}
+      }
+    }
+  `};
+
   // Side-by-side layout for single card desktop view
   ${({ $isSingleCard }) => $isSingleCard && css`
     @media ${({ theme }) => theme.breakpoints2026('M')} {
@@ -104,39 +112,67 @@ 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 {
 
-      &:hover {
-        ${defaultBoxShadow(true)}
+        ${CTAText} {
+          color: ${({ theme }) => theme.color('red')};
+        }
+
+        ${CtaTextUnderline} {
+          opacity: 1;
+        }
 
+        ${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')} {
+
+      // Allow the nested content and its box-shadow to be completely visible when it's animated upwards:
+      overflow: visible;
+    
+      // Using the 4th, optional 'target child' parameter to target CardLinkContent for the position animation
+      // rather than *this* element, to ensure we don't end up with that infinite bounce bug.
+      ${bounceUpAnimation(true, 10, 2, true)};
+
+      /* Override the transition initially set by bounceUpAnimation (targetting the same child) to tweaked some values,
+      while also ensuring we don't lose the previously-added box-shadow animation by re-adding it here: */
+      > ${CardLinkContent} {
+        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);
@@ -155,10 +191,6 @@ const CardWrapper = styled.div`
   align-self: stretch;
   border-radius: 1rem;
 
-  ${({ $hasLink }) => (!$hasLink && css`
-    ${defaultBoxShadow()}
-  `)}
-
   // Full width mode - always full width, no constraints
   ${({ $isFullWidth }) => $isFullWidth && css`
     width: 100%;
@@ -305,16 +337,16 @@ const CTA = styled.div`
 
 export {
   CardLink,
-  // CardsContainer,
   ImageWrapper,
   CopyAndLinkSection,
   Copy,
   CardLabel,
   CTA,
   CTAText,
-  CTATextUnderline,
+  CtaTextUnderline,
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,
-  CardWrapper
+  CardWrapper,
+  CardLinkContent
 };

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});
   `;