@comicrelief/component-library 8.3.1 → 8.5.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 +259 -7
  6. package/dist/index.js +14 -0
  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 +259 -7
  13. package/src/index.js +2 -0
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,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`renders correctly 1`] = `
3
+ exports[`renders Column view correctly 1`] = `
4
4
  .c3 {
5
5
  display: block;
6
6
  width: 100%;
@@ -61,6 +61,10 @@ exports[`renders correctly 1`] = `
61
61
  color: #FFFFFF;
62
62
  }
63
63
 
64
+ .c9 {
65
+ fill: #FFFFFF;
66
+ }
67
+
64
68
  .c0 {
65
69
  display: -webkit-box;
66
70
  display: -webkit-flex;
@@ -115,10 +119,258 @@ exports[`renders correctly 1`] = `
115
119
  z-index: 2;
116
120
  }
117
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:1024px) {
149
+ .c9 {
150
+ fill: #FFFFFF;
151
+ }
152
+ }
153
+
154
+ @media (min-width:1440px) {
155
+ .c0 {
156
+ -webkit-flex-direction: column;
157
+ -ms-flex-direction: column;
158
+ flex-direction: column;
159
+ }
160
+ }
161
+
162
+ @media (min-width:1440px) {
163
+ .c1 {
164
+ width: 100%;
165
+ }
166
+ }
167
+
168
+ @media (min-width:1440px) {
169
+ .c5 {
170
+ height: 100%;
171
+ }
172
+ }
173
+
174
+ @media (min-width:1440px) {
175
+ .c5 {
176
+ margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
177
+ width: 100%;
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
+
255
+ exports[`renders correctly 1`] = `
256
+ .c3 {
257
+ display: block;
258
+ width: 100%;
259
+ height: auto;
260
+ position: relative;
261
+ }
262
+
263
+ .c4 {
264
+ width: 100%;
265
+ height: auto;
266
+ display: block;
267
+ object-fit: cover;
268
+ }
269
+
270
+ .c8 {
271
+ display: -webkit-inline-box;
272
+ display: -webkit-inline-flex;
273
+ display: -ms-inline-flexbox;
274
+ display: inline-flex;
275
+ margin-left: 1rem;
276
+ -webkit-align-self: center;
277
+ -ms-flex-item-align: center;
278
+ align-self: center;
279
+ right: 1.5rem;
280
+ }
281
+
282
+ .c7 {
283
+ display: -webkit-inline-box;
284
+ display: -webkit-inline-flex;
285
+ display: -ms-inline-flexbox;
286
+ display: inline-flex;
287
+ position: relative;
288
+ padding: 0.5rem 1.25rem;
289
+ -webkit-text-decoration: none;
290
+ text-decoration: none;
291
+ font-weight: 700;
292
+ font-size: 1rem;
293
+ border-radius: 2rem;
294
+ -webkit-transition: all 0.3s;
295
+ transition: all 0.3s;
296
+ height: 3.125rem;
297
+ width: 100%;
298
+ -webkit-box-pack: center;
299
+ -webkit-justify-content: center;
300
+ -ms-flex-pack: center;
301
+ justify-content: center;
302
+ -webkit-align-items: center;
303
+ -webkit-box-align: center;
304
+ -ms-flex-align: center;
305
+ align-items: center;
306
+ cursor: pointer;
307
+ background-color: #E52630;
308
+ color: #FFFFFF;
309
+ }
310
+
311
+ .c7:hover {
312
+ background-color: #890B11;
313
+ color: #FFFFFF;
314
+ }
315
+
118
316
  .c9 {
119
317
  fill: #FFFFFF;
120
318
  }
121
319
 
320
+ .c0 {
321
+ display: -webkit-box;
322
+ display: -webkit-flex;
323
+ display: -ms-flexbox;
324
+ display: flex;
325
+ position: relative;
326
+ -webkit-flex-direction: column;
327
+ -ms-flex-direction: column;
328
+ flex-direction: column;
329
+ height: 100%;
330
+ width: 100%;
331
+ background: inherit;
332
+ }
333
+
334
+ .c2 {
335
+ height: auto;
336
+ margin: 0 0 0 1.5rem;
337
+ }
338
+
339
+ .c2 img {
340
+ border-radius: 1rem;
341
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
342
+ }
343
+
344
+ .c1 {
345
+ width: 100%;
346
+ }
347
+
348
+ .c5 {
349
+ padding: 2rem;
350
+ padding-bottom: 4rem;
351
+ display: -webkit-box;
352
+ display: -webkit-flex;
353
+ display: -ms-flexbox;
354
+ display: flex;
355
+ -webkit-flex-direction: column;
356
+ -ms-flex-direction: column;
357
+ flex-direction: column;
358
+ border-radius: 1rem;
359
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
360
+ background: #FFFFFF;
361
+ margin: 0 1.5rem 0 0;
362
+ z-index: 1;
363
+ margin-top: calc(-2 * 1.5rem);
364
+ min-height: calc(5 * 2rem);
365
+ }
366
+
367
+ .c6 {
368
+ position: absolute;
369
+ right: 1.5rem;
370
+ bottom: -1.5rem;
371
+ z-index: 2;
372
+ }
373
+
122
374
  @media (min-width:740px) {
123
375
  .c8 {
124
376
  width: auto;
@@ -145,6 +397,12 @@ exports[`renders correctly 1`] = `
145
397
  }
146
398
  }
147
399
 
400
+ @media (min-width:1024px) {
401
+ .c9 {
402
+ fill: #FFFFFF;
403
+ }
404
+ }
405
+
148
406
  @media (min-width:740px) {
149
407
  .c0 {
150
408
  -webkit-flex-direction: row;
@@ -205,12 +463,6 @@ exports[`renders correctly 1`] = `
205
463
  }
206
464
  }
207
465
 
208
- @media (min-width:1024px) {
209
- .c9 {
210
- fill: #FFFFFF;
211
- }
212
- }
213
-
214
466
  <div
215
467
  className="c0"
216
468
  >
package/dist/index.js CHANGED
@@ -118,6 +118,12 @@ Object.defineProperty(exports, "ErrorText", {
118
118
  return _ErrorText.default;
119
119
  }
120
120
  });
121
+ Object.defineProperty(exports, "External", {
122
+ enumerable: true,
123
+ get: function () {
124
+ return _External.default;
125
+ }
126
+ });
121
127
  Object.defineProperty(exports, "Footer", {
122
128
  enumerable: true,
123
129
  get: function () {
@@ -160,6 +166,12 @@ Object.defineProperty(exports, "Input", {
160
166
  return _Input.default;
161
167
  }
162
168
  });
169
+ Object.defineProperty(exports, "Internal", {
170
+ enumerable: true,
171
+ get: function () {
172
+ return _Internal.default;
173
+ }
174
+ });
163
175
  Object.defineProperty(exports, "Label", {
164
176
  enumerable: true,
165
177
  get: function () {
@@ -427,6 +439,8 @@ var _ErrorText = _interopRequireDefault(require("./components/Atoms/ErrorText/Er
427
439
  var _Label = _interopRequireDefault(require("./components/Atoms/Label/Label"));
428
440
  var _ButtonWithStates = _interopRequireDefault(require("./components/Atoms/ButtonWithStates/ButtonWithStates"));
429
441
  var _Confetti = _interopRequireDefault(require("./components/Atoms/Confetti/Confetti"));
442
+ var _External = _interopRequireDefault(require("./components/Atoms/Icons/External"));
443
+ var _Internal = _interopRequireDefault(require("./components/Atoms/Icons/Internal"));
430
444
  var _HeroBanner = _interopRequireDefault(require("./components/Molecules/HeroBanner/HeroBanner"));
431
445
  var _InfoBanner = _interopRequireDefault(require("./components/Molecules/InfoBanner/InfoBanner"));
432
446
  var _SingleMessage = _interopRequireDefault(require("./components/Molecules/SingleMessage/SingleMessage"));
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.1",
4
+ "version": "8.5.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,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`renders correctly 1`] = `
3
+ exports[`renders Column view correctly 1`] = `
4
4
  .c3 {
5
5
  display: block;
6
6
  width: 100%;
@@ -61,6 +61,10 @@ exports[`renders correctly 1`] = `
61
61
  color: #FFFFFF;
62
62
  }
63
63
 
64
+ .c9 {
65
+ fill: #FFFFFF;
66
+ }
67
+
64
68
  .c0 {
65
69
  display: -webkit-box;
66
70
  display: -webkit-flex;
@@ -115,10 +119,258 @@ exports[`renders correctly 1`] = `
115
119
  z-index: 2;
116
120
  }
117
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:1024px) {
149
+ .c9 {
150
+ fill: #FFFFFF;
151
+ }
152
+ }
153
+
154
+ @media (min-width:1440px) {
155
+ .c0 {
156
+ -webkit-flex-direction: column;
157
+ -ms-flex-direction: column;
158
+ flex-direction: column;
159
+ }
160
+ }
161
+
162
+ @media (min-width:1440px) {
163
+ .c1 {
164
+ width: 100%;
165
+ }
166
+ }
167
+
168
+ @media (min-width:1440px) {
169
+ .c5 {
170
+ height: 100%;
171
+ }
172
+ }
173
+
174
+ @media (min-width:1440px) {
175
+ .c5 {
176
+ margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
177
+ width: 100%;
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
+
255
+ exports[`renders correctly 1`] = `
256
+ .c3 {
257
+ display: block;
258
+ width: 100%;
259
+ height: auto;
260
+ position: relative;
261
+ }
262
+
263
+ .c4 {
264
+ width: 100%;
265
+ height: auto;
266
+ display: block;
267
+ object-fit: cover;
268
+ }
269
+
270
+ .c8 {
271
+ display: -webkit-inline-box;
272
+ display: -webkit-inline-flex;
273
+ display: -ms-inline-flexbox;
274
+ display: inline-flex;
275
+ margin-left: 1rem;
276
+ -webkit-align-self: center;
277
+ -ms-flex-item-align: center;
278
+ align-self: center;
279
+ right: 1.5rem;
280
+ }
281
+
282
+ .c7 {
283
+ display: -webkit-inline-box;
284
+ display: -webkit-inline-flex;
285
+ display: -ms-inline-flexbox;
286
+ display: inline-flex;
287
+ position: relative;
288
+ padding: 0.5rem 1.25rem;
289
+ -webkit-text-decoration: none;
290
+ text-decoration: none;
291
+ font-weight: 700;
292
+ font-size: 1rem;
293
+ border-radius: 2rem;
294
+ -webkit-transition: all 0.3s;
295
+ transition: all 0.3s;
296
+ height: 3.125rem;
297
+ width: 100%;
298
+ -webkit-box-pack: center;
299
+ -webkit-justify-content: center;
300
+ -ms-flex-pack: center;
301
+ justify-content: center;
302
+ -webkit-align-items: center;
303
+ -webkit-box-align: center;
304
+ -ms-flex-align: center;
305
+ align-items: center;
306
+ cursor: pointer;
307
+ background-color: #E52630;
308
+ color: #FFFFFF;
309
+ }
310
+
311
+ .c7:hover {
312
+ background-color: #890B11;
313
+ color: #FFFFFF;
314
+ }
315
+
118
316
  .c9 {
119
317
  fill: #FFFFFF;
120
318
  }
121
319
 
320
+ .c0 {
321
+ display: -webkit-box;
322
+ display: -webkit-flex;
323
+ display: -ms-flexbox;
324
+ display: flex;
325
+ position: relative;
326
+ -webkit-flex-direction: column;
327
+ -ms-flex-direction: column;
328
+ flex-direction: column;
329
+ height: 100%;
330
+ width: 100%;
331
+ background: inherit;
332
+ }
333
+
334
+ .c2 {
335
+ height: auto;
336
+ margin: 0 0 0 1.5rem;
337
+ }
338
+
339
+ .c2 img {
340
+ border-radius: 1rem;
341
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
342
+ }
343
+
344
+ .c1 {
345
+ width: 100%;
346
+ }
347
+
348
+ .c5 {
349
+ padding: 2rem;
350
+ padding-bottom: 4rem;
351
+ display: -webkit-box;
352
+ display: -webkit-flex;
353
+ display: -ms-flexbox;
354
+ display: flex;
355
+ -webkit-flex-direction: column;
356
+ -ms-flex-direction: column;
357
+ flex-direction: column;
358
+ border-radius: 1rem;
359
+ box-shadow: 0 0 1rem rgba(0,0,0,0.15);
360
+ background: #FFFFFF;
361
+ margin: 0 1.5rem 0 0;
362
+ z-index: 1;
363
+ margin-top: calc(-2 * 1.5rem);
364
+ min-height: calc(5 * 2rem);
365
+ }
366
+
367
+ .c6 {
368
+ position: absolute;
369
+ right: 1.5rem;
370
+ bottom: -1.5rem;
371
+ z-index: 2;
372
+ }
373
+
122
374
  @media (min-width:740px) {
123
375
  .c8 {
124
376
  width: auto;
@@ -145,6 +397,12 @@ exports[`renders correctly 1`] = `
145
397
  }
146
398
  }
147
399
 
400
+ @media (min-width:1024px) {
401
+ .c9 {
402
+ fill: #FFFFFF;
403
+ }
404
+ }
405
+
148
406
  @media (min-width:740px) {
149
407
  .c0 {
150
408
  -webkit-flex-direction: row;
@@ -205,12 +463,6 @@ exports[`renders correctly 1`] = `
205
463
  }
206
464
  }
207
465
 
208
- @media (min-width:1024px) {
209
- .c9 {
210
- fill: #FFFFFF;
211
- }
212
- }
213
-
214
466
  <div
215
467
  className="c0"
216
468
  >
package/src/index.js CHANGED
@@ -30,6 +30,8 @@ export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
30
30
  export { default as Label } from './components/Atoms/Label/Label';
31
31
  export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
32
32
  export { default as Confetti } from './components/Atoms/Confetti/Confetti';
33
+ export { default as External } from './components/Atoms/Icons/External';
34
+ export { default as Internal } from './components/Atoms/Icons/Internal';
33
35
 
34
36
  /* Molecules */
35
37
  export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';