@comicrelief/component-library 8.3.0 → 8.4.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 (13) hide show
  1. package/dist/components/Molecules/CardDs/CardDs.js +10 -3
  2. package/dist/components/Molecules/CardDs/CardDs.md +35 -1
  3. package/dist/components/Molecules/CardDs/CardDs.style.js +23 -27
  4. package/dist/components/Molecules/CardDs/CardDs.test.js +17 -0
  5. package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +252 -0
  6. package/dist/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +4 -2
  7. package/package.json +1 -1
  8. package/src/components/Molecules/CardDs/CardDs.js +16 -3
  9. package/src/components/Molecules/CardDs/CardDs.md +35 -1
  10. package/src/components/Molecules/CardDs/CardDs.style.js +42 -24
  11. package/src/components/Molecules/CardDs/CardDs.test.js +21 -0
  12. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +252 -0
  13. package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js +2 -1
package/dist/components/Molecules/CardDs/CardDs.js CHANGED
@@ -23,10 +23,12 @@ const CardDs = _ref => {
23
23
  height = '100%',
24
24
  icon = null,
25
25
  children,
26
+ isCarousel,
26
27
  ...rest
27
28
  } = _ref;
28
29
  const Media = /*#__PURE__*/_react.default.createElement(_CardDs.Image, {
29
- hasLink: link
30
+ hasLink: link,
31
+ isCarousel: isCarousel
30
32
  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
31
33
  alt: imageAltText,
32
34
  imageLow: imageLow,
@@ -39,6 +41,7 @@ const CardDs = _ref => {
39
41
  const hasMedia = () => {
40
42
  if (imageLow && link) {
41
43
  return /*#__PURE__*/_react.default.createElement(_CardDs.MediaLink, Object.assign({
44
+ isCarousel: isCarousel,
42
45
  "aria-hidden": "true",
43
46
  tabIndex: "-1",
44
47
  href: link,
@@ -52,12 +55,16 @@ const CardDs = _ref => {
52
55
  return null;
53
56
  };
54
57
  const external = target === 'blank' ? 'noopener' : null;
55
- return /*#__PURE__*/_react.default.createElement(_CardDs.Container, rest, hasMedia(), /*#__PURE__*/_react.default.createElement(_CardDs.Copy, {
58
+ return /*#__PURE__*/_react.default.createElement(_CardDs.Container, Object.assign({
59
+ isCarousel: isCarousel
60
+ }, rest), hasMedia(), /*#__PURE__*/_react.default.createElement(_CardDs.Copy, {
61
+ isCarousel: isCarousel,
56
62
  hasImage: imageLow,
57
63
  hasLink: link,
58
64
  backgroundColor: backgroundColor
59
65
  }, children), link && /*#__PURE__*/_react.default.createElement(_CardDs.CTA, {
60
- hasImage: imageLow
66
+ hasImage: imageLow,
67
+ isCarousel: isCarousel
61
68
  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
62
69
  rel: external,
63
70
  color: "red",
package/dist/components/Molecules/CardDs/CardDs.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # CardDs
2
2
  ## Image and CTA are clickable and links user through to full content
3
3
 
4
-
5
4
  ### CardDs: Image, Text & Link
6
5
  ```js
7
6
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
@@ -117,3 +116,38 @@ import { Internal } from '../../Atoms/Icons/index';
117
116
  </CardDs>
118
117
  </div>;
119
118
  ```
119
+
120
+
121
+ ### CardDs: only column view for use in CardsCarousel
122
+ ```js
123
+ const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
124
+ import Link from '../../Atoms/Link/Link';
125
+ import { Internal } from '../../Atoms/Icons/index';
126
+
127
+ <div
128
+ style={{
129
+ display: 'flex',
130
+ padding: '2rem 0',
131
+ background: '#E1E2E3',
132
+ justifyContent: 'space-around'
133
+ }}
134
+ >
135
+ <CardDs
136
+ target="_blank"
137
+ link="/home"
138
+ linkLabel="find out more"
139
+ imageLow={defaultData.image}
140
+ images={defaultData.images}
141
+ imageAltText="Happy man going to work"
142
+ backgroundColor="white"
143
+ height="auto"
144
+ icon={<Internal colour="white" />}
145
+ isCarousel={true}
146
+ >
147
+ <Text tag="h3" color="purple" size="xl">
148
+ Only Column view
149
+ </Text>
150
+ <Text tag="p">Text body copy description</Text>
151
+ </CardDs>
152
+ </div>;
153
+ ```
package/dist/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -12,7 +12,7 @@ var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
12
12
  const Container = exports.Container = _styledComponents.default.div.withConfig({
13
13
  displayName: "CardDsstyle__Container",
14
14
  componentId: "sc-1m4yp5m-0"
15
- })(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";@media ", "{flex-direction:row;}@media ", "{flex-direction:column;}"], _ref => {
15
+ })(["display:flex;position:relative;flex-direction:column;height:100%;width:100%;background:", ";", ";@media ", "{flex-direction:column;}"], _ref => {
16
16
  let {
17
17
  theme,
18
18
  backgroundColor
@@ -20,9 +20,10 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
20
20
  return theme.color(backgroundColor);
21
21
  }, _ref2 => {
22
22
  let {
23
+ isCarousel,
23
24
  theme
24
25
  } = _ref2;
25
- return theme.allBreakpoints('M');
26
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{flex-direction:row;}"], theme.allBreakpoints('M'));
26
27
  }, _ref3 => {
27
28
  let {
28
29
  theme
@@ -32,20 +33,22 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
32
33
  const Image = exports.Image = _styledComponents.default.div.withConfig({
33
34
  displayName: "CardDsstyle__Image",
34
35
  componentId: "sc-1m4yp5m-1"
35
- })(["height:auto;margin:0 0 0 ", ";@media ", "{margin:0 -", " 0 ", ";}img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), _ref4 => {
36
+ })(["height:auto;margin:0 0 0 ", ";", ";img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), _ref4 => {
36
37
  let {
38
+ isCarousel,
37
39
  theme
38
40
  } = _ref4;
39
- return theme.allBreakpoints('M');
40
- }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('md'), (0, _spacing.default)('md'));
41
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:0 -", " 0 ", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
42
+ }, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
41
43
  const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
42
44
  displayName: "CardDsstyle__MediaLink",
43
45
  componentId: "sc-1m4yp5m-2"
44
- })(["width:100%;@media ", "{width:calc(50% + 6rem);}@media ", "{width:100%;}"], _ref5 => {
46
+ })(["width:100%;", ";@media ", "{width:100%;}"], _ref5 => {
45
47
  let {
48
+ isCarousel,
46
49
  theme
47
50
  } = _ref5;
48
- return theme.allBreakpoints('M');
51
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{width:calc(50% + 6rem);}"], theme.allBreakpoints('M'));
49
52
  }, _ref6 => {
50
53
  let {
51
54
  theme
@@ -73,31 +76,24 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
73
76
  return theme.allBreakpoints('XL');
74
77
  }, (0, _zIndex.default)('low'), _ref10 => {
75
78
  let {
76
- hasImage
79
+ hasImage,
80
+ isCarousel,
81
+ theme
77
82
  } = _ref10;
78
- return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), _ref11 => {
79
- let {
80
- theme
81
- } = _ref11;
82
- return theme.allBreakpoints('M');
83
- }, (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), _ref12 => {
84
- let {
85
- theme
86
- } = _ref12;
87
- return theme.allBreakpoints('XL');
88
- }, (0, _spacing.default)('m'), (0, _spacing.default)('m'));
83
+ return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");", ";@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m')), theme.allBreakpoints('XL'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
89
84
  });
90
85
  const CTA = exports.CTA = _styledComponents.default.div.withConfig({
91
86
  displayName: "CardDsstyle__CTA",
92
87
  componentId: "sc-1m4yp5m-4"
93
- })(["position:absolute;right:", ";bottom:-", ";", ";@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref13 => {
88
+ })(["position:absolute;right:", ";bottom:-", ";", ";", ";"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref11 => {
94
89
  let {
90
+ isCarousel,
95
91
  theme
96
- } = _ref13;
97
- return theme.allBreakpoints('M');
98
- }, (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref14 => {
99
- let {
100
- hasImage
101
- } = _ref14;
102
- return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
92
+ } = _ref11;
93
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref12 => {
94
+ let {
95
+ hasImage
96
+ } = _ref12;
97
+ return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
98
+ });
103
99
  });
package/dist/components/Molecules/CardDs/CardDs.test.js CHANGED
@@ -21,4 +21,21 @@ it('renders correctly', () => {
21
21
  })
22
22
  }, "Text body copy description")).toJSON();
23
23
  expect(tree).toMatchSnapshot();
24
+ });
25
+ it('renders Column view correctly', () => {
26
+ const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_CardDs.default, {
27
+ target: "_blank",
28
+ link: "/home",
29
+ linkLabel: "find out more",
30
+ imageLow: _data.defaultData.image,
31
+ images: _data.defaultData.images,
32
+ imageAltText: "Happy man going to work",
33
+ backgroundColor: "white",
34
+ height: "auto",
35
+ icon: /*#__PURE__*/_react.default.createElement(_index.Internal, {
36
+ colour: "white"
37
+ }),
38
+ isCarousel: true
39
+ }, "Column view")).toJSON();
40
+ expect(tree).toMatchSnapshot();
24
41
  });
package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -1,5 +1,257 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`renders Column view correctly 1`] = `
4
+ .c3 {
5
+ display: block;
6
+ width: 100%;
7
+ height: auto;
8
+ position: relative;
9
+ }
10
+
11
+ .c4 {
12
+ width: 100%;
13
+ height: auto;
14
+ display: block;
15
+ object-fit: cover;
16
+ }
17
+
18
+ .c8 {
19
+ display: -webkit-inline-box;
20
+ display: -webkit-inline-flex;
21
+ display: -ms-inline-flexbox;
22
+ display: inline-flex;
23
+ margin-left: 1rem;
24
+ -webkit-align-self: center;
25
+ -ms-flex-item-align: center;
26
+ align-self: center;
27
+ right: 1.5rem;
28
+ }
29
+
30
+ .c7 {
31
+ display: -webkit-inline-box;
32
+ display: -webkit-inline-flex;
33
+ display: -ms-inline-flexbox;
34
+ display: inline-flex;
35
+ position: relative;
36
+ padding: 0.5rem 1.25rem;
37
+ -webkit-text-decoration: none;
38
+ text-decoration: none;
39
+ font-weight: 700;
40
+ font-size: 1rem;
41
+ border-radius: 2rem;
42
+ -webkit-transition: all 0.3s;
43
+ transition: all 0.3s;
44
+ height: 3.125rem;
45
+ width: 100%;
46
+ -webkit-box-pack: center;
47
+ -webkit-justify-content: center;
48
+ -ms-flex-pack: center;
49
+ justify-content: center;
50
+ -webkit-align-items: center;
51
+ -webkit-box-align: center;
52
+ -ms-flex-align: center;
53
+ align-items: center;
54
+ cursor: pointer;
55
+ background-color: #E52630;
56
+ color: #FFFFFF;
57
+ }
58
+
59
+ .c7:hover {
60
+ background-color: #890B11;
61
+ color: #FFFFFF;
62
+ }
63
+
64
+ .c0 {
65
+ display: -webkit-box;
66
+ display: -webkit-flex;
67
+ display: -ms-flexbox;
68
+ display: flex;
69
+ position: relative;
70
+ -webkit-flex-direction: column;
71
+ -ms-flex-direction: column;
72
+ flex-direction: column;
73
+ height: 100%;
74
+ width: 100%;
75
+ background: inherit;
76
+ }
77
+
78
+ .c2 {
79
+ height: auto;
80
+ margin: 0 0 0 1.5rem;
81
+ }
82
+
83
+ .c2 img {
84
+ border-radius: 1rem;
85
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
86
+ }
87
+
88
+ .c1 {
89
+ width: 100%;
90
+ }
91
+
92
+ .c5 {
93
+ padding: 2rem;
94
+ padding-bottom: 4rem;
95
+ display: -webkit-box;
96
+ display: -webkit-flex;
97
+ display: -ms-flexbox;
98
+ display: flex;
99
+ -webkit-flex-direction: column;
100
+ -ms-flex-direction: column;
101
+ flex-direction: column;
102
+ border-radius: 1rem;
103
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
104
+ background: #FFFFFF;
105
+ margin: 0 1.5rem 0 0;
106
+ z-index: 1;
107
+ margin-top: calc(-2 * 1.5rem);
108
+ min-height: calc(5 * 2rem);
109
+ }
110
+
111
+ .c6 {
112
+ position: absolute;
113
+ right: 1.5rem;
114
+ bottom: -1.5rem;
115
+ z-index: 2;
116
+ }
117
+
118
+ .c9 {
119
+ fill: #FFFFFF;
120
+ }
121
+
122
+ @media (min-width:740px) {
123
+ .c8 {
124
+ width: auto;
125
+ right: auto;
126
+ position: relative;
127
+ }
128
+ }
129
+
130
+ @media (min-width:740px) {
131
+ .c7 {
132
+ width: auto;
133
+ }
134
+ }
135
+
136
+ @media (min-width:1024px) {
137
+ .c7 {
138
+ background-color: #E52630;
139
+ color: #FFFFFF;
140
+ }
141
+
142
+ .c7:hover {
143
+ background-color: #890B11;
144
+ color: #FFFFFF;
145
+ }
146
+ }
147
+
148
+ @media (min-width:1440px) {
149
+ .c0 {
150
+ -webkit-flex-direction: column;
151
+ -ms-flex-direction: column;
152
+ flex-direction: column;
153
+ }
154
+ }
155
+
156
+ @media (min-width:1440px) {
157
+ .c1 {
158
+ width: 100%;
159
+ }
160
+ }
161
+
162
+ @media (min-width:1440px) {
163
+ .c5 {
164
+ height: 100%;
165
+ }
166
+ }
167
+
168
+ @media (min-width:1440px) {
169
+ .c5 {
170
+ margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
171
+ width: 100%;
172
+ }
173
+ }
174
+
175
+ @media (min-width:1024px) {
176
+ .c9 {
177
+ fill: #FFFFFF;
178
+ }
179
+ }
180
+
181
+ <div
182
+ className="c0"
183
+ >
184
+ <a
185
+ aria-hidden="true"
186
+ className="c1"
187
+ data-image-cta-copy="find out more"
188
+ href="/home"
189
+ tabIndex="-1"
190
+ target="_blank"
191
+ >
192
+ <div
193
+ className="c2"
194
+ >
195
+ <div
196
+ className="c3 lazyload"
197
+ height="auto"
198
+ width="100%"
199
+ >
200
+ <img
201
+ alt="Happy man going to work"
202
+ className="c4 lazyload"
203
+ data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
204
+ data-sizes="auto"
205
+ data-src={null}
206
+ data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
207
+ height="auto"
208
+ src={null}
209
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
210
+ width="100%"
211
+ />
212
+ </div>
213
+ </div>
214
+ </a>
215
+ <div
216
+ className="c5"
217
+ >
218
+ Column view
219
+ </div>
220
+ <div
221
+ className="c6"
222
+ >
223
+ <a
224
+ className="c7"
225
+ color="red"
226
+ data-button-cta-copy="find out more"
227
+ href="/home"
228
+ rel={null}
229
+ target="_self"
230
+ type="button"
231
+ >
232
+ find out more
233
+ <span
234
+ className="c8"
235
+ type="button"
236
+ >
237
+ <svg
238
+ className="c9"
239
+ fill="#FFFFFF"
240
+ height={24}
241
+ viewBox="0 0 96 96"
242
+ width={24}
243
+ xmlns="http://www.w3.org/2000/svg"
244
+ >
245
+ <path
246
+ d="M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z"
247
+ />
248
+ </svg>
249
+ </span>
250
+ </a>
251
+ </div>
252
+ </div>
253
+ `;
254
+
3
255
  exports[`renders correctly 1`] = `
4
256
  .c3 {
5
257
  display: block;
package/dist/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js CHANGED
@@ -29,8 +29,10 @@ const defaultCopyBottom = exports.defaultCopyBottom = /*#__PURE__*/_react.defaul
29
29
  color: "grey_dark"
30
30
  }, "Update your preferences at any time by visiting our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
31
31
  type: "standard",
32
- href: "https://www.comicrelief.com/update-your-preferences"
32
+ href: "https://www.comicrelief.com/update-your-preferences",
33
+ target: "blank"
33
34
  }, "preferences centre"), ". Your details will be kept safe, see our", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
34
35
  type: "standard",
35
- href: "https://www.comicrelief.com/privacy-policy"
36
+ href: "https://www.comicrelief.com/privacy-policy",
37
+ target: "blank"
36
38
  }, "privacy policy"), ' ', "for more information.");
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": "8.3.0",
4
+ "version": "8.4.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/CardDs/CardDs.js CHANGED
@@ -19,10 +19,14 @@ const CardDs = ({
19
19
  height = '100%',
20
20
  icon = null,
21
21
  children,
22
+ isCarousel,
22
23
  ...rest
23
24
  }) => {
24
25
  const Media = (
25
- <Image hasLink={link}>
26
+ <Image
27
+ hasLink={link}
28
+ isCarousel={isCarousel}
29
+ >
26
30
  <Picture
27
31
  alt={imageAltText}
28
32
  imageLow={imageLow}
@@ -39,6 +43,7 @@ const CardDs = ({
39
43
  if (imageLow && link) {
40
44
  return (
41
45
  <MediaLink
46
+ isCarousel={isCarousel}
42
47
  aria-hidden="true"
43
48
  tabIndex="-1"
44
49
  href={link}
@@ -59,9 +64,13 @@ const CardDs = ({
59
64
  const external = target === 'blank' ? 'noopener' : null;
60
65
 
61
66
  return (
62
- <Container {...rest}>
67
+ <Container
68
+ isCarousel={isCarousel}
69
+ {...rest}
70
+ >
63
71
  {hasMedia()}
64
72
  <Copy
73
+ isCarousel={isCarousel}
65
74
  hasImage={imageLow}
66
75
  hasLink={link}
67
76
  backgroundColor={backgroundColor}
@@ -69,7 +78,10 @@ const CardDs = ({
69
78
  {children}
70
79
  </Copy>
71
80
  {link && (
72
- <CTA hasImage={imageLow}>
81
+ <CTA
82
+ hasImage={imageLow}
83
+ isCarousel={isCarousel}
84
+ >
73
85
  <Link
74
86
  rel={external}
75
87
  color="red"
@@ -88,6 +100,7 @@ const CardDs = ({
88
100
  };
89
101
 
90
102
  CardDs.propTypes = {
103
+ isCarousel: PropTypes.bool,
91
104
  backgroundColor: PropTypes.string,
92
105
  imageLow: PropTypes.string,
93
106
  images: PropTypes.string,
package/src/components/Molecules/CardDs/CardDs.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # CardDs
2
2
  ## Image and CTA are clickable and links user through to full content
3
3
 
4
-
5
4
  ### CardDs: Image, Text & Link
6
5
  ```js
7
6
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
@@ -117,3 +116,38 @@ import { Internal } from '../../Atoms/Icons/index';
117
116
  </CardDs>
118
117
  </div>;
119
118
  ```
119
+
120
+
121
+ ### CardDs: only column view for use in CardsCarousel
122
+ ```js
123
+ const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
124
+ import Link from '../../Atoms/Link/Link';
125
+ import { Internal } from '../../Atoms/Icons/index';
126
+
127
+ <div
128
+ style={{
129
+ display: 'flex',
130
+ padding: '2rem 0',
131
+ background: '#E1E2E3',
132
+ justifyContent: 'space-around'
133
+ }}
134
+ >
135
+ <CardDs
136
+ target="_blank"
137
+ link="/home"
138
+ linkLabel="find out more"
139
+ imageLow={defaultData.image}
140
+ images={defaultData.images}
141
+ imageAltText="Happy man going to work"
142
+ backgroundColor="white"
143
+ height="auto"
144
+ icon={<Internal colour="white" />}
145
+ isCarousel={true}
146
+ >
147
+ <Text tag="h3" color="purple" size="xl">
148
+ Only Column view
149
+ </Text>
150
+ <Text tag="p">Text body copy description</Text>
151
+ </CardDs>
152
+ </div>;
153
+ ```
package/src/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -9,9 +9,12 @@ const Container = styled.div`
9
9
  height: 100%;
10
10
  width: 100%;
11
11
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
12
- @media ${({ theme }) => theme.allBreakpoints('M')} {
13
- flex-direction: row;
14
- }
12
+
13
+ ${({ isCarousel, theme }) => !isCarousel && css`
14
+ @media ${theme.allBreakpoints('M')} {
15
+ flex-direction: row;
16
+ }
17
+ `};
15
18
 
16
19
  @media ${({ theme }) => theme.allBreakpoints('XL')} {
17
20
  flex-direction: column;
@@ -21,9 +24,12 @@ const Container = styled.div`
21
24
  const Image = styled.div`
22
25
  height: auto;
23
26
  margin: 0 0 0 ${spacing('m')};
24
- @media ${({ theme }) => theme.allBreakpoints('M')} {
25
- margin: 0 -${spacing('m')} 0 ${spacing('m')};
26
- }
27
+
28
+ ${({ isCarousel, theme }) => !isCarousel && css`
29
+ @media ${theme.allBreakpoints('M')} {
30
+ margin: 0 -${spacing('m')} 0 ${spacing('m')};
31
+ }
32
+ `};
27
33
 
28
34
  img {
29
35
  border-radius: ${spacing('md')};
@@ -33,9 +39,13 @@ const Image = styled.div`
33
39
 
34
40
  const MediaLink = styled.a`
35
41
  width: 100%;
36
- @media ${({ theme }) => theme.allBreakpoints('M')} {
37
- width: calc(50% + 6rem);
38
- }
42
+
43
+ ${({ isCarousel, theme }) => !isCarousel && css`
44
+ @media ${theme.allBreakpoints('M')} {
45
+ width: calc(50% + 6rem);
46
+ }
47
+ `};
48
+
39
49
  @media ${({ theme }) => theme.allBreakpoints('XL')} {
40
50
  width: 100%;
41
51
  }
@@ -49,37 +59,45 @@ const Copy = styled.div`
49
59
  border-radius: ${spacing('md')};
50
60
  box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
51
61
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
52
- // width: 100%;
53
62
  margin: 0 ${spacing('m')} 0 0;
63
+
54
64
  @media ${({ theme }) => theme.allBreakpoints('XL')} {
55
65
  height: 100%;
56
66
  }
67
+
57
68
  ${zIndex('low')};
58
- ${({ hasImage }) => hasImage
59
- && css`
60
- margin-top: calc(-2 * ${spacing('m')});
61
- min-height: calc(5 * ${spacing('l')});
62
- @media ${({ theme }) => theme.allBreakpoints('M')} {
69
+
70
+ ${({ hasImage, isCarousel, theme }) => hasImage && css`
71
+ margin-top: calc(-2 * ${spacing('m')});
72
+ min-height: calc(5 * ${spacing('l')});
73
+
74
+ ${!isCarousel && css`
75
+ @media ${theme.allBreakpoints('M')} {
63
76
  margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
64
77
  width: calc(50% + 6rem);
65
78
  }
66
-
67
- @media ${({ theme }) => theme.allBreakpoints('XL')} {
68
- margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
69
- width: 100%;
70
- }
71
79
  `};
80
+
81
+ @media ${theme.allBreakpoints('XL')} {
82
+ margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
83
+ width: 100%;
84
+ }
85
+ `};
72
86
  `;
73
87
 
74
88
  const CTA = styled.div`
75
89
  position: absolute;
76
90
  right: ${spacing('m')};
77
91
  bottom: -${spacing('m')};
92
+
78
93
  ${zIndex('medium')};
79
- @media ${({ theme }) => theme.allBreakpoints('M')} {
80
- bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
81
- ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
82
- }
94
+
95
+ ${({ isCarousel, theme }) => !isCarousel && css`
96
+ @media ${theme.allBreakpoints('M')} {
97
+ bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
98
+ ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
99
+ }
100
+ `};
83
101
  `;
84
102
 
85
103
  export {
package/src/components/Molecules/CardDs/CardDs.test.js CHANGED
@@ -22,3 +22,24 @@ it('renders correctly', () => {
22
22
 
23
23
  expect(tree).toMatchSnapshot();
24
24
  });
25
+
26
+ it('renders Column view correctly', () => {
27
+ const tree = renderWithTheme(
28
+ <CardDs
29
+ target="_blank"
30
+ link="/home"
31
+ linkLabel="find out more"
32
+ imageLow={defaultData.image}
33
+ images={defaultData.images}
34
+ imageAltText="Happy man going to work"
35
+ backgroundColor="white"
36
+ height="auto"
37
+ icon={<Internal colour="white" />}
38
+ isCarousel={true}
39
+ >
40
+ Column view
41
+ </CardDs>
42
+ ).toJSON();
43
+
44
+ expect(tree).toMatchSnapshot();
45
+ });
package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -1,5 +1,257 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
+ exports[`renders Column view correctly 1`] = `
4
+ .c3 {
5
+ display: block;
6
+ width: 100%;
7
+ height: auto;
8
+ position: relative;
9
+ }
10
+
11
+ .c4 {
12
+ width: 100%;
13
+ height: auto;
14
+ display: block;
15
+ object-fit: cover;
16
+ }
17
+
18
+ .c8 {
19
+ display: -webkit-inline-box;
20
+ display: -webkit-inline-flex;
21
+ display: -ms-inline-flexbox;
22
+ display: inline-flex;
23
+ margin-left: 1rem;
24
+ -webkit-align-self: center;
25
+ -ms-flex-item-align: center;
26
+ align-self: center;
27
+ right: 1.5rem;
28
+ }
29
+
30
+ .c7 {
31
+ display: -webkit-inline-box;
32
+ display: -webkit-inline-flex;
33
+ display: -ms-inline-flexbox;
34
+ display: inline-flex;
35
+ position: relative;
36
+ padding: 0.5rem 1.25rem;
37
+ -webkit-text-decoration: none;
38
+ text-decoration: none;
39
+ font-weight: 700;
40
+ font-size: 1rem;
41
+ border-radius: 2rem;
42
+ -webkit-transition: all 0.3s;
43
+ transition: all 0.3s;
44
+ height: 3.125rem;
45
+ width: 100%;
46
+ -webkit-box-pack: center;
47
+ -webkit-justify-content: center;
48
+ -ms-flex-pack: center;
49
+ justify-content: center;
50
+ -webkit-align-items: center;
51
+ -webkit-box-align: center;
52
+ -ms-flex-align: center;
53
+ align-items: center;
54
+ cursor: pointer;
55
+ background-color: #E52630;
56
+ color: #FFFFFF;
57
+ }
58
+
59
+ .c7:hover {
60
+ background-color: #890B11;
61
+ color: #FFFFFF;
62
+ }
63
+
64
+ .c0 {
65
+ display: -webkit-box;
66
+ display: -webkit-flex;
67
+ display: -ms-flexbox;
68
+ display: flex;
69
+ position: relative;
70
+ -webkit-flex-direction: column;
71
+ -ms-flex-direction: column;
72
+ flex-direction: column;
73
+ height: 100%;
74
+ width: 100%;
75
+ background: inherit;
76
+ }
77
+
78
+ .c2 {
79
+ height: auto;
80
+ margin: 0 0 0 1.5rem;
81
+ }
82
+
83
+ .c2 img {
84
+ border-radius: 1rem;
85
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
86
+ }
87
+
88
+ .c1 {
89
+ width: 100%;
90
+ }
91
+
92
+ .c5 {
93
+ padding: 2rem;
94
+ padding-bottom: 4rem;
95
+ display: -webkit-box;
96
+ display: -webkit-flex;
97
+ display: -ms-flexbox;
98
+ display: flex;
99
+ -webkit-flex-direction: column;
100
+ -ms-flex-direction: column;
101
+ flex-direction: column;
102
+ border-radius: 1rem;
103
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
104
+ background: #FFFFFF;
105
+ margin: 0 1.5rem 0 0;
106
+ z-index: 1;
107
+ margin-top: calc(-2 * 1.5rem);
108
+ min-height: calc(5 * 2rem);
109
+ }
110
+
111
+ .c6 {
112
+ position: absolute;
113
+ right: 1.5rem;
114
+ bottom: -1.5rem;
115
+ z-index: 2;
116
+ }
117
+
118
+ .c9 {
119
+ fill: #FFFFFF;
120
+ }
121
+
122
+ @media (min-width:740px) {
123
+ .c8 {
124
+ width: auto;
125
+ right: auto;
126
+ position: relative;
127
+ }
128
+ }
129
+
130
+ @media (min-width:740px) {
131
+ .c7 {
132
+ width: auto;
133
+ }
134
+ }
135
+
136
+ @media (min-width:1024px) {
137
+ .c7 {
138
+ background-color: #E52630;
139
+ color: #FFFFFF;
140
+ }
141
+
142
+ .c7:hover {
143
+ background-color: #890B11;
144
+ color: #FFFFFF;
145
+ }
146
+ }
147
+
148
+ @media (min-width:1440px) {
149
+ .c0 {
150
+ -webkit-flex-direction: column;
151
+ -ms-flex-direction: column;
152
+ flex-direction: column;
153
+ }
154
+ }
155
+
156
+ @media (min-width:1440px) {
157
+ .c1 {
158
+ width: 100%;
159
+ }
160
+ }
161
+
162
+ @media (min-width:1440px) {
163
+ .c5 {
164
+ height: 100%;
165
+ }
166
+ }
167
+
168
+ @media (min-width:1440px) {
169
+ .c5 {
170
+ margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
171
+ width: 100%;
172
+ }
173
+ }
174
+
175
+ @media (min-width:1024px) {
176
+ .c9 {
177
+ fill: #FFFFFF;
178
+ }
179
+ }
180
+
181
+ <div
182
+ className="c0"
183
+ >
184
+ <a
185
+ aria-hidden="true"
186
+ className="c1"
187
+ data-image-cta-copy="find out more"
188
+ href="/home"
189
+ tabIndex="-1"
190
+ target="_blank"
191
+ >
192
+ <div
193
+ className="c2"
194
+ >
195
+ <div
196
+ className="c3 lazyload"
197
+ height="auto"
198
+ width="100%"
199
+ >
200
+ <img
201
+ alt="Happy man going to work"
202
+ className="c4 lazyload"
203
+ data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
204
+ data-sizes="auto"
205
+ data-src={null}
206
+ data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
207
+ height="auto"
208
+ src={null}
209
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
210
+ width="100%"
211
+ />
212
+ </div>
213
+ </div>
214
+ </a>
215
+ <div
216
+ className="c5"
217
+ >
218
+ Column view
219
+ </div>
220
+ <div
221
+ className="c6"
222
+ >
223
+ <a
224
+ className="c7"
225
+ color="red"
226
+ data-button-cta-copy="find out more"
227
+ href="/home"
228
+ rel={null}
229
+ target="_self"
230
+ type="button"
231
+ >
232
+ find out more
233
+ <span
234
+ className="c8"
235
+ type="button"
236
+ >
237
+ <svg
238
+ className="c9"
239
+ fill="#FFFFFF"
240
+ height={24}
241
+ viewBox="0 0 96 96"
242
+ width={24}
243
+ xmlns="http://www.w3.org/2000/svg"
244
+ >
245
+ <path
246
+ d="M90.871 50.776c-.016.016-.026.036-.043.052l-32 32C58.047 83.609 57.024 84 56 84s-2.047-.391-2.829-1.171a4 4 0 010-5.657L78.343 52H8a4 4 0 010-8h70.343L53.171 18.829a4 4 0 015.657-5.657l32 32c.016.016.027.036.043.052.167.172.321.357.455.557.069.104.118.216.176.325.065.121.138.236.191.364.057.137.09.279.13.42.032.109.074.214.097.327a4.017 4.017 0 010 1.568c-.023.113-.065.217-.097.327-.041.141-.074.283-.13.42-.053.128-.126.243-.191.364-.059.109-.107.221-.176.325a4.035 4.035 0 01-.455.555z"
247
+ />
248
+ </svg>
249
+ </span>
250
+ </a>
251
+ </div>
252
+ </div>
253
+ `;
254
+
3
255
  exports[`renders correctly 1`] = `
4
256
  .c3 {
5
257
  display: block;
package/src/components/Organisms/MarketingPreferencesDS/_DefaultCopy.js CHANGED
@@ -24,12 +24,13 @@ const defaultCopyBottom = (
24
24
  <Link
25
25
  type="standard"
26
26
  href="https://www.comicrelief.com/update-your-preferences"
27
+ target="blank"
27
28
  >
28
29
  preferences centre
29
30
  </Link>
30
31
  . Your details will be kept safe, see our
31
32
  {' '}
32
- <Link type="standard" href="https://www.comicrelief.com/privacy-policy">
33
+ <Link type="standard" href="https://www.comicrelief.com/privacy-policy" target="blank">
33
34
  privacy policy
34
35
  </Link>
35
36
  {' '}