@comicrelief/component-library 7.35.5 → 7.35.7

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js

@@ -15,7 +15,7 @@ import { sizes } from '../../../theme/shared/breakpoint';
 
 const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   // Defaults to mobile config:
-  const [isMobileOrTablet, setIsMobileOrTablet] = useState(true);
+  const [isMobile, setIsMobile] = useState(true);
   const [visibleSlides, setVisibleSlides] = useState(1);
   const [totalSlides, setTotalSlides] = useState(null);
   const [theseItems, setTheseItems] = useState();
@@ -23,14 +23,14 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   // Custom function to let us update the carousel config dynamically
   const screenResize = useCallback(() => {
     const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
-    const isCurrentlyMobile = window.innerWidth < sizes.medium;
+    const isCurrentlyMobile = window.innerWidth < sizes.small;
 
-    if (screenSize !== null && (isMobileOrTablet !== isCurrentlyMobile)) {
-      setIsMobileOrTablet(isCurrentlyMobile);
+    if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
+      setIsMobile(isCurrentlyMobile);
       setVisibleSlides(isCurrentlyMobile ? 1 : 3);
       setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
     }
-  }, [isMobileOrTablet, theseItems]);
+  }, [isMobile, theseItems]);
 
   // Format our data BEFORE we use it in render:
   useEffect(() => {
@@ -38,10 +38,10 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
   }, [setTheseItems, data]);
 
   useEffect(() => {
-    if (window !== 'undefined' && window.innerWidth >= sizes.medium) {
+    if (window !== 'undefined' && window.innerWidth >= sizes.small) {
       // On inital render, update carousel plugin config
       // to suit the non-mobile layout and functionality:
-      setIsMobileOrTablet(false);
+      setIsMobile(false);
       setVisibleSlides(3);
     }
 
@@ -51,7 +51,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 
   if (theseItems && totalSlides === null) {
     // Reflects our two dummy/bookend slides for non-mobile/tablet views:
-    setTotalSlides(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
+    setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
   }
 
   return (
@@ -88,13 +88,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
         <Slider classNameAnimation="wymd-carousel">
 
           {/* Dummy slide for our desired non-mobile layout and functionality */}
-          {isMobileOrTablet === false && (
+          {isMobile === false && (
           <Slide index={0} key={0} />
           )}
 
           {Object.keys(theseItems).map((key, index) => {
             // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
-            const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
+            const thisOffsetIndex = index + (isMobile ? 0 : 1);
 
             return (
               // Calculate the index offset accordingly to reflect the number of slides,
@@ -111,13 +111,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 
                 <div className="all-text-wrapper">
                   <AmountWrapper>
-                    <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">
+                    <Text tag="h1" family="Anton" uppercase weight="normal">
                       {theseItems[key].amount}
                     </Text>
                   </AmountWrapper>
 
                   <CopyWrapper>
-                    <Text tag="p" size="m">
+                    <Text tag="p">
                       {theseItems[key].copy}
                     </Text>
                   </CopyWrapper>
@@ -128,7 +128,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
           })}
 
           {/* Dummy slide for our desired non-mobile layout and functionality */}
-          {isMobileOrTablet === false && (
+          {isMobile === false && (
           <Slide index={theseItems.length + 1} key="bookend-last" />
           )}
 
@@ -145,87 +145,87 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
 WYMDCarousel.propTypes = {
   data: PropTypes.shape({
     // Required 'node' fields:
-    node1_Amount: PropTypes.string.isRequired,
-    node1_Copy: PropTypes.string.isRequired,
-    node1_Image: PropTypes.shape({
+    node1Amount: PropTypes.string.isRequired,
+    node1Copy: PropTypes.string.isRequired,
+    node1Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string.isRequired
       }).isRequired
     }).isRequired,
-    node2_Amount: PropTypes.string.isRequired,
-    node2_Copy: PropTypes.string.isRequired,
-    node2_Image: PropTypes.shape({
+    node2Amount: PropTypes.string.isRequired,
+    node2Copy: PropTypes.string.isRequired,
+    node2Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string.isRequired
       }).isRequired
     }).isRequired,
-    node3_Amount: PropTypes.string.isRequired,
-    node3_Copy: PropTypes.string.isRequired,
-    node3_Image: PropTypes.shape({
+    node3Amount: PropTypes.string.isRequired,
+    node3Copy: PropTypes.string.isRequired,
+    node3Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string.isRequired
       }).isRequired
     }).isRequired,
-    node4_Amount: PropTypes.string.isRequired,
-    node4_Copy: PropTypes.string.isRequired,
-    node4_Image: PropTypes.shape({
+    node4Amount: PropTypes.string.isRequired,
+    node4Copy: PropTypes.string.isRequired,
+    node4Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string.isRequired
       }).isRequired
     }).isRequired,
     // Non-required 'node' fields:
-    node5_Amount: PropTypes.string,
-    node5_Copy: PropTypes.string,
-    node5_Image: PropTypes.shape({
+    node5Amount: PropTypes.string,
+    node5Copy: PropTypes.string,
+    node5Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node6_Amount: PropTypes.string,
-    node6_Copy: PropTypes.string,
-    node6_Image: PropTypes.shape({
+    node6Amount: PropTypes.string,
+    node6Copy: PropTypes.string,
+    node6Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node7_Amount: PropTypes.string,
-    node7_Copy: PropTypes.string,
-    node7_Image: PropTypes.shape({
+    node7Amount: PropTypes.string,
+    node7Copy: PropTypes.string,
+    node7Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node8_Amount: PropTypes.string,
-    node8_Copy: PropTypes.string,
-    node8_Image: PropTypes.shape({
+    node8Amount: PropTypes.string,
+    node8Copy: PropTypes.string,
+    node8Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node9_Amount: PropTypes.string,
-    node9_Copy: PropTypes.string,
-    node9_Image: PropTypes.shape({
+    node9Amount: PropTypes.string,
+    node9Copy: PropTypes.string,
+    node9Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node10_Amount: PropTypes.string,
-    node10_Copy: PropTypes.string,
-    node10_Image: PropTypes.shape({
+    node10Amount: PropTypes.string,
+    node10Copy: PropTypes.string,
+    node10Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node11_Amount: PropTypes.string,
-    node11_Copy: PropTypes.string,
-    node11_Image: PropTypes.shape({
+    node11Amount: PropTypes.string,
+    node11Copy: PropTypes.string,
+    node11Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })
     }),
-    node12_Amount: PropTypes.string,
-    node12_Copy: PropTypes.string,
-    node12_Image: PropTypes.shape({
+    node12Amount: PropTypes.string,
+    node12Copy: PropTypes.string,
+    node12Image: PropTypes.shape({
       file: PropTypes.shape({
         url: PropTypes.string
       })

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -6,7 +6,7 @@ import Text from '../../Atoms/Text/Text';
 const animationSpeed = 0.75;
 
 // Use to calc positions when scaling copy
-const textScaleOffsetA = 50;
+const textScaleOffsetA = 45;
 const textScaleOffsetB = 5;
 
 const ImageWrapper = styled.div`
@@ -21,6 +21,7 @@ const ImageWrapper = styled.div`
   img {
     width: 100%;
     height: auto;
+    display: block;
   }
 
   &:after {
@@ -44,15 +45,28 @@ const ImageWrapper = styled.div`
 `;
 
 const AmountWrapper = styled.div`
-  padding: ${spacing('m')} 0;
-  width: 75%;
-  margin: 0 auto;
+  padding: ${spacing('m')} 0 0.75rem;
+  
+  h1 {
+    font-size: 34px;
+    line-height: 37px;
+    
+    @media ${({ theme }) => theme.breakpoint('small')} {
+      font-size: 40px;
+      line-height: 40px;
+    }
+  }
 `;
 
 const CopyWrapper = styled.div`
-  padding: ${spacing('sm')} 0;
+  padding: 0;
   width: 75%;
   margin: 0 auto;
+
+  p {
+    font-size: ${({ theme }) => theme.fontSize('s')};
+    line-height: ${({ theme }) => theme.fontSize('l')};
+  }
 `;
 
 const Heading = styled(Text)`
@@ -134,19 +148,7 @@ const CarouselWrapper = styled.div`
       text-indent: -9999px;
       background-color: transparent;
       border: none;
-          
-      &:before {
-        content: '';
-        // Do we need some sort of icon here to show it's a button?
-        // background: transparent url(/images/payin/CR__Chevron_D--white.svg) no-repeat;
-        position: absolute;
-        width: 30px;
-        height: 30px;
-        top: 50%;
-        left: 0;
-        transform: translate(0, -50%) rotate(90deg);
-      }
-
+        
       &:after {
         content: "";
         position: absolute;
@@ -155,20 +157,18 @@ const CarouselWrapper = styled.div`
         width: 50%;
         height: 100%;
         transition: opacity 0.2s linear;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95),
+        background: linear-gradient(90deg, rgba(255, 255, 255, 1),
         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
 
 
       &:hover {
-        // TO-DO: accessibiity?
-        // border: 1px solid black;
         &:after {
           opacity: 0.5;
         }
       }
 
-      @media ${({ theme }) => theme.breakpoint('medium')} {
+      @media ${({ theme }) => theme.breakpoint('small')} {
         width: 33.3% !important;
         &:after {
           width: 100%;
@@ -187,8 +187,8 @@ const CarouselWrapper = styled.div`
       &:after {
         left: auto;
         right: 0;
-        background: linear-gradient(270deg, rgba(255, 255, 255, 0.95),
-        rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
+        background: linear-gradient(270deg, rgba(255, 255, 255, 1),
+        rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
     }
       
@@ -214,6 +214,10 @@ const CarouselWrapper = styled.div`
         }
 
         @media ${({ theme }) => theme.breakpoint('medium')} {
+          padding-bottom: ${props => props.tabletHeight}px !important;
+        }
+
+        @media ${({ theme }) => theme.breakpoint('small')} {
           padding-bottom: ${props => props.desktopHeight}px !important;
 
           // All slides:
@@ -237,7 +241,6 @@ const CarouselWrapper = styled.div`
             // Scale down ALL copy
             .all-text-wrapper {
               transition: transform ${animationSpeed}s ease;
-              // HERE
               transform-origin: top;
               transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
             }
@@ -248,9 +251,9 @@ const CarouselWrapper = styled.div`
             .carousel__inner-slide {
               > div:first-child {
                 &:after {
-                  right: calc(-250% - 6px);
+                  right: calc(-300% - 6px);
                   transform: scale(1);
-                  width: 250%;
+                  width: 300%;
                 }
               }
             }
@@ -262,9 +265,9 @@ const CarouselWrapper = styled.div`
                 > div:first-child {
                   transform: scale(1);
                   &:after {
-                    right: calc(-187% - 6px);
+                    right: calc(-222% - 6px);
                     transform: scale(0.5);
-                    width: 250%;
+                    width: 300%;
                   }
                 }
               }
@@ -278,20 +281,66 @@ const CarouselWrapper = styled.div`
                 > div > div:first-child {
                   transform: scale(0.5);
                   &:after {
-                    right: calc(-250% - 6px);
+                    right: calc(-300% - 6px);
                     transform: scale(1);
-                    width: 250%;
+                    width: 300%;
                   }
                 }
                 .all-text-wrapper {
-                  // HERE
                   transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
                 }
               }
             }
           }
         }
-      
+
+        // HERE WE GO
+        // START OF DESKTOP
+        @media ${({ theme }) => theme.breakpoint('medium')} {
+
+          // First
+          &.carousel__slide--visible {
+            .carousel__inner-slide {
+              > div:first-child {
+                &:after {
+                  right: calc(-250% - 6px);
+                  width: 250%;
+                }
+              }
+            }
+
+            // 2nd and 3rd
+            + .carousel__slide--visible {
+              .carousel__inner-slide {
+                > div:first-child {
+                  &:after {
+                    right: calc(-187% - 6px);
+                    width: 250%;
+                  }
+                }
+              }
+
+
+              // 3rd only
+              + .carousel__slide--visible {
+                .carousel__inner-slide {
+                  > div:first-child {
+                    &:after {
+                      right: calc(-250% - 6px);
+                      width: 250%;
+                    }
+                  }
+                }
+              }
+            }
+
+
+          }
+
+        }
+        // END OF DESKTOP
+
+
         .carousel__inner-slide {
           text-align: center;
           display: inline-flex;

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js

@@ -97,19 +97,6 @@ it("renders correctly", () => {
       border: none;
     }
 
-    .c0 .carousel button.carousel__back-button:before,
-    .c0 .carousel button.carousel__next-button:before {
-      content: '';
-      position: absolute;
-      width: 30px;
-      height: 30px;
-      top: 50%;
-      left: 0;
-      -webkit-transform: translate(0,-50%) rotate(90deg);
-      -ms-transform: translate(0,-50%) rotate(90deg);
-      transform: translate(0,-50%) rotate(90deg);
-    }
-
     .c0 .carousel button.carousel__back-button:after,
     .c0 .carousel button.carousel__next-button:after {
       content: "";
@@ -120,7 +107,7 @@ it("renders correctly", () => {
       height: 100%;
       -webkit-transition: opacity 0.2s linear;
       transition: opacity 0.2s linear;
-      background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));
+      background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
     }
 
     .c0 .carousel button.carousel__back-button:hover:after,
@@ -142,7 +129,7 @@ it("renders correctly", () => {
     .c0 .carousel button.carousel__next-button:after {
       left: auto;
       right: 0;
-      background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));
+      background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
     }
 
     .c0 .carousel .wymd-carousel {
@@ -218,7 +205,7 @@ it("renders correctly", () => {
       }
     }
 
-    @media (min-width:1024px) {
+    @media (min-width:740px) {
       .c0 .carousel button.carousel__back-button,
       .c0 .carousel button.carousel__next-button {
         width: 33.3% !important;
@@ -237,6 +224,12 @@ it("renders correctly", () => {
     }
 
     @media (min-width:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 500px !important;
+      }
+    }
+
+    @media (min-width:740px) {
       .c0 .carousel .wymd-carousel .carousel__slide {
         padding-bottom: 475px !important;
       }
@@ -268,17 +261,17 @@ it("renders correctly", () => {
         -webkit-transform-origin: top;
         -ms-transform-origin: top;
         transform-origin: top;
-        -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
-        -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
-        transform: translateY(calc(-50px + 5%)) scale(0.5);
+        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        transform: translateY(calc(-45px + 5%)) scale(0.5);
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
-        right: calc(-250% - 6px);
+        right: calc(-300% - 6px);
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
-        width: 250%;
+        width: 300%;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {
@@ -288,11 +281,11 @@ it("renders correctly", () => {
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
-        right: calc(-187% - 6px);
+        right: calc(-222% - 6px);
         -webkit-transform: scale(0.5);
         -ms-transform: scale(0.5);
         transform: scale(0.5);
-        width: 250%;
+        width: 300%;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
@@ -308,17 +301,34 @@ it("renders correctly", () => {
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
-        right: calc(-250% - 6px);
+        right: calc(-300% - 6px);
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
-        width: 250%;
+        width: 300%;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
-        -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
-        -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
-        transform: translateY(calc(-50px + 5%)) scale(0.5);
+        -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
+        transform: translateY(calc(-45px + 5%)) scale(0.5);
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-250% - 6px);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-187% - 6px);
+        width: 250%;
+      }
+
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
+        right: calc(-250% - 6px);
+        width: 250%;
       }
     }
 

package/src/components/Organisms/WYMDCarousel/_utils.js

@@ -13,7 +13,7 @@ const formatItems = thisData => {
   for (let i = 1; i <= possibleNumberOfNodes; i += 1) {
     // Create a dynamic key prefix based on the counter, obviously matching
     // the naming convention set at the Content Type level in the CMS
-    const thisKeyPrefix = `node${i}_`;
+    const thisKeyPrefix = `node${i}`;
 
     // Make an array of objects, each object representing a specific node and its fields:
     const thisNodeContent = theseKeys
@@ -23,7 +23,7 @@ const formatItems = thisData => {
         // Only assign if we have actually have a value; only the fields for nodes 1-4 are required:
         if (thisData[thisKey]) {
           // Use a repeatable, generic key so rendering is a LOT easier:
-          const simplifedKey = thisKey.split('_').pop().toLowerCase();
+          const simplifedKey = thisKey.split(/([0-9])/).pop().toLowerCase();
           thisFilteredObj[simplifedKey] = thisData[thisKey];
         }
         return thisFilteredObj;