@comicrelief/component-library 8.25.2 → 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 +18 -14
  3. package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +21 -9
  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 +21 -18
  7. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +21 -9
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
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.MediaLink = exports.Image = exports.Copy = exports.Container = exports.CTA = void 0;
9
9
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
10
- var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
11
10
  var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
12
11
  const Container = exports.Container = _styledComponents.default.div.withConfig({
13
12
  displayName: "CardDsstyle__Container",
@@ -33,13 +32,13 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
33
32
  const Image = exports.Image = _styledComponents.default.div.withConfig({
34
33
  displayName: "CardDsstyle__Image",
35
34
  componentId: "sc-1m4yp5m-1"
36
- })(["height:auto;margin:0 0 0 ", ";", ";img{border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);}"], (0, _spacing.default)('m'), _ref4 => {
35
+ })(["height:auto;margin:0 0 0 1.5rem;", ";img{border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);}"], _ref4 => {
37
36
  let {
38
37
  isCarousel,
39
38
  theme
40
39
  } = _ref4;
41
- return !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:0 -", " 0 ", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
42
- }, (0, _spacing.default)('md'), (0, _spacing.default)('md'));
40
+ return !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:0 -1.5rem 0 1.5rem;}"], theme.allBreakpoints('M'));
41
+ });
43
42
  const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
44
43
  displayName: "CardDsstyle__MediaLink",
45
44
  componentId: "sc-1m4yp5m-2"
@@ -58,18 +57,18 @@ const MediaLink = exports.MediaLink = _styledComponents.default.a.withConfig({
58
57
  const Copy = exports.Copy = _styledComponents.default.div.withConfig({
59
58
  displayName: "CardDsstyle__Copy",
60
59
  componentId: "sc-1m4yp5m-3"
61
- })(["padding:", ";", ";display:flex;flex-direction:column;border-radius:", ";box-shadow:0 0 ", " rgba(0,0,0,0.15);background:", ";margin:0 ", " 0 0;@media ", "{height:100%;}", ";", ";"], (0, _spacing.default)('l'), _ref7 => {
60
+ })(["padding:2rem;", ";display:flex;flex-direction:column;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);background:", ";margin:0 1.5rem 0 0;@media ", "{height:100%;}", ";", ";"], _ref7 => {
62
61
  let {
63
62
  hasLink
64
63
  } = _ref7;
65
- return hasLink && "padding-bottom: ".concat((0, _spacing.default)('xl'));
66
- }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref8 => {
64
+ return hasLink && 'padding-bottom: 4rem';
65
+ }, _ref8 => {
67
66
  let {
68
67
  theme,
69
68
  backgroundColor
70
69
  } = _ref8;
71
70
  return theme.color(backgroundColor);
72
- }, (0, _spacing.default)('m'), _ref9 => {
71
+ }, _ref9 => {
73
72
  let {
74
73
  theme
75
74
  } = _ref9;
@@ -80,20 +79,25 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
80
79
  isCarousel,
81
80
  theme
82
81
  } = _ref10;
83
- return hasImage && (0, _styledComponents.css)(["margin-top:calc(-2 * ", ");min-height:calc(5 * ", ");", ";@media ", "{margin:calc(-2 * ", ") 0 -", " 0;width:100%;}"], (0, _spacing.default)('m'), (0, _spacing.default)('l'), !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:", " 0 -", " -", ";width:calc(50% + 6rem);}"], theme.allBreakpoints('M'), (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('m')), theme.allBreakpoints('XL'), (0, _spacing.default)('m'), (0, _spacing.default)('m'));
82
+ return hasImage && (0, _styledComponents.css)(["margin-top:-3rem;min-height:10rem;", ";@media ", "{margin:-3rem 0 -1.5rem 0;width:100%;}"], !isCarousel && (0, _styledComponents.css)(["@media ", "{margin:1.5rem 0 -1.5rem -1.5rem;width:calc(50% + 6rem);}"], theme.allBreakpoints('M')), theme.allBreakpoints('XL'));
84
83
  });
85
84
  const CTA = exports.CTA = _styledComponents.default.div.withConfig({
86
85
  displayName: "CardDsstyle__CTA",
87
86
  componentId: "sc-1m4yp5m-4"
88
- })(["position:absolute;right:", ";bottom:-", ";", ";", ";"], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _zIndex.default)('medium'), _ref11 => {
87
+ })(["position:absolute;right:3.5rem;bottom:-1.5rem;", ";@media ", "{right:2rem;}", ";"], (0, _zIndex.default)('medium'), _ref11 => {
89
88
  let {
90
- isCarousel,
91
89
  theme
92
90
  } = _ref11;
93
- return !isCarousel && (0, _styledComponents.css)(["@media ", "{bottom:calc(-1 * (", " + ", "));", ";}"], theme.allBreakpoints('M'), (0, _spacing.default)('l'), (0, _spacing.default)('md'), _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 => {
94
98
  let {
95
99
  hasImage
96
- } = _ref12;
97
- return !hasImage && "bottom: -".concat((0, _spacing.default)('m'), ";");
100
+ } = _ref13;
101
+ return !hasImage && 'bottom: -1.5rem;';
98
102
  });
99
103
  });
package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -108,13 +108,13 @@ exports[`renders Column view correctly 1`] = `
108
108
  background: #FFFFFF;
109
109
  margin: 0 1.5rem 0 0;
110
110
  z-index: 1;
111
- margin-top: calc(-2 * 1.5rem);
112
- min-height: calc(5 * 2rem);
111
+ margin-top: -3rem;
112
+ min-height: 10rem;
113
113
  }
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 1.5rem;
117
+ right: 3.5rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -173,11 +173,17 @@ exports[`renders Column view correctly 1`] = `
173
173
 
174
174
  @media (min-width:1440px) {
175
175
  .c5 {
176
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
176
+ margin: -3rem 0 -1.5rem 0;
177
177
  width: 100%;
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
  >
@@ -360,13 +366,13 @@ exports[`renders correctly 1`] = `
360
366
  background: #FFFFFF;
361
367
  margin: 0 1.5rem 0 0;
362
368
  z-index: 1;
363
- margin-top: calc(-2 * 1.5rem);
364
- min-height: calc(5 * 2rem);
369
+ margin-top: -3rem;
370
+ min-height: 10rem;
365
371
  }
366
372
 
367
373
  .c6 {
368
374
  position: absolute;
369
- right: 1.5rem;
375
+ right: 3.5rem;
370
376
  bottom: -1.5rem;
371
377
  z-index: 2;
372
378
  }
@@ -452,14 +458,20 @@ exports[`renders correctly 1`] = `
452
458
 
453
459
  @media (min-width:1440px) {
454
460
  .c5 {
455
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
461
+ margin: -3rem 0 -1.5rem 0;
456
462
  width: 100%;
457
463
  }
458
464
  }
459
465
 
460
466
  @media (min-width:740px) {
461
467
  .c6 {
462
- bottom: calc(-1 * (2rem + 1rem));
468
+ right: 2rem;
469
+ }
470
+ }
471
+
472
+ @media (min-width:740px) {
473
+ .c6 {
474
+ bottom: -3rem;
463
475
  }
464
476
  }
465
477
 
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.2",
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
@@ -1,5 +1,4 @@
1
1
  import styled, { css } from 'styled-components';
2
- import spacing from '../../../theme/shared/spacing';
3
2
  import zIndex from '../../../theme/shared/zIndex';
4
3
 
5
4
  const Container = styled.div`
@@ -23,17 +22,17 @@ const Container = styled.div`
23
22
 
24
23
  const Image = styled.div`
25
24
  height: auto;
26
- margin: 0 0 0 ${spacing('m')};
25
+ margin: 0 0 0 1.5rem;
27
26
 
28
27
  ${({ isCarousel, theme }) => !isCarousel && css`
29
28
  @media ${theme.allBreakpoints('M')} {
30
- margin: 0 -${spacing('m')} 0 ${spacing('m')};
29
+ margin: 0 -1.5rem 0 1.5rem;
31
30
  }
32
31
  `};
33
32
 
34
33
  img {
35
- border-radius: ${spacing('md')};
36
- box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
34
+ border-radius: 1rem;
35
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
37
36
  }
38
37
  `;
39
38
 
@@ -52,14 +51,14 @@ const MediaLink = styled.a`
52
51
  `;
53
52
 
54
53
  const Copy = styled.div`
55
- padding: ${spacing('l')};
56
- ${({ hasLink }) => hasLink && `padding-bottom: ${spacing('xl')}`};
54
+ padding: 2rem;
55
+ ${({ hasLink }) => hasLink && 'padding-bottom: 4rem'};
57
56
  display: flex;
58
57
  flex-direction: column;
59
- border-radius: ${spacing('md')};
60
- box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
58
+ border-radius: 1rem;
59
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
61
60
  background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
62
- margin: 0 ${spacing('m')} 0 0;
61
+ margin: 0 1.5rem 0 0;
63
62
 
64
63
  @media ${({ theme }) => theme.allBreakpoints('XL')} {
65
64
  height: 100%;
@@ -68,18 +67,18 @@ const Copy = styled.div`
68
67
  ${zIndex('low')};
69
68
 
70
69
  ${({ hasImage, isCarousel, theme }) => hasImage && css`
71
- margin-top: calc(-2 * ${spacing('m')});
72
- min-height: calc(5 * ${spacing('l')});
70
+ margin-top: -3rem;
71
+ min-height: 10rem;
73
72
 
74
73
  ${!isCarousel && css`
75
74
  @media ${theme.allBreakpoints('M')} {
76
- margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
75
+ margin: 1.5rem 0 -1.5rem -1.5rem;
77
76
  width: calc(50% + 6rem);
78
77
  }
79
78
  `};
80
79
 
81
80
  @media ${theme.allBreakpoints('XL')} {
82
- margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
81
+ margin: -3rem 0 -1.5rem 0;
83
82
  width: 100%;
84
83
  }
85
84
  `};
@@ -87,15 +86,19 @@ const Copy = styled.div`
87
86
 
88
87
  const CTA = styled.div`
89
88
  position: absolute;
90
- right: ${spacing('m')};
91
- bottom: -${spacing('m')};
89
+ right: 3.5rem;
90
+ bottom: -1.5rem;
92
91
 
93
92
  ${zIndex('medium')};
94
93
 
94
+ @media ${({ theme }) => theme.allBreakpoints('M')} {
95
+ right: 2rem;
96
+ }
97
+
95
98
  ${({ isCarousel, theme }) => !isCarousel && css`
96
99
  @media ${theme.allBreakpoints('M')} {
97
- bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
98
- ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
100
+ bottom: -3rem;
101
+ ${({ hasImage }) => !hasImage && 'bottom: -1.5rem;'};
99
102
  }
100
103
  `};
101
104
  `;
package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap CHANGED
@@ -108,13 +108,13 @@ exports[`renders Column view correctly 1`] = `
108
108
  background: #FFFFFF;
109
109
  margin: 0 1.5rem 0 0;
110
110
  z-index: 1;
111
- margin-top: calc(-2 * 1.5rem);
112
- min-height: calc(5 * 2rem);
111
+ margin-top: -3rem;
112
+ min-height: 10rem;
113
113
  }
114
114
 
115
115
  .c6 {
116
116
  position: absolute;
117
- right: 1.5rem;
117
+ right: 3.5rem;
118
118
  bottom: -1.5rem;
119
119
  z-index: 2;
120
120
  }
@@ -173,11 +173,17 @@ exports[`renders Column view correctly 1`] = `
173
173
 
174
174
  @media (min-width:1440px) {
175
175
  .c5 {
176
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
176
+ margin: -3rem 0 -1.5rem 0;
177
177
  width: 100%;
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
  >
@@ -360,13 +366,13 @@ exports[`renders correctly 1`] = `
360
366
  background: #FFFFFF;
361
367
  margin: 0 1.5rem 0 0;
362
368
  z-index: 1;
363
- margin-top: calc(-2 * 1.5rem);
364
- min-height: calc(5 * 2rem);
369
+ margin-top: -3rem;
370
+ min-height: 10rem;
365
371
  }
366
372
 
367
373
  .c6 {
368
374
  position: absolute;
369
- right: 1.5rem;
375
+ right: 3.5rem;
370
376
  bottom: -1.5rem;
371
377
  z-index: 2;
372
378
  }
@@ -452,14 +458,20 @@ exports[`renders correctly 1`] = `
452
458
 
453
459
  @media (min-width:1440px) {
454
460
  .c5 {
455
- margin: calc(-2 * 1.5rem) 0 -1.5rem 0;
461
+ margin: -3rem 0 -1.5rem 0;
456
462
  width: 100%;
457
463
  }
458
464
  }
459
465
 
460
466
  @media (min-width:740px) {
461
467
  .c6 {
462
- bottom: calc(-1 * (2rem + 1rem));
468
+ right: 2rem;
469
+ }
470
+ }
471
+
472
+ @media (min-width:740px) {
473
+ .c6 {
474
+ bottom: -3rem;
463
475
  }
464
476
  }
465
477