@comicrelief/component-library 8.51.7 → 8.51.8

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 (9) hide show
  1. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +11 -7
  2. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +42 -0
  3. package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +23 -33
  4. package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +12 -12
  5. package/package.json +1 -1
  6. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js +7 -4
  7. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md +42 -0
  8. package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js +15 -25
  9. package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap +12 -12
package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js CHANGED
@@ -59,11 +59,8 @@ const CTAMultiCard = _ref => {
59
59
  return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsQueryWrapper, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsSection, {
60
60
  backgroundColor: cardsBackground,
61
61
  paddingAbove: paddingAbove,
62
- paddingBelow: paddingBelow,
63
- isCarousel: carouselOfCards
64
- }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, {
65
- isCarousel: carouselOfCards
66
- }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
62
+ paddingBelow: paddingBelow
63
+ }, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsInner, null, /*#__PURE__*/_react.default.createElement(_CTAMultiCard.default, {
67
64
  columns: columns,
68
65
  isCarousel: carouselOfCards,
69
66
  useSplideCarousel: useSplideCarousel
@@ -71,8 +68,15 @@ const CTAMultiCard = _ref => {
71
68
  options: {
72
69
  arrows: false,
73
70
  pagination: false,
74
- drag: true,
75
- dragMinThreshold: 10,
71
+ // Reduce swipe "throw" as Matt felt the defaults are too much
72
+ // See https://splidejs.com/guides/options/
73
+ drag: 'free',
74
+ flickPower: 50,
75
+ perMove: 1,
76
+ dragMinThreshold: {
77
+ mouse: 50,
78
+ touch: 50
79
+ },
76
80
  gap: '1rem',
77
81
  fixedWidth: '309px',
78
82
  padding: {
package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md CHANGED
@@ -68,6 +68,48 @@ const data = {
68
68
  </div>;
69
69
  ```
70
70
 
71
+ ### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
72
+
73
+ ```js
74
+ import CTAMultiCard from './CTAMultiCard';
75
+ import Text from '../../../Atoms/Text/Text';
76
+ import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
77
+ const exampleData = require('./example_data.json');
78
+
79
+ // Map cards to include pre-rendered body content and processed image/link data
80
+ const cardsWithRenderedBody = exampleData.cards.map(card => ({
81
+ ...card,
82
+ body: (
83
+ <Text tag="p">
84
+ {card.body}
85
+ </Text>
86
+ ),
87
+ fallback: challengeExampleImage,
88
+ imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
89
+ images: `${challengeExampleImage} 678w`,
90
+ bgColour: "white",
91
+ description: "",
92
+ target: "self",
93
+ external: null
94
+ }));
95
+
96
+ const cardsTwo = cardsWithRenderedBody.slice(0, 2);
97
+
98
+ const dataTwoCards = {
99
+ ...exampleData,
100
+ cards: cardsTwo,
101
+ layout: "2 columns",
102
+ carouselOfCards: true,
103
+ backgroundColour: "grey_medium",
104
+ paddingAbove: '0rem',
105
+ paddingBelow: '0rem'
106
+ };
107
+
108
+ <div style={{ background: '#E1E2E3', width: '100%' }}>
109
+ <CTAMultiCard data={dataTwoCards} />
110
+ </div>;
111
+ ```
112
+
71
113
  ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
72
114
 
73
115
  **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.**
package/dist/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED
@@ -14,7 +14,7 @@ const CardsQueryWrapper = exports.CardsQueryWrapper = _styledComponents.default.
14
14
  const CardsSection = exports.CardsSection = _styledComponents.default.div.withConfig({
15
15
  displayName: "CTAMultiCardstyle__CardsSection",
16
16
  componentId: "sc-gsdqzv-1"
17
- })(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";"], _ref => {
17
+ })(["width:100%;background:", ";padding-top:", ";padding-bottom:", ";padding-inline:1rem;@media ", "{padding-inline:2rem;}@media ", "{padding-inline:4rem;}"], _ref => {
18
18
  let {
19
19
  theme,
20
20
  backgroundColor
@@ -30,59 +30,49 @@ const CardsSection = exports.CardsSection = _styledComponents.default.div.withCo
30
30
  paddingBelow
31
31
  } = _ref3;
32
32
  return paddingBelow;
33
- });
34
- const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
35
- displayName: "CTAMultiCardstyle__CardsInner",
36
- componentId: "sc-gsdqzv-2"
37
- })(["width:100%;max-width:1152px;margin:0 auto;", " ", ""], _ref4 => {
33
+ }, _ref4 => {
38
34
  let {
39
- isCarousel
35
+ theme
40
36
  } = _ref4;
41
- return !isCarousel && (0, _styledComponents.css)(["padding-inline:1rem;@media ", "{padding-inline:2rem;}"], _ref5 => {
42
- let {
43
- theme
44
- } = _ref5;
45
- return theme.allBreakpoints('M');
46
- });
47
- }, _ref6 => {
37
+ return theme.breakpoints2026('M');
38
+ }, _ref5 => {
48
39
  let {
49
- isCarousel
50
- } = _ref6;
51
- return isCarousel && (0, _styledComponents.css)(["@media ", "{padding-inline:2rem;}@media (min-width:", "px){padding-inline:0;}"], _ref7 => {
52
- let {
53
- theme
54
- } = _ref7;
55
- return theme.allBreakpoints('M');
56
- }, _allBreakpoints.breakpointValues.XL);
40
+ theme
41
+ } = _ref5;
42
+ return theme.breakpoints2026('L');
57
43
  });
44
+ const CardsInner = exports.CardsInner = _styledComponents.default.div.withConfig({
45
+ displayName: "CTAMultiCardstyle__CardsInner",
46
+ componentId: "sc-gsdqzv-2"
47
+ })(["width:100%;max-width:1152px;margin:0 auto;"]);
58
48
  const CardsContainer = _styledComponents.default.div.withConfig({
59
49
  displayName: "CTAMultiCardstyle__CardsContainer",
60
50
  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;}", " ", ""], _ref8 => {
51
+ })(["display:flex;flex-direction:column;width:100%;gap:1rem;@media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;}@media ", "{column-gap:2rem;row-gap:2rem;}", " ", ""], _ref6 => {
62
52
  let {
63
53
  theme
64
- } = _ref8;
54
+ } = _ref6;
65
55
  return theme.allBreakpoints('M');
66
- }, _ref9 => {
56
+ }, _ref7 => {
67
57
  let {
68
58
  theme
69
- } = _ref9;
59
+ } = _ref7;
70
60
  return theme.allBreakpoints('L');
71
- }, _ref10 => {
61
+ }, _ref8 => {
72
62
  let {
73
63
  columns,
74
64
  useSplideCarousel
75
- } = _ref10;
65
+ } = _ref8;
76
66
  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
- }, _ref11 => {
67
+ }, _ref9 => {
78
68
  let {
79
69
  isCarousel
80
- } = _ref11;
81
- return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref12 => {
70
+ } = _ref9;
71
+ return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){", "}"], _allBreakpoints.breakpointValues.L - 1, _ref10 => {
82
72
  let {
83
73
  useSplideCarousel
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,.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;}"]);
74
+ } = _ref10;
75
+ return useSplideCarousel ? (0, _styledComponents.css)(["display:block;cursor:grab;width:100%;max-width:100%;gap:0;.splide,.splide__track{overflow:visible;}.splide__list{align-items:stretch;}.splide:not(.is-overflow) .splide__list{justify-content:center;}.splide__slide{display:flex;height:auto;}"]) : (0, _styledComponents.css)(["flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}"]);
86
76
  });
87
77
  });
88
78
  var _default = exports.default = CardsContainer;
package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED
@@ -5,13 +5,13 @@ exports[`handles data structure correctly 1`] = `
5
5
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
6
6
  >
7
7
  <div
8
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
8
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
9
9
  >
10
10
  <div
11
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
11
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
12
12
  >
13
13
  <div
14
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
14
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
15
15
  >
16
16
  <div
17
17
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
@@ -288,13 +288,13 @@ exports[`renders 2 columns layout correctly 1`] = `
288
288
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
289
289
  >
290
290
  <div
291
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
291
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
292
292
  >
293
293
  <div
294
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
294
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
295
295
  >
296
296
  <div
297
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
297
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
298
298
  >
299
299
  <div
300
300
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
@@ -571,13 +571,13 @@ exports[`renders carousel mode correctly 1`] = `
571
571
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
572
572
  >
573
573
  <div
574
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
574
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
575
575
  >
576
576
  <div
577
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
577
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
578
578
  >
579
579
  <div
580
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
580
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
581
581
  >
582
582
  <div
583
583
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
@@ -854,13 +854,13 @@ exports[`renders correctly with data prop 1`] = `
854
854
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
855
855
  >
856
856
  <div
857
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
857
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
858
858
  >
859
859
  <div
860
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
860
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
861
861
  >
862
862
  <div
863
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
863
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
864
864
  >
865
865
  <div
866
866
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
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.7",
4
+ "version": "8.51.8",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js CHANGED
@@ -56,9 +56,8 @@ const CTAMultiCard = ({ data }) => {
56
56
  backgroundColor={cardsBackground}
57
57
  paddingAbove={paddingAbove}
58
58
  paddingBelow={paddingBelow}
59
- isCarousel={carouselOfCards}
60
59
  >
61
- <CardsInner isCarousel={carouselOfCards}>
60
+ <CardsInner>
62
61
  <CardsContainer
63
62
  columns={columns}
64
63
  isCarousel={carouselOfCards}
@@ -69,8 +68,12 @@ const CTAMultiCard = ({ data }) => {
69
68
  options={{
70
69
  arrows: false,
71
70
  pagination: false,
72
- drag: true,
73
- dragMinThreshold: 10,
71
+ // Reduce swipe "throw" as Matt felt the defaults are too much
72
+ // See https://splidejs.com/guides/options/
73
+ drag: 'free',
74
+ flickPower: 50,
75
+ perMove: 1,
76
+ dragMinThreshold: { mouse: 50, touch: 50 },
74
77
  gap: '1rem',
75
78
  fixedWidth: '309px',
76
79
  padding: { left: '0px', right: '0px' }
package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.md CHANGED
@@ -68,6 +68,48 @@ const data = {
68
68
  </div>;
69
69
  ```
70
70
 
71
+ ### CTAMultiCard: Carousel with just 2 cards (2 columns layout)
72
+
73
+ ```js
74
+ import CTAMultiCard from './CTAMultiCard';
75
+ import Text from '../../../Atoms/Text/Text';
76
+ import challengeExampleImage from '../../../../styleguide/assets/challenge-1.jpg';
77
+ const exampleData = require('./example_data.json');
78
+
79
+ // Map cards to include pre-rendered body content and processed image/link data
80
+ const cardsWithRenderedBody = exampleData.cards.map(card => ({
81
+ ...card,
82
+ body: (
83
+ <Text tag="p">
84
+ {card.body}
85
+ </Text>
86
+ ),
87
+ fallback: challengeExampleImage,
88
+ imageLow: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAcIBAb/xAAjEAACAgIBBAIDAAAAAAAAAAABAgMEABEGBRIhMQdBE1Fh/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgT/xAAaEQADAQADAAAAAAAAAAAAAAAAAQIDERIT/9oADAMBAAIRAxEAPwBzRcrjVY+0tonyT41nG8y+SLFTkgpQTVFpoqiRZGHc2/egf4RrMM12OHpNi3LsrAjO2vsKCcQtvkbTW570sMUt6xphJKnd+Ma9A78ZRWcS+SWNLpNMqAdQidVaSxErEA6ZgCNj9YZNPTOTpJW7+ovdlnLHyjgAD6GGPug+bP/Z",
89
+ images: `${challengeExampleImage} 678w`,
90
+ bgColour: "white",
91
+ description: "",
92
+ target: "self",
93
+ external: null
94
+ }));
95
+
96
+ const cardsTwo = cardsWithRenderedBody.slice(0, 2);
97
+
98
+ const dataTwoCards = {
99
+ ...exampleData,
100
+ cards: cardsTwo,
101
+ layout: "2 columns",
102
+ carouselOfCards: true,
103
+ backgroundColour: "grey_medium",
104
+ paddingAbove: '0rem',
105
+ paddingBelow: '0rem'
106
+ };
107
+
108
+ <div style={{ background: '#E1E2E3', width: '100%' }}>
109
+ <CTAMultiCard data={dataTwoCards} />
110
+ </div>;
111
+ ```
112
+
71
113
  ### CTAMultiCard: Desktop Grid View (2 columns) with large padding
72
114
 
73
115
  **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.**
package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.style.js CHANGED
@@ -16,29 +16,19 @@ export const CardsSection = styled.div`
16
16
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
17
17
  padding-top: ${({ paddingAbove }) => paddingAbove};
18
18
  padding-bottom: ${({ paddingBelow }) => paddingBelow};
19
+ padding-inline: 1rem;
20
+ @media ${({ theme }) => theme.breakpoints2026('M')} {
21
+ padding-inline: 2rem;
22
+ }
23
+ @media ${({ theme }) => theme.breakpoints2026('L')} {
24
+ padding-inline: 4rem;
25
+ }
19
26
  `;
20
27
 
21
28
  export const CardsInner = styled.div`
22
29
  width: 100%;
23
30
  max-width: 1152px;
24
31
  margin: 0 auto;
25
-
26
- ${({ isCarousel }) => !isCarousel && css`
27
- padding-inline: 1rem;
28
- @media ${({ theme }) => theme.allBreakpoints('M')} {
29
- padding-inline: 2rem;
30
- }
31
- `}
32
-
33
- ${({ isCarousel }) => isCarousel && css`
34
- @media ${({ theme }) => theme.allBreakpoints('M')} {
35
- padding-inline: 2rem;
36
- }
37
-
38
- @media (min-width: ${breakpointValues.XL}px) {
39
- padding-inline: 0;
40
- }
41
- `}
42
32
  `;
43
33
 
44
34
  const CardsContainer = styled.div`
@@ -53,13 +43,11 @@ const CardsContainer = styled.div`
53
43
  flex-wrap: wrap;
54
44
  justify-content: center;
55
45
  align-items: stretch;
56
- width: 100%;
57
- max-width: 100%;
58
- margin: 0 auto;
59
46
  }
60
47
 
61
48
  @media ${({ theme }) => theme.allBreakpoints('L')} {
62
49
  column-gap: 2rem;
50
+ row-gap: 2rem;
63
51
  }
64
52
 
65
53
  /* Ensure 2-column layout behaves itself at L+. Applies when Splide is not active. */
@@ -91,21 +79,25 @@ const CardsContainer = styled.div`
91
79
  display: block;
92
80
  cursor: grab;
93
81
  width: 100%;
94
- margin: 0;
95
82
  max-width: 100%;
96
- padding: 0.75rem 1rem;
97
83
  gap: 0;
98
84
 
99
85
  /* We need this so that the box shadows of the cards are not clipped off */
100
86
  .splide,
101
87
  .splide__track {
102
- overflow: visible
88
+ overflow: visible;
103
89
  }
104
90
 
105
91
  .splide__list {
106
92
  align-items: stretch;
107
93
  }
108
94
 
95
+ /* Center slides when there is no overflow (e.g. only 1–2 cards in
96
+ a gap where we'd probably fit 3 or more). */
97
+ .splide:not(.is-overflow) .splide__list {
98
+ justify-content: center;
99
+ }
100
+
109
101
  .splide__slide {
110
102
  display: flex;
111
103
  height: auto;
@@ -115,13 +107,11 @@ const CardsContainer = styled.div`
115
107
  flex-wrap: nowrap;
116
108
  justify-content: flex-start;
117
109
  width: 100%;
118
- margin: 0;
119
110
  max-width: 100%;
120
111
  overflow-x: auto;
121
112
  overflow-y: visible;
122
113
  -webkit-overflow-scrolling: touch;
123
114
  scroll-snap-type: x mandatory;
124
- padding: 0.75rem 1rem;
125
115
 
126
116
  scrollbar-width: none;
127
117
  -ms-overflow-style: none;
package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap CHANGED
@@ -5,13 +5,13 @@ exports[`handles data structure correctly 1`] = `
5
5
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
6
6
  >
7
7
  <div
8
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 ehBqzi"
8
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 kCDlNQ"
9
9
  >
10
10
  <div
11
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 jdzsUU"
11
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
12
12
  >
13
13
  <div
14
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 icRtAH"
14
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 gAuYUa"
15
15
  >
16
16
  <div
17
17
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 jZEwGJ"
@@ -288,13 +288,13 @@ exports[`renders 2 columns layout correctly 1`] = `
288
288
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
289
289
  >
290
290
  <div
291
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
291
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
292
292
  >
293
293
  <div
294
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
294
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
295
295
  >
296
296
  <div
297
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 bWeGAp"
297
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 jrSYsC"
298
298
  >
299
299
  <div
300
300
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 xdzCi"
@@ -571,13 +571,13 @@ exports[`renders carousel mode correctly 1`] = `
571
571
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
572
572
  >
573
573
  <div
574
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
574
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
575
575
  >
576
576
  <div
577
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
577
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
578
578
  >
579
579
  <div
580
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
580
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
581
581
  >
582
582
  <div
583
583
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"
@@ -854,13 +854,13 @@ exports[`renders correctly with data prop 1`] = `
854
854
  className="CTAMultiCardstyle__CardsQueryWrapper-sc-gsdqzv-0 qqegF"
855
855
  >
856
856
  <div
857
- className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 eznbgX"
857
+ className="CTAMultiCardstyle__CardsSection-sc-gsdqzv-1 cywbFh"
858
858
  >
859
859
  <div
860
- className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 kjrrbi"
860
+ className="CTAMultiCardstyle__CardsInner-sc-gsdqzv-2 iFzzWM"
861
861
  >
862
862
  <div
863
- className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 eomXiE"
863
+ className="CTAMultiCardstyle__CardsContainer-sc-gsdqzv-3 fqrDP"
864
864
  >
865
865
  <div
866
866
  className="CTACardstyle__CardWrapper-sc-si8xx1-5 eieQSs"