@comicrelief/component-library 8.49.0 → 8.50.0

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Picture from '../../../Atoms/Picture/Picture';
+import ArrowIcon from './_ArrowIcon';
+import altCtaUnderline from '../../../../theme/shared/assets/alt_cta_underline.svg';
+import {
+  CardLink,
+  ImageWrapper,
+  CopyAndLinkSection,
+  Copy,
+  CTA,
+  CTAText,
+  CTATextUnderline,
+  ArrowIconWrapper,
+  CardWrapper
+} from './CTACard.style';
+
+const CTACard = ({
+  card,
+  columns,
+  isCarousel,
+  isFullWidth,
+  isSingleCard
+}) => {
+  // isSingleCard implies isFullWidth - single cards are always full width
+  const effectiveIsFullWidth = isSingleCard || isFullWidth;
+
+  const {
+    id,
+    body,
+    link,
+    linkLabel,
+    fallback,
+    imageLow,
+    images,
+    bgColour,
+    description,
+    target,
+    external
+  } = card;
+
+  return (
+    <CardWrapper
+      key={id}
+      isCarousel={isCarousel}
+      isFullWidth={effectiveIsFullWidth}
+      columns={columns}
+    >
+      <CardLink
+        href={link}
+        target={target}
+        rel={external}
+        isCarousel={isCarousel}
+        isSingleCard={isSingleCard}
+        backgroundColor={bgColour}
+      >
+        {imageLow && (
+          <ImageWrapper isSingleCard={isSingleCard}>
+            <Picture
+              alt={description}
+              imageLow={imageLow}
+              images={images}
+              image={fallback}
+              objectFit="cover"
+              width="100%"
+              height="100%"
+            />
+          </ImageWrapper>
+        )}
+        <CopyAndLinkSection backgroundColor={bgColour} isSingleCard={isSingleCard}>
+          <Copy>
+            {body}
+          </Copy>
+          {linkLabel && (
+            <CTA>
+              <CTAText>
+                {linkLabel}
+                <CTATextUnderline
+                  src={altCtaUnderline}
+                  alt=""
+                  aria-hidden="true"
+                />
+              </CTAText>
+              <ArrowIconWrapper>
+                <ArrowIcon />
+              </ArrowIconWrapper>
+            </CTA>
+          )}
+        </CopyAndLinkSection>
+      </CardLink>
+    </CardWrapper>
+  );
+};
+
+CTACard.propTypes = {
+  card: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    body: PropTypes.node,
+    link: PropTypes.string.isRequired,
+    linkLabel: PropTypes.string,
+    fallback: PropTypes.string,
+    imageLow: PropTypes.string,
+    images: PropTypes.string,
+    bgColour: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    target: PropTypes.string.isRequired,
+    external: PropTypes.string
+  }).isRequired,
+  columns: PropTypes.oneOf([2, 3]),
+  isCarousel: PropTypes.bool,
+  isFullWidth: PropTypes.bool,
+  isSingleCard: PropTypes.bool
+};
+
+export default CTACard;

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

@@ -0,0 +1,356 @@
+import styled, { css } from 'styled-components';
+import { bounceUpAnimation, springScaleAnimation } from '../../../../theme/shared/animations';
+import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
+import fontHelper from '../../../../theme/crTheme/fontHelper';
+
+// const CardsContainer = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   width: 100%;
+//   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+//   gap: 1rem;
+
+//   // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
+//   ${({ isCarousel }) => isCarousel && css`
+//     @media (max-width: ${breakpointValues.M - 1}px) {
+//       flex-direction: row;
+//       flex-wrap: nowrap;
+//       overflow-x: visible;
+//       overflow-y: scroll;
+//       -webkit-overflow-scrolling: touch;
+//       scroll-snap-type: x mandatory;
+//       padding: 0.75rem 0.5rem;
+//       margin-left: 0.5rem;
+
+//       scrollbar-width: none;
+//       -ms-overflow-style: none;
+//       &::-webkit-scrollbar {
+//         display: none;
+//       }
+//     }
+//   `}
+
+//   // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
+//   ${({ isCarousel }) => !isCarousel && css`
+//     @media (max-width: ${breakpointValues.M - 1}px) {
+//       flex-direction: column;
+//       background: transparent;
+//     }
+//   `}
+
+//   // Desktop flexbox layout - 2 columns with centered wrap
+//   @media ${({ theme }) => theme.allBreakpoints('M')} {
+//     flex-direction: row;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     align-items: stretch;
+//     width: fit-content;
+//     max-width: 100%;
+//     margin: 0 auto;
+//   }
+
+//   // Desktop grid layout for XL breakpoint - 3 columns
+//   @media ${({ theme }) => theme.allBreakpoints('XL')} {
+//     display: grid;
+//     justify-content: center;
+//     grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
+//     width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
+//     margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
+//     max-width: 100%;
+//   }
+// `;
+
+const ImageWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: transparent;
+  border-radius: 1rem 1rem 0 0;
+
+  // Side-by-side layout: fixed proportion for image (1/3 width) with min/max constraints
+  ${({ isSingleCard }) => isSingleCard && css`
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
+      width: calc(100% / 3);
+      min-width: 292px;
+      max-width: 309px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      height: 100%;
+      border-radius: 1rem 0 0 1rem;
+    }
+
+    @media ${({ theme }) => theme.breakpoints2026('L')} {
+      min-width: 355px;
+      max-width: 362px;
+    }
+
+    @media ${({ theme }) => theme.breakpoints2026('XL')} {
+      min-width: 363px;
+      max-width: 363px;
+    }
+  `}
+
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    display: block;
+
+    // Side-by-side layout: image should fill height on desktop
+    ${({ isSingleCard }) => isSingleCard && css`
+      @media ${({ theme }) => theme.breakpoints2026('M')} {
+        height: 100%;
+        object-fit: cover;
+      }
+    `}
+
+    // Desktop-only image zoom animation on card hover
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      ${springScaleAnimation(true)}
+    }
+  }
+`;
+
+const CTAText = styled.span`
+  ${({ theme }) => fontHelper(theme, 'span')}
+  color: ${({ theme }) => theme.color('grey')};
+  font-weight: bold;
+  text-decoration: none;
+  position: relative;
+  display: inline-block;
+`;
+
+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 ArrowIconWrapper = styled.div`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.color('grey')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+// Card wrapper link - makes entire card clickable
+const CardLink = styled.a`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: 100%;
+  flex: 1 1 auto;
+  background: transparent;
+  border-radius: 1rem;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  // Side-by-side layout for single card desktop view
+  ${({ isSingleCard }) => isSingleCard && css`
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
+      flex-direction: row;
+      align-items: stretch;
+      // the 4 rem below is to account for the padding of the CopyAndLinkSection
+      min-height: calc(219px - 4rem);
+    }
+
+    @media ${({ theme }) => theme.breakpoints2026('L')} {
+      min-height: calc(272px - 4rem);
+    }
+  `}
+
+  img {
+    // Zoom the image in slightly by default so the 'bounce' animation doesn't cause issues
+    transform: scale(1.02);
+    transition: transform ${0.4}s cubic-bezier(0.68, ${-1.15}, 0.265, ${2.35});
+   }
+
+  // Desktop-only hover effects
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    ${bounceUpAnimation(true, 0.02, 1)};
+
+    &:hover {
+      box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
+
+      ${ImageWrapper} img {
+        transform: scale(1.1);
+      }
+
+      ${CTAText} {
+        color: ${({ theme }) => theme.color('red')};
+        text-decoration: none;
+      }
+
+      ${CTATextUnderline} {
+        opacity: 1;
+      }
+
+      ${ArrowIconWrapper} {
+        background: ${({ theme }) => theme.color('red')};
+      }
+    }
+  }
+`;
+
+const CardWrapper = styled.div`
+  width: 100%;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  // Full width mode - always full width, no constraints
+  ${({ isFullWidth }) => isFullWidth && css`
+    width: 100%;
+    max-width: 100%;
+
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      flex-basis: 100%;
+      max-width: 100%;
+      height: auto;
+    }
+
+    @media ${({ theme }) => theme.allBreakpoints('XL')} {
+      flex-basis: 100%;
+      max-width: 100%;
+      height: auto;
+    }
+  `}
+
+  // Carousel mode - fixed card width in horizontal scroll (L and below)
+  ${({ isCarousel, isFullWidth }) => isCarousel && !isFullWidth && css`
+    @media (max-width: ${breakpointValues.L - 1}px) {
+      scroll-snap-align: start;
+      flex: 0 0 309px;
+      width: 309px;
+      flex-shrink: 0;
+    }
+  `}
+
+  // Below L: max-width rules vary by layout
+  ${({ isCarousel, isFullWidth }) => !isCarousel && !isFullWidth && css`
+    /* Below M: stacked cards, keep them centred */
+    @media (max-width: ${breakpointValues.M - 1}px) {
+      max-width: ${({ columns }) => (columns === 3 ? '309px' : '345px')};
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (min-width: ${breakpointValues.M}px) and (max-width: ${breakpointValues.L - 1}px) {
+      align-self: stretch;
+      ${({ columns }) => (columns === 3
+    ? css`
+              flex: 0 0 100%;
+              max-width: 309px;
+              margin-left: auto;
+              margin-right: auto;
+            `
+    : css`
+              flex: 0 0 345px;
+              max-width: 345px;
+              margin-left: 0;
+              margin-right: 0;
+            `)}
+    }
+  `}
+
+  // L breakpoint: min/max rules vary by layout
+  ${({ isFullWidth }) => !isFullWidth && css`
+    @media (min-width: ${breakpointValues.L}px) and (max-width: ${breakpointValues.XL - 1}px) {
+      ${({ columns }) => (
+    columns === 3
+      ? css`
+              flex-basis: calc(33.333% - 1rem);
+              min-width: 286px;
+              max-width: 371px;
+            `
+      : css`
+              flex-basis: calc(50% - 1rem);
+              min-width: 443px;
+              max-width: 564px;
+            `
+  )}
+      align-self: stretch;
+    }
+
+    // XL breakpoint and above: fixed widths vary by layout
+    @media ${({ theme }) => theme.allBreakpoints('XL')} {
+      flex-basis: unset;
+      width: ${({ columns }) => (columns === 3 ? '371px' : '564px')};
+      align-self: stretch;
+    }
+  `}
+`;
+
+const CopyAndLinkSection = styled.div`
+  width: 100%;
+  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  flex: 1;
+  min-height: 0;
+  border-radius: 0 0 1rem 1rem;
+
+  // Side-by-side layout: text section takes remaining width (2/3) with min/max constraints
+  ${({ isSingleCard }) => isSingleCard && css`
+    @media ${({ theme }) => theme.breakpoints2026('M')} {
+      width: calc(200% / 3);
+      min-width: 384px;
+      max-width: 650px;
+      flex: 1;
+      border-radius: 0 1rem 1rem 0;
+    }
+
+    @media ${({ theme }) => theme.breakpoints2026('L')} {
+      min-width: 541px;
+      max-width: 790px;
+    }
+
+    @media ${({ theme }) => theme.breakpoints2026('XL')} {
+      width: 789px;
+    }
+  `}
+`;
+
+const Copy = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`;
+
+const CTA = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: 1rem;
+`;
+
+export {
+  CardLink,
+  // CardsContainer,
+  ImageWrapper,
+  CopyAndLinkSection,
+  Copy,
+  CTA,
+  CTAText,
+  CTATextUnderline,
+  ArrowIconWrapper,
+  CardWrapper
+};

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

@@ -37,7 +37,7 @@ exports[`renders Column view correctly 1`] = `
   text-decoration: none;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
-  min-height: 2.5em;
+  height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
@@ -319,7 +319,7 @@ exports[`renders correctly 1`] = `
   text-decoration: none;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
-  min-height: 2.5em;
+  height: 2.5rem;
   width: 100%;
   -webkit-box-pack: center;
   -webkit-justify-content: center;

package/src/components/Molecules/Countdown/Countdown.js

@@ -58,7 +58,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.days}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             days
           </Text>
         </Digits>
@@ -69,7 +69,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.hours}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             hours
           </Text>
         </Digits>
@@ -80,7 +80,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.minutes}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             minutes
           </Text>
         </Digits>
@@ -88,7 +88,7 @@ const Countdown = ({
           <Text color={color} family="Anton" size="xl">
             {countdownTime.seconds}
           </Text>
-          <Text color={color} size="xs" uppercase>
+          <Text color={color} size="xs">
             seconds
           </Text>
         </Digits>

package/src/components/Molecules/Descriptor/Descriptor.js

@@ -124,7 +124,6 @@ const TagWrapper = styled.div`
 
 const Tag = styled(Text)`
   position: relative;
-  text-transform: uppercase;
 `;
 
 const Description = styled.div`
@@ -172,7 +171,6 @@ const Descriptor = ({
           tag="h3"
           height="2rem"
           weight="normal"
-          uppercase
           family="Anton"
         >
           {title}

package/src/components/Molecules/Descriptor/Descriptor.test.js

@@ -67,7 +67,6 @@ it('renders article teaser correctly', () => {
       font-family: 'Anton',Impact,sans-serif;
       font-weight: normal;
       line-height: 2rem;
-      text-transform: uppercase;
     }
 
     .c7 span {
@@ -189,7 +188,6 @@ it('renders article teaser correctly', () => {
 
     .c11 {
       position: relative;
-      text-transform: uppercase;
     }
 
     .c12 {

package/src/components/Molecules/InfoBanner/InfoBanner.js

@@ -42,7 +42,7 @@ const InfoBanner = ({
 }) => (
   <Container>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Project Name
       </Text>
       <Text tag="p" size="s">
@@ -50,7 +50,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         End Date
       </Text>
       <Text tag="p" size="s">
@@ -58,7 +58,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Funding theme
       </Text>
       <Text tag="p" size="s">
@@ -68,7 +68,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Amount Awarded
       </Text>
       <Text tag="p" size="s">
@@ -82,7 +82,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Start Date
       </Text>
       <Text tag="p" size="s">
@@ -90,7 +90,7 @@ const InfoBanner = ({
       </Text>
     </Info>
     <Info>
-      <Text tag="h3" size="md" uppercase>
+      <Text tag="h3" size="md">
         Beneficiary Country
       </Text>
       <Text tag="p" size="s">

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

@@ -16,7 +16,6 @@ exports[`renders correctly 1`] = `
 .c2 {
   font-size: undefined;
   line-height: normal;
-  text-transform: uppercase;
 }
 
 .c2 span {

package/src/components/Molecules/{CTAMultiCard → OLD_CTAMultiCard}/CTAMultiCard.style.js

@@ -204,6 +204,7 @@ const CardWrapper = styled.div`
   @media ${({ theme, isCarousel }) => theme.allBreakpoints(isCarousel ? 'L' : 'M')} {
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
+    height: 100%;
     align-self: stretch;
   }
 
@@ -211,6 +212,7 @@ const CardWrapper = styled.div`
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-basis: unset;
     max-width: 564px;
+    height: 100%;
     align-self: stretch;
   }
 `;

package/src/components/Molecules/OLD_CTAMultiCard/_ArrowIcon.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledArrowIcon = styled.svg`
+  display: inline-block;
+  color: ${({ theme }) => theme.color('white')};
+  fill: currentColor;
+`;
+
+const ArrowIcon = () => (
+  <StyledArrowIcon
+    width="15"
+    height="13"
+    viewBox="0 0 15 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z" fill="currentColor" />
+  </StyledArrowIcon>
+);
+
+export default ArrowIcon;