@comicrelief/component-library 7.46.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.
- package/dist/components/Molecules/Card/Card.js +8 -2
- package/dist/components/Molecules/Card/Card.md +81 -60
- package/dist/components/Molecules/Card/Card.style.js +32 -12
- package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +15 -3
- package/package.json +1 -1
- package/src/components/Molecules/Card/Card.js +10 -2
- package/src/components/Molecules/Card/Card.md +81 -60
- package/src/components/Molecules/Card/Card.style.js +31 -11
- package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +15 -3
|
@@ -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;
|
|
@@ -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
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
107
|
+
|
|
108
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
109
|
+
<Card
|
|
110
|
+
imageLow={defaultData.image}
|
|
111
|
+
images={defaultData.image}
|
|
112
|
+
/>
|
|
113
|
+
</div>
|
|
93
114
|
```
|
|
@@ -11,7 +11,7 @@ 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;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' :
|
|
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
16
|
theme,
|
|
17
17
|
backgroundColor
|
|
@@ -60,29 +60,49 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
|
|
|
60
60
|
const Copy = exports.Copy = _styledComponents.default.div.withConfig({
|
|
61
61
|
displayName: "Cardstyle__Copy",
|
|
62
62
|
componentId: "sc-cxn4co-2"
|
|
63
|
-
})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref8 => {
|
|
63
|
+
})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}@media ", "{color:", ";@media ", "{color:", ";}@media ", "{color:", ";}"], (0, _spacing.default)('l'), _ref8 => {
|
|
64
64
|
let {
|
|
65
65
|
smallBreakpointRowLayout
|
|
66
66
|
} = _ref8;
|
|
67
|
-
return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:", ";}}"], _ref9 => {
|
|
67
|
+
return smallBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 ", ";font-size:1.5rem;}}@media ", "{padding:", ";h1{font-size:2rem;})};"], _ref9 => {
|
|
68
68
|
let {
|
|
69
69
|
theme
|
|
70
70
|
} = _ref9;
|
|
71
71
|
return theme.allBreakpoints('S');
|
|
72
|
-
},
|
|
73
|
-
|
|
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 => {
|
|
74
79
|
let {
|
|
75
80
|
mediumBreakpointRowLayout
|
|
76
|
-
} =
|
|
77
|
-
return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:", ";font-size:
|
|
81
|
+
} = _ref11;
|
|
82
|
+
return mediumBreakpointRowLayout === true && (0, _styledComponents.css)(["@media ", "{padding:", ";h1{margin:0 0 ", ";font-size:1.5rem;}}"], _ref12 => {
|
|
78
83
|
let {
|
|
79
84
|
theme
|
|
80
|
-
} =
|
|
85
|
+
} = _ref12;
|
|
81
86
|
return theme.allBreakpoints('M');
|
|
82
|
-
},
|
|
83
|
-
},
|
|
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 => {
|
|
84
104
|
let {
|
|
85
105
|
theme
|
|
86
|
-
} =
|
|
106
|
+
} = _ref16;
|
|
87
107
|
return theme.allBreakpoints('L');
|
|
88
|
-
},
|
|
108
|
+
}, props => props.columnTextColor);
|
|
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
|
|
|
8
8
|
display: -ms-flexbox;
|
|
9
9
|
display: flex;
|
|
10
10
|
height: 100%;
|
|
11
|
-
border-radius:
|
|
11
|
+
border-radius: 1rem;
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
background: #FFE400;
|
|
14
14
|
}
|
|
@@ -63,6 +63,12 @@ exports[`renders correctly 1`] = `
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
@media (min-width:0px) {
|
|
67
|
+
.c1 {
|
|
68
|
+
color: black;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
66
72
|
<div
|
|
67
73
|
className="c0"
|
|
68
74
|
>
|
|
@@ -87,7 +93,7 @@ exports[`renders correctly 2`] = `
|
|
|
87
93
|
display: -ms-flexbox;
|
|
88
94
|
display: flex;
|
|
89
95
|
height: 100%;
|
|
90
|
-
border-radius:
|
|
96
|
+
border-radius: 1rem;
|
|
91
97
|
overflow: hidden;
|
|
92
98
|
background: #FFE400;
|
|
93
99
|
}
|
|
@@ -142,6 +148,12 @@ exports[`renders correctly 2`] = `
|
|
|
142
148
|
}
|
|
143
149
|
}
|
|
144
150
|
|
|
151
|
+
@media (min-width:0px) {
|
|
152
|
+
.c1 {
|
|
153
|
+
color: black;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
145
157
|
<div
|
|
146
158
|
className="c0"
|
|
147
159
|
>
|
|
@@ -180,7 +192,7 @@ exports[`renders correctly with no body 1`] = `
|
|
|
180
192
|
display: -ms-flexbox;
|
|
181
193
|
display: flex;
|
|
182
194
|
height: 100%;
|
|
183
|
-
border-radius:
|
|
195
|
+
border-radius: 1rem;
|
|
184
196
|
overflow: hidden;
|
|
185
197
|
background: #FFE400;
|
|
186
198
|
}
|
package/package.json
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;
|
|
@@ -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
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
107
|
+
|
|
108
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
109
|
+
<Card
|
|
110
|
+
imageLow={defaultData.image}
|
|
111
|
+
images={defaultData.image}
|
|
112
|
+
/>
|
|
113
|
+
</div>
|
|
93
114
|
```
|
|
@@ -5,7 +5,7 @@ const Container = styled.div`
|
|
|
5
5
|
position: relative;
|
|
6
6
|
display: flex;
|
|
7
7
|
height: 100%;
|
|
8
|
-
border-radius: ${props => (props.squaredCorners ? '0' : '
|
|
8
|
+
border-radius: ${props => (props.squaredCorners ? '0' : `${spacing('md')}`)};
|
|
9
9
|
overflow: hidden;
|
|
10
10
|
background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
|
|
11
11
|
|
|
@@ -40,25 +40,29 @@ const Copy = styled.div`
|
|
|
40
40
|
padding: ${spacing('l')};
|
|
41
41
|
|
|
42
42
|
/* Check for Cards/smallBreakpointRowLayout prop coming from the CMS, adjust text spacing */
|
|
43
|
-
${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout
|
|
44
|
-
=== true) && css`
|
|
43
|
+
${({ smallBreakpointRowLayout }) => (smallBreakpointRowLayout === true) && css`
|
|
45
44
|
@media ${({ theme }) => theme.allBreakpoints('S')} {
|
|
46
|
-
padding: ${
|
|
45
|
+
padding: ${spacing('sm')};
|
|
47
46
|
h1 {
|
|
48
|
-
margin:
|
|
49
|
-
font-size:
|
|
47
|
+
margin: 0 0 ${spacing('sm')};
|
|
48
|
+
font-size: 1.5rem;
|
|
50
49
|
}
|
|
51
50
|
}
|
|
51
|
+
@media ${({ theme }) => theme.allBreakpoints('M')} {
|
|
52
|
+
padding: ${spacing('l')};
|
|
53
|
+
h1 {
|
|
54
|
+
font-size: 2rem;
|
|
55
|
+
}
|
|
56
|
+
)};
|
|
52
57
|
`}
|
|
53
58
|
|
|
54
59
|
/* Check for Cards/mediumBreakpointRowLayout prop coming from the CMS, adjust text spacing */
|
|
55
|
-
${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout
|
|
56
|
-
=== true) && css`
|
|
60
|
+
${({ mediumBreakpointRowLayout }) => (mediumBreakpointRowLayout === true) && css`
|
|
57
61
|
@media ${({ theme }) => theme.allBreakpoints('M')} {
|
|
58
|
-
padding: ${
|
|
62
|
+
padding: ${spacing('sm')};
|
|
59
63
|
h1 {
|
|
60
|
-
margin:
|
|
61
|
-
font-size:
|
|
64
|
+
margin: 0 0 ${spacing('sm')};
|
|
65
|
+
font-size: 1.5rem;
|
|
62
66
|
}
|
|
63
67
|
}
|
|
64
68
|
`}
|
|
@@ -70,6 +74,22 @@ const Copy = styled.div`
|
|
|
70
74
|
font-size: 2rem;
|
|
71
75
|
}
|
|
72
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
|
+
}
|
|
73
93
|
`;
|
|
74
94
|
|
|
75
95
|
export { Container, Wrapper, Copy };
|
|
@@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
|
|
|
8
8
|
display: -ms-flexbox;
|
|
9
9
|
display: flex;
|
|
10
10
|
height: 100%;
|
|
11
|
-
border-radius:
|
|
11
|
+
border-radius: 1rem;
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
background: #FFE400;
|
|
14
14
|
}
|
|
@@ -63,6 +63,12 @@ exports[`renders correctly 1`] = `
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
@media (min-width:0px) {
|
|
67
|
+
.c1 {
|
|
68
|
+
color: black;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
66
72
|
<div
|
|
67
73
|
className="c0"
|
|
68
74
|
>
|
|
@@ -87,7 +93,7 @@ exports[`renders correctly 2`] = `
|
|
|
87
93
|
display: -ms-flexbox;
|
|
88
94
|
display: flex;
|
|
89
95
|
height: 100%;
|
|
90
|
-
border-radius:
|
|
96
|
+
border-radius: 1rem;
|
|
91
97
|
overflow: hidden;
|
|
92
98
|
background: #FFE400;
|
|
93
99
|
}
|
|
@@ -142,6 +148,12 @@ exports[`renders correctly 2`] = `
|
|
|
142
148
|
}
|
|
143
149
|
}
|
|
144
150
|
|
|
151
|
+
@media (min-width:0px) {
|
|
152
|
+
.c1 {
|
|
153
|
+
color: black;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
145
157
|
<div
|
|
146
158
|
className="c0"
|
|
147
159
|
>
|
|
@@ -180,7 +192,7 @@ exports[`renders correctly with no body 1`] = `
|
|
|
180
192
|
display: -ms-flexbox;
|
|
181
193
|
display: flex;
|
|
182
194
|
height: 100%;
|
|
183
|
-
border-radius:
|
|
195
|
+
border-radius: 1rem;
|
|
184
196
|
overflow: hidden;
|
|
185
197
|
background: #FFE400;
|
|
186
198
|
}
|