fix: Carousel styletweaks (#630)

comicrelief · Mar 11, 2024 · cdad5d0 · cdad5d0
1 parent dcf690c
commit cdad5d0
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js
@@ -59,6 +59,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
       className="CarouselWrapper"
       id={thisID}
       mobileHeight={data.mobileHeight}
+      tabletHeight={data.tabletHeight}
       desktopHeight={data.desktopHeight}
     >
 
@@ -110,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="super">
+                    <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">
                       {theseItems[key].amount}
                     </Text>
                   </AmountWrapper>
 
                   <CopyWrapper>
-                    <Text tag="p" size="l">
+                    <Text tag="p" size="m">
                       {theseItems[key].copy}
                     </Text>
                   </CopyWrapper>
@@ -234,6 +235,7 @@ WYMDCarousel.propTypes = {
     peopleHelpedText: PropTypes.string.isRequired,
     contentful_id: PropTypes.string.isRequired,
     mobileHeight: PropTypes.number,
+    tabletHeight: PropTypes.number,
     desktopHeight: PropTypes.number
   }).isRequired
 };

diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js
@@ -10,9 +10,9 @@ const textScaleOffsetA = 50;
 const textScaleOffsetB = 5;
 
 const ImageWrapper = styled.div`
-  width: 33%;
+  width: 45%;
   display: block;
-  padding: 7%;
+  padding: 9%;
   border: 2px dashed #89888b;
   border-radius: 50%;
   position: relative;
@@ -27,8 +27,8 @@ const ImageWrapper = styled.div`
     position: absolute;
     content: '';
     top: 50%;
-    width: 200%;
-    right: calc(-200% - 8px);
+    width: 125%;
+    right: calc(-125% - 2px);
     height: 2px;
     border-bottom: 2px dashed #89888b;
   }
@@ -63,38 +63,38 @@ const Heading = styled(Text)`
   &:first-child {
     margin-bottom: ${spacing('l')};
     text-align: center;
-    font-size: 20px;
-    line-height: 23px;
+    font-size: 16px;
+    line-height: 19.5px;
 
     @media ${({ theme }) => theme.breakpoint('medium')} {
-      font-size: 21px;
-      line-height: 23px;
+      font-size: 20px;
+      line-height: 24.38px;
     }
   }
 `;
 
 const PeopleHelpedText = styled(Text)`
   margin-bottom: ${spacing('l')};
   text-align: center;
-  font-size: 40px;
-  line-height: 40px;
+  font-size: 34px;
+  line-height: 37px;
 
   @media ${({ theme }) => theme.breakpoint('small')} {
     font-size: 60px;
     line-height: 60px;
   }
 
   @media ${({ theme }) => theme.breakpoint('medium')} {
-    font-size: 75px;
-    line-height: 78px;
+    font-size: 64px;
+    line-height: 68px;
   }
 `;
 
 const Including = styled(Text)`
   margin-bottom: 0;
   text-align: center;
-  font-size: 14px;
-  line-height: 17px;
+  font-size: 12px;
+  line-height: 14.63px;
 
   @media ${({ theme }) => theme.breakpoint('small')} {
     font-size: 17px;
@@ -106,14 +106,20 @@ const Including = styled(Text)`
 const CarouselWrapper = styled.div`
   height: 100%;
   background-color: ${({ theme }) => theme.color('white')};
+  max-width: 760px;
+  padding:  ${spacing('l')};
+  margin: 0 auto;
+  
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 
   .carousel {
     position: relative;
     margin: 0 auto;
     padding-top: ${spacing('l')};
 
     @media ${({ theme }) => theme.breakpoint('medium')} {
-      padding-top: ${spacing('lg')};
+      padding-top: ${spacing('l')};
     }
   
     button.carousel__back-button,
@@ -203,6 +209,10 @@ const CarouselWrapper = styled.div`
       .carousel__slide {
         padding-bottom: ${props => props.mobileHeight}px !important;
 
+        @media ${({ theme }) => theme.breakpoint('small')} {
+          padding-bottom: ${props => props.tabletHeight}px !important;
+        }
+
         @media ${({ theme }) => theme.breakpoint('medium')} {
           padding-bottom: ${props => props.desktopHeight}px !important;
 

diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js
@@ -49,27 +49,32 @@ it("renders correctly", () => {
     .c2:first-child {
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 20px;
-      line-height: 23px;
+      font-size: 16px;
+      line-height: 19.5px;
     }
 
     .c4 {
       margin-bottom: 2rem;
       text-align: center;
-      font-size: 40px;
-      line-height: 40px;
+      font-size: 34px;
+      line-height: 37px;
     }
 
     .c6 {
       margin-bottom: 0;
       text-align: center;
-      font-size: 14px;
-      line-height: 17px;
+      font-size: 12px;
+      line-height: 14.63px;
     }
 
     .c0 {
       height: 100%;
       background-color: #FFFFFF;
+      max-width: 760px;
+      padding: 2rem;
+      margin: 0 auto;
+      border-radius: 20px;
+      box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
     }
 
     .c0 .carousel {
@@ -157,7 +162,7 @@ it("renders correctly", () => {
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide {
-      padding-bottom: 500px !important;
+      padding-bottom: 450px !important;
     }
 
     .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
@@ -181,8 +186,8 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c2:first-child {
-        font-size: 21px;
-        line-height: 23px;
+        font-size: 20px;
+        line-height: 24.38px;
       }
     }
 
@@ -195,8 +200,8 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c4 {
-        font-size: 75px;
-        line-height: 78px;
+        font-size: 64px;
+        line-height: 68px;
       }
     }
 
@@ -209,7 +214,7 @@ it("renders correctly", () => {
 
     @media (min-width:1024px) {
       .c0 .carousel {
-        padding-top: 3rem;
+        padding-top: 2rem;
       }
     }
 
@@ -225,9 +230,15 @@ it("renders correctly", () => {
       }
     }
 
+    @media (min-width:740px) {
+      .c0 .carousel .wymd-carousel .carousel__slide {
+        padding-bottom: 500px !important;
+      }
+    }
+
     @media (min-width:1024px) {
       .c0 .carousel .wymd-carousel .carousel__slide {
-        padding-bottom: 550px !important;
+        padding-bottom: 475px !important;
       }
 
       .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {

diff --git a/src/styleguide/data/data.js b/src/styleguide/data/data.js
@@ -52,8 +52,9 @@ const testImpactSliderItems = [
 const carouselItemsComplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H926',
-  mobileHeight: 500,
-  desktopHeight: 550,
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',
   autoPlay: true,
@@ -65,7 +66,7 @@ const carouselItemsComplete = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support. This node has a load of copy to make things extra difficult',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -146,8 +147,9 @@ const carouselItemsComplete = {
 const carouselItemsIncomplete = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9262',
-  mobileHeight: 500,
-  desktopHeight: 550,
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',
   autoPlay: false,
@@ -159,7 +161,7 @@ const carouselItemsIncomplete = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
@@ -227,8 +229,9 @@ const carouselItemsIncomplete = {
 const carouselItemsMinimal = {
   __typename: 'ContentfulWhatYourMoneyDoesCarousel',
   contentful_id: '7zdR84QkZwrTh9NWx2H9263',
-  mobileHeight: 500,
-  desktopHeight: 550,
+  mobileHeight: 450,
+  tabletHeight: 500,
+  desktopHeight: 475,
   headerCopy: 'Over the past two years, we’ve supported',
   peopleHelpedText: '11.7 million people',
   autoPlay: false,
@@ -240,7 +243,7 @@ const carouselItemsMinimal = {
     }
   },
   node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
-  node2_Amount: '2,000',
+  node2_Amount: '750,000',
   node2_Image: {
     file: {
       url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'