@comicrelief/component-library 7.43.0 → 7.45.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 (7) hide show
  1. package/dist/components/Atoms/Picture/Picture.js +4 -4
  2. package/dist/components/Molecules/Card/Card.style.js +12 -18
  3. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +29 -3
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Picture/Picture.js +4 -6
  6. package/src/components/Molecules/Card/Card.style.js +18 -22
  7. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +29 -3
package/dist/components/Atoms/Picture/Picture.js CHANGED
@@ -41,12 +41,12 @@ const Image = _styledComponents.default.img.withConfig({
41
41
  let {
42
42
  smallBreakpointRowLayout
43
43
  } = _ref4;
44
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:110px;height:110px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
44
+ return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:80px;height:80px;}@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref5 => {
45
45
  let {
46
46
  theme
47
47
  } = _ref5;
48
48
  return theme.allBreakpoints('S');
49
- }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), _ref6 => {
49
+ }, (0, _spacing.default)('md'), _ref6 => {
50
50
  let {
51
51
  theme
52
52
  } = _ref6;
@@ -56,12 +56,12 @@ const Image = _styledComponents.default.img.withConfig({
56
56
  let {
57
57
  mediumBreakpointRowLayout
58
58
  } = _ref7;
59
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";border-radius:", ";width:120px;height:120px;}"], _ref8 => {
59
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:96px;height:96px;}"], _ref8 => {
60
60
  let {
61
61
  theme
62
62
  } = _ref8;
63
63
  return theme.allBreakpoints('M');
64
- }, (0, _spacing.default)('sm'), (0, _spacing.default)('md'));
64
+ }, (0, _spacing.default)('md'));
65
65
  }, _ref9 => {
66
66
  let {
67
67
  smallBreakpointRowLayout,
package/dist/components/Molecules/Card/Card.style.js CHANGED
@@ -11,22 +11,22 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
11
11
  const Container = exports.Container = _styledComponents.default.div.withConfig({
12
12
  displayName: "Cardstyle__Container",
13
13
  componentId: "sc-cxn4co-0"
14
- })(["position:relative;display:flex;@media ", "{flex-direction:", ";}@media ", "{flex-direction:", ";}@media ", "{flex-direction:column;}height:100%;border-radius:", ";overflow:hidden;background:", ";"], _ref => {
14
+ })(["position:relative;display:flex;@media ", "{flex-direction:", ";gap:", ";}@media ", "{flex-direction:", ";gap:", ";}@media ", "{flex-direction:column;}height:100%;border-radius:", ";overflow:hidden;background:", ";"], _ref => {
15
15
  let {
16
16
  theme
17
17
  } = _ref;
18
18
  return theme.allBreakpoints('S');
19
- }, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', _ref2 => {
19
+ }, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref2 => {
20
20
  let {
21
21
  theme
22
22
  } = _ref2;
23
23
  return theme.allBreakpoints('M');
24
- }, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', _ref3 => {
24
+ }, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref3 => {
25
25
  let {
26
26
  theme
27
27
  } = _ref3;
28
28
  return theme.allBreakpoints('L');
29
- }, props => props.squaredCorners ? '0' : '1rem', _ref4 => {
29
+ }, props => props.squaredCorners ? '0' : '0.8rem', _ref4 => {
30
30
  let {
31
31
  theme,
32
32
  backgroundColor
@@ -40,35 +40,29 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
40
40
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
41
41
  displayName: "Cardstyle__Copy",
42
42
  componentId: "sc-cxn4co-2"
43
- })(["display:flex;flex-direction:column;padding:", ";", " ", " ", ""], (0, _spacing.default)('l'), _ref5 => {
43
+ })(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref5 => {
44
44
  let {
45
45
  smallBreakpointRowLayout
46
46
  } = _ref5;
47
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref6 => {
47
+ return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref6 => {
48
48
  let {
49
49
  theme
50
50
  } = _ref6;
51
51
  return theme.allBreakpoints('S');
52
- }, props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
52
+ }, props => props.smallBreakpointRowLayout === true ? "".concat((0, _spacing.default)('sm')) : "".concat((0, _spacing.default)('l')), props => props.smallBreakpointRowLayout === true && "0 0 ".concat((0, _spacing.default)('sm')), props => props.smallBreakpointRowLayout === true ? '1.5rem' : '2rem');
53
53
  }, _ref7 => {
54
54
  let {
55
55
  mediumBreakpointRowLayout
56
56
  } = _ref7;
57
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1,h2,h3,h4,h5{margin:", ";}}"], _ref8 => {
57
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref8 => {
58
58
  let {
59
59
  theme
60
60
  } = _ref8;
61
61
  return theme.allBreakpoints('M');
62
- }, props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true && "".concat((0, _spacing.default)('sm'), " 0 ").concat((0, _spacing.default)('sm')));
62
+ }, props => props.mediumBreakpointRowLayout === true ? "".concat((0, _spacing.default)('sm')) : "".concat((0, _spacing.default)('l')), props => props.mediumBreakpointRowLayout === true && "0 0 ".concat((0, _spacing.default)('sm')), props => props.mediumBreakpointRowLayout === true ? '1.5rem' : '2rem');
63
63
  }, _ref9 => {
64
64
  let {
65
- smallBreakpointRowLayout,
66
- mediumBreakpointRowLayout
65
+ theme
67
66
  } = _ref9;
68
- return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 1rem 0;}h2{margin-bottom:2rem;}h3,h4,h5{margin-bottom:1rem;}}"], _ref10 => {
69
- let {
70
- theme
71
- } = _ref10;
72
- return theme.allBreakpoints('L');
73
- }, (0, _spacing.default)('l'));
74
- });
67
+ return theme.allBreakpoints('L');
68
+ }, (0, _spacing.default)('l'));
package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
8
8
  display: -ms-flexbox;
9
9
  display: flex;
10
10
  height: 100%;
11
- border-radius: 1rem;
11
+ border-radius: 0.8rem;
12
12
  overflow: hidden;
13
13
  background: #FFE400;
14
14
  }
@@ -29,6 +29,7 @@ exports[`renders correctly 1`] = `
29
29
  -webkit-flex-direction: column;
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
+ gap: 1rem;
32
33
  }
33
34
  }
34
35
 
@@ -37,6 +38,7 @@ exports[`renders correctly 1`] = `
37
38
  -webkit-flex-direction: column;
38
39
  -ms-flex-direction: column;
39
40
  flex-direction: column;
41
+ gap: 1rem;
40
42
  }
41
43
  }
42
44
 
@@ -48,6 +50,16 @@ exports[`renders correctly 1`] = `
48
50
  }
49
51
  }
50
52
 
53
+ @media (min-width:1024px) {
54
+ .c1 {
55
+ padding: 2rem;
56
+ }
57
+
58
+ .c1 h1 {
59
+ font-size: 2rem;
60
+ }
61
+ }
62
+
51
63
  <div
52
64
  className="c0"
53
65
  >
@@ -72,7 +84,7 @@ exports[`renders correctly 2`] = `
72
84
  display: -ms-flexbox;
73
85
  display: flex;
74
86
  height: 100%;
75
- border-radius: 1rem;
87
+ border-radius: 0.8rem;
76
88
  overflow: hidden;
77
89
  background: #FFE400;
78
90
  }
@@ -93,6 +105,7 @@ exports[`renders correctly 2`] = `
93
105
  -webkit-flex-direction: column;
94
106
  -ms-flex-direction: column;
95
107
  flex-direction: column;
108
+ gap: 1rem;
96
109
  }
97
110
  }
98
111
 
@@ -101,6 +114,7 @@ exports[`renders correctly 2`] = `
101
114
  -webkit-flex-direction: column;
102
115
  -ms-flex-direction: column;
103
116
  flex-direction: column;
117
+ gap: 1rem;
104
118
  }
105
119
  }
106
120
 
@@ -112,6 +126,16 @@ exports[`renders correctly 2`] = `
112
126
  }
113
127
  }
114
128
 
129
+ @media (min-width:1024px) {
130
+ .c1 {
131
+ padding: 2rem;
132
+ }
133
+
134
+ .c1 h1 {
135
+ font-size: 2rem;
136
+ }
137
+ }
138
+
115
139
  <div
116
140
  className="c0"
117
141
  >
@@ -150,7 +174,7 @@ exports[`renders correctly with no body 1`] = `
150
174
  display: -ms-flexbox;
151
175
  display: flex;
152
176
  height: 100%;
153
- border-radius: 1rem;
177
+ border-radius: 0.8rem;
154
178
  overflow: hidden;
155
179
  background: #FFE400;
156
180
  }
@@ -164,6 +188,7 @@ exports[`renders correctly with no body 1`] = `
164
188
  -webkit-flex-direction: column;
165
189
  -ms-flex-direction: column;
166
190
  flex-direction: column;
191
+ gap: 1rem;
167
192
  }
168
193
  }
169
194
 
@@ -172,6 +197,7 @@ exports[`renders correctly with no body 1`] = `
172
197
  -webkit-flex-direction: column;
173
198
  -ms-flex-direction: column;
174
199
  flex-direction: column;
200
+ gap: 1rem;
175
201
  }
176
202
  }
177
203
 
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.43.0",
4
+ "version": "7.45.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Picture/Picture.js CHANGED
@@ -30,10 +30,9 @@ const Image = styled.img`
30
30
  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
31
31
  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
32
32
  @media ${({ theme }) => theme.allBreakpoints('S')} {
33
- padding: ${spacing('sm')};
34
33
  border-radius: ${spacing('md')};
35
- width: 110px;
36
- height: 110px;
34
+ width: 80px;
35
+ height: 80px;
37
36
  }
38
37
  @media ${({ theme }) => theme.allBreakpoints('M')} {
39
38
  padding: none;
@@ -46,10 +45,9 @@ const Image = styled.img`
46
45
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS and adjust styling for row view */
47
46
  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
48
47
  @media ${({ theme }) => theme.allBreakpoints('M')} {
49
- padding: ${spacing('sm')};
50
48
  border-radius: ${spacing('md')};
51
- width: 120px;
52
- height: 120px;
49
+ width: 96px;
50
+ height: 96px;
53
51
  }
54
52
  `}
55
53
 
package/src/components/Molecules/Card/Card.style.js CHANGED
@@ -8,11 +8,13 @@ const Container = styled.div`
8
8
  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
9
9
  @media ${({ theme }) => theme.allBreakpoints('S')} {
10
10
  flex-direction: ${props => ((props.smallBreakpointRowLayout === true) ? 'row' : 'column')};
11
+ gap: ${spacing('md')};
11
12
  }
12
13
 
13
14
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
14
15
  @media ${({ theme }) => theme.allBreakpoints('M')} {
15
16
  flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
17
+ gap: ${spacing('md')};
16
18
  }
17
19
 
18
20
  /* Set desktop and upwards to normal vertical layout */
@@ -21,7 +23,7 @@ const Container = styled.div`
21
23
  }
22
24
 
23
25
  height: 100%;
24
- border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
26
+ border-radius: ${props => (props.squaredCorners ? '0' : '0.8rem')};
25
27
  overflow: hidden;
26
28
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
27
29
  `;
@@ -39,9 +41,10 @@ const Copy = styled.div`
39
41
  ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout
40
42
  === true) && css`
41
43
  @media ${({ theme }) => theme.allBreakpoints('S')} {
42
- padding: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')}`)};
43
- h1, h2, h3, h4, h5 {
44
- margin: ${props => ((props.smallBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
44
+ padding: ${props => ((props.smallBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
45
+ h1 {
46
+ margin: ${props => ((props.smallBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
47
+ font-size: ${props => ((props.smallBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
45
48
  }
46
49
  }
47
50
  `}
@@ -50,28 +53,21 @@ const Copy = styled.div`
50
53
  ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout
51
54
  === true) && css`
52
55
  @media ${({ theme }) => theme.allBreakpoints('M')} {
53
- padding: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')}`)};
54
- h1, h2, h3, h4, h5 {
55
- margin: ${props => ((props.mediumBreakpointRowLayout === true) && `${spacing('sm')} 0 ${spacing('sm')}`)};
56
+ padding: ${props => ((props.mediumBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
57
+ h1 {
58
+ margin: ${props => ((props.mediumBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
59
+ font-size: ${props => ((props.mediumBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
56
60
  }
57
61
  }
58
62
  `}
59
63
 
60
- /* Check for Cards/smallBreakpointRowLayout or mediumBreakpointRowLayout prop coming from the CMS and adjust styling back to normal */
61
- ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
62
- @media ${({ theme }) => theme.allBreakpoints('L')} {
63
- padding: ${spacing('l')};
64
- h1 {
65
- margin: 0 0 1rem 0;
66
- }
67
- h2 {
68
- margin-bottom: 2rem;
69
- }
70
- h3, h4, h5 {
71
- margin-bottom: 1rem;
72
- }
73
- }
74
- `}
64
+ /* Reset styles at large breakpoint */
65
+ @media ${({ theme }) => theme.allBreakpoints('L')} {
66
+ padding: ${spacing('l')};
67
+ h1 {
68
+ font-size: 2rem;
69
+ }
70
+ }
75
71
  `;
76
72
 
77
73
  export { Container, Wrapper, Copy };
package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap CHANGED
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
8
8
  display: -ms-flexbox;
9
9
  display: flex;
10
10
  height: 100%;
11
- border-radius: 1rem;
11
+ border-radius: 0.8rem;
12
12
  overflow: hidden;
13
13
  background: #FFE400;
14
14
  }
@@ -29,6 +29,7 @@ exports[`renders correctly 1`] = `
29
29
  -webkit-flex-direction: column;
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
+ gap: 1rem;
32
33
  }
33
34
  }
34
35
 
@@ -37,6 +38,7 @@ exports[`renders correctly 1`] = `
37
38
  -webkit-flex-direction: column;
38
39
  -ms-flex-direction: column;
39
40
  flex-direction: column;
41
+ gap: 1rem;
40
42
  }
41
43
  }
42
44
 
@@ -48,6 +50,16 @@ exports[`renders correctly 1`] = `
48
50
  }
49
51
  }
50
52
 
53
+ @media (min-width:1024px) {
54
+ .c1 {
55
+ padding: 2rem;
56
+ }
57
+
58
+ .c1 h1 {
59
+ font-size: 2rem;
60
+ }
61
+ }
62
+
51
63
  <div
52
64
  className="c0"
53
65
  >
@@ -72,7 +84,7 @@ exports[`renders correctly 2`] = `
72
84
  display: -ms-flexbox;
73
85
  display: flex;
74
86
  height: 100%;
75
- border-radius: 1rem;
87
+ border-radius: 0.8rem;
76
88
  overflow: hidden;
77
89
  background: #FFE400;
78
90
  }
@@ -93,6 +105,7 @@ exports[`renders correctly 2`] = `
93
105
  -webkit-flex-direction: column;
94
106
  -ms-flex-direction: column;
95
107
  flex-direction: column;
108
+ gap: 1rem;
96
109
  }
97
110
  }
98
111
 
@@ -101,6 +114,7 @@ exports[`renders correctly 2`] = `
101
114
  -webkit-flex-direction: column;
102
115
  -ms-flex-direction: column;
103
116
  flex-direction: column;
117
+ gap: 1rem;
104
118
  }
105
119
  }
106
120
 
@@ -112,6 +126,16 @@ exports[`renders correctly 2`] = `
112
126
  }
113
127
  }
114
128
 
129
+ @media (min-width:1024px) {
130
+ .c1 {
131
+ padding: 2rem;
132
+ }
133
+
134
+ .c1 h1 {
135
+ font-size: 2rem;
136
+ }
137
+ }
138
+
115
139
  <div
116
140
  className="c0"
117
141
  >
@@ -150,7 +174,7 @@ exports[`renders correctly with no body 1`] = `
150
174
  display: -ms-flexbox;
151
175
  display: flex;
152
176
  height: 100%;
153
- border-radius: 1rem;
177
+ border-radius: 0.8rem;
154
178
  overflow: hidden;
155
179
  background: #FFE400;
156
180
  }
@@ -164,6 +188,7 @@ exports[`renders correctly with no body 1`] = `
164
188
  -webkit-flex-direction: column;
165
189
  -ms-flex-direction: column;
166
190
  flex-direction: column;
191
+ gap: 1rem;
167
192
  }
168
193
  }
169
194
 
@@ -172,6 +197,7 @@ exports[`renders correctly with no body 1`] = `
172
197
  -webkit-flex-direction: column;
173
198
  -ms-flex-direction: column;
174
199
  flex-direction: column;
200
+ gap: 1rem;
175
201
  }
176
202
  }
177
203