@comicrelief/component-library 7.45.0 → 7.47.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 (11) hide show
  1. package/dist/components/Atoms/Picture/Picture.js +2 -2
  2. package/dist/components/Molecules/Card/Card.js +8 -2
  3. package/dist/components/Molecules/Card/Card.md +81 -60
  4. package/dist/components/Molecules/Card/Card.style.js +61 -21
  5. package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +24 -3
  6. package/package.json +1 -1
  7. package/src/components/Atoms/Picture/Picture.js +2 -2
  8. package/src/components/Molecules/Card/Card.js +10 -2
  9. package/src/components/Molecules/Card/Card.md +81 -60
  10. package/src/components/Molecules/Card/Card.style.js +37 -15
  11. package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +24 -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.js CHANGED
@@ -21,6 +21,8 @@ const Card = _ref => {
21
21
  squaredCorners,
22
22
  smallBreakpointRowLayout,
23
23
  mediumBreakpointRowLayout,
24
+ rowTextColor,
25
+ columnTextColor,
24
26
  ...rest
25
27
  } = _ref;
26
28
  return /*#__PURE__*/_react.default.createElement(_Card.Container, Object.assign({
@@ -40,7 +42,9 @@ const Card = _ref => {
40
42
  mediumBreakpointRowLayout: mediumBreakpointRowLayout
41
43
  })) : null, children ? /*#__PURE__*/_react.default.createElement(_Card.Copy, {
42
44
  smallBreakpointRowLayout: smallBreakpointRowLayout,
43
- mediumBreakpointRowLayout: mediumBreakpointRowLayout
45
+ mediumBreakpointRowLayout: mediumBreakpointRowLayout,
46
+ rowTextColor: rowTextColor,
47
+ columnTextColor: columnTextColor
44
48
  }, children) : null);
45
49
  };
46
50
  Card.defaultProps = {
@@ -54,6 +58,8 @@ Card.defaultProps = {
54
58
  height: '100%',
55
59
  squaredCorners: false,
56
60
  smallBreakpointRowLayout: null,
57
- mediumBreakpointRowLayout: null
61
+ mediumBreakpointRowLayout: null,
62
+ rowTextColor: 'black',
63
+ columnTextColor: 'black'
58
64
  };
59
65
  var _default = exports.default = Card;
package/dist/components/Molecules/Card/Card.md CHANGED
@@ -3,17 +3,23 @@
3
3
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
4
4
  import Link from '../../Atoms/Link/Link';
5
5
 
6
- <Card
7
- imageLow={defaultData.image}
8
- images={defaultData.images}
9
- backgroundColor="grey_light"
10
- height="auto"
11
- >
12
- <Text tag="h3" color="purple" size="xl">
13
- Title
14
- </Text>
15
- <Text tag="p">Text body copy description</Text>
16
- </Card>;
6
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
7
+ <Card
8
+ imageLow={defaultData.image}
9
+ images={defaultData.images}
10
+ backgroundColor="blue"
11
+ height="auto"
12
+ rowTextColor="purple"
13
+ columnTextColor="black"
14
+ >
15
+ <Text tag="h3" size="xl">
16
+ Title
17
+ </Text>
18
+ <Text tag="p">
19
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year.
20
+ </Text>
21
+ </Card>
22
+ </div>
17
23
  ```
18
24
 
19
25
  ### Card - row layout on small breakpoint only
@@ -21,21 +27,25 @@ import Link from '../../Atoms/Link/Link';
21
27
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
22
28
  import Link from '../../Atoms/Link/Link';
23
29
 
24
- <Card
25
- imageLow={defaultData.image}
26
- images={defaultData.images}
27
- backgroundColor="grey_light"
28
- height="auto"
29
- smallBreakpointRowLayout={true}
30
- mediumBreakpointRowLayout={false}
31
- >
32
- <Text tag="h3" color="purple" size="xl">
33
- Title
34
- </Text>
35
- <Text tag="p">
36
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
37
- </Text>
38
- </Card>;
30
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
31
+ <Card
32
+ imageLow={defaultData.image}
33
+ images={defaultData.images}
34
+ backgroundColor="red"
35
+ height="auto"
36
+ smallBreakpointRowLayout={true}
37
+ mediumBreakpointRowLayout={false}
38
+ rowTextColor="purple"
39
+ columnTextColor="black"
40
+ >
41
+ <Text tag="h3" size="xl">
42
+ Title
43
+ </Text>
44
+ <Text tag="p">
45
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
46
+ </Text>
47
+ </Card>
48
+ </div>
39
49
  ```
40
50
 
41
51
  ### Card - row layout on medium breakpoint only
@@ -43,21 +53,25 @@ import Link from '../../Atoms/Link/Link';
43
53
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
44
54
  import Link from '../../Atoms/Link/Link';
45
55
 
46
- <Card
47
- imageLow={defaultData.image}
48
- images={defaultData.images}
49
- backgroundColor="grey_light"
50
- height="auto"
51
- smallBreakpointRowLayout={false}
52
- mediumBreakpointRowLayout={true}
53
- >
54
- <Text tag="h3" color="purple" size="xl">
55
- Title
56
- </Text>
57
- <Text tag="p">
58
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
59
- </Text>
60
- </Card>;
56
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
57
+ <Card
58
+ imageLow={defaultData.image}
59
+ images={defaultData.images}
60
+ backgroundColor="orange"
61
+ height="auto"
62
+ smallBreakpointRowLayout={false}
63
+ mediumBreakpointRowLayout={true}
64
+ rowTextColor="purple"
65
+ columnTextColor="black"
66
+ >
67
+ <Text tag="h3" size="xl">
68
+ Title
69
+ </Text>
70
+ <Text tag="p">
71
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
72
+ </Text>
73
+ </Card>
74
+ </div>
61
75
  ```
62
76
 
63
77
  ### Card - row layout on small and medium breakpoints
@@ -65,29 +79,36 @@ import Link from '../../Atoms/Link/Link';
65
79
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
66
80
  import Link from '../../Atoms/Link/Link';
67
81
 
68
- <Card
69
- imageLow={defaultData.image}
70
- images={defaultData.images}
71
- backgroundColor="grey_light"
72
- height="auto"
73
- smallBreakpointRowLayout={true}
74
- mediumBreakpointRowLayout={true}
75
- >
76
- <Text tag="h3" color="purple" size="xl">
77
- Title
78
- </Text>
79
- <Text tag="p">
80
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
81
- </Text>
82
- </Card>;
82
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
83
+ <Card
84
+ imageLow={defaultData.image}
85
+ images={defaultData.images}
86
+ backgroundColor="purple"
87
+ height="auto"
88
+ smallBreakpointRowLayout={true}
89
+ mediumBreakpointRowLayout={true}
90
+ rowTextColor="purple"
91
+ columnTextColor="black"
92
+ >
93
+ <Text tag="h3" size="xl">
94
+ Title
95
+ </Text>
96
+ <Text tag="p">
97
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
98
+ </Text>
99
+ </Card>
100
+ </div>
83
101
  ```
84
102
 
85
103
  ### Card no body
86
104
 
87
105
  ```js
88
106
  const defaultData = require('../../../styleguide/data/data').defaultData;
89
- <Card
90
- imageLow={defaultData.image}
91
- images={defaultData.image}
92
- />;
107
+
108
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
109
+ <Card
110
+ imageLow={defaultData.image}
111
+ images={defaultData.image}
112
+ />
113
+ </div>
93
114
  ```
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:", ";gap:", ";}@media ", "{flex-direction:", ";gap:", ";}@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' : "".concat((0, _spacing.default)('md')), _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', (0, _spacing.default)('md'), _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', (0, _spacing.default)('md'), _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' : '0.8rem', _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,49 @@ 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;}}@media ", "{color:", ";@media ", "{color:", ";}@media ", "{color:", ";}"], (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:0 0 ", ";font-size:1.5rem;}}@media ", "{padding:", ";h1{font-size:2rem;})};"], _ref9 => {
48
68
  let {
49
69
  theme
50
- } = _ref6;
70
+ } = _ref9;
51
71
  return theme.allBreakpoints('S');
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
- }, _ref7 => {
72
+ }, (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref10 => {
73
+ let {
74
+ theme
75
+ } = _ref10;
76
+ return theme.allBreakpoints('M');
77
+ }, (0, _spacing.default)('l'));
78
+ }, _ref11 => {
54
79
  let {
55
80
  mediumBreakpointRowLayout
56
- } = _ref7;
57
- return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref8 => {
81
+ } = _ref11;
82
+ return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 ", ";font-size:1.5rem;}}"], _ref12 => {
58
83
  let {
59
84
  theme
60
- } = _ref8;
85
+ } = _ref12;
61
86
  return theme.allBreakpoints('M');
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
- }, _ref9 => {
87
+ }, (0, _spacing.default)('sm'), (0, _spacing.default)('sm'));
88
+ }, _ref13 => {
89
+ let {
90
+ theme
91
+ } = _ref13;
92
+ return theme.allBreakpoints('L');
93
+ }, (0, _spacing.default)('l'), _ref14 => {
94
+ let {
95
+ theme
96
+ } = _ref14;
97
+ return theme.allBreakpoints('S');
98
+ }, props => props.smallBreakpointRowLayout === true ? "".concat(props.rowTextColor) : "".concat(props.columnTextColor), _ref15 => {
99
+ let {
100
+ theme
101
+ } = _ref15;
102
+ return theme.allBreakpoints('M');
103
+ }, props => props.mediumBreakpointRowLayout === true ? "".concat(props.rowTextColor) : "".concat(props.columnTextColor), _ref16 => {
64
104
  let {
65
105
  theme
66
- } = _ref9;
106
+ } = _ref16;
67
107
  return theme.allBreakpoints('L');
68
- }, (0, _spacing.default)('l'));
108
+ }, props => props.columnTextColor);
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: 0.8rem;
11
+ border-radius: 1rem;
12
12
  overflow: hidden;
13
13
  background: #FFE400;
14
14
  }
@@ -30,6 +30,7 @@ exports[`renders correctly 1`] = `
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
32
  gap: 1rem;
33
+ background: #FFE400;
33
34
  }
34
35
  }
35
36
 
@@ -39,6 +40,7 @@ exports[`renders correctly 1`] = `
39
40
  -ms-flex-direction: column;
40
41
  flex-direction: column;
41
42
  gap: 1rem;
43
+ background: #FFE400;
42
44
  }
43
45
  }
44
46
 
@@ -47,6 +49,7 @@ exports[`renders correctly 1`] = `
47
49
  -webkit-flex-direction: column;
48
50
  -ms-flex-direction: column;
49
51
  flex-direction: column;
52
+ background: #FFE400;
50
53
  }
51
54
  }
52
55
 
@@ -60,6 +63,12 @@ exports[`renders correctly 1`] = `
60
63
  }
61
64
  }
62
65
 
66
+ @media (min-width:0px) {
67
+ .c1 {
68
+ color: black;
69
+ }
70
+ }
71
+
63
72
  <div
64
73
  className="c0"
65
74
  >
@@ -84,7 +93,7 @@ exports[`renders correctly 2`] = `
84
93
  display: -ms-flexbox;
85
94
  display: flex;
86
95
  height: 100%;
87
- border-radius: 0.8rem;
96
+ border-radius: 1rem;
88
97
  overflow: hidden;
89
98
  background: #FFE400;
90
99
  }
@@ -106,6 +115,7 @@ exports[`renders correctly 2`] = `
106
115
  -ms-flex-direction: column;
107
116
  flex-direction: column;
108
117
  gap: 1rem;
118
+ background: #FFE400;
109
119
  }
110
120
  }
111
121
 
@@ -115,6 +125,7 @@ exports[`renders correctly 2`] = `
115
125
  -ms-flex-direction: column;
116
126
  flex-direction: column;
117
127
  gap: 1rem;
128
+ background: #FFE400;
118
129
  }
119
130
  }
120
131
 
@@ -123,6 +134,7 @@ exports[`renders correctly 2`] = `
123
134
  -webkit-flex-direction: column;
124
135
  -ms-flex-direction: column;
125
136
  flex-direction: column;
137
+ background: #FFE400;
126
138
  }
127
139
  }
128
140
 
@@ -136,6 +148,12 @@ exports[`renders correctly 2`] = `
136
148
  }
137
149
  }
138
150
 
151
+ @media (min-width:0px) {
152
+ .c1 {
153
+ color: black;
154
+ }
155
+ }
156
+
139
157
  <div
140
158
  className="c0"
141
159
  >
@@ -174,7 +192,7 @@ exports[`renders correctly with no body 1`] = `
174
192
  display: -ms-flexbox;
175
193
  display: flex;
176
194
  height: 100%;
177
- border-radius: 0.8rem;
195
+ border-radius: 1rem;
178
196
  overflow: hidden;
179
197
  background: #FFE400;
180
198
  }
@@ -189,6 +207,7 @@ exports[`renders correctly with no body 1`] = `
189
207
  -ms-flex-direction: column;
190
208
  flex-direction: column;
191
209
  gap: 1rem;
210
+ background: #FFE400;
192
211
  }
193
212
  }
194
213
 
@@ -198,6 +217,7 @@ exports[`renders correctly with no body 1`] = `
198
217
  -ms-flex-direction: column;
199
218
  flex-direction: column;
200
219
  gap: 1rem;
220
+ background: #FFE400;
201
221
  }
202
222
  }
203
223
 
@@ -206,6 +226,7 @@ exports[`renders correctly with no body 1`] = `
206
226
  -webkit-flex-direction: column;
207
227
  -ms-flex-direction: column;
208
228
  flex-direction: column;
229
+ background: #FFE400;
209
230
  }
210
231
  }
211
232
 
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.45.0",
4
+ "version": "7.47.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.js CHANGED
@@ -15,6 +15,8 @@ const Card = ({
15
15
  squaredCorners,
16
16
  smallBreakpointRowLayout,
17
17
  mediumBreakpointRowLayout,
18
+ rowTextColor,
19
+ columnTextColor,
18
20
  ...rest
19
21
  }) => (
20
22
  <Container
@@ -44,6 +46,8 @@ const Card = ({
44
46
  <Copy
45
47
  smallBreakpointRowLayout={smallBreakpointRowLayout}
46
48
  mediumBreakpointRowLayout={mediumBreakpointRowLayout}
49
+ rowTextColor={rowTextColor}
50
+ columnTextColor={columnTextColor}
47
51
  >
48
52
  {children}
49
53
  </Copy>
@@ -62,7 +66,9 @@ Card.propTypes = {
62
66
  children: PropTypes.node,
63
67
  squaredCorners: PropTypes.bool,
64
68
  smallBreakpointRowLayout: PropTypes.bool,
65
- mediumBreakpointRowLayout: PropTypes.bool
69
+ mediumBreakpointRowLayout: PropTypes.bool,
70
+ rowTextColor: PropTypes.string,
71
+ columnTextColor: PropTypes.string
66
72
  };
67
73
 
68
74
  Card.defaultProps = {
@@ -76,7 +82,9 @@ Card.defaultProps = {
76
82
  height: '100%',
77
83
  squaredCorners: false,
78
84
  smallBreakpointRowLayout: null,
79
- mediumBreakpointRowLayout: null
85
+ mediumBreakpointRowLayout: null,
86
+ rowTextColor: 'black',
87
+ columnTextColor: 'black'
80
88
  };
81
89
 
82
90
  export default Card;
package/src/components/Molecules/Card/Card.md CHANGED
@@ -3,17 +3,23 @@
3
3
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
4
4
  import Link from '../../Atoms/Link/Link';
5
5
 
6
- <Card
7
- imageLow={defaultData.image}
8
- images={defaultData.images}
9
- backgroundColor="grey_light"
10
- height="auto"
11
- >
12
- <Text tag="h3" color="purple" size="xl">
13
- Title
14
- </Text>
15
- <Text tag="p">Text body copy description</Text>
16
- </Card>;
6
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
7
+ <Card
8
+ imageLow={defaultData.image}
9
+ images={defaultData.images}
10
+ backgroundColor="blue"
11
+ height="auto"
12
+ rowTextColor="purple"
13
+ columnTextColor="black"
14
+ >
15
+ <Text tag="h3" size="xl">
16
+ Title
17
+ </Text>
18
+ <Text tag="p">
19
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year.
20
+ </Text>
21
+ </Card>
22
+ </div>
17
23
  ```
18
24
 
19
25
  ### Card - row layout on small breakpoint only
@@ -21,21 +27,25 @@ import Link from '../../Atoms/Link/Link';
21
27
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
22
28
  import Link from '../../Atoms/Link/Link';
23
29
 
24
- <Card
25
- imageLow={defaultData.image}
26
- images={defaultData.images}
27
- backgroundColor="grey_light"
28
- height="auto"
29
- smallBreakpointRowLayout={true}
30
- mediumBreakpointRowLayout={false}
31
- >
32
- <Text tag="h3" color="purple" size="xl">
33
- Title
34
- </Text>
35
- <Text tag="p">
36
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
37
- </Text>
38
- </Card>;
30
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
31
+ <Card
32
+ imageLow={defaultData.image}
33
+ images={defaultData.images}
34
+ backgroundColor="red"
35
+ height="auto"
36
+ smallBreakpointRowLayout={true}
37
+ mediumBreakpointRowLayout={false}
38
+ rowTextColor="purple"
39
+ columnTextColor="black"
40
+ >
41
+ <Text tag="h3" size="xl">
42
+ Title
43
+ </Text>
44
+ <Text tag="p">
45
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
46
+ </Text>
47
+ </Card>
48
+ </div>
39
49
  ```
40
50
 
41
51
  ### Card - row layout on medium breakpoint only
@@ -43,21 +53,25 @@ import Link from '../../Atoms/Link/Link';
43
53
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
44
54
  import Link from '../../Atoms/Link/Link';
45
55
 
46
- <Card
47
- imageLow={defaultData.image}
48
- images={defaultData.images}
49
- backgroundColor="grey_light"
50
- height="auto"
51
- smallBreakpointRowLayout={false}
52
- mediumBreakpointRowLayout={true}
53
- >
54
- <Text tag="h3" color="purple" size="xl">
55
- Title
56
- </Text>
57
- <Text tag="p">
58
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
59
- </Text>
60
- </Card>;
56
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
57
+ <Card
58
+ imageLow={defaultData.image}
59
+ images={defaultData.images}
60
+ backgroundColor="orange"
61
+ height="auto"
62
+ smallBreakpointRowLayout={false}
63
+ mediumBreakpointRowLayout={true}
64
+ rowTextColor="purple"
65
+ columnTextColor="black"
66
+ >
67
+ <Text tag="h3" size="xl">
68
+ Title
69
+ </Text>
70
+ <Text tag="p">
71
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
72
+ </Text>
73
+ </Card>
74
+ </div>
61
75
  ```
62
76
 
63
77
  ### Card - row layout on small and medium breakpoints
@@ -65,29 +79,36 @@ import Link from '../../Atoms/Link/Link';
65
79
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
66
80
  import Link from '../../Atoms/Link/Link';
67
81
 
68
- <Card
69
- imageLow={defaultData.image}
70
- images={defaultData.images}
71
- backgroundColor="grey_light"
72
- height="auto"
73
- smallBreakpointRowLayout={true}
74
- mediumBreakpointRowLayout={true}
75
- >
76
- <Text tag="h3" color="purple" size="xl">
77
- Title
78
- </Text>
79
- <Text tag="p">
80
- Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
81
- </Text>
82
- </Card>;
82
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
83
+ <Card
84
+ imageLow={defaultData.image}
85
+ images={defaultData.images}
86
+ backgroundColor="purple"
87
+ height="auto"
88
+ smallBreakpointRowLayout={true}
89
+ mediumBreakpointRowLayout={true}
90
+ rowTextColor="purple"
91
+ columnTextColor="black"
92
+ >
93
+ <Text tag="h3" size="xl">
94
+ Title
95
+ </Text>
96
+ <Text tag="p">
97
+ Your donations make a very real difference to people in the UK and around the world, whether you donate through Red Nose Day, Sport Relief or to Comic Relief at any other time of year. Here are some of the many stories that show how people are changing their lives with your support.
98
+ </Text>
99
+ </Card>
100
+ </div>
83
101
  ```
84
102
 
85
103
  ### Card no body
86
104
 
87
105
  ```js
88
106
  const defaultData = require('../../../styleguide/data/data').defaultData;
89
- <Card
90
- imageLow={defaultData.image}
91
- images={defaultData.image}
92
- />;
107
+
108
+ <div style={{backgroundColor: 'lightblue', padding: '10px'}}>
109
+ <Card
110
+ imageLow={defaultData.image}
111
+ images={defaultData.image}
112
+ />
113
+ </div>
93
114
  ```
package/src/components/Molecules/Card/Card.style.js CHANGED
@@ -4,28 +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' : `${spacing('md')}`)};
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')};
11
15
  gap: ${spacing('md')};
16
+ background: ${({ theme, backgroundColor, smallBreakpointRowLayout }) => ((smallBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
12
17
  }
13
18
 
14
19
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, if so make horizontal layout */
15
20
  @media ${({ theme }) => theme.allBreakpoints('M')} {
16
21
  flex-direction: ${props => ((props.mediumBreakpointRowLayout === true) ? 'row' : 'column')};
17
22
  gap: ${spacing('md')};
23
+ background: ${({ theme, backgroundColor, mediumBreakpointRowLayout }) => ((mediumBreakpointRowLayout === true) ? 'transparent' : theme.color(backgroundColor))};
18
24
  }
19
25
 
20
26
  /* Set desktop and upwards to normal vertical layout */
21
27
  @media ${({ theme }) => theme.allBreakpoints('L')} {
22
28
  flex-direction: column;
29
+ background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
23
30
  }
24
-
25
- height: 100%;
26
- border-radius: ${props => (props.squaredCorners ? '0' : '0.8rem')};
27
- overflow: hidden;
28
- background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
29
31
  `;
30
32
 
31
33
  const Wrapper = styled.div`
@@ -38,25 +40,29 @@ const Copy = styled.div`
38
40
  padding: ${spacing('l')};
39
41
 
40
42
  /* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, adjust text spacing */
41
- ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout
42
- === true) && css`
43
+ ${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
43
44
  @media ${({ theme }) => theme.allBreakpoints('S')} {
44
- padding: ${props => ((props.smallBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
45
+ padding: ${spacing('sm')};
45
46
  h1 {
46
- margin: ${props => ((props.smallBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
47
- font-size: ${props => ((props.smallBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
47
+ margin: 0 0 ${spacing('sm')};
48
+ font-size: 1.5rem;
48
49
  }
49
50
  }
51
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
52
+ padding: ${spacing('l')};
53
+ h1 {
54
+ font-size: 2rem;
55
+ }
56
+ )};
50
57
  `}
51
58
 
52
59
  /* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, adjust text spacing */
53
- ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout
54
- === true) && css`
60
+ ${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
55
61
  @media ${({ theme }) => theme.allBreakpoints('M')} {
56
- padding: ${props => ((props.mediumBreakpointRowLayout === true) ? `${spacing('sm')}` : `${spacing('l')}`)};
62
+ padding: ${spacing('sm')};
57
63
  h1 {
58
- margin: ${props => ((props.mediumBreakpointRowLayout === true) && `0 0 ${spacing('sm')}`)};
59
- font-size: ${props => ((props.mediumBreakpointRowLayout === true) ? '1.5rem' : '2rem')};
64
+ margin: 0 0 ${spacing('sm')};
65
+ font-size: 1.5rem;
60
66
  }
61
67
  }
62
68
  `}
@@ -68,6 +74,22 @@ const Copy = styled.div`
68
74
  font-size: 2rem;
69
75
  }
70
76
  }
77
+
78
+ /* Setting colors based on row (transparent background) vs column view */
79
+ @media ${({ theme }) => theme.allBreakpoints('S')} {
80
+ color: ${props => ((props.smallBreakpointRowLayout === true)
81
+ ? `${props.rowTextColor}`
82
+ : `${props.columnTextColor}`
83
+ )};
84
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
85
+ color: ${props => ((props.mediumBreakpointRowLayout === true)
86
+ ? `${props.rowTextColor}`
87
+ : `${props.columnTextColor}`
88
+ )};
89
+ }
90
+ @media ${({ theme }) => theme.allBreakpoints('L')} {
91
+ color: ${props => props.columnTextColor};
92
+ }
71
93
  `;
72
94
 
73
95
  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: 0.8rem;
11
+ border-radius: 1rem;
12
12
  overflow: hidden;
13
13
  background: #FFE400;
14
14
  }
@@ -30,6 +30,7 @@ exports[`renders correctly 1`] = `
30
30
  -ms-flex-direction: column;
31
31
  flex-direction: column;
32
32
  gap: 1rem;
33
+ background: #FFE400;
33
34
  }
34
35
  }
35
36
 
@@ -39,6 +40,7 @@ exports[`renders correctly 1`] = `
39
40
  -ms-flex-direction: column;
40
41
  flex-direction: column;
41
42
  gap: 1rem;
43
+ background: #FFE400;
42
44
  }
43
45
  }
44
46
 
@@ -47,6 +49,7 @@ exports[`renders correctly 1`] = `
47
49
  -webkit-flex-direction: column;
48
50
  -ms-flex-direction: column;
49
51
  flex-direction: column;
52
+ background: #FFE400;
50
53
  }
51
54
  }
52
55
 
@@ -60,6 +63,12 @@ exports[`renders correctly 1`] = `
60
63
  }
61
64
  }
62
65
 
66
+ @media (min-width:0px) {
67
+ .c1 {
68
+ color: black;
69
+ }
70
+ }
71
+
63
72
  <div
64
73
  className="c0"
65
74
  >
@@ -84,7 +93,7 @@ exports[`renders correctly 2`] = `
84
93
  display: -ms-flexbox;
85
94
  display: flex;
86
95
  height: 100%;
87
- border-radius: 0.8rem;
96
+ border-radius: 1rem;
88
97
  overflow: hidden;
89
98
  background: #FFE400;
90
99
  }
@@ -106,6 +115,7 @@ exports[`renders correctly 2`] = `
106
115
  -ms-flex-direction: column;
107
116
  flex-direction: column;
108
117
  gap: 1rem;
118
+ background: #FFE400;
109
119
  }
110
120
  }
111
121
 
@@ -115,6 +125,7 @@ exports[`renders correctly 2`] = `
115
125
  -ms-flex-direction: column;
116
126
  flex-direction: column;
117
127
  gap: 1rem;
128
+ background: #FFE400;
118
129
  }
119
130
  }
120
131
 
@@ -123,6 +134,7 @@ exports[`renders correctly 2`] = `
123
134
  -webkit-flex-direction: column;
124
135
  -ms-flex-direction: column;
125
136
  flex-direction: column;
137
+ background: #FFE400;
126
138
  }
127
139
  }
128
140
 
@@ -136,6 +148,12 @@ exports[`renders correctly 2`] = `
136
148
  }
137
149
  }
138
150
 
151
+ @media (min-width:0px) {
152
+ .c1 {
153
+ color: black;
154
+ }
155
+ }
156
+
139
157
  <div
140
158
  className="c0"
141
159
  >
@@ -174,7 +192,7 @@ exports[`renders correctly with no body 1`] = `
174
192
  display: -ms-flexbox;
175
193
  display: flex;
176
194
  height: 100%;
177
- border-radius: 0.8rem;
195
+ border-radius: 1rem;
178
196
  overflow: hidden;
179
197
  background: #FFE400;
180
198
  }
@@ -189,6 +207,7 @@ exports[`renders correctly with no body 1`] = `
189
207
  -ms-flex-direction: column;
190
208
  flex-direction: column;
191
209
  gap: 1rem;
210
+ background: #FFE400;
192
211
  }
193
212
  }
194
213
 
@@ -198,6 +217,7 @@ exports[`renders correctly with no body 1`] = `
198
217
  -ms-flex-direction: column;
199
218
  flex-direction: column;
200
219
  gap: 1rem;
220
+ background: #FFE400;
201
221
  }
202
222
  }
203
223
 
@@ -206,6 +226,7 @@ exports[`renders correctly with no body 1`] = `
206
226
  -webkit-flex-direction: column;
207
227
  -ms-flex-direction: column;
208
228
  flex-direction: column;
229
+ background: #FFE400;
209
230
  }
210
231
  }
211
232