From cdad5d05e8746d2ee3d58b9f8fd0ba6463cd7469 Mon Sep 17 00:00:00 2001 From: Andy E Phipps Date: Mon, 11 Mar 2024 16:36:48 +0000 Subject: [PATCH] fix: Carousel styletweaks (#630) --- .../Organisms/WYMDCarousel/WYMDCarousel.js | 6 ++- .../WYMDCarousel/WYMDCarousel.style.js | 40 ++++++++++++------- .../WYMDCarousel/WYMDCarousel.test.js | 37 +++++++++++------ src/styleguide/data/data.js | 21 +++++----- 4 files changed, 65 insertions(+), 39 deletions(-) diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js index 4f61c9a29..67dba0e0b 100644 --- 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 } }) => {
- + {theseItems[key].amount} - + {theseItems[key].copy} @@ -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 index 9aa266e6f..06bc3d71b 100644 --- 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,12 +63,12 @@ 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; } } `; @@ -76,8 +76,8 @@ const Heading = styled(Text)` 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; @@ -85,16 +85,16 @@ const PeopleHelpedText = styled(Text)` } @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,6 +106,12 @@ 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; @@ -113,7 +119,7 @@ const CarouselWrapper = styled.div` 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 index d18538ef3..f2850e4fd 100644 --- 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 index df267d476..d88cf8b6a 100644 --- 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'