@comicrelief/component-library 8.77.5 → 8.77.6

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 (7) hide show
  1. package/dist/index.cjs.js +625 -611
  2. package/dist/index.es.js +4547 -4531
  3. package/package.json +1 -1
  4. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +1008 -1035
  5. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +232 -196
  6. package/src/components/Molecules/CTA/shared/CTACard.js +15 -13
  7. package/src/components/Molecules/CTA/shared/CTACard.style.js +32 -15
package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED
@@ -1,7 +1,7 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`renders correctly with data prop 1`] = `
4
- .c12 {
4
+ .c14 {
5
5
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
6
6
  font-weight: 400;
7
7
  text-transform: inherit;
@@ -10,7 +10,7 @@ exports[`renders correctly with data prop 1`] = `
10
10
  line-height: 1.25rem;
11
11
  }
12
12
 
13
- .c12 span {
13
+ .c14 span {
14
14
  font-size: inherit;
15
15
  line-height: inherit;
16
16
  }
@@ -28,21 +28,21 @@ exports[`renders correctly with data prop 1`] = `
28
28
  text-decoration: none;
29
29
  }
30
30
 
31
- .c7 {
31
+ .c9 {
32
32
  display: block;
33
33
  width: 100%;
34
34
  height: 100%;
35
35
  position: relative;
36
36
  }
37
37
 
38
- .c8 {
38
+ .c10 {
39
39
  width: 100%;
40
40
  height: 100%;
41
41
  display: block;
42
42
  object-fit: cover;
43
43
  }
44
44
 
45
- .c17 {
45
+ .c19 {
46
46
  height: 4px;
47
47
  width: 100%;
48
48
  position: absolute;
@@ -53,7 +53,7 @@ exports[`renders correctly with data prop 1`] = `
53
53
  pointer-events: none;
54
54
  }
55
55
 
56
- .c22 {
56
+ .c24 {
57
57
  display: inline-flex;
58
58
  align-items: center;
59
59
  justify-content: center;
@@ -62,7 +62,7 @@ exports[`renders correctly with data prop 1`] = `
62
62
  transform-origin: center;
63
63
  }
64
64
 
65
- .c20 {
65
+ .c22 {
66
66
  width: 32px;
67
67
  height: 32px;
68
68
  border-radius: 50%;
@@ -74,20 +74,20 @@ exports[`renders correctly with data prop 1`] = `
74
74
  overflow: hidden;
75
75
  }
76
76
 
77
- .c18 {
77
+ .c20 {
78
78
  padding-left: 1rem;
79
79
  display: flex;
80
80
  align-items: center;
81
81
  justify-content: flex-end;
82
82
  }
83
83
 
84
- .c23 {
84
+ .c25 {
85
85
  display: inline-block;
86
86
  color: #FFFFFF;
87
87
  fill: currentColor;
88
88
  }
89
89
 
90
- .c6 {
90
+ .c8 {
91
91
  width: 100%;
92
92
  overflow: hidden;
93
93
  flex-shrink: 0;
@@ -95,14 +95,14 @@ exports[`renders correctly with data prop 1`] = `
95
95
  border-radius: 1rem 1rem 0 0;
96
96
  }
97
97
 
98
- .c6 img {
98
+ .c8 img {
99
99
  width: 100%;
100
100
  height: auto;
101
101
  object-fit: cover;
102
102
  display: block;
103
103
  }
104
104
 
105
- .c15 {
105
+ .c17 {
106
106
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
107
107
  font-weight: 400;
108
108
  text-transform: inherit;
@@ -117,6 +117,16 @@ exports[`renders correctly with data prop 1`] = `
117
117
  transition: color 0.35s;
118
118
  }
119
119
 
120
+ .c6 {
121
+ display: inherit;
122
+ flex-direction: inherit;
123
+ flex: inherit;
124
+ border-radius: inherit;
125
+ overflow: hidden;
126
+ transition: box-shadow 0.35s;
127
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
128
+ }
129
+
120
130
  .c4 {
121
131
  display: flex;
122
132
  position: relative;
@@ -125,20 +135,17 @@ exports[`renders correctly with data prop 1`] = `
125
135
  flex: 1 1 auto;
126
136
  background: transparent;
127
137
  border-radius: 1rem;
128
- transition: box-shadow 0.35s;
129
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
130
138
  text-decoration: none;
131
- overflow: hidden;
132
139
  cursor: pointer;
133
140
  box-sizing: border-box;
134
141
  }
135
142
 
136
- .c4:hover,
137
- .c4:focus {
143
+ .c4:hover .c5,
144
+ .c4:focus .c5 {
138
145
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
139
146
  }
140
147
 
141
- .c4 .c5 img {
148
+ .c4 .c7 img {
142
149
  transform: scale(1);
143
150
  transition: transform 0.35s cubic-bezier(0.65,-0.19,0.37,1.16),box-shadow 0.35s;
144
151
  }
@@ -154,7 +161,7 @@ exports[`renders correctly with data prop 1`] = `
154
161
  max-width: 100%;
155
162
  }
156
163
 
157
- .c9 {
164
+ .c11 {
158
165
  width: 100%;
159
166
  background: #FFFFFF;
160
167
  display: flex;
@@ -165,21 +172,21 @@ exports[`renders correctly with data prop 1`] = `
165
172
  border-radius: 0 0 1rem 1rem;
166
173
  }
167
174
 
168
- .c10 {
175
+ .c12 {
169
176
  flex: 1;
170
177
  display: flex;
171
178
  flex-direction: column;
172
179
  min-height: 0;
173
180
  }
174
181
 
175
- .c11 {
182
+ .c13 {
176
183
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
177
184
  font-size: 14px;
178
185
  color: #969598;
179
186
  margin-bottom: 14px;
180
187
  }
181
188
 
182
- .c13 {
189
+ .c15 {
183
190
  width: 100%;
184
191
  display: flex;
185
192
  flex-direction: row;
@@ -205,27 +212,27 @@ exports[`renders correctly with data prop 1`] = `
205
212
  }
206
213
 
207
214
  @media (min-width: 740px) {
208
- .c12 {
215
+ .c14 {
209
216
  font-size: 1rem;
210
217
  line-height: 1.25rem;
211
218
  }
212
219
  }
213
220
 
214
221
  @media (min-width: 1024px) {
215
- .c12 {
222
+ .c14 {
216
223
  font-size: 1.125rem;
217
224
  line-height: 1.375rem;
218
225
  }
219
226
  }
220
227
 
221
228
  @media (min-width: 1024px) {
222
- .c20 {
229
+ .c22 {
223
230
  background: #222222;
224
231
  }
225
232
  }
226
233
 
227
234
  @media (min-width: 740px) {
228
- .c6 {
235
+ .c8 {
229
236
  width: calc(100% / 3);
230
237
  min-width: 292px;
231
238
  max-width: 309px;
@@ -237,42 +244,42 @@ exports[`renders correctly with data prop 1`] = `
237
244
  }
238
245
 
239
246
  @media (min-width: 1024px) {
240
- .c6 {
247
+ .c8 {
241
248
  min-width: 355px;
242
249
  max-width: 362px;
243
250
  }
244
251
  }
245
252
 
246
253
  @media (min-width: 1440px) {
247
- .c6 {
254
+ .c8 {
248
255
  min-width: 363px;
249
256
  max-width: 363px;
250
257
  }
251
258
  }
252
259
 
253
260
  @media (min-width: 740px) {
254
- .c6 img {
261
+ .c8 img {
255
262
  height: 100%;
256
263
  object-fit: cover;
257
264
  }
258
265
  }
259
266
 
260
267
  @media (min-width: 740px) {
261
- .c15 {
268
+ .c17 {
262
269
  font-size: 1rem;
263
270
  line-height: 1.25rem;
264
271
  }
265
272
  }
266
273
 
267
274
  @media (min-width: 1024px) {
268
- .c15 {
275
+ .c17 {
269
276
  font-size: 1.125rem;
270
277
  line-height: 1.375rem;
271
278
  }
272
279
  }
273
280
 
274
281
  @media (min-width:1024px) {
275
- .c15 {
282
+ .c17 {
276
283
  color: #222222;
277
284
  }
278
285
  }
@@ -292,56 +299,63 @@ exports[`renders correctly with data prop 1`] = `
292
299
  }
293
300
 
294
301
  @media (min-width: 740px) {
295
- .c4:hover .c14,
296
- .c4:focus .c14 {
302
+ .c4:hover .c16,
303
+ .c4:focus .c16 {
297
304
  color: #E52630;
298
305
  }
299
306
 
300
- .c4:hover .c16,
301
- .c4:focus .c16 {
307
+ .c4:hover .c18,
308
+ .c4:focus .c18 {
302
309
  opacity: 1;
303
310
  }
304
311
 
305
- .c4:hover .c19 .c21,
306
- .c4:focus .c19 .c21 {
312
+ .c4:hover .c21 .c23,
313
+ .c4:focus .c21 .c23 {
307
314
  transform: scale(1.2);
308
315
  }
309
316
  }
310
317
 
311
318
  @media (min-width: 1024px) {
312
319
  .c4 {
313
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
320
+ overflow: visible;
321
+ }
322
+
323
+ .c4 >div {
324
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
314
325
  transform-origin: center;
315
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
316
326
  }
317
327
 
318
- .c4:hover,
319
- .c4:focus {
328
+ .c4:hover >div,
329
+ .c4:focus >div {
320
330
  transform: translateY(-10px);
321
331
  }
322
332
 
323
- .c4:hover .c5 img,
324
- .c4:focus .c5 img {
325
- transform: scale(1.06);
333
+ .c4 >.c5 {
334
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
326
335
  }
327
336
 
328
- .c4:hover .c14,
329
- .c4:focus .c14 {
330
- color: #E52630;
337
+ .c4:hover .c7 img,
338
+ .c4:focus .c7 img {
339
+ transform: scale(1.06);
331
340
  }
332
341
 
333
342
  .c4:hover .c16,
334
343
  .c4:focus .c16 {
344
+ color: #E52630;
345
+ }
346
+
347
+ .c4:hover .c18,
348
+ .c4:focus .c18 {
335
349
  opacity: 1;
336
350
  }
337
351
 
338
- .c4:hover .c19,
339
- .c4:focus .c19 {
352
+ .c4:hover .c21,
353
+ .c4:focus .c21 {
340
354
  background: #E52630;
341
355
  }
342
356
 
343
- .c4:hover .c19 .c21,
344
- .c4:focus .c19 .c21 {
357
+ .c4:hover .c21 .c23,
358
+ .c4:focus .c21 .c23 {
345
359
  transform: scale(1.2);
346
360
  }
347
361
  }
@@ -363,7 +377,7 @@ exports[`renders correctly with data prop 1`] = `
363
377
  }
364
378
 
365
379
  @media (min-width: 740px) {
366
- .c9 {
380
+ .c11 {
367
381
  width: calc(200% / 3);
368
382
  min-width: 384px;
369
383
  max-width: 650px;
@@ -373,14 +387,14 @@ exports[`renders correctly with data prop 1`] = `
373
387
  }
374
388
 
375
389
  @media (min-width: 1024px) {
376
- .c9 {
390
+ .c11 {
377
391
  min-width: 541px;
378
392
  max-width: 790px;
379
393
  }
380
394
  }
381
395
 
382
396
  @media (min-width: 1440px) {
383
- .c9 {
397
+ .c11 {
384
398
  width: 789px;
385
399
  }
386
400
  }
@@ -419,79 +433,83 @@ exports[`renders correctly with data prop 1`] = `
419
433
  className="c5 c6"
420
434
  >
421
435
  <div
422
- className="c7 lazyload"
423
- data-testid="PictureWrapper"
424
- >
425
- <img
426
- alt="Example image"
427
- className="c8 lazyload"
428
- data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
429
- data-sizes="auto"
430
- data-src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
431
- data-srcset="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w"
432
- data-testid="Picture"
433
- src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
434
- srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
435
- />
436
- </div>
437
- </div>
438
- <div
439
- className="c9"
440
- >
441
- <div
442
- className="c10"
436
+ className="c7 c8"
443
437
  >
444
438
  <div
445
- className="c11"
439
+ className="c9 lazyload"
440
+ data-testid="PictureWrapper"
446
441
  >
447
- Example Label
442
+ <img
443
+ alt="Example image"
444
+ className="c10 lazyload"
445
+ data-lowsrc="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z"
446
+ data-sizes="auto"
447
+ data-src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
448
+ data-srcset="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&q=80&fm=webp 678w"
449
+ data-testid="Picture"
450
+ src="https://images.ctfassets.net/zsfivwzfgl3t/4VsIykPLHDNkNCT9djGrX/c8f1e4cb5c6bda5a7b77f18501e9304d/challenge-1.jpg?w=678&h=501&fl=progressive&q=80&fm=jpg"
451
+ srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
452
+ />
448
453
  </div>
449
- <p
450
- className="c12"
451
- >
452
- <strong>
453
- Single Card
454
- </strong>
455
- content here
456
- </p>
457
454
  </div>
458
455
  <div
459
- className="c13"
456
+ className="c11"
460
457
  >
461
- <span
462
- className="c14 c15"
458
+ <div
459
+ className="c12"
463
460
  >
464
- Learn more
465
- <img
466
- alt=""
467
- aria-hidden="true"
468
- className="c16 c17"
469
- src="mock.asset"
470
- />
471
- </span>
461
+ <div
462
+ className="c13"
463
+ >
464
+ Example Label
465
+ </div>
466
+ <p
467
+ className="c14"
468
+ >
469
+ <strong>
470
+ Single Card
471
+ </strong>
472
+ content here
473
+ </p>
474
+ </div>
472
475
  <div
473
- className="c18"
476
+ className="c15"
474
477
  >
478
+ <span
479
+ className="c16 c17"
480
+ >
481
+ Learn more
482
+ <img
483
+ alt=""
484
+ aria-hidden="true"
485
+ className="c18 c19"
486
+ src="mock.asset"
487
+ />
488
+ </span>
475
489
  <div
476
- className="c19 c20"
490
+ className="c20"
477
491
  >
478
- <span
492
+ <div
479
493
  className="c21 c22"
480
494
  >
481
- <svg
482
- className="c23"
483
- fill="none"
484
- height="15"
485
- viewBox="0 0 15 15"
486
- width="15"
487
- xmlns="http://www.w3.org/2000/svg"
495
+ <span
496
+ className="c23 c24"
488
497
  >
489
- <path
490
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
491
- fill="currentColor"
492
- />
493
- </svg>
494
- </span>
498
+ <svg
499
+ className="c25"
500
+ fill="none"
501
+ height="15"
502
+ viewBox="0 0 15 15"
503
+ width="15"
504
+ xmlns="http://www.w3.org/2000/svg"
505
+ >
506
+ <path
507
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
508
+ fill="currentColor"
509
+ />
510
+ </svg>
511
+ </span>
512
+ </div>
495
513
  </div>
496
514
  </div>
497
515
  </div>
@@ -503,7 +521,7 @@ exports[`renders correctly with data prop 1`] = `
503
521
  `;
504
522
 
505
523
  exports[`renders correctly without image 1`] = `
506
- .c8 {
524
+ .c10 {
507
525
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
508
526
  font-weight: 400;
509
527
  text-transform: inherit;
@@ -512,7 +530,7 @@ exports[`renders correctly without image 1`] = `
512
530
  line-height: 1.25rem;
513
531
  }
514
532
 
515
- .c8 span {
533
+ .c10 span {
516
534
  font-size: inherit;
517
535
  line-height: inherit;
518
536
  }
@@ -530,7 +548,7 @@ exports[`renders correctly without image 1`] = `
530
548
  text-decoration: none;
531
549
  }
532
550
 
533
- .c13 {
551
+ .c15 {
534
552
  height: 4px;
535
553
  width: 100%;
536
554
  position: absolute;
@@ -541,7 +559,7 @@ exports[`renders correctly without image 1`] = `
541
559
  pointer-events: none;
542
560
  }
543
561
 
544
- .c18 {
562
+ .c20 {
545
563
  display: inline-flex;
546
564
  align-items: center;
547
565
  justify-content: center;
@@ -550,7 +568,7 @@ exports[`renders correctly without image 1`] = `
550
568
  transform-origin: center;
551
569
  }
552
570
 
553
- .c16 {
571
+ .c18 {
554
572
  width: 32px;
555
573
  height: 32px;
556
574
  border-radius: 50%;
@@ -562,20 +580,20 @@ exports[`renders correctly without image 1`] = `
562
580
  overflow: hidden;
563
581
  }
564
582
 
565
- .c14 {
583
+ .c16 {
566
584
  padding-left: 1rem;
567
585
  display: flex;
568
586
  align-items: center;
569
587
  justify-content: flex-end;
570
588
  }
571
589
 
572
- .c19 {
590
+ .c21 {
573
591
  display: inline-block;
574
592
  color: #FFFFFF;
575
593
  fill: currentColor;
576
594
  }
577
595
 
578
- .c11 {
596
+ .c13 {
579
597
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
580
598
  font-weight: 400;
581
599
  text-transform: inherit;
@@ -590,6 +608,16 @@ exports[`renders correctly without image 1`] = `
590
608
  transition: color 0.35s;
591
609
  }
592
610
 
611
+ .c6 {
612
+ display: inherit;
613
+ flex-direction: inherit;
614
+ flex: inherit;
615
+ border-radius: inherit;
616
+ overflow: hidden;
617
+ transition: box-shadow 0.35s;
618
+ box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
619
+ }
620
+
593
621
  .c4 {
594
622
  display: flex;
595
623
  position: relative;
@@ -598,16 +626,13 @@ exports[`renders correctly without image 1`] = `
598
626
  flex: 1 1 auto;
599
627
  background: transparent;
600
628
  border-radius: 1rem;
601
- transition: box-shadow 0.35s;
602
- box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
603
629
  text-decoration: none;
604
- overflow: hidden;
605
630
  cursor: pointer;
606
631
  box-sizing: border-box;
607
632
  }
608
633
 
609
- .c4:hover,
610
- .c4:focus {
634
+ .c4:hover .c5,
635
+ .c4:focus .c5 {
611
636
  box-shadow: rgba(0,0,0,0.25) 0px 0px 1rem;
612
637
  }
613
638
 
@@ -622,7 +647,7 @@ exports[`renders correctly without image 1`] = `
622
647
  max-width: 100%;
623
648
  }
624
649
 
625
- .c5 {
650
+ .c7 {
626
651
  width: 100%;
627
652
  background: #FFFFFF;
628
653
  display: flex;
@@ -633,21 +658,21 @@ exports[`renders correctly without image 1`] = `
633
658
  border-radius: 0 0 1rem 1rem;
634
659
  }
635
660
 
636
- .c6 {
661
+ .c8 {
637
662
  flex: 1;
638
663
  display: flex;
639
664
  flex-direction: column;
640
665
  min-height: 0;
641
666
  }
642
667
 
643
- .c7 {
668
+ .c9 {
644
669
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
645
670
  font-size: 14px;
646
671
  color: #969598;
647
672
  margin-bottom: 14px;
648
673
  }
649
674
 
650
- .c9 {
675
+ .c11 {
651
676
  width: 100%;
652
677
  display: flex;
653
678
  flex-direction: row;
@@ -673,41 +698,41 @@ exports[`renders correctly without image 1`] = `
673
698
  }
674
699
 
675
700
  @media (min-width: 740px) {
676
- .c8 {
701
+ .c10 {
677
702
  font-size: 1rem;
678
703
  line-height: 1.25rem;
679
704
  }
680
705
  }
681
706
 
682
707
  @media (min-width: 1024px) {
683
- .c8 {
708
+ .c10 {
684
709
  font-size: 1.125rem;
685
710
  line-height: 1.375rem;
686
711
  }
687
712
  }
688
713
 
689
714
  @media (min-width: 1024px) {
690
- .c16 {
715
+ .c18 {
691
716
  background: #222222;
692
717
  }
693
718
  }
694
719
 
695
720
  @media (min-width: 740px) {
696
- .c11 {
721
+ .c13 {
697
722
  font-size: 1rem;
698
723
  line-height: 1.25rem;
699
724
  }
700
725
  }
701
726
 
702
727
  @media (min-width: 1024px) {
703
- .c11 {
728
+ .c13 {
704
729
  font-size: 1.125rem;
705
730
  line-height: 1.375rem;
706
731
  }
707
732
  }
708
733
 
709
734
  @media (min-width:1024px) {
710
- .c11 {
735
+ .c13 {
711
736
  color: #222222;
712
737
  }
713
738
  }
@@ -727,51 +752,58 @@ exports[`renders correctly without image 1`] = `
727
752
  }
728
753
 
729
754
  @media (min-width: 740px) {
730
- .c4:hover .c10,
731
- .c4:focus .c10 {
755
+ .c4:hover .c12,
756
+ .c4:focus .c12 {
732
757
  color: #E52630;
733
758
  }
734
759
 
735
- .c4:hover .c12,
736
- .c4:focus .c12 {
760
+ .c4:hover .c14,
761
+ .c4:focus .c14 {
737
762
  opacity: 1;
738
763
  }
739
764
 
740
- .c4:hover .c15 .c17,
741
- .c4:focus .c15 .c17 {
765
+ .c4:hover .c17 .c19,
766
+ .c4:focus .c17 .c19 {
742
767
  transform: scale(1.2);
743
768
  }
744
769
  }
745
770
 
746
771
  @media (min-width: 1024px) {
747
772
  .c4 {
748
- transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
773
+ overflow: visible;
774
+ }
775
+
776
+ .c4 >div {
777
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
749
778
  transform-origin: center;
750
- transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
751
779
  }
752
780
 
753
- .c4:hover,
754
- .c4:focus {
781
+ .c4:hover >div,
782
+ .c4:focus >div {
755
783
  transform: translateY(-10px);
756
784
  }
757
785
 
758
- .c4:hover .c10,
759
- .c4:focus .c10 {
760
- color: #E52630;
786
+ .c4 >.c5 {
787
+ transition: transform 0.35s cubic-bezier(0.68,-1.15,0.265,2.35),box-shadow 0.35s;
761
788
  }
762
789
 
763
790
  .c4:hover .c12,
764
791
  .c4:focus .c12 {
792
+ color: #E52630;
793
+ }
794
+
795
+ .c4:hover .c14,
796
+ .c4:focus .c14 {
765
797
  opacity: 1;
766
798
  }
767
799
 
768
- .c4:hover .c15,
769
- .c4:focus .c15 {
800
+ .c4:hover .c17,
801
+ .c4:focus .c17 {
770
802
  background: #E52630;
771
803
  }
772
804
 
773
- .c4:hover .c15 .c17,
774
- .c4:focus .c15 .c17 {
805
+ .c4:hover .c17 .c19,
806
+ .c4:focus .c17 .c19 {
775
807
  transform: scale(1.2);
776
808
  }
777
809
  }
@@ -793,7 +825,7 @@ exports[`renders correctly without image 1`] = `
793
825
  }
794
826
 
795
827
  @media (min-width: 740px) {
796
- .c5 {
828
+ .c7 {
797
829
  width: calc(200% / 3);
798
830
  min-width: 384px;
799
831
  max-width: 650px;
@@ -803,14 +835,14 @@ exports[`renders correctly without image 1`] = `
803
835
  }
804
836
 
805
837
  @media (min-width: 1024px) {
806
- .c5 {
838
+ .c7 {
807
839
  min-width: 541px;
808
840
  max-width: 790px;
809
841
  }
810
842
  }
811
843
 
812
844
  @media (min-width: 1440px) {
813
- .c5 {
845
+ .c7 {
814
846
  width: 789px;
815
847
  }
816
848
  }
@@ -846,59 +878,63 @@ exports[`renders correctly without image 1`] = `
846
878
  type="standard"
847
879
  >
848
880
  <div
849
- className="c5"
881
+ className="c5 c6"
850
882
  >
851
883
  <div
852
- className="c6"
884
+ className="c7"
853
885
  >
854
886
  <div
855
- className="c7"
856
- >
857
- Example Label
858
- </div>
859
- <p
860
887
  className="c8"
861
888
  >
862
- Card without image
863
- </p>
864
- </div>
865
- <div
866
- className="c9"
867
- >
868
- <span
869
- className="c10 c11"
870
- >
871
- View card
872
- <img
873
- alt=""
874
- aria-hidden="true"
875
- className="c12 c13"
876
- src="mock.asset"
877
- />
878
- </span>
889
+ <div
890
+ className="c9"
891
+ >
892
+ Example Label
893
+ </div>
894
+ <p
895
+ className="c10"
896
+ >
897
+ Card without image
898
+ </p>
899
+ </div>
879
900
  <div
880
- className="c14"
901
+ className="c11"
881
902
  >
903
+ <span
904
+ className="c12 c13"
905
+ >
906
+ View card
907
+ <img
908
+ alt=""
909
+ aria-hidden="true"
910
+ className="c14 c15"
911
+ src="mock.asset"
912
+ />
913
+ </span>
882
914
  <div
883
- className="c15 c16"
915
+ className="c16"
884
916
  >
885
- <span
917
+ <div
886
918
  className="c17 c18"
887
919
  >
888
- <svg
889
- className="c19"
890
- fill="none"
891
- height="15"
892
- viewBox="0 0 15 15"
893
- width="15"
894
- xmlns="http://www.w3.org/2000/svg"
920
+ <span
921
+ className="c19 c20"
895
922
  >
896
- <path
897
- d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
898
- fill="currentColor"
899
- />
900
- </svg>
901
- </span>
923
+ <svg
924
+ className="c21"
925
+ fill="none"
926
+ height="15"
927
+ viewBox="0 0 15 15"
928
+ width="15"
929
+ xmlns="http://www.w3.org/2000/svg"
930
+ >
931
+ <path
932
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
933
+ fill="currentColor"
934
+ />
935
+ </svg>
936
+ </span>
937
+ </div>
902
938
  </div>
903
939
  </div>
904
940
  </div>