@comicrelief/component-library 7.44.0 → 7.46.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 +2 -2
  2. package/dist/components/Molecules/Card/Card.style.js +38 -18
  3. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +18 -3
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Picture/Picture.js +2 -2
  6. package/src/components/Molecules/Card/Card.style.js +9 -5
  7. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +18 -3
package/dist/components/Atoms/Picture/Picture.js CHANGED
@@ -41,7 +41,7 @@ const Image = _styledComponents.default.img.withConfig({
41
41
  let {
42
42
  smallBreakpointRowLayout
43
43
  } = _ref4;
44
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{border-radius:", ";width:80px;height:80px;}@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:0;width:", ";height:", ";}"], _ref5 => {
45
45
  let {
46
46
  theme
47
47
  } = _ref5;
@@ -67,7 +67,7 @@ const Image = _styledComponents.default.img.withConfig({
67
67
  smallBreakpointRowLayout,
68
68
  mediumBreakpointRowLayout
69
69
  } = _ref9;
70
- return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:none;width:", ";height:", ";}"], _ref10 => {
70
+ return (smallBreakpointRowLayout === true || mediumBreakpointRowLayout === true) && (0, _styledComponents.css)(["@media ", "{padding:none;border-radius:0;width:", ";height:", ";}"], _ref10 => {
71
71
  let {
72
72
  theme
73
73
  } = _ref10;
package/dist/components/Molecules/Card/Card.style.js CHANGED
@@ -11,26 +11,46 @@ 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;height:100%;border-radius:", ";overflow:hidden;background:", ";@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:", ";gap:", ";background:", ";}@media ", "{flex-direction:column;background:", ";}"], props => props.squaredCorners ? '0' : '0.8rem', _ref => {
15
15
  let {
16
- theme
16
+ theme,
17
+ backgroundColor
17
18
  } = _ref;
18
- return theme.allBreakpoints('S');
19
- }, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', _ref2 => {
19
+ return theme.color(backgroundColor);
20
+ }, _ref2 => {
20
21
  let {
21
22
  theme
22
23
  } = _ref2;
24
+ return theme.allBreakpoints('S');
25
+ }, props => props.smallBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref3 => {
26
+ let {
27
+ theme,
28
+ backgroundColor,
29
+ smallBreakpointRowLayout
30
+ } = _ref3;
31
+ return smallBreakpointRowLayout === true ? 'transparent' : theme.color(backgroundColor);
32
+ }, _ref4 => {
33
+ let {
34
+ theme
35
+ } = _ref4;
23
36
  return theme.allBreakpoints('M');
24
- }, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', _ref3 => {
37
+ }, props => props.mediumBreakpointRowLayout === true ? 'row' : 'column', (0, _spacing.default)('md'), _ref5 => {
38
+ let {
39
+ theme,
40
+ backgroundColor,
41
+ mediumBreakpointRowLayout
42
+ } = _ref5;
43
+ return mediumBreakpointRowLayout === true ? 'transparent' : theme.color(backgroundColor);
44
+ }, _ref6 => {
25
45
  let {
26
46
  theme
27
- } = _ref3;
47
+ } = _ref6;
28
48
  return theme.allBreakpoints('L');
29
- }, props => props.squaredCorners ? '0' : '1rem', _ref4 => {
49
+ }, _ref7 => {
30
50
  let {
31
51
  theme,
32
52
  backgroundColor
33
- } = _ref4;
53
+ } = _ref7;
34
54
  return theme.color(backgroundColor);
35
55
  });
36
56
  const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
@@ -40,29 +60,29 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
40
60
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
41
61
  displayName: "Cardstyle__Copy",
42
62
  componentId: "sc-cxn4co-2"
43
- })(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref5 => {
63
+ })(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref8 => {
44
64
  let {
45
65
  smallBreakpointRowLayout
46
- } = _ref5;
47
- return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref6 => {
66
+ } = _ref8;
67
+ return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref9 => {
48
68
  let {
49
69
  theme
50
- } = _ref6;
70
+ } = _ref9;
51
71
  return theme.allBreakpoints('S');
52
72
  }, 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
- }, _ref7 => {
73
+ }, _ref10 => {
54
74
  let {
55
75
  mediumBreakpointRowLayout
56
- } = _ref7;
57
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref8 => {
76
+ } = _ref10;
77
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref11 => {
58
78
  let {
59
79
  theme
60
- } = _ref8;
80
+ } = _ref11;
61
81
  return theme.allBreakpoints('M');
62
82
  }, 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
- }, _ref9 => {
83
+ }, _ref12 => {
64
84
  let {
65
85
  theme
66
- } = _ref9;
86
+ } = _ref12;
67
87
  return theme.allBreakpoints('L');
68
88
  }, (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,8 @@ exports[`renders correctly 1`] = `
29
29
  -webkit-flex-direction: column;
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
+ gap: 1rem;
33
+ background: #FFE400;
32
34
  }
33
35
  }
34
36
 
@@ -37,6 +39,8 @@ exports[`renders correctly 1`] = `
37
39
  -webkit-flex-direction: column;
38
40
  -ms-flex-direction: column;
39
41
  flex-direction: column;
42
+ gap: 1rem;
43
+ background: #FFE400;
40
44
  }
41
45
  }
42
46
 
@@ -45,6 +49,7 @@ exports[`renders correctly 1`] = `
45
49
  -webkit-flex-direction: column;
46
50
  -ms-flex-direction: column;
47
51
  flex-direction: column;
52
+ background: #FFE400;
48
53
  }
49
54
  }
50
55
 
@@ -82,7 +87,7 @@ exports[`renders correctly 2`] = `
82
87
  display: -ms-flexbox;
83
88
  display: flex;
84
89
  height: 100%;
85
- border-radius: 1rem;
90
+ border-radius: 0.8rem;
86
91
  overflow: hidden;
87
92
  background: #FFE400;
88
93
  }
@@ -103,6 +108,8 @@ exports[`renders correctly 2`] = `
103
108
  -webkit-flex-direction: column;
104
109
  -ms-flex-direction: column;
105
110
  flex-direction: column;
111
+ gap: 1rem;
112
+ background: #FFE400;
106
113
  }
107
114
  }
108
115
 
@@ -111,6 +118,8 @@ exports[`renders correctly 2`] = `
111
118
  -webkit-flex-direction: column;
112
119
  -ms-flex-direction: column;
113
120
  flex-direction: column;
121
+ gap: 1rem;
122
+ background: #FFE400;
114
123
  }
115
124
  }
116
125
 
@@ -119,6 +128,7 @@ exports[`renders correctly 2`] = `
119
128
  -webkit-flex-direction: column;
120
129
  -ms-flex-direction: column;
121
130
  flex-direction: column;
131
+ background: #FFE400;
122
132
  }
123
133
  }
124
134
 
@@ -170,7 +180,7 @@ exports[`renders correctly with no body 1`] = `
170
180
  display: -ms-flexbox;
171
181
  display: flex;
172
182
  height: 100%;
173
- border-radius: 1rem;
183
+ border-radius: 0.8rem;
174
184
  overflow: hidden;
175
185
  background: #FFE400;
176
186
  }
@@ -184,6 +194,8 @@ exports[`renders correctly with no body 1`] = `
184
194
  -webkit-flex-direction: column;
185
195
  -ms-flex-direction: column;
186
196
  flex-direction: column;
197
+ gap: 1rem;
198
+ background: #FFE400;
187
199
  }
188
200
  }
189
201
 
@@ -192,6 +204,8 @@ exports[`renders correctly with no body 1`] = `
192
204
  -webkit-flex-direction: column;
193
205
  -ms-flex-direction: column;
194
206
  flex-direction: column;
207
+ gap: 1rem;
208
+ background: #FFE400;
195
209
  }
196
210
  }
197
211
 
@@ -200,6 +214,7 @@ exports[`renders correctly with no body 1`] = `
200
214
  -webkit-flex-direction: column;
201
215
  -ms-flex-direction: column;
202
216
  flex-direction: column;
217
+ background: #FFE400;
203
218
  }
204
219
  }
205
220
 
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.44.0",
4
+ "version": "7.46.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Picture/Picture.js CHANGED
@@ -36,7 +36,7 @@ const Image = styled.img`
36
36
  }
37
37
  @media ${({ theme }) => theme.allBreakpoints('M')} {
38
38
  padding: none;
39
- border-radius: none;
39
+ border-radius: 0;
40
40
  width: ${props => (props.width ? props.width : '100%')};
41
41
  height: ${props => (props.height ? props.height : 'auto')};
42
42
  }
@@ -55,7 +55,7 @@ const Image = styled.img`
55
55
  ${({ smallBreakpointRowLayout, mediumBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) || (mediumBreakpointRowLayout === true)) && css`
56
56
  @media ${({ theme }) => theme.allBreakpoints('L')} {
57
57
  padding: none;
58
- border-radius: none;
58
+ border-radius: 0;
59
59
  width: ${props => (props.width ? props.width : '100%')};
60
60
  height: ${props => (props.height ? props.height : 'auto')};
61
61
  }
package/src/components/Molecules/Card/Card.style.js CHANGED
@@ -4,26 +4,30 @@ import spacing from '../../../theme/shared/spacing';
4
4
  const Container = styled.div`
5
5
  position: relative;
6
6
  display: flex;
7
+ height: 100%;
8
+ border-radius: ${props => (props.squaredCorners ? '0' : '0.8rem')};
9
+ overflow: hidden;
10
+ background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
7
11
 
8
12
  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
9
13
  @media ${({ theme }) => theme.allBreakpoints('S')} {
10
14
  flex-direction: ${props => ((props.smallBreakpointRowLayout === true) ? 'row' : 'column')};
15
+ gap: ${spacing('md')};
16
+ background: ${({ theme, backgroundColor, smallBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
11
17
  }
12
18
 
13
19
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
14
20
  @media ${({ theme }) => theme.allBreakpoints('M')} {
15
21
  flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
22
+ gap: ${spacing('md')};
23
+ background: ${({ theme, backgroundColor, mediumBreakpointRowLayout }) => ((mediumBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
16
24
  }
17
25
 
18
26
  /* Set desktop and upwards to normal vertical layout */
19
27
  @media ${({ theme }) => theme.allBreakpoints('L')} {
20
28
  flex-direction: column;
29
+ background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
21
30
  }
22
-
23
- height: 100%;
24
- border-radius: ${props => (props.squaredCorners ? '0' : '1rem')};
25
- overflow: hidden;
26
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
27
31
  `;
28
32
 
29
33
  const Wrapper = styled.div`
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,8 @@ exports[`renders correctly 1`] = `
29
29
  -webkit-flex-direction: column;
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
+ gap: 1rem;
33
+ background: #FFE400;
32
34
  }
33
35
  }
34
36
 
@@ -37,6 +39,8 @@ exports[`renders correctly 1`] = `
37
39
  -webkit-flex-direction: column;
38
40
  -ms-flex-direction: column;
39
41
  flex-direction: column;
42
+ gap: 1rem;
43
+ background: #FFE400;
40
44
  }
41
45
  }
42
46
 
@@ -45,6 +49,7 @@ exports[`renders correctly 1`] = `
45
49
  -webkit-flex-direction: column;
46
50
  -ms-flex-direction: column;
47
51
  flex-direction: column;
52
+ background: #FFE400;
48
53
  }
49
54
  }
50
55
 
@@ -82,7 +87,7 @@ exports[`renders correctly 2`] = `
82
87
  display: -ms-flexbox;
83
88
  display: flex;
84
89
  height: 100%;
85
- border-radius: 1rem;
90
+ border-radius: 0.8rem;
86
91
  overflow: hidden;
87
92
  background: #FFE400;
88
93
  }
@@ -103,6 +108,8 @@ exports[`renders correctly 2`] = `
103
108
  -webkit-flex-direction: column;
104
109
  -ms-flex-direction: column;
105
110
  flex-direction: column;
111
+ gap: 1rem;
112
+ background: #FFE400;
106
113
  }
107
114
  }
108
115
 
@@ -111,6 +118,8 @@ exports[`renders correctly 2`] = `
111
118
  -webkit-flex-direction: column;
112
119
  -ms-flex-direction: column;
113
120
  flex-direction: column;
121
+ gap: 1rem;
122
+ background: #FFE400;
114
123
  }
115
124
  }
116
125
 
@@ -119,6 +128,7 @@ exports[`renders correctly 2`] = `
119
128
  -webkit-flex-direction: column;
120
129
  -ms-flex-direction: column;
121
130
  flex-direction: column;
131
+ background: #FFE400;
122
132
  }
123
133
  }
124
134
 
@@ -170,7 +180,7 @@ exports[`renders correctly with no body 1`] = `
170
180
  display: -ms-flexbox;
171
181
  display: flex;
172
182
  height: 100%;
173
- border-radius: 1rem;
183
+ border-radius: 0.8rem;
174
184
  overflow: hidden;
175
185
  background: #FFE400;
176
186
  }
@@ -184,6 +194,8 @@ exports[`renders correctly with no body 1`] = `
184
194
  -webkit-flex-direction: column;
185
195
  -ms-flex-direction: column;
186
196
  flex-direction: column;
197
+ gap: 1rem;
198
+ background: #FFE400;
187
199
  }
188
200
  }
189
201
 
@@ -192,6 +204,8 @@ exports[`renders correctly with no body 1`] = `
192
204
  -webkit-flex-direction: column;
193
205
  -ms-flex-direction: column;
194
206
  flex-direction: column;
207
+ gap: 1rem;
208
+ background: #FFE400;
195
209
  }
196
210
  }
197
211
 
@@ -200,6 +214,7 @@ exports[`renders correctly with no body 1`] = `
200
214
  -webkit-flex-direction: column;
201
215
  -ms-flex-direction: column;
202
216
  flex-direction: column;
217
+ background: #FFE400;
203
218
  }
204
219
  }
205
220