@comicrelief/component-library 8.55.4 → 8.55.5

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.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/theme/shared/global.css +19 -46
  6. package/package.json +1 -1
  7. package/src/components/Atoms/Text/Text.md +165 -115
  8. package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md +2 -2
  9. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +2 -0
  10. package/src/components/Molecules/CTA/shared/CTACard.style.js +1 -0
  11. 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/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.55.5",
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/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 {