@comicrelief/component-library 8.25.3 → 8.25.5

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 (12) 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/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js +1 -1
  5. package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.js +2 -1
  6. package/package.json +1 -1
  7. package/src/components/Molecules/CardDs/CardDs.md +17 -3
  8. package/src/components/Molecules/CardDs/CardDs.style.js +5 -1
  9. package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap +14 -2
  10. package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js +1 -1
  11. package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNavItem2025.js +1 -2
  12. package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.js +3 -1
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/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js CHANGED
@@ -135,7 +135,7 @@ const HeaderNav2025 = _ref => {
135
135
  const thisID = group.id;
136
136
  /* Determine which field represents our url path */
137
137
  let thisUrl = (0, _navHelper.NavHelper)(thisFirstChild);
138
- const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener' || null;
138
+ const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener' || undefined;
139
139
  const hasSubMenu = group.links && group.links.length > 1;
140
140
  const hasPopUp = hasSubMenu ? 'true' : null;
141
141
  thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);
package/dist/components/Organisms/Header2025/HeaderNav2025/MoreNav.js CHANGED
@@ -71,7 +71,8 @@ const MoreNav = _ref => {
71
71
  role: "list",
72
72
  isSubMenuOpen: Boolean(openedSubMenu[child.id])
73
73
  }, child.links.map(subChild => {
74
- const thisSubUrl = navHelper(subChild);
74
+ let thisSubUrl = navHelper(subChild);
75
+ thisSubUrl = internalLinkHelper(thisSubUrl);
75
76
  return (
76
77
  /*#__PURE__*/
77
78
  // 'More Nav' sub item:
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.5",
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;
package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js CHANGED
@@ -127,7 +127,7 @@ const HeaderNav2025 = ({
127
127
  const thisID = group.id;
128
128
  /* Determine which field represents our url path */
129
129
  let thisUrl = NavHelper(thisFirstChild);
130
- const relNoopener = (!allowListed(thisUrl) && 'noopener') || null;
130
+ const relNoopener = (!allowListed(thisUrl) && 'noopener') || undefined;
131
131
  const hasSubMenu = group.links && group.links.length > 1;
132
132
  const hasPopUp = hasSubMenu ? 'true' : null;
133
133
  thisUrl = InternalLinkHelper(thisUrl);
package/src/components/Organisms/Header2025/HeaderNav2025/HeaderNavItem2025.js CHANGED
@@ -135,8 +135,7 @@ HeaderNavItem2025.propTypes = {
135
135
  }),
136
136
  navHelper: PropTypes.func.isRequired,
137
137
  internalLinkHelper: PropTypes.func.isRequired,
138
- relNoopener: PropTypes.bool
139
-
138
+ relNoopener: PropTypes.string
140
139
  };
141
140
 
142
141
  export default HeaderNavItem2025;
package/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.js CHANGED
@@ -94,7 +94,9 @@ const MoreNav = ({
94
94
  isSubMenuOpen={Boolean(openedSubMenu[child.id])}
95
95
  >
96
96
  {child.links.map(subChild => {
97
- const thisSubUrl = navHelper(subChild);
97
+ let thisSubUrl = navHelper(subChild);
98
+ thisSubUrl = internalLinkHelper(thisSubUrl);
99
+
98
100
  return (
99
101
  // 'More Nav' sub item:
100
102
  <MoreNavSubItem key={thisSubUrl}>