@comicrelief/component-library 8.51.6 → 8.51.7

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/CTA/CTAMultiCard/CTAMultiCard.md +44 -6
  2. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +8 -18
  3. package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +35 -35
  4. package/dist/components/Molecules/CTA/CTAMultiCard/example_data.json +1 -1
  5. package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +15 -9
  6. package/dist/components/Molecules/CTA/shared/CTACard.style.js +18 -28
  7. package/package.json +1 -1
  8. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +44 -6
  9. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +14 -16
  10. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +35 -35
  11. package/src/components/Molecules/CTA/CTAMultiCard/example_data.json +1 -1
  12. package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap +15 -9
  13. package/src/components/Molecules/CTA/shared/CTACard.style.js +20 -30
package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md CHANGED
@@ -39,9 +39,23 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
39
39
  external: null
40
40
  }));
41
41
 
42
+ const cardsFour = [
43
+ ...cardsWithRenderedBody,
44
+ {
45
+ ...cardsWithRenderedBody[0],
46
+ id: 'example-4th-card',
47
+ title: 'Fourth card',
48
+ body: (
49
+ <Text tag="p">
50
+ Fourth card (added for layout testing)
51
+ </Text>
52
+ )
53
+ }
54
+ ];
55
+
42
56
  const data = {
43
57
  ...exampleData,
44
- cards: cardsWithRenderedBody,
58
+ cards: cardsFour,
45
59
  layout: "3 columns",
46
60
  carouselOfCards: true,
47
61
  backgroundColour: "grey_medium",
@@ -56,7 +70,7 @@ const data = {
56
70
 
57
71
  ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
58
72
 
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.**
73
+ **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 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.**
60
74
 
61
75
  ```js
62
76
  import CTAMultiCard from './CTAMultiCard';
@@ -96,7 +110,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
96
110
  const dataWithLongText = {
97
111
  ...exampleData,
98
112
  layout: "2 columns",
99
- carouselOfCards: false,
113
+ carouselOfCards: true,
100
114
  backgroundColour: "Transparent",
101
115
  cards: cardsWithRenderedBody,
102
116
  paddingAbove: '4rem',
@@ -108,7 +122,7 @@ const dataWithLongText = {
108
122
  </div>;
109
123
  ```
110
124
 
111
- ### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
125
+ ### CTAMultiCard: Wrap behaviour (3 columns)
112
126
 
113
127
  ```js
114
128
  import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +147,36 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
133
147
  external: null
134
148
  }));
135
149
 
150
+ const cardsFive = [
151
+ ...cardsWithRenderedBody,
152
+ {
153
+ ...cardsWithRenderedBody[0],
154
+ id: 'wrap-example-3',
155
+ title: 'Fourth card',
156
+ body: (
157
+ <Text tag="p">
158
+ Short body text (4)
159
+ </Text>
160
+ )
161
+ },
162
+ {
163
+ ...cardsWithRenderedBody[1],
164
+ id: 'wrap-example-4',
165
+ title: 'Fifth card',
166
+ body: (
167
+ <Text tag="p">
168
+ Short body text (5)
169
+ </Text>
170
+ )
171
+ }
172
+ ];
173
+
136
174
  const dataWrapExample = {
137
175
  ...exampleData,
138
176
  layout: "3 columns",
139
- carouselOfCards: false,
177
+ carouselOfCards: true,
140
178
  backgroundColour: "rnd_26_light_pink",
141
- cards: cardsWithRenderedBody,
179
+ cards: cardsFive,
142
180
  paddingAbove: '2rem',
143
181
  paddingBelow: '2rem'
144
182
  };
package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED
@@ -48,17 +48,17 @@ const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig
48
48
  let {
49
49
  isCarousel
50
50
  } = _ref6;
51
- return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}"], _ref7 => {
51
+ return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}@media (min-width:", "px){padding-inline:0;}"], _ref7 => {
52
52
  let {
53
53
  theme
54
54
  } = _ref7;
55
- return theme.allBreakpoints('L');
56
- });
55
+ return theme.allBreakpoints('M');
56
+ }, _allBreakpoints.breakpointValues.XL);
57
57
  });
58
58
  const CardsContainer = _styledComponents.default.div.withConfig({
59
59
  displayName: "CTAMultiCardstyle__CardsContainer",
60
60
  componentId: "sc-gsdqzv-3"
61
- })(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " ", " @media ", "{", "}"], _ref8 => {
61
+ })(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:100%;max-width:100%;margin:0 auto;}@media ", "{column-gap:2rem;}", " ", ""], _ref8 => {
62
62
  let {
63
63
  theme
64
64
  } = _ref8;
@@ -70,10 +70,10 @@ const CardsContainer = _styledComponents.default.div.withConfig({
70
70
  return theme.allBreakpoints('L');
71
71
  }, _ref10 => {
72
72
  let {
73
- isCarousel,
74
- columns
73
+ columns,
74
+ useSplideCarousel
75
75
  } = _ref10;
76
- return !isCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
76
+ return !useSplideCarousel && columns === 2 && (0, _styledComponents.css)(["@media (min-width:", "px){display:grid;grid-template-columns:repeat(2,minmax(443px,560px));justify-content:center;align-items:stretch;column-gap:2rem;row-gap:2rem;width:100%;max-width:100%;margin:0;& > *:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:min(100%,560px);}}"], _allBreakpoints.breakpointValues.L);
77
77
  }, _ref11 => {
78
78
  let {
79
79
  isCarousel
@@ -82,17 +82,7 @@ const CardsContainer = _styledComponents.default.div.withConfig({
82
82
  let {
83
83
  useSplideCarousel
84
84
  } = _ref12;
85
- 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;}"]);
85
+ return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;margin:0;max-width:100%;padding:0.75rem 1rem;gap:0;.splide,.splide__track{overflow:visible}.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:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
86
86
  });
87
- }, _ref13 => {
88
- let {
89
- theme
90
- } = _ref13;
91
- return theme.allBreakpoints('XL');
92
- }, _ref14 => {
93
- let {
94
- columns
95
- } = _ref14;
96
- return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,363px));width:100%;margin:0 auto;max-width:100%;"]);
97
87
  });
98
88
  var _default = exports.default = CardsContainer;
package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED
@@ -11,13 +11,13 @@ exports[`handles data structure correctly 1`] = `
11
11
  className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
12
12
  >
13
13
  <div
14
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
14
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
15
15
  >
16
16
  <div
17
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
17
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
18
18
  >
19
19
  <a
20
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
20
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
21
21
  href="/test"
22
22
  rel={null}
23
23
  target="self"
@@ -95,7 +95,7 @@ exports[`handles data structure correctly 1`] = `
95
95
  </a>
96
96
  </div>
97
97
  <div
98
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
98
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
99
99
  >
100
100
  <div
101
101
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,10 +141,10 @@ exports[`handles data structure correctly 1`] = `
141
141
  </div>
142
142
  </div>
143
143
  <div
144
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
144
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
145
145
  >
146
146
  <a
147
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
147
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
148
148
  href="/test"
149
149
  rel={null}
150
150
  target="self"
@@ -222,10 +222,10 @@ exports[`handles data structure correctly 1`] = `
222
222
  </a>
223
223
  </div>
224
224
  <div
225
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
225
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
226
226
  >
227
227
  <a
228
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
228
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
229
229
  href="/test-no-image"
230
230
  rel={null}
231
231
  target="self"
@@ -291,16 +291,16 @@ exports[`renders 2 columns layout correctly 1`] = `
291
291
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
292
292
  >
293
293
  <div
294
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
294
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
295
295
  >
296
296
  <div
297
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
297
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
298
298
  >
299
299
  <div
300
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
300
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
301
301
  >
302
302
  <a
303
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
303
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
304
304
  href="/test"
305
305
  rel={null}
306
306
  target="self"
@@ -378,7 +378,7 @@ exports[`renders 2 columns layout correctly 1`] = `
378
378
  </a>
379
379
  </div>
380
380
  <div
381
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
381
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
382
382
  >
383
383
  <div
384
384
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,10 +424,10 @@ exports[`renders 2 columns layout correctly 1`] = `
424
424
  </div>
425
425
  </div>
426
426
  <div
427
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
427
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
428
428
  >
429
429
  <a
430
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
430
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
431
431
  href="/test"
432
432
  rel={null}
433
433
  target="self"
@@ -505,10 +505,10 @@ exports[`renders 2 columns layout correctly 1`] = `
505
505
  </a>
506
506
  </div>
507
507
  <div
508
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
508
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
509
509
  >
510
510
  <a
511
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
511
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
512
512
  href="/test-no-image"
513
513
  rel={null}
514
514
  target="self"
@@ -574,16 +574,16 @@ exports[`renders carousel mode correctly 1`] = `
574
574
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
575
575
  >
576
576
  <div
577
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 fEcgRr"
577
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
578
578
  >
579
579
  <div
580
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
580
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
581
581
  >
582
582
  <div
583
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
583
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
584
584
  >
585
585
  <a
586
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
586
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
587
587
  href="/test"
588
588
  rel={null}
589
589
  target="self"
@@ -661,7 +661,7 @@ exports[`renders carousel mode correctly 1`] = `
661
661
  </a>
662
662
  </div>
663
663
  <div
664
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
664
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
665
665
  >
666
666
  <div
667
667
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,10 +707,10 @@ exports[`renders carousel mode correctly 1`] = `
707
707
  </div>
708
708
  </div>
709
709
  <div
710
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
710
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
711
711
  >
712
712
  <a
713
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
713
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
714
714
  href="/test"
715
715
  rel={null}
716
716
  target="self"
@@ -788,10 +788,10 @@ exports[`renders carousel mode correctly 1`] = `
788
788
  </a>
789
789
  </div>
790
790
  <div
791
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
791
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
792
792
  >
793
793
  <a
794
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
794
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
795
795
  href="/test-no-image"
796
796
  rel={null}
797
797
  target="self"
@@ -857,16 +857,16 @@ exports[`renders correctly with data prop 1`] = `
857
857
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
858
858
  >
859
859
  <div
860
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
860
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
861
861
  >
862
862
  <div
863
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
863
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
864
864
  >
865
865
  <div
866
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
866
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
867
867
  >
868
868
  <a
869
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
869
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
870
870
  href="/test"
871
871
  rel={null}
872
872
  target="self"
@@ -944,7 +944,7 @@ exports[`renders correctly with data prop 1`] = `
944
944
  </a>
945
945
  </div>
946
946
  <div
947
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
947
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
948
948
  >
949
949
  <div
950
950
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,10 +990,10 @@ exports[`renders correctly with data prop 1`] = `
990
990
  </div>
991
991
  </div>
992
992
  <div
993
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
993
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
994
994
  >
995
995
  <a
996
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
996
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
997
997
  href="/test"
998
998
  rel={null}
999
999
  target="self"
@@ -1071,10 +1071,10 @@ exports[`renders correctly with data prop 1`] = `
1071
1071
  </a>
1072
1072
  </div>
1073
1073
  <div
1074
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
1074
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
1075
1075
  >
1076
1076
  <a
1077
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
1077
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
1078
1078
  href="/test-no-image"
1079
1079
  rel={null}
1080
1080
  target="self"
package/dist/components/Molecules/CTA/CTAMultiCard/example_data.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "layout": "3 columns",
6
6
  "columnsOnMd": false,
7
7
  "paddingOptions": "Both Off",
8
- "carouselOfCards": false,
8
+ "carouselOfCards": true,
9
9
  "cards": [
10
10
  {
11
11
  "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED
@@ -131,9 +131,9 @@ exports[`renders correctly with data prop 1`] = `
131
131
  }
132
132
 
133
133
  .c3 img {
134
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
135
- -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
136
- transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
134
+ -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
135
+ -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
136
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
137
137
  }
138
138
 
139
139
  .c2 {
@@ -337,6 +337,9 @@ exports[`renders correctly with data prop 1`] = `
337
337
  -webkit-transform-origin: center;
338
338
  -ms-transform-origin: center;
339
339
  transform-origin: center;
340
+ -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
341
+ -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
342
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
340
343
  }
341
344
 
342
345
  .c3:hover,
@@ -351,9 +354,9 @@ exports[`renders correctly with data prop 1`] = `
351
354
  }
352
355
 
353
356
  .c3:hover .c4 img {
354
- -webkit-transform: scale(1.11);
355
- -ms-transform: scale(1.11);
356
- transform: scale(1.11);
357
+ -webkit-transform: scale(1.06);
358
+ -ms-transform: scale(1.06);
359
+ transform: scale(1.06);
357
360
  }
358
361
 
359
362
  .c3:hover .c13 {
@@ -619,9 +622,9 @@ exports[`renders correctly without image 1`] = `
619
622
  }
620
623
 
621
624
  .c3 img {
622
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
623
- -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
624
- transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
625
+ -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
626
+ -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
627
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
625
628
  }
626
629
 
627
630
  .c2 {
@@ -787,6 +790,9 @@ exports[`renders correctly without image 1`] = `
787
790
  -webkit-transform-origin: center;
788
791
  -ms-transform-origin: center;
789
792
  transform-origin: center;
793
+ -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
794
+ -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
795
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
790
796
  }
791
797
 
792
798
  .c3:hover,
package/dist/components/Molecules/CTA/shared/CTACard.style.js CHANGED
@@ -110,7 +110,7 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
110
110
  let {
111
111
  isInteractive
112
112
  } = _ref16;
113
- return isInteractive && (0, _styledComponents.css)(["img{transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.11);}", "{text-decoration:none;@media (min-width:", "px){color:", ";}}", "{opacity:1;}", "{@media (min-width:", "px){background:", ";}}}}"], _ref17 => {
113
+ return isInteractive && (0, _styledComponents.css)(["img{transition:transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);}@media ", "{", ";transition:transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.06);}", "{text-decoration:none;@media (min-width:", "px){color:", ";}}", "{opacity:1;}", "{@media (min-width:", "px){background:", ";}}}}"], _ref17 => {
114
114
  let {
115
115
  theme
116
116
  } = _ref17;
@@ -156,7 +156,7 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
156
156
  isCarousel,
157
157
  isFullWidth
158
158
  } = _ref24;
159
- return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;max-width:100%;margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", "}", ""], _allBreakpoints.breakpointValues.M - 1, _allBreakpoints.breakpointValues.M, _allBreakpoints.breakpointValues.L - 1, _ref25 => {
159
+ return !isCarousel && !isFullWidth && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;max-width:100%;margin:0;}@media (min-width:", "px) and (max-width:", "px){align-self:stretch;", " ", "}"], _allBreakpoints.breakpointValues.M - 1, _allBreakpoints.breakpointValues.M, _allBreakpoints.breakpointValues.L - 1, _ref25 => {
160
160
  let {
161
161
  columns
162
162
  } = _ref25;
@@ -165,55 +165,45 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
165
165
  let {
166
166
  columns
167
167
  } = _ref26;
168
- return columns === 3 ? (0, _styledComponents.css)(["@container cta-multi-card (max-width:633px){width:100%;max-width:100%;flex:1 1 100%;}"]) : (0, _styledComponents.css)(["@container cta-multi-card (max-width:705px){width:100%;max-width:100%;flex:1 1 100%;}"]);
168
+ return columns === 2 && (0, _styledComponents.css)(["@container cta-multi-card (max-width:705px){flex:0 0 100%;width:min(100%,345px);max-width:345px;margin-inline:auto;}"]);
169
169
  });
170
170
  }, _ref27 => {
171
171
  let {
172
172
  isFullWidth
173
173
  } = _ref27;
174
- return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px) and (max-width:", "px){", " align-self:stretch;}@media ", "{", "}"], _allBreakpoints.breakpointValues.L, _allBreakpoints.breakpointValues.XL - 1, _ref28 => {
174
+ return !isFullWidth && (0, _styledComponents.css)(["@media (min-width:", "px){", " align-self:stretch;}"], _allBreakpoints.breakpointValues.L, _ref28 => {
175
175
  let {
176
176
  columns
177
177
  } = _ref28;
178
178
  return columns === 3 ? (0, _styledComponents.css)(["flex:0 1 auto;width:clamp(286px,calc((100% - 4rem) / 3),363px);"]) : (0, _styledComponents.css)(["flex:0 1 auto;width:100%;"]);
179
- }, _ref29 => {
180
- let {
181
- theme
182
- } = _ref29;
183
- return theme.allBreakpoints('XL');
184
- }, _ref30 => {
185
- let {
186
- columns
187
- } = _ref30;
188
- return columns === 3 && (0, _styledComponents.css)(["width:100%;max-width:363px;"]);
189
179
  });
190
180
  });
191
181
  const CopyAndLinkSection = exports.CopyAndLinkSection = _styledComponents.default.div.withConfig({
192
182
  displayName: "CTACardstyle__CopyAndLinkSection",
193
183
  componentId: "sc-si8xx1-6"
194
- })(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref31 => {
184
+ })(["width:100%;background:", ";display:flex;flex-direction:column;padding:2rem;flex:1;min-height:0;border-radius:0 0 1rem 1rem;", ""], _ref29 => {
195
185
  let {
196
186
  theme
197
- } = _ref31;
187
+ } = _ref29;
198
188
  return theme.color('white');
199
- }, _ref32 => {
189
+ }, _ref30 => {
200
190
  let {
201
191
  isSingleCard
202
- } = _ref32;
203
- return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(200% / 3);min-width:384px;max-width:650px;flex:1;border-radius:0 1rem 1rem 0;}@media ", "{min-width:541px;max-width:790px;}@media ", "{width:789px;}"], _ref33 => {
192
+ } = _ref30;
193
+ return isSingleCard && (0, _styledComponents.css)(["@media ", "{width:calc(200% / 3);min-width:384px;max-width:650px;flex:1;border-radius:0 1rem 1rem 0;}@media ", "{min-width:541px;max-width:790px;}@media ", "{width:789px;}"], _ref31 => {
204
194
  let {
205
195
  theme
206
- } = _ref33;
196
+ } = _ref31;
207
197
  return theme.breakpoints2026('M');
208
- }, _ref34 => {
198
+ }, _ref32 => {
209
199
  let {
210
200
  theme
211
- } = _ref34;
201
+ } = _ref32;
212
202
  return theme.breakpoints2026('L');
213
- }, _ref35 => {
203
+ }, _ref33 => {
214
204
  let {
215
205
  theme
216
- } = _ref35;
206
+ } = _ref33;
217
207
  return theme.breakpoints2026('XL');
218
208
  });
219
209
  });
@@ -224,15 +214,15 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
224
214
  const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
225
215
  displayName: "CTACardstyle__CardLabel",
226
216
  componentId: "sc-si8xx1-8"
227
- })(["font-family:", ";font-size:14px;color:", ";"], _ref36 => {
217
+ })(["font-family:", ";font-size:14px;color:", ";"], _ref34 => {
228
218
  let {
229
219
  theme
230
- } = _ref36;
220
+ } = _ref34;
231
221
  return theme.fontFamilies('Montserrat');
232
- }, _ref37 => {
222
+ }, _ref35 => {
233
223
  let {
234
224
  theme
235
- } = _ref37;
225
+ } = _ref35;
236
226
  return theme.color('grey_3');
237
227
  });
238
228
  const CTA = exports.CTA = _styledComponents.default.div.withConfig({
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.6",
4
+ "version": "8.51.7",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md CHANGED
@@ -39,9 +39,23 @@ const cardsWithRenderedBody = exampleData.cards.map(card => ({
39
39
  external: null
40
40
  }));
41
41
 
42
+ const cardsFour = [
43
+ ...cardsWithRenderedBody,
44
+ {
45
+ ...cardsWithRenderedBody[0],
46
+ id: 'example-4th-card',
47
+ title: 'Fourth card',
48
+ body: (
49
+ <Text tag="p">
50
+ Fourth card (added for layout testing)
51
+ </Text>
52
+ )
53
+ }
54
+ ];
55
+
42
56
  const data = {
43
57
  ...exampleData,
44
- cards: cardsWithRenderedBody,
58
+ cards: cardsFour,
45
59
  layout: "3 columns",
46
60
  carouselOfCards: true,
47
61
  backgroundColour: "grey_medium",
@@ -56,7 +70,7 @@ const data = {
56
70
 
57
71
  ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
58
72
 
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.**
73
+ **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 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.**
60
74
 
61
75
  ```js
62
76
  import CTAMultiCard from './CTAMultiCard';
@@ -96,7 +110,7 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
96
110
  const dataWithLongText = {
97
111
  ...exampleData,
98
112
  layout: "2 columns",
99
- carouselOfCards: false,
113
+ carouselOfCards: true,
100
114
  backgroundColour: "Transparent",
101
115
  cards: cardsWithRenderedBody,
102
116
  paddingAbove: '4rem',
@@ -108,7 +122,7 @@ const dataWithLongText = {
108
122
  </div>;
109
123
  ```
110
124
 
111
- ### CTAMultiCard: Wrap behaviour (3 columns, non-carousel)
125
+ ### CTAMultiCard: Wrap behaviour (3 columns)
112
126
 
113
127
  ```js
114
128
  import CTAMultiCard from './CTAMultiCard';
@@ -133,12 +147,36 @@ const cardsWithRenderedBody = exampleData.cards.map((card, index) => ({
133
147
  external: null
134
148
  }));
135
149
 
150
+ const cardsFive = [
151
+ ...cardsWithRenderedBody,
152
+ {
153
+ ...cardsWithRenderedBody[0],
154
+ id: 'wrap-example-3',
155
+ title: 'Fourth card',
156
+ body: (
157
+ <Text tag="p">
158
+ Short body text (4)
159
+ </Text>
160
+ )
161
+ },
162
+ {
163
+ ...cardsWithRenderedBody[1],
164
+ id: 'wrap-example-4',
165
+ title: 'Fifth card',
166
+ body: (
167
+ <Text tag="p">
168
+ Short body text (5)
169
+ </Text>
170
+ )
171
+ }
172
+ ];
173
+
136
174
  const dataWrapExample = {
137
175
  ...exampleData,
138
176
  layout: "3 columns",
139
- carouselOfCards: false,
177
+ carouselOfCards: true,
140
178
  backgroundColour: "rnd_26_light_pink",
141
- cards: cardsWithRenderedBody,
179
+ cards: cardsFive,
142
180
  paddingAbove: '2rem',
143
181
  paddingBelow: '2rem'
144
182
  };
package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED
@@ -31,9 +31,13 @@ export const CardsInner = styled.div`
31
31
  `}
32
32
 
33
33
  ${({ isCarousel }) => isCarousel && css`
34
- @media ${({ theme }) => theme.allBreakpoints('L')} {
34
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
35
35
  padding-inline: 2rem;
36
36
  }
37
+
38
+ @media (min-width: ${breakpointValues.XL}px) {
39
+ padding-inline: 0;
40
+ }
37
41
  `}
38
42
  `;
39
43
 
@@ -58,8 +62,8 @@ const CardsContainer = styled.div`
58
62
  column-gap: 2rem;
59
63
  }
60
64
 
61
- /* Ensure 2-column layout behaves itself at L+ */
62
- ${({ isCarousel, columns }) => !isCarousel && columns === 2 && css`
65
+ /* Ensure 2-column layout behaves itself at L+. Applies when Splide is not active. */
66
+ ${({ columns, useSplideCarousel }) => !useSplideCarousel && columns === 2 && css`
63
67
  @media (min-width: ${breakpointValues.L}px) {
64
68
  display: grid;
65
69
  grid-template-columns: repeat(2, minmax(443px, 560px));
@@ -92,6 +96,12 @@ const CardsContainer = styled.div`
92
96
  padding: 0.75rem 1rem;
93
97
  gap: 0;
94
98
 
99
+ /* We need this so that the box shadows of the cards are not clipped off */
100
+ .splide,
101
+ .splide__track {
102
+ overflow: visible
103
+ }
104
+
95
105
  .splide__list {
96
106
  align-items: stretch;
97
107
  }
@@ -108,7 +118,7 @@ const CardsContainer = styled.div`
108
118
  margin: 0;
109
119
  max-width: 100%;
110
120
  overflow-x: auto;
111
- overflow-y: hidden;
121
+ overflow-y: visible;
112
122
  -webkit-overflow-scrolling: touch;
113
123
  scroll-snap-type: x mandatory;
114
124
  padding: 0.75rem 1rem;
@@ -122,17 +132,5 @@ const CardsContainer = styled.div`
122
132
  }
123
133
  `}
124
134
 
125
- // Desktop grid layout for XL breakpoint - 3 columns
126
- @media ${({ theme }) => theme.allBreakpoints('XL')} {
127
- ${({ columns }) => columns === 3 && css`
128
- display: grid;
129
- justify-content: center;
130
- align-items: stretch;
131
- grid-template-columns: repeat(3, minmax(0, 363px));
132
- width: 100%;
133
- margin: 0 auto;
134
- max-width: 100%;
135
- `}
136
- }
137
135
  `;
138
136
  export default CardsContainer;
package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED
@@ -11,13 +11,13 @@ exports[`handles data structure correctly 1`] = `
11
11
  className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
12
12
  >
13
13
  <div
14
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
14
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
15
15
  >
16
16
  <div
17
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
17
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
18
18
  >
19
19
  <a
20
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
20
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
21
21
  href="/test"
22
22
  rel={null}
23
23
  target="self"
@@ -95,7 +95,7 @@ exports[`handles data structure correctly 1`] = `
95
95
  </a>
96
96
  </div>
97
97
  <div
98
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
98
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
99
99
  >
100
100
  <div
101
101
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -141,10 +141,10 @@ exports[`handles data structure correctly 1`] = `
141
141
  </div>
142
142
  </div>
143
143
  <div
144
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
144
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
145
145
  >
146
146
  <a
147
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
147
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
148
148
  href="/test"
149
149
  rel={null}
150
150
  target="self"
@@ -222,10 +222,10 @@ exports[`handles data structure correctly 1`] = `
222
222
  </a>
223
223
  </div>
224
224
  <div
225
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
225
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
226
226
  >
227
227
  <a
228
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
228
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
229
229
  href="/test-no-image"
230
230
  rel={null}
231
231
  target="self"
@@ -291,16 +291,16 @@ exports[`renders 2 columns layout correctly 1`] = `
291
291
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
292
292
  >
293
293
  <div
294
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
294
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
295
295
  >
296
296
  <div
297
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 kZJZoQ"
297
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
298
298
  >
299
299
  <div
300
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
300
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
301
301
  >
302
302
  <a
303
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
303
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
304
304
  href="/test"
305
305
  rel={null}
306
306
  target="self"
@@ -378,7 +378,7 @@ exports[`renders 2 columns layout correctly 1`] = `
378
378
  </a>
379
379
  </div>
380
380
  <div
381
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
381
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
382
382
  >
383
383
  <div
384
384
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -424,10 +424,10 @@ exports[`renders 2 columns layout correctly 1`] = `
424
424
  </div>
425
425
  </div>
426
426
  <div
427
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
427
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
428
428
  >
429
429
  <a
430
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
430
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
431
431
  href="/test"
432
432
  rel={null}
433
433
  target="self"
@@ -505,10 +505,10 @@ exports[`renders 2 columns layout correctly 1`] = `
505
505
  </a>
506
506
  </div>
507
507
  <div
508
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 ipBvGj"
508
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
509
509
  >
510
510
  <a
511
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
511
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
512
512
  href="/test-no-image"
513
513
  rel={null}
514
514
  target="self"
@@ -574,16 +574,16 @@ exports[`renders carousel mode correctly 1`] = `
574
574
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
575
575
  >
576
576
  <div
577
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 fEcgRr"
577
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
578
578
  >
579
579
  <div
580
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 dhfXac"
580
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
581
581
  >
582
582
  <div
583
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
583
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
584
584
  >
585
585
  <a
586
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
586
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
587
587
  href="/test"
588
588
  rel={null}
589
589
  target="self"
@@ -661,7 +661,7 @@ exports[`renders carousel mode correctly 1`] = `
661
661
  </a>
662
662
  </div>
663
663
  <div
664
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
664
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
665
665
  >
666
666
  <div
667
667
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -707,10 +707,10 @@ exports[`renders carousel mode correctly 1`] = `
707
707
  </div>
708
708
  </div>
709
709
  <div
710
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
710
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
711
711
  >
712
712
  <a
713
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
713
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
714
714
  href="/test"
715
715
  rel={null}
716
716
  target="self"
@@ -788,10 +788,10 @@ exports[`renders carousel mode correctly 1`] = `
788
788
  </a>
789
789
  </div>
790
790
  <div
791
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 kgXkPu"
791
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
792
792
  >
793
793
  <a
794
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
794
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
795
795
  href="/test-no-image"
796
796
  rel={null}
797
797
  target="self"
@@ -857,16 +857,16 @@ exports[`renders correctly with data prop 1`] = `
857
857
  className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
858
858
  >
859
859
  <div
860
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
860
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
861
861
  >
862
862
  <div
863
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 cVaqKX"
863
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
864
864
  >
865
865
  <div
866
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
866
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
867
867
  >
868
868
  <a
869
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
869
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
870
870
  href="/test"
871
871
  rel={null}
872
872
  target="self"
@@ -944,7 +944,7 @@ exports[`renders correctly with data prop 1`] = `
944
944
  </a>
945
945
  </div>
946
946
  <div
947
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
947
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
948
948
  >
949
949
  <div
950
950
  className="CTACardstyle__CardLink-sc-si8xx1-4 lbrljd"
@@ -990,10 +990,10 @@ exports[`renders correctly with data prop 1`] = `
990
990
  </div>
991
991
  </div>
992
992
  <div
993
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
993
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
994
994
  >
995
995
  <a
996
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
996
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
997
997
  href="/test"
998
998
  rel={null}
999
999
  target="self"
@@ -1071,10 +1071,10 @@ exports[`renders correctly with data prop 1`] = `
1071
1071
  </a>
1072
1072
  </div>
1073
1073
  <div
1074
- className="CTACardstyle__CardWrapper-sc-si8xx1-5 zWgWI"
1074
+ className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
1075
1075
  >
1076
1076
  <a
1077
- className="CTACardstyle__CardLink-sc-si8xx1-4 cQAxla"
1077
+ className="CTACardstyle__CardLink-sc-si8xx1-4 eIrLL"
1078
1078
  href="/test-no-image"
1079
1079
  rel={null}
1080
1080
  target="self"
package/src/components/Molecules/CTA/CTAMultiCard/example_data.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "layout": "3 columns",
6
6
  "columnsOnMd": false,
7
7
  "paddingOptions": "Both Off",
8
- "carouselOfCards": false,
8
+ "carouselOfCards": true,
9
9
  "cards": [
10
10
  {
11
11
  "id": "fd8ef3fc-7d0d-531b-b2d2-9ac5f40d3d14",
package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap CHANGED
@@ -131,9 +131,9 @@ exports[`renders correctly with data prop 1`] = `
131
131
  }
132
132
 
133
133
  .c3 img {
134
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
135
- -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
136
- transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
134
+ -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
135
+ -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
136
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
137
137
  }
138
138
 
139
139
  .c2 {
@@ -337,6 +337,9 @@ exports[`renders correctly with data prop 1`] = `
337
337
  -webkit-transform-origin: center;
338
338
  -ms-transform-origin: center;
339
339
  transform-origin: center;
340
+ -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
341
+ -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
342
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
340
343
  }
341
344
 
342
345
  .c3:hover,
@@ -351,9 +354,9 @@ exports[`renders correctly with data prop 1`] = `
351
354
  }
352
355
 
353
356
  .c3:hover .c4 img {
354
- -webkit-transform: scale(1.11);
355
- -ms-transform: scale(1.11);
356
- transform: scale(1.11);
357
+ -webkit-transform: scale(1.06);
358
+ -ms-transform: scale(1.06);
359
+ transform: scale(1.06);
357
360
  }
358
361
 
359
362
  .c3:hover .c13 {
@@ -619,9 +622,9 @@ exports[`renders correctly without image 1`] = `
619
622
  }
620
623
 
621
624
  .c3 img {
622
- -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.22,1,0.36,1);
623
- -webkit-transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
624
- transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
625
+ -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
626
+ -webkit-transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
627
+ transition: transform 0.3s cubic-bezier(0.65,-0.19,0.37,1.16);
625
628
  }
626
629
 
627
630
  .c2 {
@@ -787,6 +790,9 @@ exports[`renders correctly without image 1`] = `
787
790
  -webkit-transform-origin: center;
788
791
  -ms-transform-origin: center;
789
792
  transform-origin: center;
793
+ -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
794
+ -webkit-transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
795
+ transition: transform 0.4s cubic-bezier(0.68,-1.15,0.265,2.35);
790
796
  }
791
797
 
792
798
  .c3:hover,
package/src/components/Molecules/CTA/shared/CTACard.style.js CHANGED
@@ -119,18 +119,20 @@ const CardLink = styled.a`
119
119
 
120
120
  ${({ isInteractive }) => isInteractive && css`
121
121
  img {
122
- transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
122
+ transition: transform 0.3s cubic-bezier(0.65, -0.19, 0.37, 1.16);
123
123
  }
124
124
 
125
125
  // Desktop-only hover effects
126
126
  @media ${({ theme }) => theme.allBreakpoints('M')} {
127
127
  ${bounceUpAnimation(true, 10, 1)};
128
+ /* override the bounceUpAnimation transition */
129
+ transition: transform 0.4s cubic-bezier(0.68, -1.15, 0.265, 2.35);
128
130
 
129
131
  &:hover {
130
132
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
131
133
 
132
134
  ${ImageWrapper} img {
133
- transform: scale(1.11);
135
+ transform: scale(1.06);
134
136
  }
135
137
 
136
138
  ${CTAText} {
@@ -210,31 +212,26 @@ const CardWrapper = styled.div`
210
212
  flex: 0 0 345px;
211
213
  max-width: 345px;
212
214
  `)}
213
- }
214
215
 
215
- /* If the CTA container is too narrow for 2 cards (<= 705px),
216
- force a single card to span full width. */
217
- ${({ columns }) => (columns === 3
218
- ? css`
219
- /* 3-col cards: 2-up needs 2*309 + 16 gap (1rem) = 634px full width at <= 633px */
220
- @container cta-multi-card (max-width: 633px) {
221
- width: 100%;
222
- max-width: 100%;
223
- flex: 1 1 100%;
224
- }
225
- `
226
- : css`
227
- /* 2-col cards: 2-up needs 2*345 + 16 gap (1rem) = 706px full width at <= 705px */
228
- @container cta-multi-card (max-width: 705px) {
229
- width: 100%;
230
- max-width: 100%;
231
- flex: 1 1 100%;
232
- }
233
- `)}
216
+ /*
217
+ * In 2 column mode, if the CTA container is too narrow to display 2-up,
218
+ * fall back to 1-per-row while keeping the card width constrained (not full-width).
219
+ * This matches the 3-col behaviour (1-per-row, centered), and avoids
220
+ * the nightmare of "full width column" cards
221
+ */
222
+ ${({ columns }) => columns === 2 && css`
223
+ @container cta-multi-card (max-width: 705px) {
224
+ flex: 0 0 100%;
225
+ width: min(100%, 345px);
226
+ max-width: 345px;
227
+ margin-inline: auto;
228
+ }
229
+ `}
230
+ }
234
231
  `}
235
232
 
236
233
  ${({ isFullWidth }) => !isFullWidth && css`
237
- @media (min-width: ${breakpointValues.L}px) and (max-width: ${breakpointValues.XL - 1}px) {
234
+ @media (min-width: ${breakpointValues.L}px) {
238
235
  ${({ columns }) => (
239
236
  columns === 3
240
237
  ? css`
@@ -252,13 +249,6 @@ const CardWrapper = styled.div`
252
249
  )}
253
250
  align-self: stretch;
254
251
  }
255
-
256
- @media ${({ theme }) => theme.allBreakpoints('XL')} {
257
- ${({ columns }) => columns === 3 && css`
258
- width: 100%;
259
- max-width: 363px;
260
- `}
261
- }
262
252
  `}
263
253
  `;
264
254