fix: WYMD Carousel design review updates (#628)

* fix: Scale WYMD carousel text * Tweak * Remove padding to be set within CRcom repo * Formatting
comicrelief · Mar 11, 2024 · d99714e · d99714e
1 parent c8ac5da
commit d99714e
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 28 deletions.
diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js
@@ -108,17 +108,20 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
                   <img src={theseItems[key].image.file.url} alt={theseItems[key].copy} />
                 </ImageWrapper>
 
-                <AmountWrapper>
-                  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
-                    {theseItems[key].amount}
-                  </Text>
-                </AmountWrapper>
-
-                <CopyWrapper>
-                  <Text tag="p" size="l">
-                    {theseItems[key].copy}
-                  </Text>
-                </CopyWrapper>
+                <div className="all-text-wrapper">
+                  <AmountWrapper>
+                    <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
+                      {theseItems[key].amount}
+                    </Text>
+                  </AmountWrapper>
+
+                  <CopyWrapper>
+                    <Text tag="p" size="l">
+                      {theseItems[key].copy}
+                    </Text>
+                  </CopyWrapper>
+                </div>
+
               </Slide>
             );
           })}

diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js
@@ -3,7 +3,11 @@ import spacing from '../../../theme/shared/spacing';
 import Text from '../../Atoms/Text/Text';
 
 // Duration in seconds
-const animationSpeed = 0.5;
+const animationSpeed = 0.75;
+
+// Use to calc positions when scaling copy
+const textScaleOffsetA = 50;
+const textScaleOffsetB = 5;
 
 const ImageWrapper = styled.div`
   width: 33%;
@@ -101,7 +105,6 @@ const Including = styled(Text)`
 // Unfortunately having to target plugin-created markup ye olde fashioned way:
 const CarouselWrapper = styled.div`
   height: 100%;
-  padding: ${spacing('m')};
   background-color: ${({ theme }) => theme.color('white')};
 
   .carousel {
@@ -205,6 +208,7 @@ const CarouselWrapper = styled.div`
 
           // All slides:
           .carousel__inner-slide {
+
             // All 'ImageWrappers':
             > div:first-child {
               transition: transform ${animationSpeed}s ease;
@@ -219,6 +223,14 @@ const CarouselWrapper = styled.div`
                 width: 300%;
               }
             }
+
+            // 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)
+            }
           }
 
           // Our 'first' slide of the three:
@@ -247,6 +259,10 @@ const CarouselWrapper = styled.div`
                 }
               }
 
+              .all-text-wrapper {
+                transform: translateY(0) scale(1);
+              }
+
               // Resets the 3rd slide:
               + .carousel__slide--visible {
                 > div > div:first-child {
@@ -257,6 +273,10 @@ const CarouselWrapper = styled.div`
                     width: 250%;
                   }
                 }
+                .all-text-wrapper {
+                  // HERE
+                  transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
+                }
               }
             }
           }

diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js
@@ -69,7 +69,6 @@ it("renders correctly", () => {
 
     .c0 {
       height: 100%;
-      padding: 1.5rem;
       background-color: #FFFFFF;
     }
 
@@ -142,14 +141,14 @@ it("renders correctly", () => {
     }
 
     .c0 .carousel .wymd-carousel {
-      -webkit-transition: -webkit-transform 0.5s;
-      -webkit-transition: -webkit-transform 0.5s;
-      transition: -webkit-transform 0.5s;
-      -o-transition: transform 0.5s;
-      -webkit-transition: -webkit-transform 0.5s;
-      -webkit-transition: transform 0.5s;
-      transition: transform 0.5s;
-      -webkit-transform: 0.5s;
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      transition: -webkit-transform 0.75s;
+      -o-transition: transform 0.75s;
+      -webkit-transition: -webkit-transform 0.75s;
+      -webkit-transition: transform 0.75s;
+      transition: transform 0.75s;
+      -webkit-transform: 0.75s;
       will-change: transform;
     }
 
@@ -232,25 +231,37 @@ it("renders correctly", () => {
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
-        -webkit-transition: -webkit-transform 0.5s ease;
-        -webkit-transition: transform 0.5s ease;
-        transition: transform 0.5s ease;
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
         -webkit-transform: scale(0.5);
         -ms-transform: scale(0.5);
         transform: scale(0.5);
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {
-        -webkit-transition: -webkit-transform 0.5s ease,width 0.5s ease,right 0.5s ease;
-        -webkit-transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;
-        transition: transform 0.5s ease,width 0.5s ease,right 0.5s ease;
+        -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
+        transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;
         right: calc(-300% - 6px);
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
         width: 300%;
       }
 
+      .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {
+        -webkit-transition: -webkit-transform 0.75s ease;
+        -webkit-transition: transform 0.75s ease;
+        transition: transform 0.75s ease;
+        -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);
+      }
+
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
         right: calc(-250% - 6px);
         -webkit-transform: scale(1);
@@ -273,6 +284,12 @@ it("renders correctly", () => {
         width: 250%;
       }
 
+      .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
+        -webkit-transform: translateY(0) scale(1);
+        -ms-transform: translateY(0) scale(1);
+        transform: translateY(0) scale(1);
+      }
+
       .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {
         -webkit-transform: scale(0.5);
         -ms-transform: scale(0.5);
@@ -286,6 +303,12 @@ it("renders correctly", () => {
         transform: scale(1);
         width: 250%;
       }
+
+      .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);
+      }
     }
 
     <div