@comicrelief/component-library 7.44.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 (5) hide show
  1. package/dist/components/Molecules/Card/Card.style.js +4 -4
  2. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +9 -3
  3. package/package.json +1 -1
  4. package/src/components/Molecules/Card/Card.style.js +3 -1
  5. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +9 -3
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
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
 
@@ -82,7 +84,7 @@ exports[`renders correctly 2`] = `
82
84
  display: -ms-flexbox;
83
85
  display: flex;
84
86
  height: 100%;
85
- border-radius: 1rem;
87
+ border-radius: 0.8rem;
86
88
  overflow: hidden;
87
89
  background: #FFE400;
88
90
  }
@@ -103,6 +105,7 @@ exports[`renders correctly 2`] = `
103
105
  -webkit-flex-direction: column;
104
106
  -ms-flex-direction: column;
105
107
  flex-direction: column;
108
+ gap: 1rem;
106
109
  }
107
110
  }
108
111
 
@@ -111,6 +114,7 @@ exports[`renders correctly 2`] = `
111
114
  -webkit-flex-direction: column;
112
115
  -ms-flex-direction: column;
113
116
  flex-direction: column;
117
+ gap: 1rem;
114
118
  }
115
119
  }
116
120
 
@@ -170,7 +174,7 @@ exports[`renders correctly with no body 1`] = `
170
174
  display: -ms-flexbox;
171
175
  display: flex;
172
176
  height: 100%;
173
- border-radius: 1rem;
177
+ border-radius: 0.8rem;
174
178
  overflow: hidden;
175
179
  background: #FFE400;
176
180
  }
@@ -184,6 +188,7 @@ exports[`renders correctly with no body 1`] = `
184
188
  -webkit-flex-direction: column;
185
189
  -ms-flex-direction: column;
186
190
  flex-direction: column;
191
+ gap: 1rem;
187
192
  }
188
193
  }
189
194
 
@@ -192,6 +197,7 @@ exports[`renders correctly with no body 1`] = `
192
197
  -webkit-flex-direction: column;
193
198
  -ms-flex-direction: column;
194
199
  flex-direction: column;
200
+ gap: 1rem;
195
201
  }
196
202
  }
197
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.44.0",
4
+ "version": "7.45.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
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
  `;
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
 
@@ -82,7 +84,7 @@ exports[`renders correctly 2`] = `
82
84
  display: -ms-flexbox;
83
85
  display: flex;
84
86
  height: 100%;
85
- border-radius: 1rem;
87
+ border-radius: 0.8rem;
86
88
  overflow: hidden;
87
89
  background: #FFE400;
88
90
  }
@@ -103,6 +105,7 @@ exports[`renders correctly 2`] = `
103
105
  -webkit-flex-direction: column;
104
106
  -ms-flex-direction: column;
105
107
  flex-direction: column;
108
+ gap: 1rem;
106
109
  }
107
110
  }
108
111
 
@@ -111,6 +114,7 @@ exports[`renders correctly 2`] = `
111
114
  -webkit-flex-direction: column;
112
115
  -ms-flex-direction: column;
113
116
  flex-direction: column;
117
+ gap: 1rem;
114
118
  }
115
119
  }
116
120
 
@@ -170,7 +174,7 @@ exports[`renders correctly with no body 1`] = `
170
174
  display: -ms-flexbox;
171
175
  display: flex;
172
176
  height: 100%;
173
- border-radius: 1rem;
177
+ border-radius: 0.8rem;
174
178
  overflow: hidden;
175
179
  background: #FFE400;
176
180
  }
@@ -184,6 +188,7 @@ exports[`renders correctly with no body 1`] = `
184
188
  -webkit-flex-direction: column;
185
189
  -ms-flex-direction: column;
186
190
  flex-direction: column;
191
+ gap: 1rem;
187
192
  }
188
193
  }
189
194
 
@@ -192,6 +197,7 @@ exports[`renders correctly with no body 1`] = `
192
197
  -webkit-flex-direction: column;
193
198
  -ms-flex-direction: column;
194
199
  flex-direction: column;
200
+ gap: 1rem;
195
201
  }
196
202
  }
197
203