@comicrelief/component-library 7.35.5 → 7.35.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.js +13 -15
  2. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +48 -23
  3. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
  4. package/dist/styleguide/data/data.js +27 -27
  5. package/package.json +1 -1
  6. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js +13 -13
  7. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +82 -33
  8. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +38 -28
  9. package/src/styleguide/data/data.js +27 -27
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.js CHANGED
@@ -22,7 +22,7 @@ const WYMDCarousel = _ref => {
22
22
  }
23
23
  } = _ref;
24
24
  // Defaults to mobile config:
25
- const [isMobileOrTablet, setIsMobileOrTablet] = (0, _react.useState)(true);
25
+ const [isMobile, setIsMobile] = (0, _react.useState)(true);
26
26
  const [visibleSlides, setVisibleSlides] = (0, _react.useState)(1);
27
27
  const [totalSlides, setTotalSlides] = (0, _react.useState)(null);
28
28
  const [theseItems, setTheseItems] = (0, _react.useState)();
@@ -30,23 +30,23 @@ const WYMDCarousel = _ref => {
30
30
  // Custom function to let us update the carousel config dynamically
31
31
  const screenResize = (0, _react.useCallback)(() => {
32
32
  const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
33
- const isCurrentlyMobile = window.innerWidth < _breakpoint.sizes.medium;
34
- if (screenSize !== null && isMobileOrTablet !== isCurrentlyMobile) {
35
- setIsMobileOrTablet(isCurrentlyMobile);
33
+ const isCurrentlyMobile = window.innerWidth < _breakpoint.sizes.small;
34
+ if (screenSize !== null && isMobile !== isCurrentlyMobile) {
35
+ setIsMobile(isCurrentlyMobile);
36
36
  setVisibleSlides(isCurrentlyMobile ? 1 : 3);
37
37
  setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
38
38
  }
39
- }, [isMobileOrTablet, theseItems]);
39
+ }, [isMobile, theseItems]);
40
40
 
41
41
  // Format our data BEFORE we use it in render:
42
42
  (0, _react.useEffect)(() => {
43
43
  setTheseItems((0, _utils.default)(data));
44
44
  }, [setTheseItems, data]);
45
45
  (0, _react.useEffect)(() => {
46
- if (window !== 'undefined' && window.innerWidth >= _breakpoint.sizes.medium) {
46
+ if (window !== 'undefined' && window.innerWidth >= _breakpoint.sizes.small) {
47
47
  // On inital render, update carousel plugin config
48
48
  // to suit the non-mobile layout and functionality:
49
- setIsMobileOrTablet(false);
49
+ setIsMobile(false);
50
50
  setVisibleSlides(3);
51
51
  }
52
52
 
@@ -55,7 +55,7 @@ const WYMDCarousel = _ref => {
55
55
  }, [screenResize]);
56
56
  if (theseItems && totalSlides === null) {
57
57
  // Reflects our two dummy/bookend slides for non-mobile/tablet views:
58
- setTotalSlides(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
58
+ setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
59
59
  }
60
60
  return /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CarouselWrapper, {
61
61
  className: "CarouselWrapper",
@@ -84,12 +84,12 @@ const WYMDCarousel = _ref => {
84
84
  infinite: true
85
85
  }, /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slider, {
86
86
  classNameAnimation: "wymd-carousel"
87
- }, isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
87
+ }, isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
88
88
  index: 0,
89
89
  key: 0
90
90
  }), Object.keys(theseItems).map((key, index) => {
91
91
  // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
92
- const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
92
+ const thisOffsetIndex = index + (isMobile ? 0 : 1);
93
93
  return (
94
94
  /*#__PURE__*/
95
95
  // Calculate the index offset accordingly to reflect the number of slides,
@@ -109,14 +109,12 @@ const WYMDCarousel = _ref => {
109
109
  tag: "h1",
110
110
  family: "Anton",
111
111
  uppercase: true,
112
- weight: "normal",
113
- size: "xl"
112
+ weight: "normal"
114
113
  }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
115
- tag: "p",
116
- size: "m"
114
+ tag: "p"
117
115
  }, theseItems[key].copy))))
118
116
  );
119
- }), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
117
+ }), isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
120
118
  index: theseItems.length + 1,
121
119
  key: "bookend-last"
122
120
  })), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonBack, null, "Back"), /*#__PURE__*/_react.default.createElement(_pureReactCarousel.ButtonNext, null, "Next")));
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -12,12 +12,12 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
12
12
  const animationSpeed = 0.75;
13
13
 
14
14
  // Use to calc positions when scaling copy
15
- const textScaleOffsetA = 50;
15
+ const textScaleOffsetA = 45;
16
16
  const textScaleOffsetB = 5;
17
17
  const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
18
18
  displayName: "WYMDCarouselstyle__ImageWrapper",
19
19
  componentId: "sc-115z54p-0"
20
- })(["width:45%;display:block;padding:9%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;}&:after{position:absolute;content:'';top:50%;width:125%;right:calc(-125% - 2px);height:2px;border-bottom:2px dashed #89888b;}@media ", "{width:50%;padding:9%;&:after{width:100%;right:calc(-100% - 8px);}}"], _ref => {
20
+ })(["width:45%;display:block;padding:9%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;display:block;}&:after{position:absolute;content:'';top:50%;width:125%;right:calc(-125% - 2px);height:2px;border-bottom:2px dashed #89888b;}@media ", "{width:50%;padding:9%;&:after{width:100%;right:calc(-100% - 8px);}}"], _ref => {
21
21
  let {
22
22
  theme
23
23
  } = _ref;
@@ -26,41 +26,56 @@ const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withCo
26
26
  const AmountWrapper = exports.AmountWrapper = _styledComponents.default.div.withConfig({
27
27
  displayName: "WYMDCarouselstyle__AmountWrapper",
28
28
  componentId: "sc-115z54p-1"
29
- })(["padding:", " 0;width:75%;margin:0 auto;"], (0, _spacing.default)('m'));
29
+ })(["padding:", " 0 0.75rem;h1{font-size:34px;line-height:37px;@media ", "{font-size:40px;line-height:40px;}}"], (0, _spacing.default)('m'), _ref2 => {
30
+ let {
31
+ theme
32
+ } = _ref2;
33
+ return theme.breakpoint('small');
34
+ });
30
35
  const CopyWrapper = exports.CopyWrapper = _styledComponents.default.div.withConfig({
31
36
  displayName: "WYMDCarouselstyle__CopyWrapper",
32
37
  componentId: "sc-115z54p-2"
33
- })(["padding:", " 0;width:75%;margin:0 auto;"], (0, _spacing.default)('sm'));
38
+ })(["padding:0;width:75%;margin:0 auto;p{font-size:", ";line-height:", ";}"], _ref3 => {
39
+ let {
40
+ theme
41
+ } = _ref3;
42
+ return theme.fontSize('s');
43
+ }, _ref4 => {
44
+ let {
45
+ theme
46
+ } = _ref4;
47
+ return theme.fontSize('l');
48
+ });
34
49
  const Heading = exports.Heading = (0, _styledComponents.default)(_Text.default).withConfig({
35
50
  displayName: "WYMDCarouselstyle__Heading",
36
51
  componentId: "sc-115z54p-3"
37
- })(["width:75%;margin:0 auto;&:first-child{margin-bottom:", ";text-align:center;font-size:16px;line-height:19.5px;@media ", "{font-size:20px;line-height:24.38px;}}"], (0, _spacing.default)('l'), _ref2 => {
52
+ })(["width:75%;margin:0 auto;&:first-child{margin-bottom:", ";text-align:center;font-size:16px;line-height:19.5px;@media ", "{font-size:20px;line-height:24.38px;}}"], (0, _spacing.default)('l'), _ref5 => {
38
53
  let {
39
54
  theme
40
- } = _ref2;
55
+ } = _ref5;
41
56
  return theme.breakpoint('medium');
42
57
  });
43
58
  const PeopleHelpedText = exports.PeopleHelpedText = (0, _styledComponents.default)(_Text.default).withConfig({
44
59
  displayName: "WYMDCarouselstyle__PeopleHelpedText",
45
60
  componentId: "sc-115z54p-4"
46
- })(["margin-bottom:", ";text-align:center;font-size:34px;line-height:37px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:64px;line-height:68px;}"], (0, _spacing.default)('l'), _ref3 => {
61
+ })(["margin-bottom:", ";text-align:center;font-size:34px;line-height:37px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:64px;line-height:68px;}"], (0, _spacing.default)('l'), _ref6 => {
47
62
  let {
48
63
  theme
49
- } = _ref3;
64
+ } = _ref6;
50
65
  return theme.breakpoint('small');
51
- }, _ref4 => {
66
+ }, _ref7 => {
52
67
  let {
53
68
  theme
54
- } = _ref4;
69
+ } = _ref7;
55
70
  return theme.breakpoint('medium');
56
71
  });
57
72
  const Including = exports.Including = (0, _styledComponents.default)(_Text.default).withConfig({
58
73
  displayName: "WYMDCarouselstyle__Including",
59
74
  componentId: "sc-115z54p-5"
60
- })(["margin-bottom:0;text-align:center;font-size:12px;line-height:14.63px;@media ", "{font-size:17px;line-height:19px;}"], _ref5 => {
75
+ })(["margin-bottom:0;text-align:center;font-size:12px;line-height:14.63px;@media ", "{font-size:17px;line-height:19px;}"], _ref8 => {
61
76
  let {
62
77
  theme
63
- } = _ref5;
78
+ } = _ref8;
64
79
  return theme.breakpoint('small');
65
80
  });
66
81
 
@@ -68,29 +83,39 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
68
83
  const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
69
84
  displayName: "WYMDCarouselstyle__CarouselWrapper",
70
85
  componentId: "sc-115z54p-6"
71
- })(["height:100%;background-color:", ";max-width:760px;padding:", ";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:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:before{content:'';position:absolute;width:30px;height:30px;top:50%;left:0;transform:translate(0,-50%) rotate(90deg);}&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;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));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&: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));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-187% - 6px);transform:scale(0.5);width:250%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-250% - 6px);transform:scale(1);width:250%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref6 => {
86
+ })(["height:100%;background-color:", ";max-width:760px;padding:", ";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:", ";@media ", "{padding-top:", ";}button.carousel__back-button,button.carousel__next-button{position:absolute;left:0;top:0;width:33% !important;height:100%;padding:0 !important;box-shadow:none;text-indent:-9999px;background-color:transparent;border:none;&:after{content:\"\";position:absolute;top:0;left:0;width:50%;height:100%;transition:opacity 0.2s linear;background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}&:hover{&:after{opacity:0.5;}}@media ", "{width:33.3% !important;&:after{width:100%;}}}button.carousel__next-button{left:auto;right:0;&:before{transform:translate(0,-50%) rotate(-90deg);}&:after{left:auto;right:0;background:linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));}}.wymd-carousel{transition:-webkit-transform ", "s;-o-transition:transform ", "s;transition:transform ", "s;-webkit-transform:", "s;will-change:transform;.last-slide{.image-wrapper:after{content:none;}}.carousel__slide{padding-bottom:", "px !important;@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;}@media ", "{padding-bottom:", "px !important;.carousel__inner-slide{> div:first-child{transition:transform ", "s ease;transform:scale(0.5);&:after{transition:transform ", "s ease,width ", "s ease,right ", "s ease;right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transition:transform ", "s ease;transform-origin:top;transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{transform:scale(1);&:after{right:calc(-222% - 6px);transform:scale(0.5);width:300%;}}}.all-text-wrapper{transform:translateY(0) scale(1);}+ .carousel__slide--visible{> div > div:first-child{transform:scale(0.5);&:after{right:calc(-300% - 6px);transform:scale(1);width:300%;}}.all-text-wrapper{transform:translateY(calc(-", "px + ", "%)) scale(0.5)}}}}}@media ", "{&.carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-187% - 6px);width:250%;}}}+ .carousel__slide--visible{.carousel__inner-slide{> div:first-child{&:after{right:calc(-250% - 6px);width:250%;}}}}}}}.carousel__inner-slide{text-align:center;display:inline-flex;align-items:center;justify-content:flex-start;flex-direction:column;}}}}"], _ref9 => {
72
87
  let {
73
88
  theme
74
- } = _ref6;
89
+ } = _ref9;
75
90
  return theme.color('white');
76
- }, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref7 => {
91
+ }, (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref10 => {
77
92
  let {
78
93
  theme
79
- } = _ref7;
94
+ } = _ref10;
80
95
  return theme.breakpoint('medium');
81
- }, (0, _spacing.default)('l'), _ref8 => {
96
+ }, (0, _spacing.default)('l'), _ref11 => {
82
97
  let {
83
98
  theme
84
- } = _ref8;
99
+ } = _ref11;
100
+ return theme.breakpoint('small');
101
+ }, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref12 => {
102
+ let {
103
+ theme
104
+ } = _ref12;
105
+ return theme.breakpoint('small');
106
+ }, props => props.tabletHeight, _ref13 => {
107
+ let {
108
+ theme
109
+ } = _ref13;
85
110
  return theme.breakpoint('medium');
86
- }, animationSpeed, animationSpeed, animationSpeed, animationSpeed, props => props.mobileHeight, _ref9 => {
111
+ }, props => props.tabletHeight, _ref14 => {
87
112
  let {
88
113
  theme
89
- } = _ref9;
114
+ } = _ref14;
90
115
  return theme.breakpoint('small');
91
- }, props => props.tabletHeight, _ref10 => {
116
+ }, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref15 => {
92
117
  let {
93
118
  theme
94
- } = _ref10;
119
+ } = _ref15;
95
120
  return theme.breakpoint('medium');
96
- }, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB);
121
+ });
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js CHANGED
@@ -12,5 +12,5 @@ it("renders correctly", () => {
12
12
  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_WYMDCarousel.default, {
13
13
  data: carouselItemsComplete
14
14
  })).toJSON();
15
- expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 16px;\n line-height: 19.5px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 34px;\n line-height: 37px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 12px;\n line-height: 14.63px;\n }\n\n .c0 {\n height: 100%;\n background-color: #FFFFFF;\n max-width: 760px;\n padding: 2rem;\n margin: 0 auto;\n border-radius: 20px;\n box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n }\n\n .c0 .carousel {\n position: relative;\n margin: 0 auto;\n padding-top: 2rem;\n }\n\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n position: absolute;\n left: 0;\n top: 0;\n width: 33% !important;\n height: 100%;\n padding: 0 !important;\n box-shadow: none;\n text-indent: -9999px;\n background-color: transparent;\n border: none;\n }\n\n .c0 .carousel button.carousel__back-button:before,\n .c0 .carousel button.carousel__next-button:before {\n content: '';\n position: absolute;\n width: 30px;\n height: 30px;\n top: 50%;\n left: 0;\n -webkit-transform: translate(0,-50%) rotate(90deg);\n -ms-transform: translate(0,-50%) rotate(90deg);\n transform: translate(0,-50%) rotate(90deg);\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n -webkit-transition: opacity 0.2s linear;\n transition: opacity 0.2s linear;\n background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel button.carousel__back-button:hover:after,\n .c0 .carousel button.carousel__next-button:hover:after {\n opacity: 0.5;\n }\n\n .c0 .carousel button.carousel__next-button {\n left: auto;\n right: 0;\n }\n\n .c0 .carousel button.carousel__next-button:before {\n -webkit-transform: translate(0,-50%) rotate(-90deg);\n -ms-transform: translate(0,-50%) rotate(-90deg);\n transform: translate(0,-50%) rotate(-90deg);\n }\n\n .c0 .carousel button.carousel__next-button:after {\n left: auto;\n right: 0;\n background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));\n }\n\n .c0 .carousel .wymd-carousel {\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n transition: -webkit-transform 0.75s;\n -o-transition: transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: transform 0.75s;\n transition: transform 0.75s;\n -webkit-transform: 0.75s;\n will-change: transform;\n }\n\n .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n content: none;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 450px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n text-align: center;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n }\n\n @media (min-width:1024px) {\n .c2:first-child {\n font-size: 20px;\n line-height: 24.38px;\n }\n }\n\n @media (min-width:740px) {\n .c4 {\n font-size: 60px;\n line-height: 60px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n font-size: 64px;\n line-height: 68px;\n }\n }\n\n @media (min-width:740px) {\n .c6 {\n font-size: 17px;\n line-height: 19px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel {\n padding-top: 2rem;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n width: 33.3% !important;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n width: 100%;\n }\n }\n\n @media (min-width:740px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 475px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform-origin: top;\n -ms-transform-origin: top;\n transform-origin: top;\n -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n transform: translateY(calc(-50px + 5%)) scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-187% - 6px);\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(0) scale(1);\n -ms-transform: translateY(0) scale(1);\n transform: translateY(0) scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n right: calc(-250% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);\n transform: translateY(calc(-50px + 5%)) scale(0.5);\n }\n }\n\n <div\n className=\"c0 CarouselWrapper\"\n id=\"7zdR84QkZwrTh9NWx2H926\"\n >\n <p\n className=\"c1 c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Over the past two years, we\u2019ve supported\n </p>\n <h1\n className=\"c3 c4\"\n color=\"red\"\n size=\"s\"\n >\n 11.7 million people\n </h1>\n <p\n className=\"c5 c6\"\n color=\"inherit\"\n size=\"s\"\n >\n including...\n </p>\n </div>\n ");
15
+ expect(tree).toMatchInlineSnapshot("\n .c1 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c3 {\n color: #E52630;\n font-size: 1rem;\n line-height: 1rem;\n text-transform: uppercase;\n font-weight: normal;\n font-family: 'Anton',Impact,sans-serif;\n -webkit-letter-spacing: 0.03rem;\n -moz-letter-spacing: 0.03rem;\n -ms-letter-spacing: 0.03rem;\n letter-spacing: 0.03rem;\n }\n\n .c5 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c2 {\n width: 75%;\n margin: 0 auto;\n }\n\n .c2:first-child {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 16px;\n line-height: 19.5px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 34px;\n line-height: 37px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 12px;\n line-height: 14.63px;\n }\n\n .c0 {\n height: 100%;\n background-color: #FFFFFF;\n max-width: 760px;\n padding: 2rem;\n margin: 0 auto;\n border-radius: 20px;\n box-shadow: 0px 0px 20px rgba(0,0,0,0.15);\n }\n\n .c0 .carousel {\n position: relative;\n margin: 0 auto;\n padding-top: 2rem;\n }\n\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n position: absolute;\n left: 0;\n top: 0;\n width: 33% !important;\n height: 100%;\n padding: 0 !important;\n box-shadow: none;\n text-indent: -9999px;\n background-color: transparent;\n border: none;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n -webkit-transition: opacity 0.2s linear;\n transition: opacity 0.2s linear;\n background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel button.carousel__back-button:hover:after,\n .c0 .carousel button.carousel__next-button:hover:after {\n opacity: 0.5;\n }\n\n .c0 .carousel button.carousel__next-button {\n left: auto;\n right: 0;\n }\n\n .c0 .carousel button.carousel__next-button:before {\n -webkit-transform: translate(0,-50%) rotate(-90deg);\n -ms-transform: translate(0,-50%) rotate(-90deg);\n transform: translate(0,-50%) rotate(-90deg);\n }\n\n .c0 .carousel button.carousel__next-button:after {\n left: auto;\n right: 0;\n background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));\n }\n\n .c0 .carousel .wymd-carousel {\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n transition: -webkit-transform 0.75s;\n -o-transition: transform 0.75s;\n -webkit-transition: -webkit-transform 0.75s;\n -webkit-transition: transform 0.75s;\n transition: transform 0.75s;\n -webkit-transform: 0.75s;\n will-change: transform;\n }\n\n .c0 .carousel .wymd-carousel .last-slide .image-wrapper:after {\n content: none;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 450px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {\n text-align: center;\n display: -webkit-inline-box;\n display: -webkit-inline-flex;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n }\n\n @media (min-width:1024px) {\n .c2:first-child {\n font-size: 20px;\n line-height: 24.38px;\n }\n }\n\n @media (min-width:740px) {\n .c4 {\n font-size: 60px;\n line-height: 60px;\n }\n }\n\n @media (min-width:1024px) {\n .c4 {\n font-size: 64px;\n line-height: 68px;\n }\n }\n\n @media (min-width:740px) {\n .c6 {\n font-size: 17px;\n line-height: 19px;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel {\n padding-top: 2rem;\n }\n }\n\n @media (min-width:740px) {\n .c0 .carousel button.carousel__back-button,\n .c0 .carousel button.carousel__next-button {\n width: 33.3% !important;\n }\n\n .c0 .carousel button.carousel__back-button:after,\n .c0 .carousel button.carousel__next-button:after {\n width: 100%;\n }\n }\n\n @media (min-width:740px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 500px !important;\n }\n }\n\n @media (min-width:740px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 475px !important;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child:after {\n -webkit-transition: -webkit-transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n -webkit-transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n transition: transform 0.75s ease,width 0.75s ease,right 0.75s ease;\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide .all-text-wrapper {\n -webkit-transition: -webkit-transform 0.75s ease;\n -webkit-transition: transform 0.75s ease;\n transition: transform 0.75s ease;\n -webkit-transform-origin: top;\n -ms-transform-origin: top;\n transform-origin: top;\n -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n transform: translateY(calc(-45px + 5%)) scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child {\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-222% - 6px);\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(0) scale(1);\n -ms-transform: translateY(0) scale(1);\n transform: translateY(0) scale(1);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child {\n -webkit-transform: scale(0.5);\n -ms-transform: scale(0.5);\n transform: scale(0.5);\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {\n right: calc(-300% - 6px);\n -webkit-transform: scale(1);\n -ms-transform: scale(1);\n transform: scale(1);\n width: 300%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {\n -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);\n -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);\n transform: translateY(calc(-45px + 5%)) scale(0.5);\n }\n }\n\n @media (min-width:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-187% - 6px);\n width: 250%;\n }\n\n .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {\n right: calc(-250% - 6px);\n width: 250%;\n }\n }\n\n <div\n className=\"c0 CarouselWrapper\"\n id=\"7zdR84QkZwrTh9NWx2H926\"\n >\n <p\n className=\"c1 c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Over the past two years, we\u2019ve supported\n </p>\n <h1\n className=\"c3 c4\"\n color=\"red\"\n size=\"s\"\n >\n 11.7 million people\n </h1>\n <p\n className=\"c5 c6\"\n color=\"inherit\"\n size=\"s\"\n >\n including...\n </p>\n </div>\n ");
16
16
  });
package/dist/styleguide/data/data.js CHANGED
@@ -48,85 +48,85 @@ const carouselItemsComplete = exports.carouselItemsComplete = {
48
48
  desktopHeight: 475,
49
49
  headerCopy: 'Over the past two years, we’ve supported',
50
50
  peopleHelpedText: '11.7 million people',
51
- autoPlay: true,
52
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
51
+ autoplay: false,
52
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
53
53
  node1_Amount: '1,000',
54
54
  node1_Image: {
55
55
  file: {
56
56
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
57
57
  }
58
58
  },
59
- 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',
59
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
60
60
  node2_Amount: '750,000',
61
61
  node2_Image: {
62
62
  file: {
63
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
63
+ url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
64
64
  }
65
65
  },
66
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
66
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
67
67
  node3_Amount: '3,000',
68
68
  node3_Image: {
69
69
  file: {
70
70
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
71
71
  }
72
72
  },
73
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
73
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
74
74
  node4_Amount: '4,000',
75
75
  node4_Image: {
76
76
  file: {
77
77
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
78
78
  }
79
79
  },
80
- node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
80
+ node5_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
81
81
  node5_Amount: '5,000',
82
82
  node5_Image: {
83
83
  file: {
84
84
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
85
85
  }
86
86
  },
87
- node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
87
+ node6_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
88
88
  node6_Amount: '6,000',
89
89
  node6_Image: {
90
90
  file: {
91
91
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
92
92
  }
93
93
  },
94
- node7_Copy: 'NODE7: people in the UK experiencing poverty to access advice and support.',
94
+ node7_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
95
95
  node7_Amount: '7,000',
96
96
  node7_Image: {
97
97
  file: {
98
98
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
99
99
  }
100
100
  },
101
- node8_Copy: 'NODE8: people in the UK experiencing poverty to access advice and support.',
101
+ node8_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
102
102
  node8_Amount: '8,000',
103
103
  node8_Image: {
104
104
  file: {
105
105
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
106
106
  }
107
107
  },
108
- node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
108
+ node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
109
109
  node9_Amount: '9,000',
110
110
  node9_Image: {
111
111
  file: {
112
112
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
113
113
  }
114
114
  },
115
- node10_Copy: 'NODE10: people in the UK experiencing poverty to access advice and support.',
115
+ node10_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
116
116
  node10_Amount: '10,000',
117
117
  node10_Image: {
118
118
  file: {
119
119
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
120
120
  }
121
121
  },
122
- node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
122
+ node11_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
123
123
  node11_Amount: '11,000',
124
124
  node11_Image: {
125
125
  file: {
126
126
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
127
127
  }
128
128
  },
129
- node12_Copy: 'NODE12: people in the UK experiencing poverty to access advice and support.750,000',
129
+ node12_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
130
130
  node12_Amount: '12,000',
131
131
  node12_Image: {
132
132
  file: {
@@ -143,41 +143,41 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
143
143
  headerCopy: 'Over the past two years, we’ve supported',
144
144
  peopleHelpedText: '11.7 million people',
145
145
  autoPlay: false,
146
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
146
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
147
147
  node1_Amount: '1,000',
148
148
  node1_Image: {
149
149
  file: {
150
150
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
151
151
  }
152
152
  },
153
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
153
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
154
154
  node2_Amount: '750,000',
155
155
  node2_Image: {
156
156
  file: {
157
157
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
158
158
  }
159
159
  },
160
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
160
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
161
161
  node3_Amount: '3,000',
162
162
  node3_Image: {
163
163
  file: {
164
164
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
165
165
  }
166
166
  },
167
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
167
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
168
168
  node4_Amount: '4,000',
169
169
  node4_Image: {
170
170
  file: {
171
171
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
172
172
  }
173
173
  },
174
- node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
174
+ node5_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
175
175
  node5_Image: {
176
176
  file: {
177
177
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
178
178
  }
179
179
  },
180
- node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
180
+ node6_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
181
181
  node6_Amount: '6,000',
182
182
  node6_Image: null,
183
183
  node7_Copy: null,
@@ -190,7 +190,7 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
190
190
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
191
191
  }
192
192
  },
193
- node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
193
+ node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
194
194
  node9_Amount: null,
195
195
  node9_Image: null,
196
196
  node10_Copy: null,
@@ -200,14 +200,14 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
200
200
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
201
201
  }
202
202
  },
203
- node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
203
+ node11_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
204
204
  node11_Amount: '11,000',
205
205
  node11_Image: {
206
206
  file: {
207
207
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
208
208
  }
209
209
  },
210
- node12_Copy: 'people in the UK experiencing poverty to access advice and support.750,000',
210
+ node12_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
211
211
  node12_Amount: null,
212
212
  node12_Image: {
213
213
  file: {
@@ -224,28 +224,28 @@ const carouselItemsMinimal = exports.carouselItemsMinimal = {
224
224
  headerCopy: 'Over the past two years, we’ve supported',
225
225
  peopleHelpedText: '11.7 million people',
226
226
  autoPlay: false,
227
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
227
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
228
228
  node1_Amount: '1,000',
229
229
  node1_Image: {
230
230
  file: {
231
231
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
232
232
  }
233
233
  },
234
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
234
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
235
235
  node2_Amount: '750,000',
236
236
  node2_Image: {
237
237
  file: {
238
238
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
239
239
  }
240
240
  },
241
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
241
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
242
242
  node3_Amount: '3,000',
243
243
  node3_Image: {
244
244
  file: {
245
245
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
246
246
  }
247
247
  },
248
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
248
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
249
249
  node4_Amount: '4,000',
250
250
  node4_Image: {
251
251
  file: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "7.35.5",
4
+ "version": "7.35.6",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js CHANGED
@@ -15,7 +15,7 @@ import { sizes } from '../../../theme/shared/breakpoint';
15
15
 
16
16
  const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
17
17
  // Defaults to mobile config:
18
- const [isMobileOrTablet, setIsMobileOrTablet] = useState(true);
18
+ const [isMobile, setIsMobile] = useState(true);
19
19
  const [visibleSlides, setVisibleSlides] = useState(1);
20
20
  const [totalSlides, setTotalSlides] = useState(null);
21
21
  const [theseItems, setTheseItems] = useState();
@@ -23,14 +23,14 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
23
23
  // Custom function to let us update the carousel config dynamically
24
24
  const screenResize = useCallback(() => {
25
25
  const screenSize = typeof window !== 'undefined' ? window.innerWidth : null;
26
- const isCurrentlyMobile = window.innerWidth < sizes.medium;
26
+ const isCurrentlyMobile = window.innerWidth < sizes.small;
27
27
 
28
- if (screenSize !== null && (isMobileOrTablet !== isCurrentlyMobile)) {
29
- setIsMobileOrTablet(isCurrentlyMobile);
28
+ if (screenSize !== null && (isMobile !== isCurrentlyMobile)) {
29
+ setIsMobile(isCurrentlyMobile);
30
30
  setVisibleSlides(isCurrentlyMobile ? 1 : 3);
31
31
  setTotalSlides(isCurrentlyMobile ? theseItems.length : theseItems.length + 2);
32
32
  }
33
- }, [isMobileOrTablet, theseItems]);
33
+ }, [isMobile, theseItems]);
34
34
 
35
35
  // Format our data BEFORE we use it in render:
36
36
  useEffect(() => {
@@ -38,10 +38,10 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
38
38
  }, [setTheseItems, data]);
39
39
 
40
40
  useEffect(() => {
41
- if (window !== 'undefined' && window.innerWidth >= sizes.medium) {
41
+ if (window !== 'undefined' && window.innerWidth >= sizes.small) {
42
42
  // On inital render, update carousel plugin config
43
43
  // to suit the non-mobile layout and functionality:
44
- setIsMobileOrTablet(false);
44
+ setIsMobile(false);
45
45
  setVisibleSlides(3);
46
46
  }
47
47
 
@@ -51,7 +51,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
51
51
 
52
52
  if (theseItems && totalSlides === null) {
53
53
  // Reflects our two dummy/bookend slides for non-mobile/tablet views:
54
- setTotalSlides(isMobileOrTablet ? theseItems.length : theseItems.length + 2);
54
+ setTotalSlides(isMobile ? theseItems.length : theseItems.length + 2);
55
55
  }
56
56
 
57
57
  return (
@@ -88,13 +88,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
88
88
  <Slider classNameAnimation="wymd-carousel">
89
89
 
90
90
  {/* Dummy slide for our desired non-mobile layout and functionality */}
91
- {isMobileOrTablet === false && (
91
+ {isMobile === false && (
92
92
  <Slide index={0} key={0} />
93
93
  )}
94
94
 
95
95
  {Object.keys(theseItems).map((key, index) => {
96
96
  // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
97
- const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
97
+ const thisOffsetIndex = index + (isMobile ? 0 : 1);
98
98
 
99
99
  return (
100
100
  // Calculate the index offset accordingly to reflect the number of slides,
@@ -111,13 +111,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
111
111
 
112
112
  <div className="all-text-wrapper">
113
113
  <AmountWrapper>
114
- <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">
114
+ <Text tag="h1" family="Anton" uppercase weight="normal">
115
115
  {theseItems[key].amount}
116
116
  </Text>
117
117
  </AmountWrapper>
118
118
 
119
119
  <CopyWrapper>
120
- <Text tag="p" size="m">
120
+ <Text tag="p">
121
121
  {theseItems[key].copy}
122
122
  </Text>
123
123
  </CopyWrapper>
@@ -128,7 +128,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
128
128
  })}
129
129
 
130
130
  {/* Dummy slide for our desired non-mobile layout and functionality */}
131
- {isMobileOrTablet === false && (
131
+ {isMobile === false && (
132
132
  <Slide index={theseItems.length + 1} key="bookend-last" />
133
133
  )}
134
134
 
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -6,7 +6,7 @@ import Text from '../../Atoms/Text/Text';
6
6
  const animationSpeed = 0.75;
7
7
 
8
8
  // Use to calc positions when scaling copy
9
- const textScaleOffsetA = 50;
9
+ const textScaleOffsetA = 45;
10
10
  const textScaleOffsetB = 5;
11
11
 
12
12
  const ImageWrapper = styled.div`
@@ -21,6 +21,7 @@ const ImageWrapper = styled.div`
21
21
  img {
22
22
  width: 100%;
23
23
  height: auto;
24
+ display: block;
24
25
  }
25
26
 
26
27
  &:after {
@@ -44,15 +45,28 @@ const ImageWrapper = styled.div`
44
45
  `;
45
46
 
46
47
  const AmountWrapper = styled.div`
47
- padding: ${spacing('m')} 0;
48
- width: 75%;
49
- margin: 0 auto;
48
+ padding: ${spacing('m')} 0 0.75rem;
49
+
50
+ h1 {
51
+ font-size: 34px;
52
+ line-height: 37px;
53
+
54
+ @media ${({ theme }) => theme.breakpoint('small')} {
55
+ font-size: 40px;
56
+ line-height: 40px;
57
+ }
58
+ }
50
59
  `;
51
60
 
52
61
  const CopyWrapper = styled.div`
53
- padding: ${spacing('sm')} 0;
62
+ padding: 0;
54
63
  width: 75%;
55
64
  margin: 0 auto;
65
+
66
+ p {
67
+ font-size: ${({ theme }) => theme.fontSize('s')};
68
+ line-height: ${({ theme }) => theme.fontSize('l')};
69
+ }
56
70
  `;
57
71
 
58
72
  const Heading = styled(Text)`
@@ -134,19 +148,7 @@ const CarouselWrapper = styled.div`
134
148
  text-indent: -9999px;
135
149
  background-color: transparent;
136
150
  border: none;
137
-
138
- &:before {
139
- content: '';
140
- // Do we need some sort of icon here to show it's a button?
141
- // background: transparent url(/images/payin/CR__Chevron_D--white.svg) no-repeat;
142
- position: absolute;
143
- width: 30px;
144
- height: 30px;
145
- top: 50%;
146
- left: 0;
147
- transform: translate(0, -50%) rotate(90deg);
148
- }
149
-
151
+
150
152
  &:after {
151
153
  content: "";
152
154
  position: absolute;
@@ -155,20 +157,18 @@ const CarouselWrapper = styled.div`
155
157
  width: 50%;
156
158
  height: 100%;
157
159
  transition: opacity 0.2s linear;
158
- background: linear-gradient(90deg, rgba(255, 255, 255, 0.95),
160
+ background: linear-gradient(90deg, rgba(255, 255, 255, 1),
159
161
  rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
160
162
  }
161
163
 
162
164
 
163
165
  &:hover {
164
- // TO-DO: accessibiity?
165
- // border: 1px solid black;
166
166
  &:after {
167
167
  opacity: 0.5;
168
168
  }
169
169
  }
170
170
 
171
- @media ${({ theme }) => theme.breakpoint('medium')} {
171
+ @media ${({ theme }) => theme.breakpoint('small')} {
172
172
  width: 33.3% !important;
173
173
  &:after {
174
174
  width: 100%;
@@ -187,8 +187,8 @@ const CarouselWrapper = styled.div`
187
187
  &:after {
188
188
  left: auto;
189
189
  right: 0;
190
- background: linear-gradient(270deg, rgba(255, 255, 255, 0.95),
191
- rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
190
+ background: linear-gradient(270deg, rgba(255, 255, 255, 1),
191
+ rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
192
192
  }
193
193
  }
194
194
 
@@ -214,6 +214,10 @@ const CarouselWrapper = styled.div`
214
214
  }
215
215
 
216
216
  @media ${({ theme }) => theme.breakpoint('medium')} {
217
+ padding-bottom: ${props => props.tabletHeight}px !important;
218
+ }
219
+
220
+ @media ${({ theme }) => theme.breakpoint('small')} {
217
221
  padding-bottom: ${props => props.desktopHeight}px !important;
218
222
 
219
223
  // All slides:
@@ -237,7 +241,6 @@ const CarouselWrapper = styled.div`
237
241
  // Scale down ALL copy
238
242
  .all-text-wrapper {
239
243
  transition: transform ${animationSpeed}s ease;
240
- // HERE
241
244
  transform-origin: top;
242
245
  transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
243
246
  }
@@ -248,9 +251,9 @@ const CarouselWrapper = styled.div`
248
251
  .carousel__inner-slide {
249
252
  > div:first-child {
250
253
  &:after {
251
- right: calc(-250% - 6px);
254
+ right: calc(-300% - 6px);
252
255
  transform: scale(1);
253
- width: 250%;
256
+ width: 300%;
254
257
  }
255
258
  }
256
259
  }
@@ -262,9 +265,9 @@ const CarouselWrapper = styled.div`
262
265
  > div:first-child {
263
266
  transform: scale(1);
264
267
  &:after {
265
- right: calc(-187% - 6px);
268
+ right: calc(-222% - 6px);
266
269
  transform: scale(0.5);
267
- width: 250%;
270
+ width: 300%;
268
271
  }
269
272
  }
270
273
  }
@@ -278,20 +281,66 @@ const CarouselWrapper = styled.div`
278
281
  > div > div:first-child {
279
282
  transform: scale(0.5);
280
283
  &:after {
281
- right: calc(-250% - 6px);
284
+ right: calc(-300% - 6px);
282
285
  transform: scale(1);
283
- width: 250%;
286
+ width: 300%;
284
287
  }
285
288
  }
286
289
  .all-text-wrapper {
287
- // HERE
288
290
  transform: translateY(calc(-${textScaleOffsetA}px + ${textScaleOffsetB}%)) scale(0.5)
289
291
  }
290
292
  }
291
293
  }
292
294
  }
293
295
  }
294
-
296
+
297
+ // HERE WE GO
298
+ // START OF DESKTOP
299
+ @media ${({ theme }) => theme.breakpoint('medium')} {
300
+
301
+ // First
302
+ &.carousel__slide--visible {
303
+ .carousel__inner-slide {
304
+ > div:first-child {
305
+ &:after {
306
+ right: calc(-250% - 6px);
307
+ width: 250%;
308
+ }
309
+ }
310
+ }
311
+
312
+ // 2nd and 3rd
313
+ + .carousel__slide--visible {
314
+ .carousel__inner-slide {
315
+ > div:first-child {
316
+ &:after {
317
+ right: calc(-187% - 6px);
318
+ width: 250%;
319
+ }
320
+ }
321
+ }
322
+
323
+
324
+ // 3rd only
325
+ + .carousel__slide--visible {
326
+ .carousel__inner-slide {
327
+ > div:first-child {
328
+ &:after {
329
+ right: calc(-250% - 6px);
330
+ width: 250%;
331
+ }
332
+ }
333
+ }
334
+ }
335
+ }
336
+
337
+
338
+ }
339
+
340
+ }
341
+ // END OF DESKTOP
342
+
343
+
295
344
  .carousel__inner-slide {
296
345
  text-align: center;
297
346
  display: inline-flex;
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js CHANGED
@@ -97,19 +97,6 @@ it("renders correctly", () => {
97
97
  border: none;
98
98
  }
99
99
 
100
- .c0 .carousel button.carousel__back-button:before,
101
- .c0 .carousel button.carousel__next-button:before {
102
- content: '';
103
- position: absolute;
104
- width: 30px;
105
- height: 30px;
106
- top: 50%;
107
- left: 0;
108
- -webkit-transform: translate(0,-50%) rotate(90deg);
109
- -ms-transform: translate(0,-50%) rotate(90deg);
110
- transform: translate(0,-50%) rotate(90deg);
111
- }
112
-
113
100
  .c0 .carousel button.carousel__back-button:after,
114
101
  .c0 .carousel button.carousel__next-button:after {
115
102
  content: "";
@@ -120,7 +107,7 @@ it("renders correctly", () => {
120
107
  height: 100%;
121
108
  -webkit-transition: opacity 0.2s linear;
122
109
  transition: opacity 0.2s linear;
123
- background: linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.5),rgba(255,255,255,0));
110
+ background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
124
111
  }
125
112
 
126
113
  .c0 .carousel button.carousel__back-button:hover:after,
@@ -142,7 +129,7 @@ it("renders correctly", () => {
142
129
  .c0 .carousel button.carousel__next-button:after {
143
130
  left: auto;
144
131
  right: 0;
145
- background: linear-gradient(270deg,rgba(255,255,255,0.95),rgba(255,255,255,0.75),rgba(255,255,255,0));
132
+ background: linear-gradient(270deg,rgba(255,255,255,1),rgba(255,255,255,0.5),rgba(255,255,255,0));
146
133
  }
147
134
 
148
135
  .c0 .carousel .wymd-carousel {
@@ -218,7 +205,7 @@ it("renders correctly", () => {
218
205
  }
219
206
  }
220
207
 
221
- @media (min-width:1024px) {
208
+ @media (min-width:740px) {
222
209
  .c0 .carousel button.carousel__back-button,
223
210
  .c0 .carousel button.carousel__next-button {
224
211
  width: 33.3% !important;
@@ -237,6 +224,12 @@ it("renders correctly", () => {
237
224
  }
238
225
 
239
226
  @media (min-width:1024px) {
227
+ .c0 .carousel .wymd-carousel .carousel__slide {
228
+ padding-bottom: 500px !important;
229
+ }
230
+ }
231
+
232
+ @media (min-width:740px) {
240
233
  .c0 .carousel .wymd-carousel .carousel__slide {
241
234
  padding-bottom: 475px !important;
242
235
  }
@@ -268,17 +261,17 @@ it("renders correctly", () => {
268
261
  -webkit-transform-origin: top;
269
262
  -ms-transform-origin: top;
270
263
  transform-origin: top;
271
- -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
272
- -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
273
- transform: translateY(calc(-50px + 5%)) scale(0.5);
264
+ -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
265
+ -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
266
+ transform: translateY(calc(-45px + 5%)) scale(0.5);
274
267
  }
275
268
 
276
269
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
277
- right: calc(-250% - 6px);
270
+ right: calc(-300% - 6px);
278
271
  -webkit-transform: scale(1);
279
272
  -ms-transform: scale(1);
280
273
  transform: scale(1);
281
- width: 250%;
274
+ width: 300%;
282
275
  }
283
276
 
284
277
  .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", () => {
288
281
  }
289
282
 
290
283
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
291
- right: calc(-187% - 6px);
284
+ right: calc(-222% - 6px);
292
285
  -webkit-transform: scale(0.5);
293
286
  -ms-transform: scale(0.5);
294
287
  transform: scale(0.5);
295
- width: 250%;
288
+ width: 300%;
296
289
  }
297
290
 
298
291
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
@@ -308,17 +301,34 @@ it("renders correctly", () => {
308
301
  }
309
302
 
310
303
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible > div > div:first-child:after {
311
- right: calc(-250% - 6px);
304
+ right: calc(-300% - 6px);
312
305
  -webkit-transform: scale(1);
313
306
  -ms-transform: scale(1);
314
307
  transform: scale(1);
315
- width: 250%;
308
+ width: 300%;
316
309
  }
317
310
 
318
311
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .all-text-wrapper {
319
- -webkit-transform: translateY(calc(-50px + 5%)) scale(0.5);
320
- -ms-transform: translateY(calc(-50px + 5%)) scale(0.5);
321
- transform: translateY(calc(-50px + 5%)) scale(0.5);
312
+ -webkit-transform: translateY(calc(-45px + 5%)) scale(0.5);
313
+ -ms-transform: translateY(calc(-45px + 5%)) scale(0.5);
314
+ transform: translateY(calc(-45px + 5%)) scale(0.5);
315
+ }
316
+ }
317
+
318
+ @media (min-width:1024px) {
319
+ .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
320
+ right: calc(-250% - 6px);
321
+ width: 250%;
322
+ }
323
+
324
+ .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
325
+ right: calc(-187% - 6px);
326
+ width: 250%;
327
+ }
328
+
329
+ .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible + .carousel__slide--visible + .carousel__slide--visible .carousel__inner-slide > div:first-child:after {
330
+ right: calc(-250% - 6px);
331
+ width: 250%;
322
332
  }
323
333
  }
324
334
 
package/src/styleguide/data/data.js CHANGED
@@ -57,85 +57,85 @@ const carouselItemsComplete = {
57
57
  desktopHeight: 475,
58
58
  headerCopy: 'Over the past two years, we’ve supported',
59
59
  peopleHelpedText: '11.7 million people',
60
- autoPlay: true,
61
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
60
+ autoplay: false,
61
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
62
62
  node1_Amount: '1,000',
63
63
  node1_Image: {
64
64
  file: {
65
65
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
66
66
  }
67
67
  },
68
- 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',
68
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
69
69
  node2_Amount: '750,000',
70
70
  node2_Image: {
71
71
  file: {
72
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
72
+ url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
73
73
  }
74
74
  },
75
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
75
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
76
76
  node3_Amount: '3,000',
77
77
  node3_Image: {
78
78
  file: {
79
79
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
80
80
  }
81
81
  },
82
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
82
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
83
83
  node4_Amount: '4,000',
84
84
  node4_Image: {
85
85
  file: {
86
86
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
87
87
  }
88
88
  },
89
- node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
89
+ node5_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
90
90
  node5_Amount: '5,000',
91
91
  node5_Image: {
92
92
  file: {
93
93
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
94
94
  }
95
95
  },
96
- node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
96
+ node6_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
97
97
  node6_Amount: '6,000',
98
98
  node6_Image: {
99
99
  file: {
100
100
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
101
101
  }
102
102
  },
103
- node7_Copy: 'NODE7: people in the UK experiencing poverty to access advice and support.',
103
+ node7_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
104
104
  node7_Amount: '7,000',
105
105
  node7_Image: {
106
106
  file: {
107
107
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
108
108
  }
109
109
  },
110
- node8_Copy: 'NODE8: people in the UK experiencing poverty to access advice and support.',
110
+ node8_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
111
111
  node8_Amount: '8,000',
112
112
  node8_Image: {
113
113
  file: {
114
114
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
115
115
  }
116
116
  },
117
- node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
117
+ node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
118
118
  node9_Amount: '9,000',
119
119
  node9_Image: {
120
120
  file: {
121
121
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
122
122
  }
123
123
  },
124
- node10_Copy: 'NODE10: people in the UK experiencing poverty to access advice and support.',
124
+ node10_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
125
125
  node10_Amount: '10,000',
126
126
  node10_Image: {
127
127
  file: {
128
128
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
129
129
  }
130
130
  },
131
- node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
131
+ node11_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
132
132
  node11_Amount: '11,000',
133
133
  node11_Image: {
134
134
  file: {
135
135
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
136
136
  }
137
137
  },
138
- node12_Copy: 'NODE12: people in the UK experiencing poverty to access advice and support.750,000',
138
+ node12_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
139
139
  node12_Amount: '12,000',
140
140
  node12_Image: {
141
141
  file: {
@@ -153,41 +153,41 @@ const carouselItemsIncomplete = {
153
153
  headerCopy: 'Over the past two years, we’ve supported',
154
154
  peopleHelpedText: '11.7 million people',
155
155
  autoPlay: false,
156
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
156
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
157
157
  node1_Amount: '1,000',
158
158
  node1_Image: {
159
159
  file: {
160
160
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
161
161
  }
162
162
  },
163
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
163
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
164
164
  node2_Amount: '750,000',
165
165
  node2_Image: {
166
166
  file: {
167
167
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
168
168
  }
169
169
  },
170
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
170
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
171
171
  node3_Amount: '3,000',
172
172
  node3_Image: {
173
173
  file: {
174
174
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
175
175
  }
176
176
  },
177
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
177
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
178
178
  node4_Amount: '4,000',
179
179
  node4_Image: {
180
180
  file: {
181
181
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
182
182
  }
183
183
  },
184
- node5_Copy: 'NODE5: people in the UK experiencing poverty to access advice and support.',
184
+ node5_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
185
185
  node5_Image: {
186
186
  file: {
187
187
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
188
188
  }
189
189
  },
190
- node6_Copy: 'NODE6: people in the UK experiencing poverty to access advice and support.',
190
+ node6_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
191
191
  node6_Amount: '6,000',
192
192
  node6_Image: null,
193
193
  node7_Copy: null,
@@ -200,7 +200,7 @@ const carouselItemsIncomplete = {
200
200
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
201
201
  }
202
202
  },
203
- node9_Copy: 'NODE9: people in the UK experiencing poverty to access advice and support.',
203
+ node9_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
204
204
  node9_Amount: null,
205
205
  node9_Image: null,
206
206
  node10_Copy: null,
@@ -210,14 +210,14 @@ const carouselItemsIncomplete = {
210
210
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
211
211
  }
212
212
  },
213
- node11_Copy: 'NODE11: people in the UK experiencing poverty to access advice and support.',
213
+ node11_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
214
214
  node11_Amount: '11,000',
215
215
  node11_Image: {
216
216
  file: {
217
217
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
218
218
  }
219
219
  },
220
- node12_Copy: 'people in the UK experiencing poverty to access advice and support.750,000',
220
+ node12_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.750,000',
221
221
  node12_Amount: null,
222
222
  node12_Image: {
223
223
  file: {
@@ -235,28 +235,28 @@ const carouselItemsMinimal = {
235
235
  headerCopy: 'Over the past two years, we’ve supported',
236
236
  peopleHelpedText: '11.7 million people',
237
237
  autoPlay: false,
238
- node1_Copy: 'NODE1: people in the UK experiencing poverty to access advice and support.',
238
+ node1_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
239
239
  node1_Amount: '1,000',
240
240
  node1_Image: {
241
241
  file: {
242
242
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
243
243
  }
244
244
  },
245
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
245
+ node2_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
246
246
  node2_Amount: '750,000',
247
247
  node2_Image: {
248
248
  file: {
249
249
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
250
250
  }
251
251
  },
252
- node3_Copy: 'NODE3: people in the UK experiencing poverty to access advice and support.',
252
+ node3_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
253
253
  node3_Amount: '3,000',
254
254
  node3_Image: {
255
255
  file: {
256
256
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
257
257
  }
258
258
  },
259
- node4_Copy: 'NODE4: people in the UK experiencing poverty to access advice and support.',
259
+ node4_Copy: 'children and young people in the UK and around the world, including with safe homes, good nutrition and access to quality healthcare and education.',
260
260
  node4_Amount: '4,000',
261
261
  node4_Image: {
262
262
  file: {