@comicrelief/component-library 8.55.4 → 8.56.0

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 (17) hide show
  1. package/dist/components/Atoms/Text/Text.md +165 -115
  2. package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.md +2 -2
  3. package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +2 -0
  4. package/dist/components/Molecules/CTA/shared/CTACard.style.js +1 -1
  5. package/dist/components/Molecules/SingleMessage/SingleMessage.js +8 -2
  6. package/dist/components/Molecules/SingleMessage/SingleMessage.style.js +70 -60
  7. package/dist/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap +13 -1
  8. package/dist/theme/shared/global.css +19 -46
  9. package/package.json +1 -1
  10. package/src/components/Atoms/Text/Text.md +165 -115
  11. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md +2 -2
  12. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +2 -0
  13. package/src/components/Molecules/CTA/shared/CTACard.style.js +1 -0
  14. package/src/components/Molecules/SingleMessage/SingleMessage.js +10 -3
  15. package/src/components/Molecules/SingleMessage/SingleMessage.style.js +18 -14
  16. package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap +13 -1
  17. package/src/theme/shared/global.css +19 -46
package/dist/components/Atoms/Text/Text.md CHANGED
@@ -1,119 +1,169 @@
1
1
  ```js
2
2
  import fontConfig from '../../../theme/crTheme/fontConfig';
3
3
 
4
- <div>
5
- <Text
6
- tag="h1"
7
- mobileColor="blue"
8
- // To be phased out: tags to use the prescribed family always
9
- family="Anton"
10
- >
11
- <span style={{ width: "55px"}}>H1 </span>
12
- </Text>
13
- <Text style={{ textTransform: "none" }} tag="span" size="s">
14
- <b>family:</b> {fontConfig['h1'].family} -
15
- <b>mobileColor:</b> blue
16
- <br/>
17
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize}
18
- <br/>
19
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
20
- </Text>
21
-
22
-
23
- <Text
24
- tag="h2"
25
- mobileColor="green"
26
- family="Anton"
27
- >
28
- <span style={{ width: "55px"}}>H2 </span>
29
- </Text>
30
- <Text style={{ textTransform: "none" }} tag="span" size="s">
31
- <b>family:</b> {fontConfig['h2'].family} -
32
- <b>mobileColor:</b> green
33
- <br/>
34
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize}
35
- <br/>
36
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight}
37
- </Text>
38
-
39
- <Text
40
- tag="h3"
41
- mobileColor="red"
42
- family="Montserrat"
43
- >
44
- <span style={{ width: "55px"}}>H3 </span>
45
- </Text>
46
- <Text style={{ textTransform: "none" }} tag="span" size="s">
47
- <b>family:</b> {fontConfig['h3'].family} -
48
- <b>mobileColor:</b> red
49
- <br/>
50
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize}
51
- <br/>
52
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight}
53
- </Text>
54
-
55
- <Text
56
- tag="h4"
57
- family="Montserrat"
58
- weight="normal"
59
- // To be phased out: text to always be rendered as typed
60
- uppercase>
61
- <span style={{ width: "55px"}}>H4 </span>
62
- </Text>
63
- <Text style={{ textTransform: "none" }} tag="span" size="s">
64
- <b>family:</b> {fontConfig['span'].family} -
65
- <br/>
66
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize}
67
- <br/>
68
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight}
69
- </Text>
70
-
71
-
72
-
73
- <Text tag="p" size="m" style={{ marginTop: "2rem"}} height="100px" weight="500">
74
- <span style={{ width: "55px"}}>P (body)</span>
75
- </Text>
76
- <Text style={{ textTransform: "none" }} tag="span" size="s">
77
- <b>family:</b> {fontConfig['p'].family} -
78
- <br/>
79
- <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize}
80
- <br/>
81
- <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight}
82
- </Text>
83
-
84
- <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
85
- Tags to be phased out:
86
- </Text>
87
-
88
- <Text
89
- tag="h5"
90
- family="Anton"
91
- uppercase
92
- // To be phased-out
93
- weight="normal">
94
- <span style={{ width: "55px"}}>H5 </span>
95
- </Text>
96
- <Text style={{ textTransform: "none" }} tag="span" size="s">
97
- <b>family:</b> {fontConfig['h5'].family} -
98
- <br/>
99
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize}
100
- <br/>
101
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight}
102
- </Text>
103
-
104
- <Text tag="h6"
105
- family="Anton"
106
- uppercase
107
- weight="normal">
108
- <span style={{ width: "55px"}}>H6</span>
109
- </Text>
110
- <Text style={{ textTransform: "none" }} tag="span" size="s">
111
- <b>family:</b> {fontConfig['h6'].family}
112
- <br/>
113
- <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize}
114
- <br/>
115
- <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight}
116
- </Text>
117
-
118
- </div>
4
+ <>
5
+ <div style={{padding: "1rem 0"}}>
6
+ <Text
7
+ tag="h1"
8
+ mobileColor="blue"
9
+ // To be phased out: tags to use the prescribed family always
10
+ family="Anton"
11
+ >
12
+ <span style={{ width: "55px"}}>H1 </span>
13
+ </Text>
14
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
15
+ <b>family:</b> {fontConfig['h1'].family} -
16
+ <b>mobileColor:</b> blue
17
+ <br/>
18
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h1'].small.fontSize} / {fontConfig['h1'].medium.fontSize} / {fontConfig['h1'].large.fontSize}
19
+ <br/>
20
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h1'].small.lineHeight} / {fontConfig['h1'].medium.lineHeight} / {fontConfig['h1'].large.lineHeight}
21
+ </Text>
22
+
23
+ <Text
24
+ tag="h2"
25
+ mobileColor="green"
26
+ family="Anton"
27
+ >
28
+ <span style={{ width: "55px"}}>H2 </span>
29
+ </Text>
30
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
31
+ <b>family:</b> {fontConfig['h2'].family} -
32
+ <b>mobileColor:</b> green
33
+ <br/>
34
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h2'].small.fontSize} / {fontConfig['h2'].medium.fontSize} / {fontConfig['h2'].large.fontSize}
35
+ <br/>
36
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h2'].small.lineHeight} / {fontConfig['h2'].medium.lineHeight} / {fontConfig['h2'].large.lineHeight}
37
+ </Text>
38
+
39
+ <Text
40
+ tag="h3"
41
+ mobileColor="red"
42
+ family="Montserrat"
43
+ >
44
+ <span style={{ width: "55px"}}>H3 </span>
45
+ </Text>
46
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
47
+ <b>family:</b> {fontConfig['h3'].family} -
48
+ <b>mobileColor:</b> red
49
+ <br/>
50
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h3'].small.fontSize} / {fontConfig['h3'].medium.fontSize} / {fontConfig['h3'].large.fontSize}
51
+ <br/>
52
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h3'].small.lineHeight} / {fontConfig['h3'].medium.lineHeight} / {fontConfig['h3'].large.lineHeight}
53
+ </Text>
54
+
55
+ <Text
56
+ tag="h4"
57
+ family="Montserrat"
58
+ weight="normal"
59
+ // To be phased out: text to always be rendered as typed
60
+ uppercase>
61
+ <span style={{ width: "55px"}}>H4 </span>
62
+ </Text>
63
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
64
+ <b>family:</b> {fontConfig['span'].family} -
65
+ <br/>
66
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h4'].small.fontSize} / {fontConfig['h4'].medium.fontSize} / {fontConfig['h4'].large.fontSize}
67
+ <br/>
68
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h4'].small.lineHeight} / {fontConfig['h4'].medium.lineHeight} / {fontConfig['h4'].large.lineHeight}
69
+ </Text>
70
+
71
+ <Text tag="p" size="m" style={{ marginTop: "2rem"}} weight="500">
72
+ <span style={{ width: "55px"}}>P (body)</span>
73
+ </Text>
74
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
75
+ <b>family:</b> {fontConfig['p'].family} -
76
+ <br/>
77
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['p'].small.fontSize} / {fontConfig['p'].medium.fontSize} / {fontConfig['p'].large.fontSize}
78
+ <br/>
79
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['p'].small.lineHeight} / {fontConfig['p'].medium.lineHeight} / {fontConfig['p'].large.lineHeight}
80
+ </Text>
81
+
82
+ <Text tag="p" style={{ marginTop: "55px", fontStyle: "italic"}}>
83
+ Tags to be phased out:
84
+ </Text>
85
+
86
+ <Text
87
+ tag="h5"
88
+ family="Anton"
89
+ uppercase
90
+ // To be phased-out
91
+ weight="normal">
92
+ <span style={{ width: "55px"}}>H5 </span>
93
+ </Text>
94
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
95
+ <b>family:</b> {fontConfig['h5'].family} -
96
+ <br/>
97
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h5'].small.fontSize} / {fontConfig['h5'].medium.fontSize} / {fontConfig['h5'].large.fontSize}
98
+ <br/>
99
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h5'].small.lineHeight} / {fontConfig['h5'].medium.lineHeight} / {fontConfig['h5'].large.lineHeight}
100
+ </Text>
101
+
102
+ <Text tag="h6"
103
+ family="Anton"
104
+ uppercase
105
+ weight="normal">
106
+ <span style={{ width: "55px"}}>H6</span>
107
+ </Text>
108
+ <Text style={{ textTransform: "none" }} tag="span" size="s">
109
+ <b>family:</b> {fontConfig['h6'].family}
110
+ <br/>
111
+ <b>font size (S / M / L breakpoints):</b> {fontConfig['h6'].small.fontSize} / {fontConfig['h6'].medium.fontSize} / {fontConfig['h6'].large.fontSize}
112
+ <br/>
113
+ <b>line height (S / M / L breakpoints):</b> {fontConfig['h6'].small.lineHeight} / {fontConfig['h6'].medium.lineHeight} / {fontConfig['h6'].large.lineHeight}
114
+ </Text>
115
+ </div>
116
+
117
+ <div style={{padding: "1rem 0"}}>
118
+ <Text tag="h2"
119
+ family="Anton"
120
+ uppercase
121
+ weight="normal">
122
+ <span style={{ width: "55px"}}>Context styles:</span>
123
+ </Text>
124
+
125
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
126
+ <p>First paragraph</p>
127
+ <p>Second paragraph</p>
128
+ <p>Third and final paragraph</p>
129
+ </div>
130
+
131
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
132
+ <p>Only child P</p>
133
+ </div>
134
+
135
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
136
+ <h1>Only child H1</h1>
137
+ </div>
138
+
139
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
140
+ <h1>First child H1</h1>
141
+ <h1>Second child H1</h1>
142
+ </div>
143
+
144
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
145
+ <h1>h1</h1>
146
+ <p>Paragraph</p>
147
+ <p>Paragraph</p>
148
+ <p>Paragraph, last child</p>
149
+ </div>
150
+
151
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
152
+ <p>A preceding paragraph</p>
153
+ <p>A preceding paragraph</p>
154
+ <h1>H1 with an added margin-top as it follows a p tag</h1>
155
+ <p>Proceeding paragraph</p>
156
+ <p>Paragraph, last child</p>
157
+ </div>
158
+
159
+ <div style={{backgroundColor: 'aquamarine', padding: '1rem', margin: "1rem 0 1rem"}}>
160
+ <p>A preceding paragraph</p>
161
+ <p>A preceding paragraph</p>
162
+ <h1>H2 with an added margin-top as it follows a p tag</h1>
163
+ <p>Proceeding paragraph</p>
164
+ <p>Paragraph, last child</p>
165
+ </div>
166
+
167
+ </div>
168
+ </>
119
169
  ```
package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.md CHANGED
@@ -33,7 +33,7 @@ const exampleCard = {
33
33
  id: 'single-card-1',
34
34
  label: 'Example Label',
35
35
  body: (
36
- <Text tag="p" style={{ marginTop: '22px' }}>
36
+ <Text tag="p">
37
37
  <strong>Single Card</strong> content here
38
38
  </Text>
39
39
  ),
@@ -62,7 +62,7 @@ const exampleCard = {
62
62
  id: 'single-card-2',
63
63
  label: 'Example Label',
64
64
  body: (
65
- <Text tag="p" style={{ marginTop: '22px' }}>
65
+ <Text tag="p">
66
66
  Single card
67
67
  </Text>
68
68
  ),
package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED
@@ -221,6 +221,7 @@ exports[`renders correctly with data prop 1`] = `
221
221
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
222
222
  font-size: 14px;
223
223
  color: #969598;
224
+ margin-bottom: 14px;
224
225
  }
225
226
 
226
227
  .c13 {
@@ -748,6 +749,7 @@ exports[`renders correctly without image 1`] = `
748
749
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
749
750
  font-size: 14px;
750
751
  color: #969598;
752
+ margin-bottom: 14px;
751
753
  }
752
754
 
753
755
  .c9 {
package/dist/components/Molecules/CTA/shared/CTACard.style.js CHANGED
@@ -218,7 +218,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
218
218
  const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
219
219
  displayName: "CTACardstyle__CardLabel",
220
220
  componentId: "sc-si8xx1-9"
221
- })(["font-family:", ";font-size:14px;color:", ";"], _ref34 => {
221
+ })(["font-family:", ";font-size:14px;color:", ";margin-bottom:14px;"], _ref34 => {
222
222
  let {
223
223
  theme
224
224
  } = _ref34;
package/dist/components/Molecules/SingleMessage/SingleMessage.js CHANGED
@@ -31,7 +31,9 @@ const SingleMessage = _ref => {
31
31
  videoID = null,
32
32
  landscapeVideo = false,
33
33
  paddingTop = '2rem',
34
- paddingBottom = '2rem'
34
+ paddingBottom = '2rem',
35
+ smPaddingTop = '2rem',
36
+ smPaddingBottom = '2rem'
35
37
  } = _ref;
36
38
  const hasImage = imageSet || false;
37
39
  const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -41,6 +43,8 @@ const SingleMessage = _ref => {
41
43
  // things looking nice in the CL; only using the new props where they want 'em:
42
44
  const thisPaddingTop = hasImage || hasVideo ? '0rem' : paddingTop;
43
45
  const thisPaddingBottom = hasImage || hasVideo ? '0rem' : paddingBottom;
46
+ const thisSmPaddingTop = hasImage || hasVideo ? '0rem' : smPaddingTop;
47
+ const thisSmPaddingBottom = hasImage || hasVideo ? '0rem' : smPaddingBottom;
44
48
 
45
49
  // States to track video status
46
50
  const [isInitialised, setIsInitialised] = (0, _react.useState)(false);
@@ -133,7 +137,9 @@ const SingleMessage = _ref => {
133
137
  fullImage: fullImage,
134
138
  ref: thisRef,
135
139
  paddingTop: thisPaddingTop,
136
- paddingBottom: thisPaddingBottom
140
+ paddingBottom: thisPaddingBottom,
141
+ smPaddingTop: thisSmPaddingTop,
142
+ smPaddingBottom: thisSmPaddingBottom
137
143
  }, imageSet || imageSet2 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SingleMessage.Media, {
138
144
  doubleImage: doubleImage,
139
145
  isPlaying: isPlaying,
package/dist/components/Molecules/SingleMessage/SingleMessage.style.js CHANGED
@@ -16,7 +16,7 @@ var _loader = _interopRequireDefault(require("./assets/loader.svg"));
16
16
  const Container = exports.Container = _styledComponents.default.div.withConfig({
17
17
  displayName: "SingleMessagestyle__Container",
18
18
  componentId: "sc-86zg20-0"
19
- })(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";padding-top:", ";padding-bottom:", ";iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}@media ", "{flex-direction:", ";", ";}"], _ref => {
19
+ })(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";padding-top:", ";padding-bottom:", ";iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}@media ", "{flex-direction:", ";", ";padding-top:", ";padding-bottom:", ";}"], _ref => {
20
20
  let {
21
21
  theme,
22
22
  backgroundColor
@@ -24,14 +24,14 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
24
24
  return theme.color(backgroundColor);
25
25
  }, _ref2 => {
26
26
  let {
27
- paddingTop
27
+ smPaddingTop
28
28
  } = _ref2;
29
- return paddingTop;
29
+ return smPaddingTop;
30
30
  }, _ref3 => {
31
31
  let {
32
- paddingBottom
32
+ smPaddingBottom
33
33
  } = _ref3;
34
- return paddingBottom;
34
+ return smPaddingBottom;
35
35
  }, _ref4 => {
36
36
  let {
37
37
  copyFirst
@@ -59,165 +59,175 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
59
59
  fullImage
60
60
  } = _ref8;
61
61
  return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
62
+ }, _ref9 => {
63
+ let {
64
+ paddingTop
65
+ } = _ref9;
66
+ return paddingTop;
67
+ }, _ref10 => {
68
+ let {
69
+ paddingBottom
70
+ } = _ref10;
71
+ return paddingBottom;
62
72
  });
63
73
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
64
74
  displayName: "SingleMessagestyle__Copy",
65
75
  componentId: "sc-86zg20-1"
66
- })(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref9 => {
76
+ })(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref11 => {
67
77
  let {
68
78
  hasVideo,
69
79
  fullImage
70
- } = _ref9;
80
+ } = _ref11;
71
81
  return hasVideo === true && fullImage === true ? 'display: none;' : null;
72
- }, (0, _spacing.default)('l'), _ref10 => {
82
+ }, (0, _spacing.default)('l'), _ref12 => {
73
83
  let {
74
84
  theme
75
- } = _ref10;
85
+ } = _ref12;
76
86
  return theme.allBreakpoints('M');
77
- }, _ref11 => {
87
+ }, _ref13 => {
78
88
  let {
79
89
  vhFull,
80
90
  fullImage
81
- } = _ref11;
91
+ } = _ref13;
82
92
  return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
83
- }, _ref12 => {
93
+ }, _ref14 => {
84
94
  let {
85
95
  hasVideo,
86
96
  fullImage
87
- } = _ref12;
97
+ } = _ref14;
88
98
  return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
89
- }, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref13 => {
99
+ }, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref15 => {
90
100
  let {
91
101
  theme
92
- } = _ref13;
102
+ } = _ref15;
93
103
  return theme.allBreakpoints('M');
94
- }, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref14 => {
104
+ }, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref16 => {
95
105
  let {
96
106
  theme
97
- } = _ref14;
107
+ } = _ref16;
98
108
  return theme.allBreakpoints('M');
99
- }) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:0 ", ";}margin:auto;padding:", ";"], _ref15 => {
109
+ }) : (0, _styledComponents.css)(["margin:auto;padding:0 ", ";@media ", "{width:100%;max-width ", ";padding:0 ", ";}"], (0, _spacing.default)('md'), _ref17 => {
100
110
  let {
101
111
  theme
102
- } = _ref15;
112
+ } = _ref17;
103
113
  return theme.allBreakpoints('M');
104
- }, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
114
+ }, _containers.default.small, (0, _spacing.default)('xl')));
105
115
  const Media = exports.Media = _styledComponents.default.div.withConfig({
106
116
  displayName: "SingleMessagestyle__Media",
107
117
  componentId: "sc-86zg20-2"
108
- })(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";@media ", "{padding-bottom:", ";}"], _ref16 => {
118
+ })(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";@media ", "{padding-bottom:", ";}"], _ref18 => {
109
119
  let {
110
120
  fullImage
111
- } = _ref16;
121
+ } = _ref18;
112
122
  return fullImage ? 'height: 200px;' : 'height: 280px;';
113
- }, _ref17 => {
123
+ }, _ref19 => {
114
124
  let {
115
125
  theme
116
- } = _ref17;
126
+ } = _ref19;
117
127
  return theme.allBreakpoints('M');
118
- }, _ref18 => {
128
+ }, _ref20 => {
119
129
  let {
120
130
  fullImage
121
- } = _ref18;
131
+ } = _ref20;
122
132
  return fullImage ? '100%' : '50%';
123
- }, _ref19 => {
133
+ }, _ref21 => {
124
134
  let {
125
135
  fullImage
126
- } = _ref19;
136
+ } = _ref21;
127
137
  return fullImage ? 'min-height: 500px;' : null;
128
- }, _ref20 => {
138
+ }, _ref22 => {
129
139
  let {
130
140
  vhFull,
131
141
  fullImage
132
- } = _ref20;
142
+ } = _ref22;
133
143
  return vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null;
134
- }, _ref21 => {
144
+ }, _ref23 => {
135
145
  let {
136
146
  doubleImage
137
- } = _ref21;
147
+ } = _ref23;
138
148
  return doubleImage && 'display: flex; flex-direction: column';
139
- }, _ref22 => {
149
+ }, _ref24 => {
140
150
  let {
141
151
  hasVideo
142
- } = _ref22;
152
+ } = _ref24;
143
153
  return hasVideo ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;' : null;
144
- }, _ref23 => {
154
+ }, _ref25 => {
145
155
  let {
146
156
  theme
147
- } = _ref23;
157
+ } = _ref25;
148
158
  return theme.allBreakpoints('M');
149
- }, _ref24 => {
159
+ }, _ref26 => {
150
160
  let {
151
161
  landscapeVideo,
152
162
  hasVideo
153
- } = _ref24;
163
+ } = _ref26;
154
164
  return landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;';
155
165
  });
156
166
  const PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
157
167
  displayName: "SingleMessagestyle__PlayButton",
158
168
  componentId: "sc-86zg20-3"
159
- })(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}@media ", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref25 => {
169
+ })(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}@media ", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref27 => {
160
170
  let {
161
171
  isBuffering
162
- } = _ref25;
172
+ } = _ref27;
163
173
  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon.default})`;
164
- }, _ref26 => {
174
+ }, _ref28 => {
165
175
  let {
166
176
  copyFirst
167
- } = _ref26;
177
+ } = _ref28;
168
178
  return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
169
- }, _ref27 => {
179
+ }, _ref29 => {
170
180
  let {
171
181
  isPlaying
172
- } = _ref27;
182
+ } = _ref29;
173
183
  return isPlaying ? 'none' : 'block';
174
- }, _ref28 => {
184
+ }, _ref30 => {
175
185
  let {
176
186
  isBuffering
177
- } = _ref28;
187
+ } = _ref30;
178
188
  return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon__hover.default})`;
179
- }, _ref29 => {
189
+ }, _ref31 => {
180
190
  let {
181
191
  theme
182
- } = _ref29;
192
+ } = _ref31;
183
193
  return theme.allBreakpoints('M');
184
194
  });
185
195
  const Image = exports.Image = _styledComponents.default.div.withConfig({
186
196
  displayName: "SingleMessagestyle__Image",
187
197
  componentId: "sc-86zg20-4"
188
- })(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref30 => {
198
+ })(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref32 => {
189
199
  let {
190
200
  theme
191
- } = _ref30;
201
+ } = _ref32;
192
202
  return theme.allBreakpoints('M');
193
- }, _ref31 => {
203
+ }, _ref33 => {
194
204
  let {
195
205
  fullImage,
196
206
  vhFull
197
- } = _ref31;
207
+ } = _ref33;
198
208
  return fullImage || vhFull ? 'absolute' : null;
199
- }, _ref32 => {
209
+ }, _ref34 => {
200
210
  let {
201
211
  doubleImage
202
- } = _ref32;
212
+ } = _ref34;
203
213
  return doubleImage && 'height: 50%';
204
- }, _ref33 => {
214
+ }, _ref35 => {
205
215
  let {
206
216
  isPlaying
207
- } = _ref33;
217
+ } = _ref35;
208
218
  return isPlaying ? (0, _zIndex.default)('base') : (0, _zIndex.default)('low');
209
- }, _ref34 => {
219
+ }, _ref36 => {
210
220
  let {
211
221
  hasVideo
212
- } = _ref34;
222
+ } = _ref36;
213
223
  return hasVideo ? 'position: absolute; top: 0; left: 0;' : null;
214
224
  });
215
225
  const VideoWrapper = exports.VideoWrapper = _styledComponents.default.div.withConfig({
216
226
  displayName: "SingleMessagestyle__VideoWrapper",
217
227
  componentId: "sc-86zg20-5"
218
- })(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref35 => {
228
+ })(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref37 => {
219
229
  let {
220
230
  isPlaying
221
- } = _ref35;
231
+ } = _ref37;
222
232
  return isPlaying ? (0, _zIndex.default)('medium') : (0, _zIndex.default)('base');
223
233
  });