@comicrelief/component-library 8.74.2 → 8.75.1

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

@@ -20,7 +20,6 @@ exports[`handles data structure correctly 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c5:hover,
@@ -375,15 +374,19 @@ exports[`handles data structure correctly 1`] = `
 
 <div
   className="c0"
+  data-testid="CTAMultiCardQueryWrapper"
 >
   <div
     className="c1"
+    data-testid="CTAMultiCardSection"
   >
     <div
       className="c2"
+      data-testid="CTAMultiCardInner"
     >
       <div
         className="c3"
+        data-testid="CTAMultiCardContainer"
       >
         <div
           className="c4"
@@ -400,6 +403,7 @@ exports[`handles data structure correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -408,6 +412,7 @@ exports[`handles data structure correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -482,6 +487,7 @@ exports[`handles data structure correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -490,6 +496,7 @@ exports[`handles data structure correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -528,6 +535,7 @@ exports[`handles data structure correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -536,6 +544,7 @@ exports[`handles data structure correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -690,7 +699,6 @@ exports[`renders 2 columns layout correctly 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c5:hover,
@@ -1071,15 +1079,19 @@ exports[`renders 2 columns layout correctly 1`] = `
 
 <div
   className="c0"
+  data-testid="CTAMultiCardQueryWrapper"
 >
   <div
     className="c1"
+    data-testid="CTAMultiCardSection"
   >
     <div
       className="c2"
+      data-testid="CTAMultiCardInner"
     >
       <div
         className="c3"
+        data-testid="CTAMultiCardContainer"
       >
         <div
           className="c4"
@@ -1096,6 +1108,7 @@ exports[`renders 2 columns layout correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1104,6 +1117,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -1178,6 +1192,7 @@ exports[`renders 2 columns layout correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1186,6 +1201,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -1224,6 +1240,7 @@ exports[`renders 2 columns layout correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1232,6 +1249,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -1386,7 +1404,6 @@ exports[`renders carousel mode correctly 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c5:hover,
@@ -1747,15 +1764,19 @@ exports[`renders carousel mode correctly 1`] = `
 
 <div
   className="c0"
+  data-testid="CTAMultiCardQueryWrapper"
 >
   <div
     className="c1"
+    data-testid="CTAMultiCardSection"
   >
     <div
       className="c2"
+      data-testid="CTAMultiCardInner"
     >
       <div
         className="c3"
+        data-testid="CTAMultiCardContainer"
       >
         <div
           className="c4"
@@ -1772,6 +1793,7 @@ exports[`renders carousel mode correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1780,6 +1802,7 @@ exports[`renders carousel mode correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -1854,6 +1877,7 @@ exports[`renders carousel mode correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1862,6 +1886,7 @@ exports[`renders carousel mode correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -1900,6 +1925,7 @@ exports[`renders carousel mode correctly 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -1908,6 +1934,7 @@ exports[`renders carousel mode correctly 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -2062,7 +2089,6 @@ exports[`renders correctly with data prop 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c5:hover,
@@ -2423,15 +2449,19 @@ exports[`renders correctly with data prop 1`] = `
 
 <div
   className="c0"
+  data-testid="CTAMultiCardQueryWrapper"
 >
   <div
     className="c1"
+    data-testid="CTAMultiCardSection"
   >
     <div
       className="c2"
+      data-testid="CTAMultiCardInner"
     >
       <div
         className="c3"
+        data-testid="CTAMultiCardContainer"
       >
         <div
           className="c4"
@@ -2448,6 +2478,7 @@ exports[`renders correctly with data prop 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -2456,6 +2487,7 @@ exports[`renders correctly with data prop 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -2530,6 +2562,7 @@ exports[`renders correctly with data prop 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -2538,6 +2571,7 @@ exports[`renders correctly with data prop 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />
@@ -2576,6 +2610,7 @@ exports[`renders correctly with data prop 1`] = `
             >
               <div
                 className="c9 lazyload"
+                data-testid="PictureWrapper"
               >
                 <img
                   alt=""
@@ -2584,6 +2619,7 @@ exports[`renders correctly with data prop 1`] = `
                   data-sizes="auto"
                   data-src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   data-srcset="@component-library/src/styleguide/assets/challenge-1.jpg 678w"
+                  data-testid="Picture"
                   src="@component-library/src/styleguide/assets/challenge-1.jpg"
                   srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 />

package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js

@@ -35,8 +35,9 @@ const CTASingleCard = ({ data }) => {
       $paddingAbove={paddingAbove}
       $paddingBelow={paddingBelow}
       $backgroundColor={sectionBackgroundColour}
+      data-testid="CTASingleCardWrapper"
     >
-      <SingleCardInner>
+      <SingleCardInner data-testid="CTASingleCardInner">
         <CTACard
           card={card}
           isCarousel={false}

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

@@ -20,7 +20,6 @@ exports[`renders correctly with data prop 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c3:hover,
@@ -371,9 +370,11 @@ exports[`renders correctly with data prop 1`] = `
 
 <div
   className="c0"
+  data-testid="CTASingleCardWrapper"
 >
   <div
     className="c1"
+    data-testid="CTASingleCardInner"
   >
     <div
       className="c2"
@@ -390,6 +391,7 @@ exports[`renders correctly with data prop 1`] = `
         >
           <div
             className="c7 lazyload"
+            data-testid="PictureWrapper"
           >
             <img
               alt="Example image"
@@ -398,6 +400,7 @@ exports[`renders correctly with data prop 1`] = `
               data-sizes="auto"
               data-src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
               data-srcset="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w"
+              data-testid="Picture"
               src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
               srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             />
@@ -490,7 +493,6 @@ exports[`renders correctly without image 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c3:hover,
@@ -775,9 +777,11 @@ exports[`renders correctly without image 1`] = `
 
 <div
   className="c0"
+  data-testid="CTASingleCardWrapper"
 >
   <div
     className="c1"
+    data-testid="CTASingleCardInner"
   >
     <div
       className="c2"

package/src/components/Molecules/Card/Card.js

@@ -23,9 +23,10 @@ const Card = ({
     $smallBreakpointRowLayout={smallBreakpointRowLayout}
     $mediumBreakpointRowLayout={mediumBreakpointRowLayout}
     {...rest}
+    data-testid="CardContainer"
   >
     {imageLow ? (
-      <Wrapper>
+      <Wrapper data-testid="CardWrapper">
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -44,6 +45,7 @@ const Card = ({
         <Copy
           $smallBreakpointRowLayout={smallBreakpointRowLayout}
           $mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+          data-testid="CardCopy"
         >
           {children}
         </Copy>

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

@@ -52,9 +52,11 @@ exports[`renders correctly 1`] = `
 
 <div
   className="c0"
+  data-testid="CardContainer"
 >
   <div
     className="c1"
+    data-testid="CardCopy"
   >
     <h2>
       Title
@@ -118,11 +120,13 @@ exports[`renders correctly 2`] = `
 
 <div
   className="c0"
+  data-testid="CardContainer"
   mediumBreakpointLayout="Row"
   smallBreakpointLayout="Row"
 >
   <div
     className="c1"
+    data-testid="CardCopy"
   >
     <h2>
       Title
@@ -188,12 +192,15 @@ exports[`renders correctly with no body 1`] = `
 
 <div
   className="c0"
+  data-testid="CardContainer"
 >
   <div
     className="c1"
+    data-testid="CardWrapper"
   >
     <div
       className="c2 lazyload"
+      data-testid="PictureWrapper"
     >
       <img
         alt=""
@@ -202,6 +209,7 @@ exports[`renders correctly with no body 1`] = `
         data-sizes="auto"
         data-src={null}
         data-srcset="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        data-testid="Picture"
         src={null}
         srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       />

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

@@ -193,6 +193,7 @@ exports[`renders Column view correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Happy man going to work"
@@ -201,6 +202,7 @@ exports[`renders Column view correctly 1`] = `
           data-sizes="auto"
           data-src={null}
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src={null}
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -472,6 +474,7 @@ exports[`renders correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -480,6 +483,7 @@ exports[`renders correctly 1`] = `
           data-sizes="auto"
           data-src={null}
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src={null}
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />

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

@@ -53,8 +53,8 @@ const Countdown = ({
   return (
     <>
       {introMessage}
-      <Wrapper>
-        <Digits>
+      <Wrapper data-testid="CountdownWrapper">
+        <Digits data-testid="CountdownDigitsDays">
           <Text color={color} family="Anton" size="xl">
             {countdownTime.days}
           </Text>
@@ -65,7 +65,7 @@ const Countdown = ({
         <Text color={color} family="Anton" size="xl">
           :
         </Text>
-        <Digits>
+        <Digits data-testid="CountdownDigitsHours">
           <Text color={color} family="Anton" size="xl">
             {countdownTime.hours}
           </Text>
@@ -76,7 +76,7 @@ const Countdown = ({
         <Text color={color} family="Anton" size="xl">
           :
         </Text>
-        <Digits>
+        <Digits data-testid="CountdownDigitsMinutes">
           <Text color={color} family="Anton" size="xl">
             {countdownTime.minutes}
           </Text>
@@ -84,7 +84,7 @@ const Countdown = ({
             minutes
           </Text>
         </Digits>
-        <Digits>
+        <Digits data-testid="CountdownDigitsSeconds">
           <Text color={color} family="Anton" size="xl">
             {countdownTime.seconds}
           </Text>