@comicrelief/component-library 8.74.1 → 8.75.0

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

@@ -371,9 +371,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 +392,7 @@ exports[`renders correctly with data prop 1`] = `
         >
           <div
             className="c7 lazyload"
+            data-testid="PictureWrapper"
           >
             <img
               alt="Example image"
@@ -398,6 +401,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"
             />
@@ -775,9 +779,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>

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

@@ -24,256 +24,256 @@ it('renders article teaser correctly', () => {
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
-    .c3 {
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: 400;
-      text-transform: inherit;
-      letter-spacing: 0;
-      font-size: 1rem;
-      line-height: 1.25rem;
-    }
+.c3 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
 
-    .c3 {
-      font-size: 1rem;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: bold;
-      color: #222222;
-    }
+.c3 {
+  font-size: 1rem;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: bold;
+  color: #222222;
+}
 
-    .c3 span {
-      font-size: inherit;
-      line-height: inherit;
-    }
+.c3 span {
+  font-size: inherit;
+  line-height: inherit;
+}
 
-    .c7 {
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: 700;
-      text-transform: inherit;
-      letter-spacing: 0;
-      font-size: 1.25rem;
-      line-height: 1.5rem;
-    }
+.c7 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 700;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
 
-    .c7 span {
-      font-size: inherit;
-      line-height: inherit;
-    }
+.c7 span {
+  font-size: inherit;
+  line-height: inherit;
+}
 
-    .c10 {
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: 400;
-      text-transform: inherit;
-      letter-spacing: 0;
-      font-size: 1rem;
-      line-height: 1.25rem;
-    }
+.c10 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
 
-    .c10 {
-      font-size: 0.75rem;
-      line-height: normal;
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-      font-weight: normal;
-      color: #222222;
-    }
+.c10 {
+  font-size: 0.75rem;
+  line-height: normal;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: normal;
+  color: #222222;
+}
 
-    .c10 span {
-      font-size: inherit;
-      line-height: inherit;
-    }
+.c10 span {
+  font-size: inherit;
+  line-height: inherit;
+}
 
-    .c0 {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      background-color: #FFFFFF;
-      border-radius: 1rem;
-      box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
-    }
+.c0 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: #FFFFFF;
+  border-radius: 1rem;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
 
-    .c1 {
-      padding: 2rem;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
+.c1 {
+  padding: 2rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
 
-    .c2 {
-      display: block;
-    }
+.c2 {
+  display: block;
+}
 
-    .c4 {
-      display: inline-block;
-      margin-bottom: 1rem;
-    }
+.c4 {
+  display: inline-block;
+  margin-bottom: 1rem;
+}
 
-    .c5 {
-      display: flex;
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin-right: 2rem;
-      margin-top: 1.5rem;
-    }
+.c5 {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-right: 2rem;
+  margin-top: 1.5rem;
+}
 
-    .c5 img:not(:last-child) {
-      margin-right: 8px;
-    }
+.c5 img:not(:last-child) {
+  margin-right: 8px;
+}
 
-    .c6 {
-      object-fit: cover;
-      width: 24px;
-      height: 24px;
-    }
+.c6 {
+  object-fit: cover;
+  width: 24px;
+  height: 24px;
+}
 
-    .c8 {
-      margin: 0 0 1.5rem;
-    }
+.c8 {
+  margin: 0 0 1.5rem;
+}
 
-    .c9 {
-      margin: 0 0 1rem 0;
-      display: flex;
-      flex-wrap: wrap;
-    }
+.c9 {
+  margin: 0 0 1rem 0;
+  display: flex;
+  flex-wrap: wrap;
+}
 
-    .c9 span:not(:first-child) {
-      margin-left: 1rem;
-    }
+.c9 span:not(:first-child) {
+  margin-left: 1rem;
+}
 
-    .c9 span:not(:first-child)::before {
-      content: '';
-      position: absolute;
-      left: -9px;
-      bottom: 5px;
-      width: 3px;
-      height: 3px;
-      background-color: currentColor;
-      border-radius: 50%;
-    }
+.c9 span:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  left: -9px;
+  bottom: 5px;
+  width: 3px;
+  height: 3px;
+  background-color: currentColor;
+  border-radius: 50%;
+}
 
-    .c11 {
-      position: relative;
-    }
+.c11 {
+  position: relative;
+}
 
-    .c12 {
-      font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-    }
+.c12 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+}
 
-    @media (min-width: 740px) {
-      .c3 {
-        font-size: 1rem;
-        line-height: 1.25rem;
-      }
-    }
+@media (min-width: 740px) {
+  .c3 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
 
-    @media (min-width: 1024px) {
-      .c3 {
-        font-size: 1.125rem;
-        line-height: 1.375rem;
-      }
-    }
+@media (min-width: 1024px) {
+  .c3 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
 
-    @media (min-width: 740px) {
-      .c7 {
-        font-size: 1.25rem;
-        line-height: 1.5rem;
-      }
-    }
+@media (min-width: 740px) {
+  .c7 {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+  }
+}
 
-    @media (min-width: 1024px) {
-      .c7 {
-        font-size: 1.375rem;
-        line-height: 1.625rem;
-      }
-    }
+@media (min-width: 1024px) {
+  .c7 {
+    font-size: 1.375rem;
+    line-height: 1.625rem;
+  }
+}
 
-    @media (min-width: 740px) {
-      .c10 {
-        font-size: 1rem;
-        line-height: 1.25rem;
-      }
-    }
+@media (min-width: 740px) {
+  .c10 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
 
-    @media (min-width: 1024px) {
-      .c10 {
-        font-size: 1.125rem;
-        line-height: 1.375rem;
-      }
-    }
+@media (min-width: 1024px) {
+  .c10 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
 
-    <article
-      className="c0"
+<article
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <div
+      className="c2"
     >
+      <span
+        className="c3 c4"
+      >
+        15/06/2020
+      </span>
       <div
-        className="c1"
+        className="c5"
       >
-        <div
-          className="c2"
-        >
-          <span
-            className="c3 c4"
-          >
-            15/06/2020
-          </span>
-          <div
-            className="c5"
-          >
-            <img
-              alt="How we fund icon"
-              className="c6"
-              src="mock.asset"
-            />
-            <img
-              alt="Social Tech icon"
-              className="c6"
-              src="mock.asset"
-            />
-            <img
-              alt="Sport for Change icon"
-              className="c6"
-              src="mock.asset"
-            />
-          </div>
-        </div>
-        <h3
-          className="c7 c8"
-        >
-          Title
-        </h3>
-        <div
-          className="c9"
-        >
-          <span
-            className="c10 c11"
-          >
-            tag1
-          </span>
-          <span
-            className="c10 c11"
-          >
-            tag2
-          </span>
-          <span
-            className="c10 c11"
-          >
-            tag3
-          </span>
-          <span
-            className="c10 c11"
-          >
-            tag4
-          </span>
-        </div>
-        <div
-          className="c12"
-        >
-          Description go here...
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        </div>
+        <img
+          alt="How we fund icon"
+          className="c6"
+          src="mock.asset"
+        />
+        <img
+          alt="Social Tech icon"
+          className="c6"
+          src="mock.asset"
+        />
+        <img
+          alt="Sport for Change icon"
+          className="c6"
+          src="mock.asset"
+        />
       </div>
-    </article>
-  `);
+    </div>
+    <h3
+      className="c7 c8"
+    >
+      Title
+    </h3>
+    <div
+      className="c9"
+    >
+      <span
+        className="c10 c11"
+      >
+        tag1
+      </span>
+      <span
+        className="c10 c11"
+      >
+        tag2
+      </span>
+      <span
+        className="c10 c11"
+      >
+        tag3
+      </span>
+      <span
+        className="c10 c11"
+      >
+        tag4
+      </span>
+    </div>
+    <div
+      className="c12"
+    >
+      Description go here...
+      <br />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </div>
+</article>
+`);
 });

package/src/components/Molecules/DoubleCopy/DoubleCopy.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { Section, CopyWrapper } from './DoubleCopy.style';
 
 const DoubleCopy = ({ leftCopy, rightCopy }) => (
-  <Section>
-    <CopyWrapper>{leftCopy}</CopyWrapper>
-    <CopyWrapper>{rightCopy}</CopyWrapper>
+  <Section data-testid="DoubleCopySection">
+    <CopyWrapper data-testid="DoubleCopyLeftWrapper">{leftCopy}</CopyWrapper>
+    <CopyWrapper data-testid="DoubleCopyRightWrapper">{rightCopy}</CopyWrapper>
   </Section>
 );