@comicrelief/component-library 8.48.0 → 8.48.2

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

@@ -4,32 +4,14 @@ import { breakpointValues } from '../../../theme/shared/allBreakpoints';
 import fontHelper from '../../../theme/crTheme/fontHelper';
 
 const CardsContainer = styled.div`
+  padding-top: ${({ paddingAbove }) => paddingAbove};
+  padding-bottom: ${({ paddingBelow }) => paddingBelow};
   display: flex;
   flex-direction: column;
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   gap: 1rem;
 
-  // Mobile carousel mode - horizontal scroll container (only on mobile, below M breakpoint)
-  ${({ isCarousel }) => isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}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;
-      }
-    }
-  `}
-
   // Mobile stack mode - vertical layout (only on mobile, below M breakpoint)
   ${({ isCarousel }) => !isCarousel && css`
     @media (max-width: ${breakpointValues.M - 1}px) {
@@ -38,7 +20,7 @@ const CardsContainer = styled.div`
     }
   `}
 
-  // Desktop flexbox layout - 2 columns with centered wrap
+  // Non-mobile layout (M and above) - consistent across carousel/non-carousel, as above M we only do stacked mode.
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
     flex-wrap: wrap;
@@ -49,14 +31,49 @@ const CardsContainer = styled.div`
     margin: 0 auto;
   }
 
+  // Carousel mode - horizontal scroll container (M and below)
+  ${({ isCarousel }) => isCarousel && css`
+    @media (max-width: ${breakpointValues.L - 1}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;
+      }
+    }
+  `}
+
   // Desktop grid layout for XL breakpoint - 3 columns
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
-    display: grid;
-    justify-content: center;
-    grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
-    width: ${({ columns }) => (columns === 2 ? 'fit-content' : '100%')};
-    margin: ${({ columns }) => (columns === 2 ? '0 auto' : '0')};
-    max-width: 100%;
+    ${({ columns }) => columns === 3 && 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%;
+
+      /*
+      Above 1724px (3 * 564px which is the card max-width + 2 * 1rem), this is to stop the visible "gaps" growing
+      between the cards on really wide screens (so the only space between cards is the gap (1rem)).
+       */
+      @media (min-width: 1724px) {
+        grid-template-columns: repeat(3, 564px);
+        width: fit-content;
+      }
+    `}
   }
 `;
 
@@ -116,7 +133,7 @@ const CardLink = styled.a`
   position: relative;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  flex: 1 1 auto;
   background: transparent;
   border-radius: 1rem;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
@@ -164,24 +181,14 @@ const CardWrapper = styled.div`
   flex-direction: column;
   align-self: stretch;
 
-  // Mobile carousel mode - cards at normal width in horizontal scroll (only on mobile, below M breakpoint)
+  // Carousel mode - cards at normal width in horizontal scroll (Medium and below)
   ${({ isCarousel }) => isCarousel && css`
-    @media (max-width: ${breakpointValues.M - 1}px) {
+    @media (max-width: ${breakpointValues.L - 1}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;
-      }
     }
   `}
 
@@ -193,10 +200,10 @@ const CardWrapper = styled.div`
   `}
 
   // Desktop M breakpoint - 2 columns layout
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
+  // - when isCarousel is true we only switch to "desktop" layout at L and above
+  @media ${({ theme, isCarousel }) => theme.allBreakpoints(isCarousel ? 'L' : 'M')} {
     flex-basis: calc(50% - 1rem);
     max-width: 564px;
-    height: 100%;
     align-self: stretch;
   }
 
@@ -204,7 +211,6 @@ const CardWrapper = styled.div`
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-basis: unset;
     max-width: 564px;
-    height: 100%;
     align-self: stretch;
   }
 `;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Picture from '../../Atoms/Picture/Picture';
-import ArrowIcon from './ArrowIcon';
+import ArrowIcon from './_ArrowIcon';
 import altCtaUnderline from '../../../theme/shared/assets/alt_cta_underline.svg';
 import {
   CardLink,

package/src/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/src/components/Molecules/Countdown/Countdown.js

@@ -7,6 +7,7 @@ import { Wrapper, Digits } from './Countdown.style';
 const Countdown = ({
   endDate, color = 'black', endMessage = null, introMessage = null
 }) => {
+  const [thisEndDate, setThisEndDate] = useState(null);
   const [countdownHasEnded, setCountdownHasEnded] = useState(false);
   const [countdownTime, setCountdownTime] = useState({
     days: '00',
@@ -15,12 +16,15 @@ const Countdown = ({
     seconds: '00'
   });
 
-  const countDownDate = moment(endDate);
+  useEffect(() => {
+    const isoEndDate = new Date(endDate).toISOString();
+    setThisEndDate(moment(isoEndDate));
+  }, [endDate]);
 
   useEffect(() => {
     const interval = setInterval(() => {
       const now = moment();
-      const timeRemaining = moment(countDownDate - now);
+      const timeRemaining = moment(thisEndDate - now);
 
       const days = timeRemaining.format('DDD');
       const hours = timeRemaining.format('HH');
@@ -34,14 +38,17 @@ const Countdown = ({
         seconds
       });
 
-      if (countDownDate.diff(now, 'seconds') < 1) {
+      if (thisEndDate.diff(now, 'seconds') < 1) {
+        clearInterval(interval);
         setCountdownHasEnded(true);
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [countDownDate]);
+  }, [thisEndDate]);
 
-  if (countdownHasEnded) return endMessage;
+  if (countdownHasEnded) {
+    return endMessage;
+  }
 
   return (
     <>

package/src/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/src/components/Organisms/Header/Nav/Nav.js

@@ -77,10 +77,11 @@ const MainNav = ({ navItems = {} }) => {
 
             /* Determine which field represents our url path */
             let thisUrl = NavHelper(thisFirstChild);
-            const relNoopener = !allowListed(thisUrl) && 'noopener';
+            const relNoopener = !allowListed(thisUrl) ? 'noopener' : 'false';
             const hasSubMenu = group.links && group.links.length > 1;
             const hasPopUp = hasSubMenu ? 'true' : null;
             thisUrl = InternalLinkHelper(thisUrl);
+
             return (
               <NavItem
                 role="none"