@comicrelief/component-library 8.25.3 → 8.25.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/Molecules/CardDs/CardDs.md +17 -3
  2. package/dist/components/Molecules/CardDs/CardDs.style.js +9 -4
  3. package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +14 -2
  4. package/package.json +1 -1
  5. package/src/components/Molecules/CardDs/CardDs.md +17 -3
  6. package/src/components/Molecules/CardDs/CardDs.style.js +5 -1
  7. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +14 -2
package/dist/components/Molecules/CardDs/CardDs.md CHANGED
@@ -27,9 +27,23 @@ import { Internal } from '../../Atoms/Icons/index';
27
27
  icon={<Internal colour="white" />}
28
28
  >
29
29
  <Text tag="h3" color="purple" size="xl">
30
- Title
30
+ EDINBURGH MARATHON
31
+ </Text>
32
+ <Text size="m" weight="bold">
33
+ 24 May 2026
34
+ </Text>
35
+ <Text tag="p" size="m" weight="bold" style={{marginTop: "1rem"}}>
36
+ Marathon
37
+ </Text>
38
+ <Text tag="p" size="m">
39
+ Voted the fastest marathon in the UK, Edinburgh Marathon is perfect for first-timers and those seeking a personal best whilst soaking in the picturesque views of the East Lothian coastline.
40
+ </Text>
41
+ <Text tag="p" size="m">
42
+ Registration fee: £39
43
+ </Text>
44
+ <Text tag="p" size="m">
45
+ Sponsorship pledge: £500
31
46
  </Text>
32
- <Text tag="p">Text body copy description</Text>
33
47
  </CardDs>
34
48
  </div>;
35
49
  ```
@@ -118,7 +132,7 @@ import { Internal } from '../../Atoms/Icons/index';
118
132
  ```
119
133
 
120
134
 
121
- ### CardDs: only column view for use in CardsCarousel
135
+ ### CardDs: Only column view for use in CardsCarousel
122
136
  ```js
123
137
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
124
138
  import Link from '../../Atoms/Link/Link';
package/dist/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -84,15 +84,20 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
84
84
  const CTA = exports.CTA = _styledComponents.default.div.withConfig({
85
85
  displayName: "CardDsstyle__CTA",
86
86
  componentId: "sc-1m4yp5m-4"
87
- })(["position:absolute;right:3rem;bottom:-1.5rem;", ";", ";"], (0, _zIndex.default)('medium'), _ref11 => {
87
+ })(["position:absolute;right:3.5rem;bottom:-1.5rem;", ";@media ", "{right:2rem;}", ";"], (0, _zIndex.default)('medium'), _ref11 => {
88
88
  let {
89
- isCarousel,
90
89
  theme
91
90
  } = _ref11;
92
- return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:-3rem;", ";}"], theme.allBreakpoints('M'), _ref12 => {
91
+ return theme.allBreakpoints('M');
92
+ }, _ref12 => {
93
+ let {
94
+ isCarousel,
95
+ theme
96
+ } = _ref12;
97
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:-3rem;", ";}"], theme.allBreakpoints('M'), _ref13 => {
93
98
  let {
94
99
  hasImage
95
- } = _ref12;
100
+ } = _ref13;
96
101
  return !hasImage && 'bottom: -1.5rem;';
97
102
  });
98
103
  });
package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -114,7 +114,7 @@ exports[`renders Column view correctly 1`] = `
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 3rem;
117
+ right: 3.5rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -178,6 +178,12 @@ exports[`renders Column view correctly 1`] = `
178
178
  }
179
179
  }
180
180
 
181
+ @media (min-width:740px) {
182
+ .c6 {
183
+ right: 2rem;
184
+ }
185
+ }
186
+
181
187
  <div
182
188
  className="c0"
183
189
  >
@@ -366,7 +372,7 @@ exports[`renders correctly 1`] = `
366
372
 
367
373
  .c6 {
368
374
  position: absolute;
369
- right: 3rem;
375
+ right: 3.5rem;
370
376
  bottom: -1.5rem;
371
377
  z-index: 2;
372
378
  }
@@ -457,6 +463,12 @@ exports[`renders correctly 1`] = `
457
463
  }
458
464
  }
459
465
 
466
+ @media (min-width:740px) {
467
+ .c6 {
468
+ right: 2rem;
469
+ }
470
+ }
471
+
460
472
  @media (min-width:740px) {
461
473
  .c6 {
462
474
  bottom: -3rem;
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.25.3",
4
+ "version": "8.25.4",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Molecules/CardDs/CardDs.md CHANGED
@@ -27,9 +27,23 @@ import { Internal } from '../../Atoms/Icons/index';
27
27
  icon={<Internal colour="white" />}
28
28
  >
29
29
  <Text tag="h3" color="purple" size="xl">
30
- Title
30
+ EDINBURGH MARATHON
31
+ </Text>
32
+ <Text size="m" weight="bold">
33
+ 24 May 2026
34
+ </Text>
35
+ <Text tag="p" size="m" weight="bold" style={{marginTop: "1rem"}}>
36
+ Marathon
37
+ </Text>
38
+ <Text tag="p" size="m">
39
+ Voted the fastest marathon in the UK, Edinburgh Marathon is perfect for first-timers and those seeking a personal best whilst soaking in the picturesque views of the East Lothian coastline.
40
+ </Text>
41
+ <Text tag="p" size="m">
42
+ Registration fee: £39
43
+ </Text>
44
+ <Text tag="p" size="m">
45
+ Sponsorship pledge: £500
31
46
  </Text>
32
- <Text tag="p">Text body copy description</Text>
33
47
  </CardDs>
34
48
  </div>;
35
49
  ```
@@ -118,7 +132,7 @@ import { Internal } from '../../Atoms/Icons/index';
118
132
  ```
119
133
 
120
134
 
121
- ### CardDs: only column view for use in CardsCarousel
135
+ ### CardDs: Only column view for use in CardsCarousel
122
136
  ```js
123
137
  const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
124
138
  import Link from '../../Atoms/Link/Link';
package/src/components/Molecules/CardDs/CardDs.style.js CHANGED
@@ -86,11 +86,15 @@ const Copy = styled.div`
86
86
 
87
87
  const CTA = styled.div`
88
88
  position: absolute;
89
- right: 3rem;
89
+ right: 3.5rem;
90
90
  bottom: -1.5rem;
91
91
 
92
92
  ${zIndex('medium')};
93
93
 
94
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
95
+ right: 2rem;
96
+ }
97
+
94
98
  ${({ isCarousel, theme }) => !isCarousel && css`
95
99
  @media ${theme.allBreakpoints('M')} {
96
100
  bottom: -3rem;
package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -114,7 +114,7 @@ exports[`renders Column view correctly 1`] = `
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 3rem;
117
+ right: 3.5rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -178,6 +178,12 @@ exports[`renders Column view correctly 1`] = `
178
178
  }
179
179
  }
180
180
 
181
+ @media (min-width:740px) {
182
+ .c6 {
183
+ right: 2rem;
184
+ }
185
+ }
186
+
181
187
  <div
182
188
  className="c0"
183
189
  >
@@ -366,7 +372,7 @@ exports[`renders correctly 1`] = `
366
372
 
367
373
  .c6 {
368
374
  position: absolute;
369
- right: 3rem;
375
+ right: 3.5rem;
370
376
  bottom: -1.5rem;
371
377
  z-index: 2;
372
378
  }
@@ -457,6 +463,12 @@ exports[`renders correctly 1`] = `
457
463
  }
458
464
  }
459
465
 
466
+ @media (min-width:740px) {
467
+ .c6 {
468
+ right: 2rem;
469
+ }
470
+ }
471
+
460
472
  @media (min-width:740px) {
461
473
  .c6 {
462
474
  bottom: -3rem;