@comicrelief/component-library 7.35.8 → 7.35.10

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 (11) hide show
  1. package/dist/components/Atoms/Text/Text.js +16 -6
  2. package/dist/components/Atoms/Text/Text.md +55 -14
  3. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +3 -13
  4. package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +1 -1
  5. package/dist/styleguide/data/data.js +2 -2
  6. package/package.json +1 -1
  7. package/src/components/Atoms/Text/Text.js +12 -3
  8. package/src/components/Atoms/Text/Text.md +55 -14
  9. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js +4 -11
  10. package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js +6 -14
  11. package/src/styleguide/data/data.js +2 -2
package/dist/components/Atoms/Text/Text.js CHANGED
@@ -8,11 +8,12 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = exports.BaseText = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
+ var _breakpoint = require("../../../theme/shared/breakpoint");
11
12
  /** Text component */
12
13
  const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
13
14
  displayName: "Text__BaseText",
14
15
  componentId: "sc-1snl0ya-0"
15
- })(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";"], _ref => {
16
+ })(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
16
17
  let {
17
18
  color,
18
19
  theme
@@ -69,29 +70,37 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
69
70
  return size === 'super' ? (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.breakpoint('small'), theme.fontSize('big'), theme.fontSize('big'), theme.breakpoint('medium'), theme.fontSize('super'), theme.fontSize('super')) : null;
70
71
  }, _ref11 => {
71
72
  let {
72
- size,
73
+ mobileColor,
73
74
  theme
74
75
  } = _ref11;
76
+ return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _breakpoint.sizes.medium - 1, theme.color(mobileColor));
77
+ }, _ref12 => {
78
+ let {
79
+ size,
80
+ theme
81
+ } = _ref12;
75
82
  return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.breakpoint('small'), theme.fontSize('m')) : null;
76
83
  });
77
84
 
78
85
  /** Text renders different elements based on the `tag` prop
79
86
  * Weight is checked for existence to prevent overriding the tag's css
80
87
  */
81
- const Text = _ref12 => {
88
+ const Text = _ref13 => {
82
89
  let {
83
90
  tag,
84
91
  children,
85
92
  height,
86
93
  weight,
87
94
  family,
95
+ mobileColor,
88
96
  ...rest
89
- } = _ref12;
97
+ } = _ref13;
90
98
  return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
91
99
  as: tag,
92
100
  height: height,
93
101
  weight: weight,
94
- family: family
102
+ family: family,
103
+ mobileColor: mobileColor
95
104
  }), children);
96
105
  };
97
106
  Text.defaultProps = {
@@ -102,6 +111,7 @@ Text.defaultProps = {
102
111
  uppercase: false,
103
112
  size: 's',
104
113
  color: 'inherit',
105
- children: undefined
114
+ children: undefined,
115
+ mobileColor: null
106
116
  };
107
117
  var _default = exports.default = Text;
package/dist/components/Atoms/Text/Text.md CHANGED
@@ -1,46 +1,87 @@
1
1
  ```js
2
2
  <div>
3
+ <Text
4
+ tag="h1"
5
+ family="Anton"
6
+ uppercase
7
+ weight="normal"
8
+ size="super"
9
+ mobileColor="blue"
10
+ >
11
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
12
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem / super <b>mobileColor:</b> blue
14
+ </Text>
15
+ </Text>
16
+ <Text
17
+ tag="h2"
18
+ family="Anton"
19
+ uppercase
20
+ weight="normal"
21
+ size="big"
22
+ mobileColor="green"
23
+ >
24
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
25
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
26
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
27
+ <b>mobileColor:</b> green
28
+ </Text>
29
+ </Text>
30
+ <Text
31
+ tag="h3"
32
+ family="Anton"
33
+ uppercase
34
+ weight="normal"
35
+ size="xxl"
36
+ mobileColor="red"
37
+ >
38
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
39
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
40
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
41
+ <b>mobileColor:</b> red
42
+ </Text>
43
+ </Text>
3
44
  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
4
- <b style={{ width: '100px', display: 'inline-block' }}>H1 </b>
5
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
45
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
46
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
6
47
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem /
7
48
  super
8
49
  </Text>
9
50
  </Text>
10
51
  <Text tag="h2" family="Anton" uppercase weight="normal" size="big">
11
- <b style={{ width: '100px', display: 'inline-block' }}>H2 </b>
12
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
52
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
53
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
54
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
14
55
  </Text>
15
56
  </Text>
16
57
  <Text tag="h3" family="Anton" uppercase weight="normal" size="xxl">
17
- <b style={{ width: '100px', display: 'inline-block' }}>H3 </b>
18
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
58
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
59
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
19
60
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
20
61
  </Text>
21
62
  </Text>
22
63
  <Text tag="h4" family="Anton" uppercase weight="normal" size="xl">
23
- <b style={{ width: '100px', display: 'inline-block' }}>H4 </b>
24
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
64
+ <b style={{ width: "100px", display: "inline-block" }}>H4 </b>
65
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
25
66
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 32px / 2rem / xl
26
67
  </Text>
27
68
  </Text>
28
69
  <Text tag="h4" family="Anton" uppercase weight="normal" size="l">
29
- <b style={{ width: '100px', display: 'inline-block' }}>H5 </b>
30
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
70
+ <b style={{ width: "100px", display: "inline-block" }}>H5 </b>
71
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
31
72
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 24px / 1.5rem / l
32
73
  </Text>
33
74
  </Text>
34
75
  <Text tag="p" size="m">
35
- <span style={{ width: '100px', display: 'inline-block' }}>Body1</span>
36
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
76
+ <span style={{ width: "100px", display: "inline-block" }}>Body1</span>
77
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
37
78
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 20px /
38
79
  1.25rem / m
39
80
  </Text>
40
81
  </Text>
41
82
  <Text tag="p" size="s">
42
- <span style={{ width: '100px', display: 'inline-block' }}>Body2</span>
43
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
83
+ <span style={{ width: "100px", display: "inline-block" }}>Body2</span>
84
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
44
85
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 16px / 1rem
45
86
  / s
46
87
  </Text>
package/dist/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -83,7 +83,7 @@ const Including = exports.Including = (0, _styledComponents.default)(_Text.defau
83
83
  const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.withConfig({
84
84
  displayName: "WYMDCarouselstyle__CarouselWrapper",
85
85
  componentId: "sc-115z54p-6"
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 => {
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;.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 ", "{padding-bottom:", "px !important;&.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 => {
87
87
  let {
88
88
  theme
89
89
  } = _ref9;
@@ -103,19 +103,9 @@ const CarouselWrapper = exports.CarouselWrapper = _styledComponents.default.div.
103
103
  theme
104
104
  } = _ref12;
105
105
  return theme.breakpoint('small');
106
- }, props => props.tabletHeight, _ref13 => {
106
+ }, props => props.tabletHeight, animationSpeed, animationSpeed, animationSpeed, animationSpeed, animationSpeed, textScaleOffsetA, textScaleOffsetB, textScaleOffsetA, textScaleOffsetB, _ref13 => {
107
107
  let {
108
108
  theme
109
109
  } = _ref13;
110
110
  return theme.breakpoint('medium');
111
- }, props => props.tabletHeight, _ref14 => {
112
- let {
113
- theme
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;
120
- return theme.breakpoint('medium');
121
- });
111
+ }, props => props.desktopHeight);
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: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 ");
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: 425px !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: 450px !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 {\n padding-bottom: 475px !important;\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 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,8 +43,8 @@ const testImpactSliderItems = exports.testImpactSliderItems = [{
43
43
  const carouselItemsComplete = exports.carouselItemsComplete = {
44
44
  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
45
45
  contentful_id: '7zdR84QkZwrTh9NWx2H926',
46
- mobileHeight: 450,
47
- tabletHeight: 500,
46
+ mobileHeight: 425,
47
+ tabletHeight: 450,
48
48
  desktopHeight: 475,
49
49
  headerCopy: 'Over the past two years, we’ve supported',
50
50
  peopleHelpedText: '11.7 million people',
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.8",
4
+ "version": "7.35.10",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Text/Text.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import styled, { css } from 'styled-components';
3
3
  import PropTypes from 'prop-types';
4
+ import { sizes } from '../../../theme/shared/breakpoint';
4
5
 
5
6
  /** Text component */
6
7
  export const BaseText = styled.span`
@@ -31,6 +32,11 @@ export const BaseText = styled.span`
31
32
  }
32
33
  `
33
34
  : null)};
35
+ ${({ mobileColor, theme }) => mobileColor && css`
36
+ @media (max-width: ${sizes.medium - 1}px) {
37
+ color: ${theme.color(mobileColor)};
38
+ }
39
+ `};
34
40
  ${({ size, theme }) => (size === 'm'
35
41
  ? css`
36
42
  font-size: ${theme.fontSize('s')};
@@ -45,7 +51,7 @@ export const BaseText = styled.span`
45
51
  * Weight is checked for existence to prevent overriding the tag's css
46
52
  */
47
53
  const Text = ({
48
- tag, children, height, weight, family, ...rest
54
+ tag, children, height, weight, family, mobileColor, ...rest
49
55
  }) => (
50
56
  <BaseText
51
57
  {...rest}
@@ -53,6 +59,7 @@ const Text = ({
53
59
  height={height}
54
60
  weight={weight}
55
61
  family={family}
62
+ mobileColor={mobileColor}
56
63
  >
57
64
  {children}
58
65
  </BaseText>
@@ -77,7 +84,8 @@ Text.propTypes = {
77
84
  PropTypes.arrayOf(PropTypes.node),
78
85
  PropTypes.node,
79
86
  PropTypes.string
80
- ])
87
+ ]),
88
+ mobileColor: PropTypes.string
81
89
  };
82
90
 
83
91
  Text.defaultProps = {
@@ -88,7 +96,8 @@ Text.defaultProps = {
88
96
  uppercase: false,
89
97
  size: 's',
90
98
  color: 'inherit',
91
- children: undefined
99
+ children: undefined,
100
+ mobileColor: null
92
101
  };
93
102
 
94
103
  export default Text;
package/src/components/Atoms/Text/Text.md CHANGED
@@ -1,46 +1,87 @@
1
1
  ```js
2
2
  <div>
3
+ <Text
4
+ tag="h1"
5
+ family="Anton"
6
+ uppercase
7
+ weight="normal"
8
+ size="super"
9
+ mobileColor="blue"
10
+ >
11
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
12
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem / super <b>mobileColor:</b> blue
14
+ </Text>
15
+ </Text>
16
+ <Text
17
+ tag="h2"
18
+ family="Anton"
19
+ uppercase
20
+ weight="normal"
21
+ size="big"
22
+ mobileColor="green"
23
+ >
24
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
25
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
26
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
27
+ <b>mobileColor:</b> green
28
+ </Text>
29
+ </Text>
30
+ <Text
31
+ tag="h3"
32
+ family="Anton"
33
+ uppercase
34
+ weight="normal"
35
+ size="xxl"
36
+ mobileColor="red"
37
+ >
38
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
39
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
40
+ <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
41
+ <b>mobileColor:</b> red
42
+ </Text>
43
+ </Text>
3
44
  <Text tag="h1" family="Anton" uppercase weight="normal" size="super">
4
- <b style={{ width: '100px', display: 'inline-block' }}>H1 </b>
5
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
45
+ <b style={{ width: "100px", display: "inline-block" }}>H1 </b>
46
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
6
47
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 80px / 5rem /
7
48
  super
8
49
  </Text>
9
50
  </Text>
10
51
  <Text tag="h2" family="Anton" uppercase weight="normal" size="big">
11
- <b style={{ width: '100px', display: 'inline-block' }}>H2 </b>
12
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
52
+ <b style={{ width: "100px", display: "inline-block" }}>H2 </b>
53
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
13
54
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 64px / 4rem / big
14
55
  </Text>
15
56
  </Text>
16
57
  <Text tag="h3" family="Anton" uppercase weight="normal" size="xxl">
17
- <b style={{ width: '100px', display: 'inline-block' }}>H3 </b>
18
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
58
+ <b style={{ width: "100px", display: "inline-block" }}>H3 </b>
59
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
19
60
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 48px / 3rem / xxl
20
61
  </Text>
21
62
  </Text>
22
63
  <Text tag="h4" family="Anton" uppercase weight="normal" size="xl">
23
- <b style={{ width: '100px', display: 'inline-block' }}>H4 </b>
24
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
64
+ <b style={{ width: "100px", display: "inline-block" }}>H4 </b>
65
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
25
66
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 32px / 2rem / xl
26
67
  </Text>
27
68
  </Text>
28
69
  <Text tag="h4" family="Anton" uppercase weight="normal" size="l">
29
- <b style={{ width: '100px', display: 'inline-block' }}>H5 </b>
30
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
70
+ <b style={{ width: "100px", display: "inline-block" }}>H5 </b>
71
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
31
72
  <b>family:</b> Anton <b>weight:</b> Regular <b>size:</b> 24px / 1.5rem / l
32
73
  </Text>
33
74
  </Text>
34
75
  <Text tag="p" size="m">
35
- <span style={{ width: '100px', display: 'inline-block' }}>Body1</span>
36
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
76
+ <span style={{ width: "100px", display: "inline-block" }}>Body1</span>
77
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
37
78
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 20px /
38
79
  1.25rem / m
39
80
  </Text>
40
81
  </Text>
41
82
  <Text tag="p" size="s">
42
- <span style={{ width: '100px', display: 'inline-block' }}>Body2</span>
43
- <Text style={{ textTransform: 'none' }} tag="span" size="s">
83
+ <span style={{ width: "100px", display: "inline-block" }}>Body2</span>
84
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
44
85
  <b>family:</b> Montserrat <b>weight:</b> Regular <b>size:</b> 16px / 1rem
45
86
  / s
46
87
  </Text>
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js CHANGED
@@ -161,7 +161,6 @@ const CarouselWrapper = styled.div`
161
161
  rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
162
162
  }
163
163
 
164
-
165
164
  &:hover {
166
165
  &:after {
167
166
  opacity: 0.5;
@@ -207,18 +206,13 @@ const CarouselWrapper = styled.div`
207
206
  }
208
207
 
209
208
  .carousel__slide {
209
+ // 'Mobile'
210
210
  padding-bottom: ${props => props.mobileHeight}px !important;
211
211
 
212
+ // 'Tablet' (and up) tweaks for the 3-visible layout
212
213
  @media ${({ theme }) => theme.breakpoint('small')} {
213
- padding-bottom: ${props => props.tabletHeight}px !important;
214
- }
215
214
 
216
- @media ${({ theme }) => theme.breakpoint('medium')} {
217
215
  padding-bottom: ${props => props.tabletHeight}px !important;
218
- }
219
-
220
- @media ${({ theme }) => theme.breakpoint('small')} {
221
- padding-bottom: ${props => props.desktopHeight}px !important;
222
216
 
223
217
  // All slides:
224
218
  .carousel__inner-slide {
@@ -258,7 +252,6 @@ const CarouselWrapper = styled.div`
258
252
  }
259
253
  }
260
254
 
261
-
262
255
  // 2nd and 3rd:
263
256
  + .carousel__slide--visible {
264
257
  .carousel__inner-slide {
@@ -294,9 +287,9 @@ const CarouselWrapper = styled.div`
294
287
  }
295
288
  }
296
289
 
297
- // HERE WE GO
298
- // START OF DESKTOP
290
+ // 'Desktop'
299
291
  @media ${({ theme }) => theme.breakpoint('medium')} {
292
+ padding-bottom: ${props => props.desktopHeight}px !important;
300
293
 
301
294
  // First
302
295
  &.carousel__slide--visible {
package/src/components/Organisms/WYMDCarousel/WYMDCarousel.test.js CHANGED
@@ -149,7 +149,7 @@ it("renders correctly", () => {
149
149
  }
150
150
 
151
151
  .c0 .carousel .wymd-carousel .carousel__slide {
152
- padding-bottom: 450px !important;
152
+ padding-bottom: 425px !important;
153
153
  }
154
154
 
155
155
  .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide {
@@ -219,19 +219,7 @@ it("renders correctly", () => {
219
219
 
220
220
  @media (min-width:740px) {
221
221
  .c0 .carousel .wymd-carousel .carousel__slide {
222
- padding-bottom: 500px !important;
223
- }
224
- }
225
-
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) {
233
- .c0 .carousel .wymd-carousel .carousel__slide {
234
- padding-bottom: 475px !important;
222
+ padding-bottom: 450px !important;
235
223
  }
236
224
 
237
225
  .c0 .carousel .wymd-carousel .carousel__slide .carousel__inner-slide > div:first-child {
@@ -316,6 +304,10 @@ it("renders correctly", () => {
316
304
  }
317
305
 
318
306
  @media (min-width:1024px) {
307
+ .c0 .carousel .wymd-carousel .carousel__slide {
308
+ padding-bottom: 475px !important;
309
+ }
310
+
319
311
  .c0 .carousel .wymd-carousel .carousel__slide.carousel__slide--visible .carousel__inner-slide > div:first-child:after {
320
312
  right: calc(-250% - 6px);
321
313
  width: 250%;
package/src/styleguide/data/data.js CHANGED
@@ -52,8 +52,8 @@ const testImpactSliderItems = [
52
52
  const carouselItemsComplete = {
53
53
  __typename: 'ContentfulWhatYourMoneyDoesCarousel',
54
54
  contentful_id: '7zdR84QkZwrTh9NWx2H926',
55
- mobileHeight: 450,
56
- tabletHeight: 500,
55
+ mobileHeight: 425,
56
+ tabletHeight: 450,
57
57
  desktopHeight: 475,
58
58
  headerCopy: 'Over the past two years, we’ve supported',
59
59
  peopleHelpedText: '11.7 million people',