@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/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap CHANGED
@@ -100,6 +100,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
100
100
  -webkit-flex-direction: row;
101
101
  -ms-flex-direction: row;
102
102
  flex-direction: row;
103
+ padding-top: 0rem;
104
+ padding-bottom: 0rem;
103
105
  }
104
106
  }
105
107
 
@@ -408,6 +410,8 @@ exports[`renders Single Message with Image correctly 1`] = `
408
410
  -webkit-flex-direction: row;
409
411
  -ms-flex-direction: row;
410
412
  flex-direction: row;
413
+ padding-top: 0rem;
414
+ padding-bottom: 0rem;
411
415
  }
412
416
  }
413
417
 
@@ -616,6 +620,8 @@ exports[`renders Single Message with double image correctly 1`] = `
616
620
  -webkit-flex-direction: row;
617
621
  -ms-flex-direction: row;
618
622
  flex-direction: row;
623
+ padding-top: 0rem;
624
+ padding-bottom: 0rem;
619
625
  }
620
626
  }
621
627
 
@@ -961,6 +967,8 @@ exports[`renders Single Message with full width correctly 1`] = `
961
967
  -webkit-flex-direction: row;
962
968
  -ms-flex-direction: row;
963
969
  flex-direction: row;
970
+ padding-top: 0rem;
971
+ padding-bottom: 0rem;
964
972
  }
965
973
  }
966
974
 
@@ -1157,6 +1165,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
1157
1165
  -webkit-flex-direction: row;
1158
1166
  -ms-flex-direction: row;
1159
1167
  flex-direction: row;
1168
+ padding-top: 0rem;
1169
+ padding-bottom: 0rem;
1160
1170
  }
1161
1171
  }
1162
1172
 
@@ -1279,7 +1289,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
1279
1289
  z-index: 1;
1280
1290
  padding: 0 2rem;
1281
1291
  margin: auto;
1282
- padding: 1rem;
1292
+ padding: 0 1rem;
1283
1293
  }
1284
1294
 
1285
1295
  @media (min-width:740px) {
@@ -1317,6 +1327,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
1317
1327
  -webkit-flex-direction: row;
1318
1328
  -ms-flex-direction: row;
1319
1329
  flex-direction: row;
1330
+ padding-top: 2rem;
1331
+ padding-bottom: 2rem;
1320
1332
  }
1321
1333
  }
1322
1334
 
package/dist/theme/shared/global.css CHANGED
@@ -44,65 +44,38 @@ body {
44
44
  -webkit-font-smoothing: antialiased;
45
45
  }
46
46
 
47
- h1 {
47
+ /* Resets to override browsers' user agent stylesheets */
48
+ h1, h2 {
48
49
  text-transform: uppercase;
49
50
  font-family: 'Anton', Impact, sans-serif;
50
- margin-bottom: 1rem;
51
51
  }
52
52
 
53
- h1:only-child,
54
- h2:only-child {
55
- margin: 0;
56
- }
57
-
58
- h2,
59
- h3,
60
- h4,
61
- h5,
62
- p,
63
- a,
64
- button {
65
- font-family: inherit;
66
- }
67
-
68
- h2 {
69
- text-transform: uppercase;
70
- font-family: 'Anton', Impact, sans-serif;
71
- margin-bottom: 1rem;
53
+ h1, h2, h3, h4, h5, h6, p {
54
+ word-break: break-word;
55
+ margin: 0 0 1rem 0;
72
56
  }
73
57
 
74
- h3, h4, h5 {
75
- margin-bottom: 1rem;
58
+ h1:last-child,
59
+ h2:last-child,
60
+ h3:last-child,
61
+ h4:last-child,
62
+ h5:last-child
63
+ h6:last-child,
64
+ p:last-child {
65
+ margin-bottom: 0;
76
66
  }
77
67
 
78
- p,
79
- a,
80
- button {
81
- margin-top: 0;
68
+ h2, h3, h4, h5, h6, p, a, button {
69
+ font-family: inherit;
82
70
  }
83
71
 
84
- h2:first-child,
85
- h3:first-child,
86
- h4:first-child,
87
- h5:first-child {
72
+ p, a, button {
88
73
  margin-top: 0;
89
74
  }
90
75
 
91
- h1,
92
- h2,
93
- h3,
94
- h4,
95
- h5,
96
- p {
97
- word-break: break-word;
98
- }
99
-
100
- p:first-child {
101
- margin-bottom: 1rem;
102
- }
103
-
104
- p:last-child {
105
- margin-bottom: 0;
76
+ p + h1,
77
+ p + h2 {
78
+ margin-top: 2rem;
106
79
  }
107
80
 
108
81
  table {
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": "8.55.4",
4
+ "version": "8.56.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/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/src/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/src/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/src/components/Molecules/CTA/shared/CTACard.style.js CHANGED
@@ -301,6 +301,7 @@ const CardLabel = styled.div`
301
301
  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
302
302
  font-size: 14px;
303
303
  color: ${({ theme }) => theme.color('grey_3')};
304
+ margin-bottom: 14px;
304
305
  `;
305
306
 
306
307
  const CTA = styled.div`
package/src/components/Molecules/SingleMessage/SingleMessage.js CHANGED
@@ -32,7 +32,9 @@ const SingleMessage = ({
32
32
  videoID = null,
33
33
  landscapeVideo = false,
34
34
  paddingTop = '2rem',
35
- paddingBottom = '2rem'
35
+ paddingBottom = '2rem',
36
+ smPaddingTop = '2rem',
37
+ smPaddingBottom = '2rem'
36
38
  }) => {
37
39
  const hasImage = imageSet || false;
38
40
  const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -42,6 +44,8 @@ const SingleMessage = ({
42
44
  // things looking nice in the CL; only using the new props where they want 'em:
43
45
  const thisPaddingTop = hasImage || hasVideo ? '0rem' : paddingTop;
44
46
  const thisPaddingBottom = hasImage || hasVideo ? '0rem' : paddingBottom;
47
+ const thisSmPaddingTop = hasImage || hasVideo ? '0rem' : smPaddingTop;
48
+ const thisSmPaddingBottom = hasImage || hasVideo ? '0rem' : smPaddingBottom;
45
49
 
46
50
  // States to track video status
47
51
  const [isInitialised, setIsInitialised] = useState(false);
@@ -147,6 +151,8 @@ const SingleMessage = ({
147
151
  ref={thisRef}
148
152
  paddingTop={thisPaddingTop}
149
153
  paddingBottom={thisPaddingBottom}
154
+ smPaddingTop={thisSmPaddingTop}
155
+ smPaddingBottom={thisSmPaddingBottom}
150
156
  >
151
157
  {imageSet || imageSet2 ? (
152
158
  <>
@@ -249,8 +255,9 @@ SingleMessage.propTypes = {
249
255
  videoID: PropTypes.string,
250
256
  landscapeVideo: PropTypes.bool,
251
257
  paddingTop: PropTypes.string,
252
- paddingBottom: PropTypes.string
253
-
258
+ paddingBottom: PropTypes.string,
259
+ smPaddingTop: PropTypes.string,
260
+ smPaddingBottom: PropTypes.string
254
261
  };
255
262
 
256
263
  export default SingleMessage;
package/src/components/Molecules/SingleMessage/SingleMessage.style.js CHANGED
@@ -12,8 +12,8 @@ const Container = styled.div`
12
12
  flex-direction: column;
13
13
  overflow: hidden;
14
14
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
15
- padding-top: ${({ paddingTop }) => paddingTop};
16
- padding-bottom: ${({ paddingBottom }) => paddingBottom};
15
+ padding-top: ${({ smPaddingTop }) => smPaddingTop};
16
+ padding-bottom: ${({ smPaddingBottom }) => smPaddingBottom};
17
17
 
18
18
  iframe {
19
19
  height: 100%;
@@ -27,6 +27,8 @@ const Container = styled.div`
27
27
  @media ${({ theme }) => theme.allBreakpoints('M')} {
28
28
  flex-direction: ${({ copyFirst }) => (copyFirst === true ? 'row-reverse' : 'row')};
29
29
  ${({ landscapeVideo, hasVideo, fullImage }) => (landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null)};
30
+ padding-top: ${({ paddingTop }) => paddingTop};
31
+ padding-bottom: ${({ paddingBottom }) => paddingBottom};
30
32
  }
31
33
  `;
32
34
 
@@ -64,19 +66,21 @@ const Copy = styled.div`
64
66
  `};
65
67
 
66
68
  ${props => (props.hasImage
67
- ? css`@media ${({ theme }) => theme.allBreakpoints('M')} {
68
- width: 50%;
69
- }
70
- `
69
+ ? css`
70
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
71
+ width: 50%;
72
+ }
73
+ `
71
74
  : css`
72
- @media ${({ theme }) => theme.allBreakpoints('M')} {
73
- width: 100%;
74
- max-width ${containers.small};
75
- padding: 0 ${spacing('xl')};
76
- }
77
- margin: auto;
78
- padding: ${spacing('md')};
79
- `)};
75
+ margin: auto;
76
+ padding: 0 ${spacing('md')};
77
+
78
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
79
+ width: 100%;
80
+ max-width ${containers.small};
81
+ padding: 0 ${spacing('xl')};
82
+ }
83
+ `)};
80
84
  `;
81
85
 
82
86
  const Media = styled.div`
package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap CHANGED
@@ -100,6 +100,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
100
100
  -webkit-flex-direction: row;
101
101
  -ms-flex-direction: row;
102
102
  flex-direction: row;
103
+ padding-top: 0rem;
104
+ padding-bottom: 0rem;
103
105
  }
104
106
  }
105
107
 
@@ -408,6 +410,8 @@ exports[`renders Single Message with Image correctly 1`] = `
408
410
  -webkit-flex-direction: row;
409
411
  -ms-flex-direction: row;
410
412
  flex-direction: row;
413
+ padding-top: 0rem;
414
+ padding-bottom: 0rem;
411
415
  }
412
416
  }
413
417
 
@@ -616,6 +620,8 @@ exports[`renders Single Message with double image correctly 1`] = `
616
620
  -webkit-flex-direction: row;
617
621
  -ms-flex-direction: row;
618
622
  flex-direction: row;
623
+ padding-top: 0rem;
624
+ padding-bottom: 0rem;
619
625
  }
620
626
  }
621
627
 
@@ -961,6 +967,8 @@ exports[`renders Single Message with full width correctly 1`] = `
961
967
  -webkit-flex-direction: row;
962
968
  -ms-flex-direction: row;
963
969
  flex-direction: row;
970
+ padding-top: 0rem;
971
+ padding-bottom: 0rem;
964
972
  }
965
973
  }
966
974
 
@@ -1157,6 +1165,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
1157
1165
  -webkit-flex-direction: row;
1158
1166
  -ms-flex-direction: row;
1159
1167
  flex-direction: row;
1168
+ padding-top: 0rem;
1169
+ padding-bottom: 0rem;
1160
1170
  }
1161
1171
  }
1162
1172
 
@@ -1279,7 +1289,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
1279
1289
  z-index: 1;
1280
1290
  padding: 0 2rem;
1281
1291
  margin: auto;
1282
- padding: 1rem;
1292
+ padding: 0 1rem;
1283
1293
  }
1284
1294
 
1285
1295
  @media (min-width:740px) {
@@ -1317,6 +1327,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
1317
1327
  -webkit-flex-direction: row;
1318
1328
  -ms-flex-direction: row;
1319
1329
  flex-direction: row;
1330
+ padding-top: 2rem;
1331
+ padding-bottom: 2rem;
1320
1332
  }
1321
1333
  }
1322
1334