@comicrelief/component-library 7.35.4 → 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 +14 -15
  2. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +51 -21
  3. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
  4. package/dist/styleguide/data/data.js +39 -36
  5. package/package.json +1 -1
  6. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.js +15 -13
  7. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +107 -48
  8. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +62 -41
  9. package/src/styleguide/data/data.js +39 -36
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,12 +55,13 @@ 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",
62
62
  id: thisID,
63
63
  mobileHeight: data.mobileHeight,
64
+ tabletHeight: data.tabletHeight,
64
65
  desktopHeight: data.desktopHeight
65
66
  }, /*#__PURE__*/_react.default.createElement(_WYMDCarousel.Heading, {
66
67
  tag: "p",
@@ -83,12 +84,12 @@ const WYMDCarousel = _ref => {
83
84
  infinite: true
84
85
  }, /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slider, {
85
86
  classNameAnimation: "wymd-carousel"
86
- }, isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
87
+ }, isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
87
88
  index: 0,
88
89
  key: 0
89
90
  }), Object.keys(theseItems).map((key, index) => {
90
91
  // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
91
- const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
92
+ const thisOffsetIndex = index + (isMobile ? 0 : 1);
92
93
  return (
93
94
  /*#__PURE__*/
94
95
  // Calculate the index offset accordingly to reflect the number of slides,
@@ -108,14 +109,12 @@ const WYMDCarousel = _ref => {
108
109
  tag: "h1",
109
110
  family: "Anton",
110
111
  uppercase: true,
111
- weight: "normal",
112
- size: "super"
112
+ weight: "normal"
113
113
  }, theseItems[key].amount)), /*#__PURE__*/_react.default.createElement(_WYMDCarousel.CopyWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
114
- tag: "p",
115
- size: "l"
114
+ tag: "p"
116
115
  }, theseItems[key].copy))))
117
116
  );
118
- }), isMobileOrTablet === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
117
+ }), isMobile === false && /*#__PURE__*/_react.default.createElement(_pureReactCarousel.Slide, {
119
118
  index: theseItems.length + 1,
120
119
  key: "bookend-last"
121
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:33%;display:block;padding:7%;border:2px dashed #89888b;border-radius:50%;position:relative;overflow:visible;img{width:100%;height:auto;}&:after{position:absolute;content:'';top:50%;width:200%;right:calc(-200% - 8px);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:20px;line-height:23px;@media ", "{font-size:21px;line-height:23px;}}"], (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:40px;line-height:40px;@media ", "{font-size:60px;line-height:60px;}@media ", "{font-size:75px;line-height:78px;}"], (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:14px;line-height:17px;@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,24 +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:", ";.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;.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'), _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)('lg'), _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;
115
+ return theme.breakpoint('small');
116
+ }, props => props.desktopHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref15 => {
117
+ let {
118
+ theme
119
+ } = _ref15;
90
120
  return theme.breakpoint('medium');
91
- }, 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: 20px;\n line-height: 23px;\n }\n\n .c4 {\n margin-bottom: 2rem;\n text-align: center;\n font-size: 40px;\n line-height: 40px;\n }\n\n .c6 {\n margin-bottom: 0;\n text-align: center;\n font-size: 14px;\n line-height: 17px;\n }\n\n .c0 {\n height: 100%;\n background-color: #FFFFFF;\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: 500px !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: 21px;\n line-height: 23px;\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: 75px;\n line-height: 78px;\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: 3rem;\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:1024px) {\n .c0 .carousel .wymd-carousel .carousel__slide {\n padding-bottom: 550px !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
@@ -43,89 +43,90 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
43
43
  const carouselItemsComplete = exports.carouselItemsComplete = {
44
44
  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
45
45
  contentful_id: '7zdR84QkZwrTh9NWx2H926',
46
- mobileHeight: 500,
47
- desktopHeight: 550,
46
+ mobileHeight: 450,
47
+ tabletHeight: 500,
48
+ desktopHeight: 475,
48
49
  headerCopy: 'Over the past two years, we’ve supported',
49
50
  peopleHelpedText: '11.7 million people',
50
- autoPlay: true,
51
- 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.',
52
53
  node1_Amount: '1,000',
53
54
  node1_Image: {
54
55
  file: {
55
56
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
56
57
  }
57
58
  },
58
- 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_Amount: '2,000',
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
+ node2_Amount: '750,000',
60
61
  node2_Image: {
61
62
  file: {
62
- url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
63
+ url: 'https://images.ctfassets.net/zsfivwzfgl3t/5uKnps3prnG6GpTM1EPZdC/8d7264465846de31e3bbb5b6b2c36c8f/014-helping_hand.png'
63
64
  }
64
65
  },
65
- 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.',
66
67
  node3_Amount: '3,000',
67
68
  node3_Image: {
68
69
  file: {
69
70
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
70
71
  }
71
72
  },
72
- 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.',
73
74
  node4_Amount: '4,000',
74
75
  node4_Image: {
75
76
  file: {
76
77
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
77
78
  }
78
79
  },
79
- 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.',
80
81
  node5_Amount: '5,000',
81
82
  node5_Image: {
82
83
  file: {
83
84
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
84
85
  }
85
86
  },
86
- 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.',
87
88
  node6_Amount: '6,000',
88
89
  node6_Image: {
89
90
  file: {
90
91
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
91
92
  }
92
93
  },
93
- 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.',
94
95
  node7_Amount: '7,000',
95
96
  node7_Image: {
96
97
  file: {
97
98
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
98
99
  }
99
100
  },
100
- 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.',
101
102
  node8_Amount: '8,000',
102
103
  node8_Image: {
103
104
  file: {
104
105
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
105
106
  }
106
107
  },
107
- 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.',
108
109
  node9_Amount: '9,000',
109
110
  node9_Image: {
110
111
  file: {
111
112
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
112
113
  }
113
114
  },
114
- 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.',
115
116
  node10_Amount: '10,000',
116
117
  node10_Image: {
117
118
  file: {
118
119
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
119
120
  }
120
121
  },
121
- 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.',
122
123
  node11_Amount: '11,000',
123
124
  node11_Image: {
124
125
  file: {
125
126
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
126
127
  }
127
128
  },
128
- 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',
129
130
  node12_Amount: '12,000',
130
131
  node12_Image: {
131
132
  file: {
@@ -136,46 +137,47 @@ const carouselItemsComplete = exports.carouselItemsComplete = {
136
137
  const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
137
138
  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
138
139
  contentful_id: '7zdR84QkZwrTh9NWx2H9262',
139
- mobileHeight: 500,
140
- desktopHeight: 550,
140
+ mobileHeight: 450,
141
+ tabletHeight: 500,
142
+ desktopHeight: 475,
141
143
  headerCopy: 'Over the past two years, we’ve supported',
142
144
  peopleHelpedText: '11.7 million people',
143
145
  autoPlay: false,
144
- 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.',
145
147
  node1_Amount: '1,000',
146
148
  node1_Image: {
147
149
  file: {
148
150
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
149
151
  }
150
152
  },
151
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
152
- node2_Amount: '2,000',
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
+ node2_Amount: '750,000',
153
155
  node2_Image: {
154
156
  file: {
155
157
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
156
158
  }
157
159
  },
158
- 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.',
159
161
  node3_Amount: '3,000',
160
162
  node3_Image: {
161
163
  file: {
162
164
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
163
165
  }
164
166
  },
165
- 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.',
166
168
  node4_Amount: '4,000',
167
169
  node4_Image: {
168
170
  file: {
169
171
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
170
172
  }
171
173
  },
172
- 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.',
173
175
  node5_Image: {
174
176
  file: {
175
177
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
176
178
  }
177
179
  },
178
- 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.',
179
181
  node6_Amount: '6,000',
180
182
  node6_Image: null,
181
183
  node7_Copy: null,
@@ -188,7 +190,7 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
188
190
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
189
191
  }
190
192
  },
191
- 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.',
192
194
  node9_Amount: null,
193
195
  node9_Image: null,
194
196
  node10_Copy: null,
@@ -198,14 +200,14 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
198
200
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
199
201
  }
200
202
  },
201
- 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.',
202
204
  node11_Amount: '11,000',
203
205
  node11_Image: {
204
206
  file: {
205
207
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
206
208
  }
207
209
  },
208
- 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',
209
211
  node12_Amount: null,
210
212
  node12_Image: {
211
213
  file: {
@@ -216,33 +218,34 @@ const carouselItemsIncomplete = exports.carouselItemsIncomplete = {
216
218
  const carouselItemsMinimal = exports.carouselItemsMinimal = {
217
219
  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
218
220
  contentful_id: '7zdR84QkZwrTh9NWx2H9263',
219
- mobileHeight: 500,
220
- desktopHeight: 550,
221
+ mobileHeight: 450,
222
+ tabletHeight: 500,
223
+ desktopHeight: 475,
221
224
  headerCopy: 'Over the past two years, we’ve supported',
222
225
  peopleHelpedText: '11.7 million people',
223
226
  autoPlay: false,
224
- 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.',
225
228
  node1_Amount: '1,000',
226
229
  node1_Image: {
227
230
  file: {
228
231
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
229
232
  }
230
233
  },
231
- node2_Copy: 'NODE2: people in the UK experiencing poverty to access advice and support.',
232
- node2_Amount: '2,000',
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
+ node2_Amount: '750,000',
233
236
  node2_Image: {
234
237
  file: {
235
238
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
236
239
  }
237
240
  },
238
- 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.',
239
242
  node3_Amount: '3,000',
240
243
  node3_Image: {
241
244
  file: {
242
245
  url: '//images.ctfassets.net/zsfivwzfgl3t/45yv3H0XZsvsySHtutQ8vb/1fb6d1afe4037c7dccde743a747f6b4f/Test-Carousel-Icon.png'
243
246
  }
244
247
  },
245
- 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.',
246
249
  node4_Amount: '4,000',
247
250
  node4_Image: {
248
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.4",
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 (
@@ -59,6 +59,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
59
59
  className="CarouselWrapper"
60
60
  id={thisID}
61
61
  mobileHeight={data.mobileHeight}
62
+ tabletHeight={data.tabletHeight}
62
63
  desktopHeight={data.desktopHeight}
63
64
  >
64
65
 
@@ -87,13 +88,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
87
88
  <Slider classNameAnimation="wymd-carousel">
88
89
 
89
90
  {/* Dummy slide for our desired non-mobile layout and functionality */}
90
- {isMobileOrTablet === false && (
91
+ {isMobile === false && (
91
92
  <Slide index={0} key={0} />
92
93
  )}
93
94
 
94
95
  {Object.keys(theseItems).map((key, index) => {
95
96
  // Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
96
- const thisOffsetIndex = index + (isMobileOrTablet ? 0 : 1);
97
+ const thisOffsetIndex = index + (isMobile ? 0 : 1);
97
98
 
98
99
  return (
99
100
  // Calculate the index offset accordingly to reflect the number of slides,
@@ -110,13 +111,13 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
110
111
 
111
112
  <div className="all-text-wrapper">
112
113
  <AmountWrapper>
113
- <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
114
+ <Text tag="h1" family="Anton" uppercase weight="normal">
114
115
  {theseItems[key].amount}
115
116
  </Text>
116
117
  </AmountWrapper>
117
118
 
118
119
  <CopyWrapper>
119
- <Text tag="p" size="l">
120
+ <Text tag="p">
120
121
  {theseItems[key].copy}
121
122
  </Text>
122
123
  </CopyWrapper>
@@ -127,7 +128,7 @@ const WYMDCarousel = ({ data, data: { autoPlay, contentful_id: thisID } }) => {
127
128
  })}
128
129
 
129
130
  {/* Dummy slide for our desired non-mobile layout and functionality */}
130
- {isMobileOrTablet === false && (
131
+ {isMobile === false && (
131
132
  <Slide index={theseItems.length + 1} key="bookend-last" />
132
133
  )}
133
134
 
@@ -234,6 +235,7 @@ WYMDCarousel.propTypes = {
234
235
  peopleHelpedText: PropTypes.string.isRequired,
235
236
  contentful_id: PropTypes.string.isRequired,
236
237
  mobileHeight: PropTypes.number,
238
+ tabletHeight: PropTypes.number,
237
239
  desktopHeight: PropTypes.number
238
240
  }).isRequired
239
241
  };