@comicrelief/component-library 8.48.0 → 8.48.1

package/dist/components/Atoms/Input/Input.md

@@ -141,6 +141,7 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
   <>
     <h4>Input with Description:</h4>
     <Input
+      name="input-with-description"
       placeholder="I have a description"
       type="text"
       label="My Great Input"

package/dist/components/Molecules/Countdown/Countdown.js

@@ -17,6 +17,7 @@ const Countdown = _ref => {
     endMessage = null,
     introMessage = null
   } = _ref;
+  const [thisEndDate, setThisEndDate] = (0, _react.useState)(null);
   const [countdownHasEnded, setCountdownHasEnded] = (0, _react.useState)(false);
   const [countdownTime, setCountdownTime] = (0, _react.useState)({
     days: '00',
@@ -24,11 +25,14 @@ const Countdown = _ref => {
     minutes: '00',
     seconds: '00'
   });
-  const countDownDate = (0, _moment.default)(endDate);
+  (0, _react.useEffect)(() => {
+    const isoEndDate = new Date(endDate).toISOString();
+    setThisEndDate((0, _moment.default)(isoEndDate));
+  }, [endDate]);
   (0, _react.useEffect)(() => {
     const interval = setInterval(() => {
       const now = (0, _moment.default)();
-      const timeRemaining = (0, _moment.default)(countDownDate - now);
+      const timeRemaining = (0, _moment.default)(thisEndDate - now);
       const days = timeRemaining.format('DDD');
       const hours = timeRemaining.format('HH');
       const minutes = timeRemaining.format('mm');
@@ -39,13 +43,16 @@ const Countdown = _ref => {
         minutes,
         seconds
       });
-      if (countDownDate.diff(now, 'seconds') < 1) {
+      if (thisEndDate.diff(now, 'seconds') < 1) {
+        clearInterval(interval);
         setCountdownHasEnded(true);
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [countDownDate]);
-  if (countdownHasEnded) return endMessage;
+  }, [thisEndDate]);
+  if (countdownHasEnded) {
+    return endMessage;
+  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, introMessage, /*#__PURE__*/_react.default.createElement(_Countdown.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Countdown.Digits, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     color: color,
     family: "Anton",

package/dist/components/Molecules/Countdown/Countdown.md

@@ -5,5 +5,5 @@ import Text from '../../Atoms/Text/Text';
 const intro = <Text tag="h2" size="xl">Hello</Text>;
 const end = <Text tag="h2" size="xl">Bye</Text>;
 
-<Countdown endDate="Jan 22, 2021 24:00:00" endMessage={end} introMessage={intro}/>
+<Countdown endDate="Jan 16, 2026 10:30:00" endMessage={end} introMessage={intro}/>
 ```

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -73,7 +73,7 @@ const MainNav = _ref => {
 
     /* Determine which field represents our url path */
     let thisUrl = (0, _navHelper.NavHelper)(thisFirstChild);
-    const relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
+    const relNoopener = !(0, _allowListed.default)(thisUrl) ? 'noopener' : 'false';
     const hasSubMenu = group.links && group.links.length > 1;
     const hasPopUp = hasSubMenu ? 'true' : null;
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);

package/dist/components/Organisms/Header/data/data-extended.js

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#1',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#2',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#3',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#4',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,19 +73,19 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#one',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#two',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#three',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#4',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#5',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#6',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#2',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#3',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -163,31 +163,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#7',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#8',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#9',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#10',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#11',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -203,31 +203,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#12',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#13',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#14',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#15',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#16',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/dist/components/Organisms/Header/data/data-live.js

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#5',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

package/dist/components/Organisms/Header/data/data.js

@@ -51,7 +51,7 @@ var _default = exports.default = {
     id: 'eaec51921-bbb3-5e8d-b966-c53fff34998b5',
     links: [{
       title: 'Single menu link',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#6',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -77,7 +77,7 @@ var _default = exports.default = {
     id: 'eaec5191-bbb3-5e8d-b966-c53fff34998b',
     links: [{
       title: 'Schools & youth',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#7',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

package/dist/components/Organisms/Header2025/Header2025.js

@@ -12,7 +12,7 @@ var _Header = require("./Header2025.style");
 const Header2025 = _ref => {
   let {
     navItems = {},
-    metaIcons,
+    metaIcons = undefined,
     campaign = 'Comic Relief',
     donateButton = null,
     characterLimit = 60,
@@ -32,7 +32,7 @@ const Header2025 = _ref => {
     metaIcons: metaIcons,
     donateButton: donateButton,
     characterLimit: characterLimit
-  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, null, /*#__PURE__*/_react.default.createElement(_Header.Header2025MetaIcons, {
+  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, null, metaIcons && /*#__PURE__*/_react.default.createElement(_Header.Header2025MetaIcons, {
     isHeader: true,
     "data-testid": "meta-icons--desktop"
   }, metaIcons), /*#__PURE__*/_react.default.createElement(_Header.DonateButtonWrapperTop, {

package/dist/components/Organisms/Header2025/Header2025.md

@@ -478,7 +478,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
-  showBoxShadow="true"
+  showBoxShadow
   characterLimit={50}
   navItems={data}
   rotate="true"
@@ -590,7 +590,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
-  showBoxShadow="true"
+  showBoxShadow
   characterLimit={50}
   navItems={data}
   rotate="true"

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -166,7 +166,7 @@ const HeaderNav2025 = _ref => {
     navHelper: _navHelper.NavHelper,
     allowListed: _allowListed.default,
     internalLinkHelper: _internalLinkHelper.InternalLinkHelper
-  }) : null), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
+  }) : null), metaIcons && /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
     isHeader: true,
     "data-testid": "meta-icons--mobile"
   }, metaIcons), /*#__PURE__*/_react.default.createElement(_HeaderNav.DonateButtonWrapperBottom, {

package/dist/components/Organisms/Header2025/data/data-extended.js

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: '¢',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#8',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#9',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#10',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,25 +73,25 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#1',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#2',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#3',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Managing your funding',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#4',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#17',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#18',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#19',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#20',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#21',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -163,31 +163,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#21',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#22',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#23',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#24',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#25',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -203,31 +203,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#26',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#27',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#28',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#29',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#30',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/dist/components/Organisms/Header2025/data/data-live--minimal.js

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#11',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

package/dist/components/Organisms/Header2025/data/data-live.js

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#12',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -117,7 +117,7 @@ var _default = exports.default = {
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#31',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/dist/components/Organisms/Header2025/data/data.js

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#13',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#14',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#15',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#16',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,25 +73,25 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#5',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#6',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#7',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Managing your funding',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#8',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#32',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#33',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#34',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#35',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#36',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.48.0",
+  "version": "8.48.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Input/Input.md

@@ -141,6 +141,7 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
   <>
     <h4>Input with Description:</h4>
     <Input
+      name="input-with-description"
       placeholder="I have a description"
       type="text"
       label="My Great Input"