diff --git a/src/components/Organisms/WYMDCarousel/WYMDCarousel.js b/src/components/Organisms/WYMDCarousel/WYMDCarousel.js
index 4f61c9a2..67dba0e0 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 9aa266e6..06bc3d71 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 d18538ef..f2850e4f 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 df267d47..d88cf8b6 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'