@comicrelief/component-library 7.46.0 → 7.48.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.md +73 -60
- package/dist/components/Molecules/Card/Card.style.js +15 -10
- package/dist/components/Molecules/Card/__snapshots__/Card.test.js.snap +3 -3
- package/package.json +1 -1
- package/src/components/Molecules/Card/Card.md +73 -60
- package/src/components/Molecules/Card/Card.style.js +15 -11
- package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap +3 -3
|
@@ -3,17 +3,21 @@
|
|
|
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
|
+
>
|
|
13
|
+
<Text tag="h3" size="xl">
|
|
14
|
+
Title
|
|
15
|
+
</Text>
|
|
16
|
+
<Text tag="p">
|
|
17
|
+
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.
|
|
18
|
+
</Text>
|
|
19
|
+
</Card>
|
|
20
|
+
</div>
|
|
17
21
|
```
|
|
18
22
|
|
|
19
23
|
### Card - row layout on small breakpoint only
|
|
@@ -21,21 +25,23 @@ import Link from '../../Atoms/Link/Link';
|
|
|
21
25
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
22
26
|
import Link from '../../Atoms/Link/Link';
|
|
23
27
|
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</
|
|
28
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
29
|
+
<Card
|
|
30
|
+
imageLow={defaultData.image}
|
|
31
|
+
images={defaultData.images}
|
|
32
|
+
backgroundColor="red"
|
|
33
|
+
height="auto"
|
|
34
|
+
smallBreakpointRowLayout={true}
|
|
35
|
+
mediumBreakpointRowLayout={false}
|
|
36
|
+
>
|
|
37
|
+
<Text tag="h3" size="xl">
|
|
38
|
+
Title
|
|
39
|
+
</Text>
|
|
40
|
+
<Text tag="p">
|
|
41
|
+
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.
|
|
42
|
+
</Text>
|
|
43
|
+
</Card>
|
|
44
|
+
</div>
|
|
39
45
|
```
|
|
40
46
|
|
|
41
47
|
### Card - row layout on medium breakpoint only
|
|
@@ -43,21 +49,23 @@ import Link from '../../Atoms/Link/Link';
|
|
|
43
49
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
44
50
|
import Link from '../../Atoms/Link/Link';
|
|
45
51
|
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
</
|
|
52
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
53
|
+
<Card
|
|
54
|
+
imageLow={defaultData.image}
|
|
55
|
+
images={defaultData.images}
|
|
56
|
+
backgroundColor="orange"
|
|
57
|
+
height="auto"
|
|
58
|
+
smallBreakpointRowLayout={false}
|
|
59
|
+
mediumBreakpointRowLayout={true}
|
|
60
|
+
>
|
|
61
|
+
<Text tag="h3" size="xl">
|
|
62
|
+
Title
|
|
63
|
+
</Text>
|
|
64
|
+
<Text tag="p">
|
|
65
|
+
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.
|
|
66
|
+
</Text>
|
|
67
|
+
</Card>
|
|
68
|
+
</div>
|
|
61
69
|
```
|
|
62
70
|
|
|
63
71
|
### Card - row layout on small and medium breakpoints
|
|
@@ -65,29 +73,34 @@ import Link from '../../Atoms/Link/Link';
|
|
|
65
73
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
66
74
|
import Link from '../../Atoms/Link/Link';
|
|
67
75
|
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</
|
|
76
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
77
|
+
<Card
|
|
78
|
+
imageLow={defaultData.image}
|
|
79
|
+
images={defaultData.images}
|
|
80
|
+
backgroundColor="purple"
|
|
81
|
+
height="auto"
|
|
82
|
+
smallBreakpointRowLayout={true}
|
|
83
|
+
mediumBreakpointRowLayout={true}
|
|
84
|
+
>
|
|
85
|
+
<Text tag="h3" size="xl">
|
|
86
|
+
Title
|
|
87
|
+
</Text>
|
|
88
|
+
<Text tag="p">
|
|
89
|
+
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.
|
|
90
|
+
</Text>
|
|
91
|
+
</Card>
|
|
92
|
+
</div>
|
|
83
93
|
```
|
|
84
94
|
|
|
85
95
|
### Card no body
|
|
86
96
|
|
|
87
97
|
```js
|
|
88
98
|
const defaultData = require('../../../styleguide/data/data').defaultData;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
99
|
+
|
|
100
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
101
|
+
<Card
|
|
102
|
+
imageLow={defaultData.image}
|
|
103
|
+
images={defaultData.image}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
93
106
|
```
|
|
@@ -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
|
|
@@ -64,25 +64,30 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
|
|
|
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 => {
|
|
84
89
|
let {
|
|
85
90
|
theme
|
|
86
|
-
} =
|
|
91
|
+
} = _ref13;
|
|
87
92
|
return theme.allBreakpoints('L');
|
|
88
93
|
}, (0, _spacing.default)('l'));
|
|
@@ -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
|
}
|
|
@@ -87,7 +87,7 @@ exports[`renders correctly 2`] = `
|
|
|
87
87
|
display: -ms-flexbox;
|
|
88
88
|
display: flex;
|
|
89
89
|
height: 100%;
|
|
90
|
-
border-radius:
|
|
90
|
+
border-radius: 1rem;
|
|
91
91
|
overflow: hidden;
|
|
92
92
|
background: #FFE400;
|
|
93
93
|
}
|
|
@@ -180,7 +180,7 @@ exports[`renders correctly with no body 1`] = `
|
|
|
180
180
|
display: -ms-flexbox;
|
|
181
181
|
display: flex;
|
|
182
182
|
height: 100%;
|
|
183
|
-
border-radius:
|
|
183
|
+
border-radius: 1rem;
|
|
184
184
|
overflow: hidden;
|
|
185
185
|
background: #FFE400;
|
|
186
186
|
}
|
package/package.json
CHANGED
|
@@ -3,17 +3,21 @@
|
|
|
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
|
+
>
|
|
13
|
+
<Text tag="h3" size="xl">
|
|
14
|
+
Title
|
|
15
|
+
</Text>
|
|
16
|
+
<Text tag="p">
|
|
17
|
+
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.
|
|
18
|
+
</Text>
|
|
19
|
+
</Card>
|
|
20
|
+
</div>
|
|
17
21
|
```
|
|
18
22
|
|
|
19
23
|
### Card - row layout on small breakpoint only
|
|
@@ -21,21 +25,23 @@ import Link from '../../Atoms/Link/Link';
|
|
|
21
25
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
22
26
|
import Link from '../../Atoms/Link/Link';
|
|
23
27
|
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</
|
|
28
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
29
|
+
<Card
|
|
30
|
+
imageLow={defaultData.image}
|
|
31
|
+
images={defaultData.images}
|
|
32
|
+
backgroundColor="red"
|
|
33
|
+
height="auto"
|
|
34
|
+
smallBreakpointRowLayout={true}
|
|
35
|
+
mediumBreakpointRowLayout={false}
|
|
36
|
+
>
|
|
37
|
+
<Text tag="h3" size="xl">
|
|
38
|
+
Title
|
|
39
|
+
</Text>
|
|
40
|
+
<Text tag="p">
|
|
41
|
+
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.
|
|
42
|
+
</Text>
|
|
43
|
+
</Card>
|
|
44
|
+
</div>
|
|
39
45
|
```
|
|
40
46
|
|
|
41
47
|
### Card - row layout on medium breakpoint only
|
|
@@ -43,21 +49,23 @@ import Link from '../../Atoms/Link/Link';
|
|
|
43
49
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
44
50
|
import Link from '../../Atoms/Link/Link';
|
|
45
51
|
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
</
|
|
52
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
53
|
+
<Card
|
|
54
|
+
imageLow={defaultData.image}
|
|
55
|
+
images={defaultData.images}
|
|
56
|
+
backgroundColor="orange"
|
|
57
|
+
height="auto"
|
|
58
|
+
smallBreakpointRowLayout={false}
|
|
59
|
+
mediumBreakpointRowLayout={true}
|
|
60
|
+
>
|
|
61
|
+
<Text tag="h3" size="xl">
|
|
62
|
+
Title
|
|
63
|
+
</Text>
|
|
64
|
+
<Text tag="p">
|
|
65
|
+
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.
|
|
66
|
+
</Text>
|
|
67
|
+
</Card>
|
|
68
|
+
</div>
|
|
61
69
|
```
|
|
62
70
|
|
|
63
71
|
### Card - row layout on small and medium breakpoints
|
|
@@ -65,29 +73,34 @@ import Link from '../../Atoms/Link/Link';
|
|
|
65
73
|
const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
|
|
66
74
|
import Link from '../../Atoms/Link/Link';
|
|
67
75
|
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</
|
|
76
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
77
|
+
<Card
|
|
78
|
+
imageLow={defaultData.image}
|
|
79
|
+
images={defaultData.images}
|
|
80
|
+
backgroundColor="purple"
|
|
81
|
+
height="auto"
|
|
82
|
+
smallBreakpointRowLayout={true}
|
|
83
|
+
mediumBreakpointRowLayout={true}
|
|
84
|
+
>
|
|
85
|
+
<Text tag="h3" size="xl">
|
|
86
|
+
Title
|
|
87
|
+
</Text>
|
|
88
|
+
<Text tag="p">
|
|
89
|
+
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.
|
|
90
|
+
</Text>
|
|
91
|
+
</Card>
|
|
92
|
+
</div>
|
|
83
93
|
```
|
|
84
94
|
|
|
85
95
|
### Card no body
|
|
86
96
|
|
|
87
97
|
```js
|
|
88
98
|
const defaultData = require('../../../styleguide/data/data').defaultData;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
99
|
+
|
|
100
|
+
<div style={{backgroundColor: 'lightblue', padding: '10px'}}>
|
|
101
|
+
<Card
|
|
102
|
+
imageLow={defaultData.image}
|
|
103
|
+
images={defaultData.image}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
93
106
|
```
|
|
@@ -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
|
`}
|
|
@@ -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
|
}
|
|
@@ -87,7 +87,7 @@ exports[`renders correctly 2`] = `
|
|
|
87
87
|
display: -ms-flexbox;
|
|
88
88
|
display: flex;
|
|
89
89
|
height: 100%;
|
|
90
|
-
border-radius:
|
|
90
|
+
border-radius: 1rem;
|
|
91
91
|
overflow: hidden;
|
|
92
92
|
background: #FFE400;
|
|
93
93
|
}
|
|
@@ -180,7 +180,7 @@ exports[`renders correctly with no body 1`] = `
|
|
|
180
180
|
display: -ms-flexbox;
|
|
181
181
|
display: flex;
|
|
182
182
|
height: 100%;
|
|
183
|
-
border-radius:
|
|
183
|
+
border-radius: 1rem;
|
|
184
184
|
overflow: hidden;
|
|
185
185
|
background: #FFE400;
|
|
186
186
|
}
|