@comicrelief/component-library 8.51.0 → 8.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +35 -2
- package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +46 -5
- package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +10 -5
- package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +5 -146
- package/dist/components/Molecules/CTA/CTAMultiCard/example_data.json +3 -2
- package/dist/components/Molecules/CTA/shared/CTACard.style.js +2 -58
- package/package.json +4 -3
- package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +44 -8
- package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +46 -5
- package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +35 -16
- package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +5 -146
- package/src/components/Molecules/CTA/CTAMultiCard/example_data.json +3 -2
- package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.js +1 -1
- package/src/components/Molecules/CTA/shared/CTACard.js +1 -1
- package/src/components/Molecules/CTA/shared/CTACard.style.js +1 -63
|
@@ -7,8 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _snakeCase2 = _interopRequireDefault(require("lodash/snakeCase"));
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _reactResponsive = require("react-responsive");
|
|
11
|
+
var _reactSplide = require("@splidejs/react-splide");
|
|
12
|
+
require("@splidejs/react-splide/dist/css/splide.min.css");
|
|
10
13
|
var _CTACard = _interopRequireDefault(require("../shared/CTACard"));
|
|
11
14
|
var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
|
|
15
|
+
var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
|
|
16
|
+
// Line below imports the built CSS directly because Jest needs it
|
|
17
|
+
|
|
12
18
|
/**
|
|
13
19
|
* CTAMultiCard Component
|
|
14
20
|
*
|
|
@@ -18,6 +24,9 @@ var _CTAMultiCard = _interopRequireDefault(require("./CTAMultiCard.style"));
|
|
|
18
24
|
* Now CTAMultiCard handles the mapping internally, accepting
|
|
19
25
|
* a data object and rendering all cards.
|
|
20
26
|
*
|
|
27
|
+
* Where a carousel is requested (carouselOfCards is true), the component
|
|
28
|
+
* will use the Splide library to create it.
|
|
29
|
+
*
|
|
21
30
|
* Note: The component expects pre-rendered content in the `body`
|
|
22
31
|
* field of each card. The frontend should handle rich text rendering
|
|
23
32
|
* before passing data to this component.
|
|
@@ -35,6 +44,10 @@ const CTAMultiCard = _ref => {
|
|
|
35
44
|
paddingAbove,
|
|
36
45
|
paddingBelow
|
|
37
46
|
} = data;
|
|
47
|
+
const isBelowL = (0, _reactResponsive.useMediaQuery)({
|
|
48
|
+
maxWidth: _allBreakpoints.breakpointValues.L - 1
|
|
49
|
+
});
|
|
50
|
+
const useSplideCarousel = Boolean(carouselOfCards && isBelowL);
|
|
38
51
|
if (!cards || !Array.isArray(cards) || cards.length === 0) {
|
|
39
52
|
return null;
|
|
40
53
|
}
|
|
@@ -47,10 +60,30 @@ const CTAMultiCard = _ref => {
|
|
|
47
60
|
backgroundColor: cardsBackground,
|
|
48
61
|
columns: columns,
|
|
49
62
|
isCarousel: carouselOfCards,
|
|
63
|
+
useSplideCarousel: useSplideCarousel,
|
|
50
64
|
paddingAbove: paddingAbove,
|
|
51
65
|
paddingBelow: paddingBelow
|
|
52
|
-
},
|
|
53
|
-
|
|
66
|
+
}, useSplideCarousel ? /*#__PURE__*/_react.default.createElement(_reactSplide.Splide, {
|
|
67
|
+
options: {
|
|
68
|
+
arrows: false,
|
|
69
|
+
pagination: false,
|
|
70
|
+
drag: true,
|
|
71
|
+
dragMinThreshold: 10,
|
|
72
|
+
gap: '1rem',
|
|
73
|
+
fixedWidth: '309px',
|
|
74
|
+
padding: {
|
|
75
|
+
left: '0px',
|
|
76
|
+
right: '0px'
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}, cards.map((card, index) => /*#__PURE__*/_react.default.createElement(_reactSplide.SplideSlide, {
|
|
80
|
+
key: card !== null && card !== void 0 && card.id ? `${card.id}-${index}` : `cta-card-${index}`
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement(_CTACard.default, {
|
|
82
|
+
card: card,
|
|
83
|
+
columns: columns,
|
|
84
|
+
isCarousel: true
|
|
85
|
+
})))) : cards.map((card, index) => /*#__PURE__*/_react.default.createElement(_CTACard.default, {
|
|
86
|
+
key: card !== null && card !== void 0 && card.id ? `${card.id}-${index}` : `cta-card-${index}`,
|
|
54
87
|
card: card,
|
|
55
88
|
columns: columns,
|
|
56
89
|
isCarousel: carouselOfCards
|
|
@@ -12,7 +12,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
|
|
|
12
12
|
- `target`: The link target ('self' for internal links, 'blank' for external)
|
|
13
13
|
- `external`: The rel attribute ('noopener' for external links, null for internal)
|
|
14
14
|
|
|
15
|
-
### CTAMultiCard: Desktop Grid View (3 columns)
|
|
15
|
+
### CTAMultiCard: Desktop Grid View (3 columns), carousel when in mobile view
|
|
16
16
|
|
|
17
17
|
**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
|
|
18
18
|
|
|
@@ -27,7 +27,7 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
|
|
|
27
27
|
...card,
|
|
28
28
|
body: (
|
|
29
29
|
<Text tag="p">
|
|
30
|
-
|
|
30
|
+
{card.body}
|
|
31
31
|
</Text>
|
|
32
32
|
),
|
|
33
33
|
fallback: challengeExampleImage,
|
|
@@ -42,8 +42,9 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
|
|
|
42
42
|
const data = {
|
|
43
43
|
...exampleData,
|
|
44
44
|
cards: cardsWithRenderedBody,
|
|
45
|
+
layout: "3 columns",
|
|
45
46
|
carouselOfCards: true,
|
|
46
|
-
backgroundColour: "
|
|
47
|
+
backgroundColour: "grey_medium",
|
|
47
48
|
paddingAbove: '0rem',
|
|
48
49
|
paddingBelow: '0rem'
|
|
49
50
|
};
|
|
@@ -53,7 +54,7 @@ const data = {
|
|
|
53
54
|
</div>;
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
### CTAMultiCard: Desktop Grid View (2 columns)
|
|
57
|
+
### CTAMultiCard: Desktop Grid View (2 columns) with large padding
|
|
57
58
|
|
|
58
59
|
**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
|
|
59
60
|
|
|
@@ -80,7 +81,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
|
|
|
80
81
|
</>
|
|
81
82
|
) : (
|
|
82
83
|
<Text tag="p">
|
|
83
|
-
|
|
84
|
+
{card.body}
|
|
84
85
|
</Text>
|
|
85
86
|
),
|
|
86
87
|
fallback: challengeExampleImage,
|
|
@@ -106,3 +107,43 @@ const dataWithLongText = {
|
|
|
106
107
|
<CTAMultiCard data={dataWithLongText} />
|
|
107
108
|
</div>;
|
|
108
109
|
```
|
|
110
|
+
|
|
111
|
+
### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
|
|
112
|
+
|
|
113
|
+
```js
|
|
114
|
+
import CTAMultiCard from './CTAMultiCard';
|
|
115
|
+
import Text from '../../../Atoms/Text/Text';
|
|
116
|
+
import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
|
|
117
|
+
const exampleData = require('./example_data.json');
|
|
118
|
+
|
|
119
|
+
const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
|
|
120
|
+
...card,
|
|
121
|
+
id: `wrap-example-${index}`,
|
|
122
|
+
body: (
|
|
123
|
+
<Text tag="p">
|
|
124
|
+
Short body text
|
|
125
|
+
</Text>
|
|
126
|
+
),
|
|
127
|
+
fallback: challengeExampleImage,
|
|
128
|
+
imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
|
|
129
|
+
images: `${challengeExampleImage} 678w`,
|
|
130
|
+
bgColour: "white",
|
|
131
|
+
description: "",
|
|
132
|
+
target: "self",
|
|
133
|
+
external: null
|
|
134
|
+
}));
|
|
135
|
+
|
|
136
|
+
const dataWrapExample = {
|
|
137
|
+
...exampleData,
|
|
138
|
+
layout: "3 columns",
|
|
139
|
+
carouselOfCards: false,
|
|
140
|
+
backgroundColour: "Transparent",
|
|
141
|
+
cards: cardsWithRenderedBody,
|
|
142
|
+
paddingAbove: '2rem',
|
|
143
|
+
paddingBelow: '2rem'
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
<div style={{ background: '#E1E2E3'}}>
|
|
147
|
+
<CTAMultiCard data={dataWrapExample} />
|
|
148
|
+
</div>;
|
|
149
|
+
```
|
|
@@ -40,16 +40,21 @@ const CardsContainer = _styledComponents.default.div.withConfig({
|
|
|
40
40
|
let {
|
|
41
41
|
isCarousel
|
|
42
42
|
} = _ref6;
|
|
43
|
-
return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){
|
|
44
|
-
|
|
43
|
+
return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref7 => {
|
|
44
|
+
let {
|
|
45
|
+
useSplideCarousel
|
|
46
|
+
} = _ref7;
|
|
47
|
+
return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide__list{align-items:stretch;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
|
|
48
|
+
});
|
|
49
|
+
}, _ref8 => {
|
|
45
50
|
let {
|
|
46
51
|
theme
|
|
47
|
-
} =
|
|
52
|
+
} = _ref8;
|
|
48
53
|
return theme.allBreakpoints('XL');
|
|
49
|
-
},
|
|
54
|
+
}, _ref9 => {
|
|
50
55
|
let {
|
|
51
56
|
columns
|
|
52
|
-
} =
|
|
57
|
+
} = _ref9;
|
|
53
58
|
return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,371px));width:100%;margin:0 auto;max-width:100%;"]);
|
|
54
59
|
});
|
|
55
60
|
var _default = exports.default = CardsContainer;
|
|
@@ -331,8 +331,7 @@ exports[`handles data structure correctly 1`] = `
|
|
|
331
331
|
@media (max-width:739px) {
|
|
332
332
|
.c1 {
|
|
333
333
|
max-width: 309px;
|
|
334
|
-
margin
|
|
335
|
-
margin-right: auto;
|
|
334
|
+
margin: 0;
|
|
336
335
|
}
|
|
337
336
|
}
|
|
338
337
|
|
|
@@ -345,8 +344,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
345
344
|
-ms-flex: 0 0 100%;
|
|
346
345
|
flex: 0 0 100%;
|
|
347
346
|
max-width: 309px;
|
|
348
|
-
margin-left: auto;
|
|
349
|
-
margin-right: auto;
|
|
350
347
|
}
|
|
351
348
|
}
|
|
352
349
|
|
|
@@ -515,7 +512,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
515
512
|
>
|
|
516
513
|
<a
|
|
517
514
|
className="c2"
|
|
518
|
-
href="/test"
|
|
519
515
|
rel={null}
|
|
520
516
|
target="self"
|
|
521
517
|
>
|
|
@@ -556,38 +552,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
556
552
|
of text here
|
|
557
553
|
</p>
|
|
558
554
|
</div>
|
|
559
|
-
<div
|
|
560
|
-
className="c10"
|
|
561
|
-
>
|
|
562
|
-
<span
|
|
563
|
-
className="c11 c12"
|
|
564
|
-
>
|
|
565
|
-
test go
|
|
566
|
-
<img
|
|
567
|
-
alt=""
|
|
568
|
-
aria-hidden="true"
|
|
569
|
-
className="c13 c14"
|
|
570
|
-
src="mock.asset"
|
|
571
|
-
/>
|
|
572
|
-
</span>
|
|
573
|
-
<div
|
|
574
|
-
className="c15 c16"
|
|
575
|
-
>
|
|
576
|
-
<svg
|
|
577
|
-
className="c17"
|
|
578
|
-
fill="none"
|
|
579
|
-
height="13"
|
|
580
|
-
viewBox="0 0 15 13"
|
|
581
|
-
width="15"
|
|
582
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
583
|
-
>
|
|
584
|
-
<path
|
|
585
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
586
|
-
fill="currentColor"
|
|
587
|
-
/>
|
|
588
|
-
</svg>
|
|
589
|
-
</div>
|
|
590
|
-
</div>
|
|
591
555
|
</div>
|
|
592
556
|
</a>
|
|
593
557
|
</div>
|
|
@@ -1062,8 +1026,7 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1062
1026
|
@media (max-width:739px) {
|
|
1063
1027
|
.c1 {
|
|
1064
1028
|
max-width: 345px;
|
|
1065
|
-
margin
|
|
1066
|
-
margin-right: auto;
|
|
1029
|
+
margin: 0;
|
|
1067
1030
|
}
|
|
1068
1031
|
}
|
|
1069
1032
|
|
|
@@ -1076,8 +1039,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1076
1039
|
-ms-flex: 0 0 345px;
|
|
1077
1040
|
flex: 0 0 345px;
|
|
1078
1041
|
max-width: 345px;
|
|
1079
|
-
margin-left: 0;
|
|
1080
|
-
margin-right: 0;
|
|
1081
1042
|
}
|
|
1082
1043
|
}
|
|
1083
1044
|
|
|
@@ -1232,7 +1193,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1232
1193
|
>
|
|
1233
1194
|
<a
|
|
1234
1195
|
className="c2"
|
|
1235
|
-
href="/test"
|
|
1236
1196
|
rel={null}
|
|
1237
1197
|
target="self"
|
|
1238
1198
|
>
|
|
@@ -1273,38 +1233,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1273
1233
|
of text here
|
|
1274
1234
|
</p>
|
|
1275
1235
|
</div>
|
|
1276
|
-
<div
|
|
1277
|
-
className="c10"
|
|
1278
|
-
>
|
|
1279
|
-
<span
|
|
1280
|
-
className="c11 c12"
|
|
1281
|
-
>
|
|
1282
|
-
test go
|
|
1283
|
-
<img
|
|
1284
|
-
alt=""
|
|
1285
|
-
aria-hidden="true"
|
|
1286
|
-
className="c13 c14"
|
|
1287
|
-
src="mock.asset"
|
|
1288
|
-
/>
|
|
1289
|
-
</span>
|
|
1290
|
-
<div
|
|
1291
|
-
className="c15 c16"
|
|
1292
|
-
>
|
|
1293
|
-
<svg
|
|
1294
|
-
className="c17"
|
|
1295
|
-
fill="none"
|
|
1296
|
-
height="13"
|
|
1297
|
-
viewBox="0 0 15 13"
|
|
1298
|
-
width="15"
|
|
1299
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1300
|
-
>
|
|
1301
|
-
<path
|
|
1302
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
1303
|
-
fill="currentColor"
|
|
1304
|
-
/>
|
|
1305
|
-
</svg>
|
|
1306
|
-
</div>
|
|
1307
|
-
</div>
|
|
1308
1236
|
</div>
|
|
1309
1237
|
</a>
|
|
1310
1238
|
</div>
|
|
@@ -1856,8 +1784,8 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
1856
1784
|
width: 100%;
|
|
1857
1785
|
margin: 0;
|
|
1858
1786
|
max-width: 100%;
|
|
1859
|
-
overflow-x:
|
|
1860
|
-
overflow-y:
|
|
1787
|
+
overflow-x: auto;
|
|
1788
|
+
overflow-y: hidden;
|
|
1861
1789
|
-webkit-overflow-scrolling: touch;
|
|
1862
1790
|
-webkit-scroll-snap-type: x mandatory;
|
|
1863
1791
|
-moz-scroll-snap-type: x mandatory;
|
|
@@ -1983,7 +1911,6 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
1983
1911
|
>
|
|
1984
1912
|
<a
|
|
1985
1913
|
className="c2"
|
|
1986
|
-
href="/test"
|
|
1987
1914
|
rel={null}
|
|
1988
1915
|
target="self"
|
|
1989
1916
|
>
|
|
@@ -2024,38 +1951,6 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
2024
1951
|
of text here
|
|
2025
1952
|
</p>
|
|
2026
1953
|
</div>
|
|
2027
|
-
<div
|
|
2028
|
-
className="c10"
|
|
2029
|
-
>
|
|
2030
|
-
<span
|
|
2031
|
-
className="c11 c12"
|
|
2032
|
-
>
|
|
2033
|
-
test go
|
|
2034
|
-
<img
|
|
2035
|
-
alt=""
|
|
2036
|
-
aria-hidden="true"
|
|
2037
|
-
className="c13 c14"
|
|
2038
|
-
src="mock.asset"
|
|
2039
|
-
/>
|
|
2040
|
-
</span>
|
|
2041
|
-
<div
|
|
2042
|
-
className="c15 c16"
|
|
2043
|
-
>
|
|
2044
|
-
<svg
|
|
2045
|
-
className="c17"
|
|
2046
|
-
fill="none"
|
|
2047
|
-
height="13"
|
|
2048
|
-
viewBox="0 0 15 13"
|
|
2049
|
-
width="15"
|
|
2050
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2051
|
-
>
|
|
2052
|
-
<path
|
|
2053
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
2054
|
-
fill="currentColor"
|
|
2055
|
-
/>
|
|
2056
|
-
</svg>
|
|
2057
|
-
</div>
|
|
2058
|
-
</div>
|
|
2059
1954
|
</div>
|
|
2060
1955
|
</a>
|
|
2061
1956
|
</div>
|
|
@@ -2530,8 +2425,7 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2530
2425
|
@media (max-width:739px) {
|
|
2531
2426
|
.c1 {
|
|
2532
2427
|
max-width: 309px;
|
|
2533
|
-
margin
|
|
2534
|
-
margin-right: auto;
|
|
2428
|
+
margin: 0;
|
|
2535
2429
|
}
|
|
2536
2430
|
}
|
|
2537
2431
|
|
|
@@ -2544,8 +2438,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2544
2438
|
-ms-flex: 0 0 100%;
|
|
2545
2439
|
flex: 0 0 100%;
|
|
2546
2440
|
max-width: 309px;
|
|
2547
|
-
margin-left: auto;
|
|
2548
|
-
margin-right: auto;
|
|
2549
2441
|
}
|
|
2550
2442
|
}
|
|
2551
2443
|
|
|
@@ -2714,7 +2606,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2714
2606
|
>
|
|
2715
2607
|
<a
|
|
2716
2608
|
className="c2"
|
|
2717
|
-
href="/test"
|
|
2718
2609
|
rel={null}
|
|
2719
2610
|
target="self"
|
|
2720
2611
|
>
|
|
@@ -2755,38 +2646,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2755
2646
|
of text here
|
|
2756
2647
|
</p>
|
|
2757
2648
|
</div>
|
|
2758
|
-
<div
|
|
2759
|
-
className="c10"
|
|
2760
|
-
>
|
|
2761
|
-
<span
|
|
2762
|
-
className="c11 c12"
|
|
2763
|
-
>
|
|
2764
|
-
test go
|
|
2765
|
-
<img
|
|
2766
|
-
alt=""
|
|
2767
|
-
aria-hidden="true"
|
|
2768
|
-
className="c13 c14"
|
|
2769
|
-
src="mock.asset"
|
|
2770
|
-
/>
|
|
2771
|
-
</span>
|
|
2772
|
-
<div
|
|
2773
|
-
className="c15 c16"
|
|
2774
|
-
>
|
|
2775
|
-
<svg
|
|
2776
|
-
className="c17"
|
|
2777
|
-
fill="none"
|
|
2778
|
-
height="13"
|
|
2779
|
-
viewBox="0 0 15 13"
|
|
2780
|
-
width="15"
|
|
2781
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2782
|
-
>
|
|
2783
|
-
<path
|
|
2784
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
2785
|
-
fill="currentColor"
|
|
2786
|
-
/>
|
|
2787
|
-
</svg>
|
|
2788
|
-
</div>
|
|
2789
|
-
</div>
|
|
2790
2649
|
</div>
|
|
2791
2650
|
</a>
|
|
2792
2651
|
</div>
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
{
|
|
11
11
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
|
|
12
12
|
"title": "Full Card Oooh Chilly",
|
|
13
|
+
"body": "Load of text here",
|
|
13
14
|
"backgroundColour": "White",
|
|
14
15
|
"link": "/test",
|
|
15
16
|
"linkLabel": "test go",
|
|
@@ -42,9 +43,8 @@
|
|
|
42
43
|
{
|
|
43
44
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
|
|
44
45
|
"title": "Full Card Oooh Chilly",
|
|
46
|
+
"body": "I don't have a link",
|
|
45
47
|
"backgroundColour": "White",
|
|
46
|
-
"link": "/test",
|
|
47
|
-
"linkLabel": "test go",
|
|
48
48
|
"image": {
|
|
49
49
|
"description": "",
|
|
50
50
|
"gatsbyImageData": {
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
{
|
|
75
75
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
|
|
76
76
|
"title": "Full Card Oooh Chilly",
|
|
77
|
+
"body": "Third card",
|
|
77
78
|
"backgroundColour": "White",
|
|
78
79
|
"link": "/test",
|
|
79
80
|
"linkLabel": "test go",
|
|
@@ -10,62 +10,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
10
10
|
var _animations = require("../../../../theme/shared/animations");
|
|
11
11
|
var _allBreakpoints = require("../../../../theme/shared/allBreakpoints");
|
|
12
12
|
var _fontHelper = _interopRequireDefault(require("../../../../theme/crTheme/fontHelper"));
|
|
13
|
-
// const CardsContainer = styled.div`
|
|
14
|
-
// display: flex;
|
|
15
|
-
// flex-direction: column;
|
|
16
|
-
// width: 100%;
|
|
17
|
-
// background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
|
|
18
|
-
// gap: 1rem;
|
|
19
|
-
|
|
20
|
-
// // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
|
|
21
|
-
// ${({ isCarousel }) => isCarousel && css`
|
|
22
|
-
// @media (max-width: ${breakpointValues.M - 1}px) {
|
|
23
|
-
// flex-direction: row;
|
|
24
|
-
// flex-wrap: nowrap;
|
|
25
|
-
// overflow-x: visible;
|
|
26
|
-
// overflow-y: scroll;
|
|
27
|
-
// -webkit-overflow-scrolling: touch;
|
|
28
|
-
// scroll-snap-type: x mandatory;
|
|
29
|
-
// padding: 0.75rem 0.5rem;
|
|
30
|
-
// margin-left: 0.5rem;
|
|
31
|
-
|
|
32
|
-
// scrollbar-width: none;
|
|
33
|
-
// -ms-overflow-style: none;
|
|
34
|
-
// &::-webkit-scrollbar {
|
|
35
|
-
// display: none;
|
|
36
|
-
// }
|
|
37
|
-
// }
|
|
38
|
-
// `}
|
|
39
|
-
|
|
40
|
-
// // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
|
|
41
|
-
// ${({ isCarousel }) => !isCarousel && css`
|
|
42
|
-
// @media (max-width: ${breakpointValues.M - 1}px) {
|
|
43
|
-
// flex-direction: column;
|
|
44
|
-
// background: transparent;
|
|
45
|
-
// }
|
|
46
|
-
// `}
|
|
47
|
-
|
|
48
|
-
// // Desktop flexbox layout - 2 columns with centered wrap
|
|
49
|
-
// @media ${({ theme }) => theme.allBreakpoints('M')} {
|
|
50
|
-
// flex-direction: row;
|
|
51
|
-
// flex-wrap: wrap;
|
|
52
|
-
// justify-content: center;
|
|
53
|
-
// align-items: stretch;
|
|
54
|
-
// width: fit-content;
|
|
55
|
-
// max-width: 100%;
|
|
56
|
-
// margin: 0 auto;
|
|
57
|
-
// }
|
|
58
|
-
|
|
59
|
-
// // Desktop grid layout for XL breakpoint - 3 columns
|
|
60
|
-
// @media ${({ theme }) => theme.allBreakpoints('XL')} {
|
|
61
|
-
// display: grid;
|
|
62
|
-
// justify-content: center;
|
|
63
|
-
// grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
|
|
64
|
-
// width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
|
|
65
|
-
// margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
|
|
66
|
-
// max-width: 100%;
|
|
67
|
-
// }
|
|
68
|
-
// `;
|
|
69
13
|
const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
|
|
70
14
|
displayName: "CTACardstyle__ImageWrapper",
|
|
71
15
|
componentId: "sc-si8xx1-0"
|
|
@@ -197,7 +141,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
|
|
|
197
141
|
isCarousel,
|
|
198
142
|
isFullWidth
|
|
199
143
|
} = _ref21;
|
|
200
|
-
return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){max-width:", ";margin
|
|
144
|
+
return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){max-width:", ";margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", "}"], _allBreakpoints.breakpointValues.M - 1, _ref22 => {
|
|
201
145
|
let {
|
|
202
146
|
columns
|
|
203
147
|
} = _ref22;
|
|
@@ -206,7 +150,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
|
|
|
206
150
|
let {
|
|
207
151
|
columns
|
|
208
152
|
} = _ref23;
|
|
209
|
-
return columns === 3 ? (0, _styledComponents.css)(["flex:0 0 100%;max-width:309px;
|
|
153
|
+
return columns === 3 ? (0, _styledComponents.css)(["flex:0 0 100%;max-width:309px;"]) : (0, _styledComponents.css)(["flex:0 0 345px;max-width:345px;"]);
|
|
210
154
|
});
|
|
211
155
|
}, _ref24 => {
|
|
212
156
|
let {
|
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.51.
|
|
4
|
+
"version": "8.51.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"license": "ISC",
|
|
7
7
|
"jest": {
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
"url": "https://github.com/comicrelief/component-library.git"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"react-scripts": "4.0.3",
|
|
26
|
-
"babel-plugin-import": "^1.13.8",
|
|
27
25
|
"@babel/cli": "^7.21.5",
|
|
28
26
|
"@hookform/resolvers": "^3.9.0",
|
|
27
|
+
"@splidejs/react-splide": "^0.7.12",
|
|
29
28
|
"axios": "^1.7.2",
|
|
29
|
+
"babel-plugin-import": "^1.13.8",
|
|
30
30
|
"lazysizes": "^5.3.2",
|
|
31
31
|
"lodash": "^4.17.11",
|
|
32
32
|
"moment": "^2.29.4",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"react-modal": "^3.16.1",
|
|
41
41
|
"react-range-slider-input": "^3.0.7",
|
|
42
42
|
"react-responsive": "^9.0.2",
|
|
43
|
+
"react-scripts": "4.0.3",
|
|
43
44
|
"react-spinners": "^0.11.0",
|
|
44
45
|
"react-uid": "^2.3.3",
|
|
45
46
|
"styled-components": "^5.3.11",
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { snakeCase } from 'lodash';
|
|
4
|
+
import { useMediaQuery } from 'react-responsive';
|
|
5
|
+
import { Splide, SplideSlide } from '@splidejs/react-splide';
|
|
6
|
+
// Line below imports the built CSS directly because Jest needs it
|
|
7
|
+
import '@splidejs/react-splide/dist/css/splide.min.css';
|
|
4
8
|
import CTACard from '../shared/CTACard';
|
|
5
9
|
import CardsContainer from './CTAMultiCard.style';
|
|
10
|
+
import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
|
|
6
11
|
|
|
7
12
|
/**
|
|
8
13
|
* CTAMultiCard Component
|
|
@@ -13,6 +18,9 @@ import CardsContainer from './CTAMultiCard.style';
|
|
|
13
18
|
* Now CTAMultiCard handles the mapping internally, accepting
|
|
14
19
|
* a data object and rendering all cards.
|
|
15
20
|
*
|
|
21
|
+
* Where a carousel is requested (carouselOfCards is true), the component
|
|
22
|
+
* will use the Splide library to create it.
|
|
23
|
+
*
|
|
16
24
|
* Note: The component expects pre-rendered content in the `body`
|
|
17
25
|
* field of each card. The frontend should handle rich text rendering
|
|
18
26
|
* before passing data to this component.
|
|
@@ -28,6 +36,9 @@ const CTAMultiCard = ({ data }) => {
|
|
|
28
36
|
paddingBelow
|
|
29
37
|
} = data;
|
|
30
38
|
|
|
39
|
+
const isBelowL = useMediaQuery({ maxWidth: breakpointValues.L - 1 });
|
|
40
|
+
const useSplideCarousel = Boolean(carouselOfCards && isBelowL);
|
|
41
|
+
|
|
31
42
|
if (!cards || !Array.isArray(cards) || cards.length === 0) {
|
|
32
43
|
return null;
|
|
33
44
|
}
|
|
@@ -43,17 +54,42 @@ const CTAMultiCard = ({ data }) => {
|
|
|
43
54
|
backgroundColor={cardsBackground}
|
|
44
55
|
columns={columns}
|
|
45
56
|
isCarousel={carouselOfCards}
|
|
57
|
+
useSplideCarousel={useSplideCarousel}
|
|
46
58
|
paddingAbove={paddingAbove}
|
|
47
59
|
paddingBelow={paddingBelow}
|
|
48
60
|
>
|
|
49
|
-
{
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
61
|
+
{useSplideCarousel ? (
|
|
62
|
+
<Splide
|
|
63
|
+
options={{
|
|
64
|
+
arrows: false,
|
|
65
|
+
pagination: false,
|
|
66
|
+
drag: true,
|
|
67
|
+
dragMinThreshold: 10,
|
|
68
|
+
gap: '1rem',
|
|
69
|
+
fixedWidth: '309px',
|
|
70
|
+
padding: { left: '0px', right: '0px' }
|
|
71
|
+
}}
|
|
72
|
+
>
|
|
73
|
+
{cards.map((card, index) => (
|
|
74
|
+
<SplideSlide key={card?.id ? `${card.id}-${index}` : `cta-card-${index}`}>
|
|
75
|
+
<CTACard
|
|
76
|
+
card={card}
|
|
77
|
+
columns={columns}
|
|
78
|
+
isCarousel
|
|
79
|
+
/>
|
|
80
|
+
</SplideSlide>
|
|
81
|
+
))}
|
|
82
|
+
</Splide>
|
|
83
|
+
) : (
|
|
84
|
+
cards.map((card, index) => (
|
|
85
|
+
<CTACard
|
|
86
|
+
key={card?.id ? `${card.id}-${index}` : `cta-card-${index}`}
|
|
87
|
+
card={card}
|
|
88
|
+
columns={columns}
|
|
89
|
+
isCarousel={carouselOfCards}
|
|
90
|
+
/>
|
|
91
|
+
))
|
|
92
|
+
)}
|
|
57
93
|
</CardsContainer>
|
|
58
94
|
);
|
|
59
95
|
};
|
|
@@ -12,7 +12,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
|
|
|
12
12
|
- `target`: The link target ('self' for internal links, 'blank' for external)
|
|
13
13
|
- `external`: The rel attribute ('noopener' for external links, null for internal)
|
|
14
14
|
|
|
15
|
-
### CTAMultiCard: Desktop Grid View (3 columns)
|
|
15
|
+
### CTAMultiCard: Desktop Grid View (3 columns), carousel when in mobile view
|
|
16
16
|
|
|
17
17
|
**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
|
|
18
18
|
|
|
@@ -27,7 +27,7 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
|
|
|
27
27
|
...card,
|
|
28
28
|
body: (
|
|
29
29
|
<Text tag="p">
|
|
30
|
-
|
|
30
|
+
{card.body}
|
|
31
31
|
</Text>
|
|
32
32
|
),
|
|
33
33
|
fallback: challengeExampleImage,
|
|
@@ -42,8 +42,9 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
|
|
|
42
42
|
const data = {
|
|
43
43
|
...exampleData,
|
|
44
44
|
cards: cardsWithRenderedBody,
|
|
45
|
+
layout: "3 columns",
|
|
45
46
|
carouselOfCards: true,
|
|
46
|
-
backgroundColour: "
|
|
47
|
+
backgroundColour: "grey_medium",
|
|
47
48
|
paddingAbove: '0rem',
|
|
48
49
|
paddingBelow: '0rem'
|
|
49
50
|
};
|
|
@@ -53,7 +54,7 @@ const data = {
|
|
|
53
54
|
</div>;
|
|
54
55
|
```
|
|
55
56
|
|
|
56
|
-
### CTAMultiCard: Desktop Grid View (2 columns)
|
|
57
|
+
### CTAMultiCard: Desktop Grid View (2 columns) with large padding
|
|
57
58
|
|
|
58
59
|
**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
|
|
59
60
|
|
|
@@ -80,7 +81,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
|
|
|
80
81
|
</>
|
|
81
82
|
) : (
|
|
82
83
|
<Text tag="p">
|
|
83
|
-
|
|
84
|
+
{card.body}
|
|
84
85
|
</Text>
|
|
85
86
|
),
|
|
86
87
|
fallback: challengeExampleImage,
|
|
@@ -106,3 +107,43 @@ const dataWithLongText = {
|
|
|
106
107
|
<CTAMultiCard data={dataWithLongText} />
|
|
107
108
|
</div>;
|
|
108
109
|
```
|
|
110
|
+
|
|
111
|
+
### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
|
|
112
|
+
|
|
113
|
+
```js
|
|
114
|
+
import CTAMultiCard from './CTAMultiCard';
|
|
115
|
+
import Text from '../../../Atoms/Text/Text';
|
|
116
|
+
import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
|
|
117
|
+
const exampleData = require('./example_data.json');
|
|
118
|
+
|
|
119
|
+
const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
|
|
120
|
+
...card,
|
|
121
|
+
id: `wrap-example-${index}`,
|
|
122
|
+
body: (
|
|
123
|
+
<Text tag="p">
|
|
124
|
+
Short body text
|
|
125
|
+
</Text>
|
|
126
|
+
),
|
|
127
|
+
fallback: challengeExampleImage,
|
|
128
|
+
imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
|
|
129
|
+
images: `${challengeExampleImage} 678w`,
|
|
130
|
+
bgColour: "white",
|
|
131
|
+
description: "",
|
|
132
|
+
target: "self",
|
|
133
|
+
external: null
|
|
134
|
+
}));
|
|
135
|
+
|
|
136
|
+
const dataWrapExample = {
|
|
137
|
+
...exampleData,
|
|
138
|
+
layout: "3 columns",
|
|
139
|
+
carouselOfCards: false,
|
|
140
|
+
backgroundColour: "Transparent",
|
|
141
|
+
cards: cardsWithRenderedBody,
|
|
142
|
+
paddingAbove: '2rem',
|
|
143
|
+
paddingBelow: '2rem'
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
<div style={{ background: '#E1E2E3'}}>
|
|
147
|
+
<CTAMultiCard data={dataWrapExample} />
|
|
148
|
+
</div>;
|
|
149
|
+
```
|
|
@@ -32,23 +32,42 @@ const CardsContainer = styled.div`
|
|
|
32
32
|
// Carousel mode - horizontal scroll container (M and below)
|
|
33
33
|
${({ isCarousel }) => isCarousel && css`
|
|
34
34
|
@media (max-width: ${breakpointValues.L - 1}px) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
${({ useSplideCarousel }) => (useSplideCarousel ? css`
|
|
36
|
+
display: block;
|
|
37
|
+
cursor: grab;
|
|
38
|
+
width: 100%;
|
|
39
|
+
margin: 0;
|
|
40
|
+
max-width: 100%;
|
|
41
|
+
padding: 0.75rem 1rem;
|
|
42
|
+
gap: 0;
|
|
43
|
+
|
|
44
|
+
.splide__list {
|
|
45
|
+
align-items: stretch;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.splide__slide {
|
|
49
|
+
display: flex;
|
|
50
|
+
height: auto;
|
|
51
|
+
}
|
|
52
|
+
` : css`
|
|
53
|
+
flex-direction: row;
|
|
54
|
+
flex-wrap: nowrap;
|
|
55
|
+
justify-content: flex-start;
|
|
56
|
+
width: 100%;
|
|
57
|
+
margin: 0;
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
overflow-x: auto;
|
|
60
|
+
overflow-y: hidden;
|
|
61
|
+
-webkit-overflow-scrolling: touch;
|
|
62
|
+
scroll-snap-type: x mandatory;
|
|
63
|
+
padding: 0.75rem 1rem;
|
|
46
64
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
65
|
+
scrollbar-width: none;
|
|
66
|
+
-ms-overflow-style: none;
|
|
67
|
+
&::-webkit-scrollbar {
|
|
68
|
+
display: none;
|
|
69
|
+
}
|
|
70
|
+
`)}
|
|
52
71
|
}
|
|
53
72
|
`}
|
|
54
73
|
|
|
@@ -331,8 +331,7 @@ exports[`handles data structure correctly 1`] = `
|
|
|
331
331
|
@media (max-width:739px) {
|
|
332
332
|
.c1 {
|
|
333
333
|
max-width: 309px;
|
|
334
|
-
margin
|
|
335
|
-
margin-right: auto;
|
|
334
|
+
margin: 0;
|
|
336
335
|
}
|
|
337
336
|
}
|
|
338
337
|
|
|
@@ -345,8 +344,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
345
344
|
-ms-flex: 0 0 100%;
|
|
346
345
|
flex: 0 0 100%;
|
|
347
346
|
max-width: 309px;
|
|
348
|
-
margin-left: auto;
|
|
349
|
-
margin-right: auto;
|
|
350
347
|
}
|
|
351
348
|
}
|
|
352
349
|
|
|
@@ -515,7 +512,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
515
512
|
>
|
|
516
513
|
<a
|
|
517
514
|
className="c2"
|
|
518
|
-
href="/test"
|
|
519
515
|
rel={null}
|
|
520
516
|
target="self"
|
|
521
517
|
>
|
|
@@ -556,38 +552,6 @@ exports[`handles data structure correctly 1`] = `
|
|
|
556
552
|
of text here
|
|
557
553
|
</p>
|
|
558
554
|
</div>
|
|
559
|
-
<div
|
|
560
|
-
className="c10"
|
|
561
|
-
>
|
|
562
|
-
<span
|
|
563
|
-
className="c11 c12"
|
|
564
|
-
>
|
|
565
|
-
test go
|
|
566
|
-
<img
|
|
567
|
-
alt=""
|
|
568
|
-
aria-hidden="true"
|
|
569
|
-
className="c13 c14"
|
|
570
|
-
src="mock.asset"
|
|
571
|
-
/>
|
|
572
|
-
</span>
|
|
573
|
-
<div
|
|
574
|
-
className="c15 c16"
|
|
575
|
-
>
|
|
576
|
-
<svg
|
|
577
|
-
className="c17"
|
|
578
|
-
fill="none"
|
|
579
|
-
height="13"
|
|
580
|
-
viewBox="0 0 15 13"
|
|
581
|
-
width="15"
|
|
582
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
583
|
-
>
|
|
584
|
-
<path
|
|
585
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
586
|
-
fill="currentColor"
|
|
587
|
-
/>
|
|
588
|
-
</svg>
|
|
589
|
-
</div>
|
|
590
|
-
</div>
|
|
591
555
|
</div>
|
|
592
556
|
</a>
|
|
593
557
|
</div>
|
|
@@ -1062,8 +1026,7 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1062
1026
|
@media (max-width:739px) {
|
|
1063
1027
|
.c1 {
|
|
1064
1028
|
max-width: 345px;
|
|
1065
|
-
margin
|
|
1066
|
-
margin-right: auto;
|
|
1029
|
+
margin: 0;
|
|
1067
1030
|
}
|
|
1068
1031
|
}
|
|
1069
1032
|
|
|
@@ -1076,8 +1039,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1076
1039
|
-ms-flex: 0 0 345px;
|
|
1077
1040
|
flex: 0 0 345px;
|
|
1078
1041
|
max-width: 345px;
|
|
1079
|
-
margin-left: 0;
|
|
1080
|
-
margin-right: 0;
|
|
1081
1042
|
}
|
|
1082
1043
|
}
|
|
1083
1044
|
|
|
@@ -1232,7 +1193,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1232
1193
|
>
|
|
1233
1194
|
<a
|
|
1234
1195
|
className="c2"
|
|
1235
|
-
href="/test"
|
|
1236
1196
|
rel={null}
|
|
1237
1197
|
target="self"
|
|
1238
1198
|
>
|
|
@@ -1273,38 +1233,6 @@ exports[`renders 2 columns layout correctly 1`] = `
|
|
|
1273
1233
|
of text here
|
|
1274
1234
|
</p>
|
|
1275
1235
|
</div>
|
|
1276
|
-
<div
|
|
1277
|
-
className="c10"
|
|
1278
|
-
>
|
|
1279
|
-
<span
|
|
1280
|
-
className="c11 c12"
|
|
1281
|
-
>
|
|
1282
|
-
test go
|
|
1283
|
-
<img
|
|
1284
|
-
alt=""
|
|
1285
|
-
aria-hidden="true"
|
|
1286
|
-
className="c13 c14"
|
|
1287
|
-
src="mock.asset"
|
|
1288
|
-
/>
|
|
1289
|
-
</span>
|
|
1290
|
-
<div
|
|
1291
|
-
className="c15 c16"
|
|
1292
|
-
>
|
|
1293
|
-
<svg
|
|
1294
|
-
className="c17"
|
|
1295
|
-
fill="none"
|
|
1296
|
-
height="13"
|
|
1297
|
-
viewBox="0 0 15 13"
|
|
1298
|
-
width="15"
|
|
1299
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1300
|
-
>
|
|
1301
|
-
<path
|
|
1302
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
1303
|
-
fill="currentColor"
|
|
1304
|
-
/>
|
|
1305
|
-
</svg>
|
|
1306
|
-
</div>
|
|
1307
|
-
</div>
|
|
1308
1236
|
</div>
|
|
1309
1237
|
</a>
|
|
1310
1238
|
</div>
|
|
@@ -1856,8 +1784,8 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
1856
1784
|
width: 100%;
|
|
1857
1785
|
margin: 0;
|
|
1858
1786
|
max-width: 100%;
|
|
1859
|
-
overflow-x:
|
|
1860
|
-
overflow-y:
|
|
1787
|
+
overflow-x: auto;
|
|
1788
|
+
overflow-y: hidden;
|
|
1861
1789
|
-webkit-overflow-scrolling: touch;
|
|
1862
1790
|
-webkit-scroll-snap-type: x mandatory;
|
|
1863
1791
|
-moz-scroll-snap-type: x mandatory;
|
|
@@ -1983,7 +1911,6 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
1983
1911
|
>
|
|
1984
1912
|
<a
|
|
1985
1913
|
className="c2"
|
|
1986
|
-
href="/test"
|
|
1987
1914
|
rel={null}
|
|
1988
1915
|
target="self"
|
|
1989
1916
|
>
|
|
@@ -2024,38 +1951,6 @@ exports[`renders carousel mode correctly 1`] = `
|
|
|
2024
1951
|
of text here
|
|
2025
1952
|
</p>
|
|
2026
1953
|
</div>
|
|
2027
|
-
<div
|
|
2028
|
-
className="c10"
|
|
2029
|
-
>
|
|
2030
|
-
<span
|
|
2031
|
-
className="c11 c12"
|
|
2032
|
-
>
|
|
2033
|
-
test go
|
|
2034
|
-
<img
|
|
2035
|
-
alt=""
|
|
2036
|
-
aria-hidden="true"
|
|
2037
|
-
className="c13 c14"
|
|
2038
|
-
src="mock.asset"
|
|
2039
|
-
/>
|
|
2040
|
-
</span>
|
|
2041
|
-
<div
|
|
2042
|
-
className="c15 c16"
|
|
2043
|
-
>
|
|
2044
|
-
<svg
|
|
2045
|
-
className="c17"
|
|
2046
|
-
fill="none"
|
|
2047
|
-
height="13"
|
|
2048
|
-
viewBox="0 0 15 13"
|
|
2049
|
-
width="15"
|
|
2050
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2051
|
-
>
|
|
2052
|
-
<path
|
|
2053
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
2054
|
-
fill="currentColor"
|
|
2055
|
-
/>
|
|
2056
|
-
</svg>
|
|
2057
|
-
</div>
|
|
2058
|
-
</div>
|
|
2059
1954
|
</div>
|
|
2060
1955
|
</a>
|
|
2061
1956
|
</div>
|
|
@@ -2530,8 +2425,7 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2530
2425
|
@media (max-width:739px) {
|
|
2531
2426
|
.c1 {
|
|
2532
2427
|
max-width: 309px;
|
|
2533
|
-
margin
|
|
2534
|
-
margin-right: auto;
|
|
2428
|
+
margin: 0;
|
|
2535
2429
|
}
|
|
2536
2430
|
}
|
|
2537
2431
|
|
|
@@ -2544,8 +2438,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2544
2438
|
-ms-flex: 0 0 100%;
|
|
2545
2439
|
flex: 0 0 100%;
|
|
2546
2440
|
max-width: 309px;
|
|
2547
|
-
margin-left: auto;
|
|
2548
|
-
margin-right: auto;
|
|
2549
2441
|
}
|
|
2550
2442
|
}
|
|
2551
2443
|
|
|
@@ -2714,7 +2606,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2714
2606
|
>
|
|
2715
2607
|
<a
|
|
2716
2608
|
className="c2"
|
|
2717
|
-
href="/test"
|
|
2718
2609
|
rel={null}
|
|
2719
2610
|
target="self"
|
|
2720
2611
|
>
|
|
@@ -2755,38 +2646,6 @@ exports[`renders correctly with data prop 1`] = `
|
|
|
2755
2646
|
of text here
|
|
2756
2647
|
</p>
|
|
2757
2648
|
</div>
|
|
2758
|
-
<div
|
|
2759
|
-
className="c10"
|
|
2760
|
-
>
|
|
2761
|
-
<span
|
|
2762
|
-
className="c11 c12"
|
|
2763
|
-
>
|
|
2764
|
-
test go
|
|
2765
|
-
<img
|
|
2766
|
-
alt=""
|
|
2767
|
-
aria-hidden="true"
|
|
2768
|
-
className="c13 c14"
|
|
2769
|
-
src="mock.asset"
|
|
2770
|
-
/>
|
|
2771
|
-
</span>
|
|
2772
|
-
<div
|
|
2773
|
-
className="c15 c16"
|
|
2774
|
-
>
|
|
2775
|
-
<svg
|
|
2776
|
-
className="c17"
|
|
2777
|
-
fill="none"
|
|
2778
|
-
height="13"
|
|
2779
|
-
viewBox="0 0 15 13"
|
|
2780
|
-
width="15"
|
|
2781
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2782
|
-
>
|
|
2783
|
-
<path
|
|
2784
|
-
d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
|
|
2785
|
-
fill="currentColor"
|
|
2786
|
-
/>
|
|
2787
|
-
</svg>
|
|
2788
|
-
</div>
|
|
2789
|
-
</div>
|
|
2790
2649
|
</div>
|
|
2791
2650
|
</a>
|
|
2792
2651
|
</div>
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
{
|
|
11
11
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
|
|
12
12
|
"title": "Full Card Oooh Chilly",
|
|
13
|
+
"body": "Load of text here",
|
|
13
14
|
"backgroundColour": "White",
|
|
14
15
|
"link": "/test",
|
|
15
16
|
"linkLabel": "test go",
|
|
@@ -42,9 +43,8 @@
|
|
|
42
43
|
{
|
|
43
44
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-2",
|
|
44
45
|
"title": "Full Card Oooh Chilly",
|
|
46
|
+
"body": "I don't have a link",
|
|
45
47
|
"backgroundColour": "White",
|
|
46
|
-
"link": "/test",
|
|
47
|
-
"linkLabel": "test go",
|
|
48
48
|
"image": {
|
|
49
49
|
"description": "",
|
|
50
50
|
"gatsbyImageData": {
|
|
@@ -74,6 +74,7 @@
|
|
|
74
74
|
{
|
|
75
75
|
"id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14-3",
|
|
76
76
|
"title": "Full Card Oooh Chilly",
|
|
77
|
+
"body": "Third card",
|
|
77
78
|
"backgroundColour": "White",
|
|
78
79
|
"link": "/test",
|
|
79
80
|
"linkLabel": "test go",
|
|
@@ -96,7 +96,7 @@ CTACard.propTypes = {
|
|
|
96
96
|
card: PropTypes.shape({
|
|
97
97
|
id: PropTypes.string.isRequired,
|
|
98
98
|
body: PropTypes.node,
|
|
99
|
-
link: PropTypes.string
|
|
99
|
+
link: PropTypes.string,
|
|
100
100
|
linkLabel: PropTypes.string,
|
|
101
101
|
fallback: PropTypes.string,
|
|
102
102
|
imageLow: PropTypes.string,
|
|
@@ -3,63 +3,6 @@ import { bounceUpAnimation, springScaleAnimation } from '../../../../theme/share
|
|
|
3
3
|
import { breakpointValues } from '../../../../theme/shared/allBreakpoints';
|
|
4
4
|
import fontHelper from '../../../../theme/crTheme/fontHelper';
|
|
5
5
|
|
|
6
|
-
// const CardsContainer = styled.div`
|
|
7
|
-
// display: flex;
|
|
8
|
-
// flex-direction: column;
|
|
9
|
-
// width: 100%;
|
|
10
|
-
// background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
|
|
11
|
-
// gap: 1rem;
|
|
12
|
-
|
|
13
|
-
// // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
|
|
14
|
-
// ${({ isCarousel }) => isCarousel && css`
|
|
15
|
-
// @media (max-width: ${breakpointValues.M - 1}px) {
|
|
16
|
-
// flex-direction: row;
|
|
17
|
-
// flex-wrap: nowrap;
|
|
18
|
-
// overflow-x: visible;
|
|
19
|
-
// overflow-y: scroll;
|
|
20
|
-
// -webkit-overflow-scrolling: touch;
|
|
21
|
-
// scroll-snap-type: x mandatory;
|
|
22
|
-
// padding: 0.75rem 0.5rem;
|
|
23
|
-
// margin-left: 0.5rem;
|
|
24
|
-
|
|
25
|
-
// scrollbar-width: none;
|
|
26
|
-
// -ms-overflow-style: none;
|
|
27
|
-
// &::-webkit-scrollbar {
|
|
28
|
-
// display: none;
|
|
29
|
-
// }
|
|
30
|
-
// }
|
|
31
|
-
// `}
|
|
32
|
-
|
|
33
|
-
// // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
|
|
34
|
-
// ${({ isCarousel }) => !isCarousel && css`
|
|
35
|
-
// @media (max-width: ${breakpointValues.M - 1}px) {
|
|
36
|
-
// flex-direction: column;
|
|
37
|
-
// background: transparent;
|
|
38
|
-
// }
|
|
39
|
-
// `}
|
|
40
|
-
|
|
41
|
-
// // Desktop flexbox layout - 2 columns with centered wrap
|
|
42
|
-
// @media ${({ theme }) => theme.allBreakpoints('M')} {
|
|
43
|
-
// flex-direction: row;
|
|
44
|
-
// flex-wrap: wrap;
|
|
45
|
-
// justify-content: center;
|
|
46
|
-
// align-items: stretch;
|
|
47
|
-
// width: fit-content;
|
|
48
|
-
// max-width: 100%;
|
|
49
|
-
// margin: 0 auto;
|
|
50
|
-
// }
|
|
51
|
-
|
|
52
|
-
// // Desktop grid layout for XL breakpoint - 3 columns
|
|
53
|
-
// @media ${({ theme }) => theme.allBreakpoints('XL')} {
|
|
54
|
-
// display: grid;
|
|
55
|
-
// justify-content: center;
|
|
56
|
-
// grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
|
|
57
|
-
// width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
|
|
58
|
-
// margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
|
|
59
|
-
// max-width: 100%;
|
|
60
|
-
// }
|
|
61
|
-
// `;
|
|
62
|
-
|
|
63
6
|
const ImageWrapper = styled.div`
|
|
64
7
|
width: 100%;
|
|
65
8
|
overflow: hidden;
|
|
@@ -244,8 +187,7 @@ const CardWrapper = styled.div`
|
|
|
244
187
|
/* Below M: stacked cards, keep them centred */
|
|
245
188
|
@media (max-width: ${breakpointValues.M - 1}px) {
|
|
246
189
|
max-width: ${({ columns }) => (columns === 3 ? '309px' : '345px')};
|
|
247
|
-
margin
|
|
248
|
-
margin-right: auto;
|
|
190
|
+
margin: 0;
|
|
249
191
|
}
|
|
250
192
|
|
|
251
193
|
@media (min-width: ${breakpointValues.M}px) and (max-width: ${breakpointValues.L - 1}px) {
|
|
@@ -254,14 +196,10 @@ const CardWrapper = styled.div`
|
|
|
254
196
|
? css`
|
|
255
197
|
flex: 0 0 100%;
|
|
256
198
|
max-width: 309px;
|
|
257
|
-
margin-left: auto;
|
|
258
|
-
margin-right: auto;
|
|
259
199
|
`
|
|
260
200
|
: css`
|
|
261
201
|
flex: 0 0 345px;
|
|
262
202
|
max-width: 345px;
|
|
263
|
-
margin-left: 0;
|
|
264
|
-
margin-right: 0;
|
|
265
203
|
`)}
|
|
266
204
|
}
|
|
267
205
|
`}
|