@comicrelief/component-library 8.74.1 → 8.75.0

package/src/components/Organisms/DynamicGallery/DynamicGallery.js

@@ -199,6 +199,7 @@ const DynamicGallery = ({
       $textColour={textColour}
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
+      data-testid="DynamicGalleryOuterWrapper"
     >
       <LightboxContext.Provider
         value={{
@@ -211,7 +212,7 @@ const DynamicGallery = ({
           setFocusedNode
         }}
       >
-        <ImageGrid className="gallery-grid" $maxWidth={maxWidth} onKeyDown={event => handleKeyDown(event)}>
+        <ImageGrid className="gallery-grid" $maxWidth={maxWidth} onKeyDown={event => handleKeyDown(event)} data-testid="DynamicGalleryImageGrid">
           {hasNodes
           && Array(columnCount)
             .fill(null)
@@ -235,11 +236,11 @@ const DynamicGallery = ({
               );
             })}
 
-          <EmptyMessage $isEmpty={!hasNodes}>No images to display</EmptyMessage>
+          <EmptyMessage $isEmpty={!hasNodes} data-testid="DynamicGalleryEmptyMessage">No images to display</EmptyMessage>
         </ImageGrid>
         <Lightbox />
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-        <FocusTrap className="gallery-focus-trap" tabIndex={0}>
+        <FocusTrap className="gallery-focus-trap" tabIndex={0} data-testid="DynamicGalleryFocusTrap">
           <span>End of gallery</span>
         </FocusTrap>
       </LightboxContext.Provider>

package/src/components/Organisms/DynamicGallery/_DynamicGalleryColumn.js

@@ -89,7 +89,7 @@ export default function DynamicGalleryColumn({
   const NodeComponent = useLightbox ? InteractiveGalleryNode : GalleryNode;
 
   return (
-    <Column ref={elRef} className="gallery-column">
+    <Column ref={elRef} className="gallery-column" data-testid="GalleryColumn">
       {nodes
         .map((node, nodeIndex) => {
           // only render nodes that are in the current column;
@@ -112,6 +112,7 @@ export default function DynamicGalleryColumn({
               $focusOutlineColour={focusOutlineColour}
               onPointerUp={useLightbox ? () => handlePointerUp(node) : undefined}
               tabIndex={0}
+              data-testid={`GalleryNode-${nodeIndex}`}
             >
               <ImageContainer
                 className="gallery-node-image"
@@ -119,6 +120,7 @@ export default function DynamicGalleryColumn({
                 $minHeight={String(minHeight) + 'px'}
                 // eslint-disable-next-line prefer-template
                 $maxHeight={String(maxHeight) + 'px'}
+                data-testid={`GalleryImageContainer-${nodeIndex}`}
               >
                 <Picture
                   image={node.image}
@@ -136,7 +138,7 @@ export default function DynamicGalleryColumn({
                   }}
                 />
               </ImageContainer>
-              <Details>
+              <Details data-testid={`GalleryDetails-${nodeIndex}`}>
                 {node.gridBody && <div>{node.gridBody}</div>}
                 {node.gridCaption && <div>{node.gridCaption}</div>}
               </Details>

package/src/components/Organisms/DynamicGallery/_Lightbox.js

@@ -201,19 +201,21 @@ const Lightbox = () => {
   const bodyText = extractNodeText(selectedNode?.lightboxBody);
 
   return (
-    <Container $isOpen={hasNode}>
+    <Container $isOpen={hasNode} data-testid="LightboxContainer">
       <Backdrop
         onPointerUp={() => handleBackdropClick()}
+        data-testid="LightboxBackdrop"
       />
       <Dialog
         ref={dialogRef}
         aria-labelledby="lightboxTitle"
         aria-describedby="lightboxDescription"
+        data-testid="LightboxDialog"
       >
         {hasNode && <ScrollFix />}
-        <LightboxContent>
-          <LightboxImage className="lightbox-image">
-            <LightboxSpinner>
+        <LightboxContent data-testid="LightboxContent">
+          <LightboxImage className="lightbox-image" data-testid="LightboxImage">
+            <LightboxSpinner data-testid="LightboxSpinner">
               <PulseLoader height={16} width={2} color="#E1E2E3" />
             </LightboxSpinner>
             {hasNode && (
@@ -225,18 +227,19 @@ const Lightbox = () => {
                 height={imageDimensions.height}
                 objectFit="contain"
                 onLoad={event => onLoad(event)}
+                data-testid="LightboxPicture"
               />
             )}
-            <PreviousButton type="button" onClick={() => previousNode(selectedNode)}>
+            <PreviousButton type="button" onClick={() => previousNode(selectedNode)} data-testid="LightboxPreviousButton">
               <ScreenReaderOnly>Previous</ScreenReaderOnly>
               <Arrow direction="left" colour="black" size={16} />
             </PreviousButton>
-            <NextButton type="button" onClick={() => nextNode(selectedNode)}>
+            <NextButton type="button" onClick={() => nextNode(selectedNode)} data-testid="LightboxNextButton">
               <ScreenReaderOnly>Next</ScreenReaderOnly>
               <Arrow direction="right" colour="black" size={16} />
             </NextButton>
           </LightboxImage>
-          <LightboxDetails id="lightboxDescription" aria-live="polite" aria-atomic="true">
+          <LightboxDetails id="lightboxDescription" aria-live="polite" aria-atomic="true" data-testid="LightboxDetails">
             {selectedNode?.lightboxBody && (
               <div id="lightboxTitle">
                 {selectedNode.lightboxBody}
@@ -248,7 +251,7 @@ const Lightbox = () => {
               </div>
             )}
           </LightboxDetails>
-          <CloseButton className="close-button" type="button" onClick={() => setSelectedNode(null)}>
+          <CloseButton className="close-button" type="button" onClick={() => setSelectedNode(null)} data-testid="LightboxCloseButton">
             <ScreenReaderOnly>Close</ScreenReaderOnly>
             <Cross colour="black" size={16} />
           </CloseButton>

package/src/components/Organisms/DynamicGallery/__snapshots__/DynamicGallery.test.js.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
+.c18 {
+  transform: rotate(180deg);
+  fill: #000000;
+}
+
+.c20 {
+  transform: rotate(0);
+  fill: #000000;
+}
+
 .c5 {
   display: block;
   width: 100%;
@@ -15,16 +25,6 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   object-fit: cover;
 }
 
-.c18 {
-  transform: rotate(180deg);
-  fill: #000000;
-}
-
-.c20 {
-  transform: rotate(0);
-  fill: #000000;
-}
-
 .c23 {
   fill: #000000;
 }
@@ -310,130 +310,157 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
 
 <div
   className="c0 gallery-container"
+  data-testid="DynamicGalleryOuterWrapper"
 >
   <div
     className="c1 gallery-grid"
+    data-testid="DynamicGalleryImageGrid"
     onKeyDown={[Function]}
   >
     <div
       className="c2 gallery-column"
+      data-testid="GalleryColumn"
     >
       <button
         aria-label=""
         caption=""
         className="c3 gallery-node"
         data-node-index={0}
+        data-testid="GalleryNode-0"
         onPointerUp={[Function]}
         tabIndex={0}
         title=""
       >
         <div
           className="c4 gallery-node-image"
+          data-testid="GalleryImageContainer-0"
         >
           <div
             className="c5"
+            data-testid="PictureWrapper"
           >
             <img
               alt=""
               className="c6 lazyload"
               data-src="image1.jpg"
+              data-testid="Picture"
               onLoad={[Function]}
             />
           </div>
         </div>
         <div
           className="c7"
+          data-testid="GalleryDetails-0"
         />
       </button>
     </div>
     <div
       className="c2 gallery-column"
+      data-testid="GalleryColumn"
     >
       <button
         aria-label=""
         caption=""
         className="c3 gallery-node"
         data-node-index={1}
+        data-testid="GalleryNode-1"
         onPointerUp={[Function]}
         tabIndex={0}
         title=""
       >
         <div
           className="c4 gallery-node-image"
+          data-testid="GalleryImageContainer-1"
         >
           <div
             className="c5"
+            data-testid="PictureWrapper"
           >
             <img
               alt=""
               className="c6 lazyload"
               data-src="image2.jpg"
+              data-testid="Picture"
               onLoad={[Function]}
             />
           </div>
         </div>
         <div
           className="c7"
+          data-testid="GalleryDetails-1"
         />
       </button>
     </div>
     <div
       className="c2 gallery-column"
+      data-testid="GalleryColumn"
     >
       <button
         aria-label=""
         caption=""
         className="c3 gallery-node"
         data-node-index={2}
+        data-testid="GalleryNode-2"
         onPointerUp={[Function]}
         tabIndex={0}
         title=""
       >
         <div
           className="c4 gallery-node-image"
+          data-testid="GalleryImageContainer-2"
         >
           <div
             className="c5"
+            data-testid="PictureWrapper"
           >
             <img
               alt=""
               className="c6 lazyload"
               data-src="image3.jpg"
+              data-testid="Picture"
               onLoad={[Function]}
             />
           </div>
         </div>
         <div
           className="c7"
+          data-testid="GalleryDetails-2"
         />
       </button>
     </div>
     <div
       className="c8"
+      data-testid="DynamicGalleryEmptyMessage"
     >
       No images to display
     </div>
   </div>
   <div
     className="c9"
+    data-testid="LightboxContainer"
   >
     <div
       className="c10"
+      data-testid="LightboxBackdrop"
       onPointerUp={[Function]}
     />
     <dialog
       aria-describedby="lightboxDescription"
       aria-labelledby="lightboxTitle"
       className="c11"
+      data-testid="LightboxDialog"
     >
       <div
         className="c12"
+        data-testid="LightboxContent"
       >
         <div
           className="c13 lightbox-image"
+          data-testid="LightboxImage"
         >
           <div
             className="c14"
+            data-testid="LightboxSpinner"
           >
             <span
               height={16}
@@ -490,6 +517,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
           </div>
           <button
             className="c15 c16"
+            data-testid="LightboxPreviousButton"
             onClick={[Function]}
             type="button"
           >
@@ -512,6 +540,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
           </button>
           <button
             className="c15 c19"
+            data-testid="LightboxNextButton"
             onClick={[Function]}
             type="button"
           >
@@ -537,10 +566,12 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
           aria-atomic="true"
           aria-live="polite"
           className="c21"
+          data-testid="LightboxDetails"
           id="lightboxDescription"
         />
         <button
           className="c15 c22 close-button"
+          data-testid="LightboxCloseButton"
           onClick={[Function]}
           type="button"
         >
@@ -568,6 +599,7 @@ exports[`handle a Dynamic Gallery with mocked gallery nodes 1`] = `
   </div>
   <span
     className="c17 c24 gallery-focus-trap"
+    data-testid="DynamicGalleryFocusTrap"
     tabIndex={0}
   >
     <span>
@@ -808,37 +840,46 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
 
 <div
   className="c0 gallery-container"
+  data-testid="DynamicGalleryOuterWrapper"
 >
   <div
     className="c1 gallery-grid"
+    data-testid="DynamicGalleryImageGrid"
     onKeyDown={[Function]}
   >
     <div
       className="c2"
+      data-testid="DynamicGalleryEmptyMessage"
     >
       No images to display
     </div>
   </div>
   <div
     className="c3"
+    data-testid="LightboxContainer"
   >
     <div
       className="c4"
+      data-testid="LightboxBackdrop"
       onPointerUp={[Function]}
     />
     <dialog
       aria-describedby="lightboxDescription"
       aria-labelledby="lightboxTitle"
       className="c5"
+      data-testid="LightboxDialog"
     >
       <div
         className="c6"
+        data-testid="LightboxContent"
       >
         <div
           className="c7 lightbox-image"
+          data-testid="LightboxImage"
         >
           <div
             className="c8"
+            data-testid="LightboxSpinner"
           >
             <span
               height={16}
@@ -895,6 +936,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
           </div>
           <button
             className="c9 c10"
+            data-testid="LightboxPreviousButton"
             onClick={[Function]}
             type="button"
           >
@@ -917,6 +959,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
           </button>
           <button
             className="c9 c13"
+            data-testid="LightboxNextButton"
             onClick={[Function]}
             type="button"
           >
@@ -942,10 +985,12 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
           aria-atomic="true"
           aria-live="polite"
           className="c15"
+          data-testid="LightboxDetails"
           id="lightboxDescription"
         />
         <button
           className="c9 c16 close-button"
+          data-testid="LightboxCloseButton"
           onClick={[Function]}
           type="button"
         >
@@ -973,6 +1018,7 @@ exports[`renders an empty Dynamic Gallery with no options set 1`] = `
   </div>
   <span
     className="c11 c18 gallery-focus-trap"
+    data-testid="DynamicGalleryFocusTrap"
     tabIndex={0}
   >
     <span>

package/src/components/Organisms/EmailBanner/__snapshots__/EmailBanner.test.js.snap

@@ -625,12 +625,14 @@ exports[`Image banner left orientation renders correctly 1`] = `
               <button
                 className="c21 c22"
                 data-test="subscribe-button"
+                data-testid="Button"
                 disabled={false}
                 type="submit"
               >
                 Sign up
                 <div
                   className=""
+                  data-testid="LoaderContainer"
                 />
               </button>
             </div>
@@ -1267,12 +1269,14 @@ exports[`Image banner renders correctly 1`] = `
               <button
                 className="c21 c22"
                 data-test="subscribe-button"
+                data-testid="Button"
                 disabled={false}
                 type="submit"
               >
                 Sign up
                 <div
                   className=""
+                  data-testid="LoaderContainer"
                 />
               </button>
             </div>
@@ -1909,12 +1913,14 @@ exports[`Text-only email widget renders correctly 1`] = `
               <button
                 className="c21 c22"
                 data-test="subscribe-button"
+                data-testid="Button"
                 disabled={false}
                 type="submit"
               >
                 Sign up
                 <div
                   className=""
+                  data-testid="LoaderContainer"
                 />
               </button>
             </div>
@@ -2551,12 +2557,14 @@ exports[`Text-only email widget with copyColor renders correctly 1`] = `
               <button
                 className="c21 c22"
                 data-test="subscribe-button"
+                data-testid="Button"
                 disabled={false}
                 type="submit"
               >
                 Sign up
                 <div
                   className=""
+                  data-testid="LoaderContainer"
                 />
               </button>
             </div>

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -439,12 +439,14 @@ exports[`renders correctly 1`] = `
         <button
           className="c15 c16"
           data-test="subscribe-button"
+          data-testid="Button"
           disabled={true}
           type="submit"
         >
           Subscribe
           <div
             className=""
+            data-testid="LoaderContainer"
           />
         </button>
       </div>

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -593,9 +593,11 @@ exports[`renders correctly 1`] = `
         >
           <ul
             className="c3"
+            data-testid="SocialIconsList"
           >
             <li
               className="c4"
+              data-testid="SocialIcon-facebook"
             >
               <a
                 className="c5 c6"
@@ -614,6 +616,7 @@ exports[`renders correctly 1`] = `
             </li>
             <li
               className="c4"
+              data-testid="SocialIcon-instagram"
             >
               <a
                 className="c5 c6"
@@ -632,6 +635,7 @@ exports[`renders correctly 1`] = `
             </li>
             <li
               className="c4"
+              data-testid="SocialIcon-twitter"
             >
               <a
                 className="c5 c6"
@@ -650,6 +654,7 @@ exports[`renders correctly 1`] = `
             </li>
             <li
               className="c4"
+              data-testid="SocialIcon-youtube"
             >
               <a
                 className="c5 c6"