@comicrelief/component-library 8.48.0 → 8.48.2

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/CTAMultiCard/CTAMultiCard.js

@@ -31,7 +31,9 @@ const CTAMultiCard = _ref => {
     cards,
     backgroundColour: bgCards,
     layout,
-    carouselOfCards
+    carouselOfCards,
+    paddingAbove,
+    paddingBelow
   } = data;
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
     return null;
@@ -44,7 +46,9 @@ const CTAMultiCard = _ref => {
   return /*#__PURE__*/_react.default.createElement(_CTAMultiCard.CardsContainer, {
     backgroundColor: cardsBackground,
     columns: columns,
-    isCarousel: carouselOfCards
+    isCarousel: carouselOfCards,
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow
   }, cards.map(card => /*#__PURE__*/_react.default.createElement(_SingleCard.default, {
     key: card.id,
     card: card,

package/dist/components/Molecules/CTAMultiCard/CTAMultiCard.md

@@ -14,7 +14,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 
 ### CTAMultiCard: Desktop Grid View (3 columns)
 
-**NB: In mobile view, this example displays as a carousel.**
+**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -43,17 +43,19 @@ const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
   carouselOfCards: true,
-  backgroundColour: "transparent"
+  backgroundColour: "transparent",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={data} />
 </div>;
 ```
 
 ### CTAMultiCard: Desktop Grid View (2 columns)
 
-**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 vertical stack (non-carousel).**
+**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 vertical stack (non-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.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -95,10 +97,12 @@ const dataWithLongText = {
   layout: "2 columns",
   carouselOfCards: false,
   backgroundColour: "Transparent",
-  cards: cardsWithRenderedBody
+  cards: cardsWithRenderedBody,
+  paddingAbove: '4rem',
+  paddingBelow: '4rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```

package/dist/components/Molecules/CTAMultiCard/CTAMultiCard.style.js

@@ -13,47 +13,47 @@ var _fontHelper = _interopRequireDefault(require("../../../theme/crTheme/fontHel
 const CardsContainer = exports.CardsContainer = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardsContainer",
   componentId: "sc-qq5ca0-0"
-})(["display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " ", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}@media ", "{display:grid;justify-content:center;grid-template-columns:", ";width:", ";margin:", ";max-width:100%;}"], _ref => {
+})(["padding-top:", ";padding-bottom:", ";display:flex;flex-direction:column;width:100%;background:", ";gap:1rem;", " @media ", "{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;width:fit-content;max-width:100%;margin:0 auto;}", " @media ", "{", "}"], _ref => {
   let {
-    theme,
-    backgroundColor
+    paddingAbove
   } = _ref;
-  return theme.color(backgroundColor);
+  return paddingAbove;
 }, _ref2 => {
   let {
-    isCarousel
+    paddingBelow
   } = _ref2;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 0.5rem;margin-left:0.5rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.M - 1);
+  return paddingBelow;
 }, _ref3 => {
   let {
-    isCarousel
+    theme,
+    backgroundColor
   } = _ref3;
-  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
+  return theme.color(backgroundColor);
 }, _ref4 => {
   let {
-    theme
+    isCarousel
   } = _ref4;
-  return theme.allBreakpoints('M');
+  return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:column;background:transparent;}"], _allBreakpoints.breakpointValues.M - 1);
 }, _ref5 => {
   let {
     theme
   } = _ref5;
-  return theme.allBreakpoints('XL');
+  return theme.allBreakpoints('M');
 }, _ref6 => {
   let {
-    columns
+    isCarousel
   } = _ref6;
-  return `repeat(${columns}, 1fr)`;
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;width:100%;margin:0;max-width:100%;overflow-x:visible;overflow-y:scroll;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0.75rem 1rem;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;}}"], _allBreakpoints.breakpointValues.L - 1);
 }, _ref7 => {
   let {
-    columns
+    theme
   } = _ref7;
-  return columns === 2 ? 'fit-content' : '100%';
+  return theme.allBreakpoints('XL');
 }, _ref8 => {
   let {
     columns
   } = _ref8;
-  return columns === 2 ? '0 auto' : '0';
+  return columns === 3 && (0, _styledComponents.css)(["display:grid;justify-content:center;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:0 auto;max-width:100%;@media (min-width:1724px){grid-template-columns:repeat(3,564px);width:fit-content;}"]);
 });
 const ImageWrapper = exports.ImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__ImageWrapper",
@@ -96,7 +96,7 @@ const ArrowIconWrapper = exports.ArrowIconWrapper = _styledComponents.default.di
 const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
   displayName: "CTAMultiCardstyle__CardLink",
   componentId: "sc-qq5ca0-5"
-})(["display:flex;position:relative;flex-direction:column;width:100%;height:100%;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.1);}", "{color:", ";text-decoration:none;}", "{opacity:1;}", "{background:", ";}}}"], 0.4, -1.15, 2.35, _ref13 => {
+})(["display:flex;position:relative;flex-direction:column;width:100%;flex:1 1 auto;background:transparent;border-radius:1rem;box-shadow:0 0 1rem rgba(0,0,0,0.15);text-decoration:none;overflow:hidden;cursor:pointer;img{transform:scale(1.02);transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");}@media ", "{", ";&:hover{box-shadow:0 0 1.5rem rgba(0,0,0,0.25);", " img{transform:scale(1.1);}", "{color:", ";text-decoration:none;}", "{opacity:1;}", "{background:", ";}}}"], 0.4, -1.15, 2.35, _ref13 => {
   let {
     theme
   } = _ref13;
@@ -115,11 +115,11 @@ const CardLink = exports.CardLink = _styledComponents.default.a.withConfig({
 const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConfig({
   displayName: "CTAMultiCardstyle__CardWrapper",
   componentId: "sc-qq5ca0-6"
-})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " @media ", "{flex-basis:calc(50% - 1rem);max-width:564px;height:100%;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;height:100%;align-self:stretch;}"], _ref16 => {
+})(["width:100%;flex-shrink:0;display:flex;flex-direction:column;align-self:stretch;", " ", " @media ", "{flex-basis:calc(50% - 1rem);max-width:564px;align-self:stretch;}@media ", "{flex-basis:unset;max-width:564px;align-self:stretch;}"], _ref16 => {
   let {
     isCarousel
   } = _ref16;
-  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 calc(100% - 1.5rem);min-width:calc(100% - 1.5rem);max-width:calc(100% - 1.5rem);flex-shrink:0;margin-right:0.5rem;&:first-child{padding-left:0.5rem;}&:last-child{margin-right:0;padding-right:0.5rem;}}"], _allBreakpoints.breakpointValues.M - 1);
+  return isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){scroll-snap-align:start;flex:0 0 calc(100% - 1.5rem);min-width:calc(100% - 1.5rem);max-width:calc(100% - 1.5rem);flex-shrink:0;}"], _allBreakpoints.breakpointValues.L - 1);
 }, _ref17 => {
   let {
     isCarousel
@@ -127,9 +127,10 @@ const CardWrapper = exports.CardWrapper = _styledComponents.default.div.withConf
   return !isCarousel && (0, _styledComponents.css)(["@media (max-width:", "px){width:100%;}"], _allBreakpoints.breakpointValues.M - 1);
 }, _ref18 => {
   let {
-    theme
+    theme,
+    isCarousel
   } = _ref18;
-  return theme.allBreakpoints('M');
+  return theme.allBreakpoints(isCarousel ? 'L' : 'M');
 }, _ref19 => {
   let {
     theme

package/dist/components/Molecules/CTAMultiCard/SingleCard.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
-var _ArrowIcon = _interopRequireDefault(require("./ArrowIcon"));
+var _ArrowIcon = _interopRequireDefault(require("./_ArrowIcon"));
 var _alt_cta_underline = _interopRequireDefault(require("../../../theme/shared/assets/alt_cta_underline.svg"));
 var _CTAMultiCard = require("./CTAMultiCard.style");
 const SingleCard = _ref => {

package/dist/components/Molecules/CTAMultiCard/{ArrowIcon.js → _ArrowIcon.js}

@@ -8,8 +8,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const StyledArrowIcon = _styledComponents.default.svg.withConfig({
-  displayName: "ArrowIcon__StyledArrowIcon",
-  componentId: "sc-jxto1w-0"
+  displayName: "_ArrowIcon__StyledArrowIcon",
+  componentId: "sc-1xqghuh-0"
 })(["display:inline-block;color:", ";fill:currentColor;"], _ref => {
   let {
     theme

package/dist/components/Molecules/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -99,7 +99,9 @@ exports[`handles data structure correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -242,9 +244,13 @@ exports[`handles data structure correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -311,7 +317,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -324,7 +329,6 @@ exports[`handles data structure correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -661,7 +665,9 @@ exports[`renders 2 columns layout correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -798,19 +804,7 @@ exports[`renders 2 columns layout correctly 1`] = `
 }
 
 @media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(2,1fr);
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    margin: 0 auto;
-    max-width: 100%;
-  }
+
 }
 
 @media (min-width:740px) {
@@ -875,7 +869,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -888,7 +881,6 @@ exports[`renders 2 columns layout correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1225,7 +1217,9 @@ exports[`renders carousel mode correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1328,7 +1322,31 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width:1023px) {
   .c0 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1336,6 +1354,13 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     flex-wrap: nowrap;
+    -webkit-box-pack: start;
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 0;
+    max-width: 100%;
     overflow-x: visible;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
@@ -1343,8 +1368,7 @@ exports[`renders carousel mode correctly 1`] = `
     -moz-scroll-snap-type: x mandatory;
     -ms-scroll-snap-type: x mandatory;
     scroll-snap-type: x mandatory;
-    padding: 0.75rem 0.5rem;
-    margin-left: 0.5rem;
+    padding: 0.75rem 1rem;
     -webkit-scrollbar-width: none;
     -moz-scrollbar-width: none;
     -ms-scrollbar-width: none;
@@ -1357,14 +1381,9 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1440px) {
   .c0 {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
+    display: grid;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -1373,24 +1392,9 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    max-width: 100%;
-    margin: 0 auto;
-  }
-}
-
-@media (min-width:1440px) {
-  .c0 {
-    display: grid;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -1445,7 +1449,7 @@ exports[`renders carousel mode correctly 1`] = `
   }
 }
 
-@media (max-width:739px) {
+@media (max-width:1023px) {
   .c1 {
     -webkit-scroll-snap-align: start;
     -moz-scroll-snap-align: start;
@@ -1459,26 +1463,15 @@ exports[`renders carousel mode correctly 1`] = `
     -webkit-flex-shrink: 0;
     -ms-flex-negative: 0;
     flex-shrink: 0;
-    margin-right: 0.5rem;
-  }
-
-  .c1:first-child {
-    padding-left: 0.5rem;
-  }
-
-  .c1:last-child {
-    margin-right: 0;
-    padding-right: 0.5rem;
   }
 }
 
-@media (min-width:740px) {
+@media (min-width:1024px) {
   .c1 {
     -webkit-flex-basis: calc(50% - 1rem);
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1491,7 +1484,6 @@ exports[`renders carousel mode correctly 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -1828,7 +1820,9 @@ exports[`renders correctly with data prop 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0,0,0,0.15);
@@ -1971,9 +1965,13 @@ exports[`renders correctly with data prop 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    grid-template-columns: repeat(3,1fr);
+    -webkit-align-items: stretch;
+    -webkit-box-align: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+    grid-template-columns: repeat(3,minmax(0,1fr));
     width: 100%;
-    margin: 0;
+    margin: 0 auto;
     max-width: 100%;
   }
 }
@@ -2040,7 +2038,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: calc(50% - 1rem);
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
@@ -2053,7 +2050,6 @@ exports[`renders correctly with data prop 1`] = `
     -ms-flex-preferred-size: unset;
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;

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);