@comicrelief/component-library 8.77.5 → 8.77.6

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

@@ -17,7 +17,8 @@ import {
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,
-  CardWrapper
+  CardWrapper,
+  CardLinkContent
 } from './CTACard.style';
 
 const CTACard = ({
@@ -52,7 +53,6 @@ const CTACard = ({
       $isCarousel={isCarousel}
       $isFullWidth={effectiveIsFullWidth}
       $columns={columns}
-      $hasLink={hasLink}
     >
       <CardLink
         as={hasLink ? Link : 'div'}
@@ -61,7 +61,8 @@ const CTACard = ({
         $isSingleCard={isSingleCard}
         $hasLink={hasLink}
       >
-        {imageLow && (
+        <CardLinkContent>
+          {imageLow && (
           <ImageWrapper $isSingleCard={isSingleCard}>
             <Picture
               alt={description}
@@ -73,17 +74,17 @@ 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}
@@ -101,8 +102,9 @@ const CTACard = ({
                 </ArrowIconWrapper>
               </ArrowIconOuter>
             </CTA>
-          )}
-        </CopyAndLinkSection>
+            )}
+          </CopyAndLinkSection>
+        </CardLinkContent>
       </CardLink>
     </CardWrapper>
   );

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

@@ -66,6 +66,16 @@ const CTAText = styled.span`
   }
 `;
 
+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
 const CardLink = styled.a`
   display: flex;
@@ -75,17 +85,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: ${({ $hasLink }) => ($hasLink ? 'pointer' : 'default')};
   box-sizing: border-box;
 
-  &:hover,
-  &:focus {
-    ${defaultBoxShadow(true)}
-  }
+  ${({ $hasLink }) => $hasLink && css`
+    &:hover,
+    &:focus {
+      ${CardLinkContent} {
+        ${defaultBoxShadow(true)}
+      }
+    }
+  `};
 
   // Side-by-side layout for single card desktop view
   ${({ $isSingleCard }) => $isSingleCard && css`
@@ -132,10 +143,19 @@ const CardLink = styled.a`
 
     // 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;
     
-      ${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;
+      // 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 {
@@ -171,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%;
@@ -331,5 +347,6 @@ export {
   ArrowIconOuter,
   ArrowIconInner,
   ArrowIconWrapper,
-  CardWrapper
+  CardWrapper,
+  CardLinkContent
 };