@comicrelief/component-library 7.36.0 → 7.38.0

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

@@ -32,7 +32,7 @@ const Copy = styled.div`
   ${zIndex('low')};
   ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
   padding: ${spacing('l')};
-  
+
   ${media('small')} {
     ${({ vhFull, fullImage }) => (vhFull || fullImage
     ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;'
@@ -61,12 +61,12 @@ const Copy = styled.div`
     `};
 
   ${props => (props.hasImage
-    ? css`@media ${({ theme }) => theme.breakpoint('small')} {
+    ? css`@media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 50%;
           }
         `
     : css`
-          @media ${({ theme }) => theme.breakpoint('small')} {
+          @media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 100%;
             max-width ${container.small};
             padding: ${spacing('xl')};
@@ -77,13 +77,13 @@ const Copy = styled.div`
 
   ${media('medium')} {
     ${({ paddingOption }) => handlePadding(paddingOption)};
-  }      
+  }
 `;
 
 const Media = styled.div`
   width: 100%;
   ${({ fullImage }) => (fullImage ? 'height: 200px;' : 'height: 280px;')};
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: auto;
     width: ${({ fullImage }) => (fullImage ? '100%' : '50%')};
     ${({ fullImage }) => (fullImage ? 'min-height: 500px;' : null)};
@@ -129,7 +129,7 @@ const PlayButton = styled.button`
 `;
 
 const Image = styled.div`
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     img {
       position: ${({ fullImage, vhFull }) => (fullImage || vhFull ? 'absolute' : null)};
     }

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -12,7 +12,7 @@ const Title = styled(Text)`
   letter-spacing: 0.03em;
   text-transform: uppercase;
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -57,7 +57,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;
@@ -103,7 +103,7 @@ import spacing from '../../../theme/shared/spacing';
 
 const Title = styled(Text)`
   margin: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin-bottom: ${spacing('m')};
   }
 `;

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.style.js

@@ -12,7 +12,7 @@ const Container = styled.div`
   justify-content: space-around;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: ${({ imageLeft }) => (imageLeft ? 'row' : 'row-reverse')};
   }
 `;
@@ -24,7 +24,7 @@ const Subtitle = styled(Text)`
 
 const Image = styled.div`
   height: 100%;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: 448px;
   }
   img {
@@ -38,7 +38,7 @@ const MediaLink = styled.a`
     ? `margin-right: ${spacing('m')}`
     : `margin-left: ${spacing('m')}`)};
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0;
     height: 448px;
     flex-grow: 0;
@@ -109,7 +109,7 @@ const CTA = styled.div`
     font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`}
   }
 `;
@@ -133,7 +133,7 @@ const Copy = styled.div`
   )};
 
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     min-height: 448px;
     height: auto;
     width: calc(50% + 1.5rem);
@@ -149,7 +149,7 @@ const Copy = styled.div`
     : `margin: ${spacing('l')} -${spacing('m')} ${spacing('m')} 0`)};
   }
 
-  @media ${({ theme }) => theme.breakpoint('large')} {
+  @media ${({ theme }) => theme.allBreakpoints('XL')} {
     padding: calc(${spacing('m')} * 2);
 
     ${({ hasLink }) => hasLink && `padding-bottom: calc(${spacing('m')} * 3)`};

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -79,6 +79,10 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
+.c13 {
+  fill: #FFFFFF;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -175,6 +179,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c13 {
+    fill: #FFFFFF;
+  }
+}
+
 @media (min-width:740px) {
   .c0 {
     -webkit-flex-direction: row;
@@ -310,6 +320,7 @@ exports[`renders correctly 1`] = `
           type="button"
         >
           <svg
+            className="c13"
             fill="#FFFFFF"
             height={24}
             viewBox="0 0 96 96"

package/src/components/Organisms/CookieBanner/CookieBanner.style.js

@@ -20,7 +20,7 @@ const CookieText = styled(Text)`
   &:first-of-type {
     margin-bottom: ${spacing('sm')};
   }
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 75%;
     margin: ${spacing('none')} auto;
     &:first-of-type {
@@ -33,7 +33,7 @@ const AcceptCookieBtn = styled(Link)`
   padding: ${spacing('sm')} ${spacing('md')};
   display: block;
   margin-bottom: 10px;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0 ${spacing('xsm')} 0 0;
     display: inline-block;
   }

package/src/components/Organisms/EmailSignUp/EmailSignUp.style.js

@@ -51,11 +51,11 @@ const NameWrapper = styled.div`
   flex-direction: column;
   gap: 0;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     justify-content: start;
     flex-direction: ${({ columnLayout }) => (columnLayout ? 'column' : 'row')};
     gap: ${({ columnLayout }) => (columnLayout ? 0 : spacing('md'))};
-)}; 
+)};
 
   }
 `;
@@ -68,7 +68,7 @@ const InputField = styled(TextInput)`
     color: ${({ theme }) => theme.color('white')};
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     max-width: 290px;
   }
 `;

package/src/components/Organisms/Footer/Footer.style.js

@@ -11,7 +11,7 @@ const FooterWrapper = styled.footer.attrs(() => ({
   background: #222;
   position: relative;
   padding: ${spacing('md')} 0;
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('l')};
   }
 `;
@@ -23,7 +23,7 @@ const Angle = styled.div`
   height: 50px;
   background: #222;
   margin-bottom: 1rem;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     clip-path: polygon(0 100%,100% 0,100% 101%,0 101%);
     height: 95px;
   }
@@ -37,7 +37,7 @@ const InnerWrapper = styled.div`
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 ${spacing('md')} ${spacing('l')};
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     padding: 0 ${spacing('md')} ${spacing('xl')};
   }
 `;
@@ -67,7 +67,7 @@ const FooterCopyright = styled.div`
     line-height: 24px;
     margin-bottom: 5px;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       font-size: 16px;
       line-height: 27px;
     }

package/src/components/Organisms/Footer/Nav/Nav.style.js

@@ -51,7 +51,7 @@ const SubNavMenu = styled.ul`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     max-height: none;
     height: auto;
 
@@ -73,7 +73,7 @@ const SubNavItem = styled.li`
   background-color: inherit;
   padding: 8px 0;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     height: auto;
     margin-top: 12px;
     padding: 0;
@@ -99,7 +99,7 @@ const SubNavItem = styled.li`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     ${({ column }) => (column === true ? 'flex: 0 0 100%;' : null)};
   }
 `;
@@ -122,7 +122,7 @@ const NavMenu = styled.ul`
   padding: 0;
   margin: 0;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     display: flex;
     flex-wrap: wrap;
     justify-content: start;
@@ -143,12 +143,12 @@ const NavItem = styled.li`
   margin: 0;
   margin-bottom: 1rem;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex: 0 0 30%;
     margin: 0;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     /* Minus 9% to remove 3 x 1.5% margins from previous rule */
     flex: 0 0 calc(25% - 1rem);
     margin-right: 1rem;
@@ -169,7 +169,7 @@ const NavItem = styled.li`
     line-height: 40px;
     font-weight: 800;
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       font-size: 20px;
       line-height: 40px;
     }
@@ -190,7 +190,7 @@ const NavItem = styled.li`
       right: -25px;
     }
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       cursor: default;
       display: inline;
 

package/src/components/Organisms/Header/Burger/BurgerMenu.style.js

@@ -91,7 +91,7 @@ const BurgerWrapper = styled(Link)`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     display: none;
   }
 `;

package/src/components/Organisms/Header/Header.style.js

@@ -12,7 +12,7 @@ const HeaderWrapper = styled.header.attrs(() => ({
   padding: 0;
   height: 75px;
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     height: auto;
   }
 `;
@@ -25,7 +25,7 @@ const InnerWrapper = styled.div`
   cursor: pointer;
   max-width: ${container.large};
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 auto;
   }
 `;
@@ -72,7 +72,7 @@ const MetaIcons = styled.div`
     }
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     position: relative;
     display: flex;
     align-items: center;

package/src/components/Organisms/Header/Nav/Nav.style.js

@@ -38,7 +38,7 @@ const Nav = styled.nav`
     left: inherit;
   }
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     ${zIndex('medium')};
     position: relative;
     top: 0;
@@ -67,7 +67,7 @@ const SubNavMenu = styled.ul`
   align-items: center;
   background-color: ${({ theme }) => theme.color('deep_violet_dark')};
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     display: none;
     display: ${({ isKeyPressed }) => (isKeyPressed ? 'flex' : 'none')};
     top: 90px;
@@ -120,7 +120,7 @@ const SubNavLinkUnderline = styled(SubNavLink)`
     bottom: 10px;
     margin: 0 10px;
   }
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     ::before {
       display: block;
       position: absolute;
@@ -147,7 +147,7 @@ const NavMenu = styled.ul`
   padding: 0;
   margin: 0;
 
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     position: relative;
     display: flex;
     flex-wrap: wrap;
@@ -164,7 +164,7 @@ const NavLink = styled(NavLinkClass)`
   display: flex;
   gap: 4px;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     padding: 10px 0;
     height: auto;
     :focus + ${SubNavMenu} {
@@ -203,7 +203,7 @@ const NavItem = styled.li`
   :hover {
     background-color: ${({ theme }) => theme.color('teal_light')};
   }
-  @media ${({ theme }) => theme.breakpoint('nav')} {
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     margin: 0 4px;
     padding: 25px 5px;
 

package/src/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -10,7 +10,7 @@ const MoneybuyWrapper = styled.div`
     justify-content: space-between;
     align-items: center;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         flex-direction: row;
         align-items: stretch;
     }
@@ -34,13 +34,13 @@ const Moneybuy = styled.div`
         opacity: 0.5;
     `}
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
         width: 70%;
         padding: 8px 40px;
 
     }
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         padding: 20px 14px;
         flex-direction: column;
         width: 18%;
@@ -56,13 +56,13 @@ const OrLabel = styled(Text)`
 `;
 
 const MoneybuyImage = styled.span`
-    background: center / 65% no-repeat url("${props => props.imageURL}"), 
+    background: center / 65% no-repeat url("${props => props.imageURL}"),
     ${props => props.theme.color('grey_extra_light')};
     width: 48px;
     height: 48px;
     border-radius: 48px;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         width: 0;
         height: 0;
         padding: 30%;
@@ -75,7 +75,7 @@ const MoneybuyAmount = styled(Text)`
     margin: 0 10px;
     width: 25%;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         margin: 8px 15px 2px;
         width: auto;
     }
@@ -85,7 +85,7 @@ const MoneybuyDescription = styled(Text)`
     text-align: left;
     width: 50%;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
         width: 100%;
         text-align: center;
     }

package/src/components/Organisms/ImpactSlider/ImpactSlider.style.js

@@ -8,10 +8,10 @@ const OuterWrapper = styled.div`
   background-color: ${props => props.theme.color(`${props.backgroundColour}`)};
   padding: 32px 16px;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 50px;
   }
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     padding: 64px 0;
   }
 `;
@@ -21,7 +21,7 @@ const InnerWrapper = styled.div`
   max-width: 780px;
   margin: 0 auto;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     h1 {
       font-size: 48px;
       line-height: 48px;
@@ -31,7 +31,7 @@ const InnerWrapper = styled.div`
 
 const Copy = styled.div`
   position: relative;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     p {
       font-size: 20px;
       line-height: 24.38px;
@@ -43,7 +43,7 @@ const CurrentAmountCopy = styled(Text)`
   font-weight: bold;
   margin-top: 16px;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     font-size: 20px;
     line-height: 24.38px;
     margin: 24px 0 38px;
@@ -55,13 +55,13 @@ const SubmitButton = styled(Button)`
   width: 100%;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
   display: block;
-  
-  @media ${({ theme }) => theme.breakpoint('small')} {
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 70%;
     margin: 40px auto 0;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 100%;
   }
 `;

package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -20,7 +20,7 @@ const TopCopyWrapper = styled.div`
   display: flex;
   width: 100%;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 10px;
   }
 `;
@@ -42,7 +42,7 @@ const FormField = styled.div`${({ theme }) => css`
   display: flex;
   flex-direction: column;
 
-  @media ${theme.breakpoint('small')} {
+  @media ${theme.allBreakpoints('M')} {
     width: 50%;
     padding: 10px;
   }
@@ -82,7 +82,7 @@ const CheckLabel = styled.label`${({ theme }) => css`
   align-items: center;
   font-size: ${theme.fontSize('xs')};
 
-  @media ${theme.breakpoint('small')} {
+  @media ${theme.allBreakpoints('M')} {
     font-size: ${theme.fontSize('s')};
   }
 `}`;
@@ -108,7 +108,7 @@ const CheckInput = styled.input`
     float: left;
     border-radius: 8px;
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       margin-right: 15px;
     }
   }

package/src/components/Organisms/Membership/Membership.style.js

@@ -12,7 +12,7 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   min-height: 100vh;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     align-items: center;
     justify-content: inherit;
     min-height: 750px;
@@ -37,7 +37,7 @@ const BgImage = styled(Picture)`
     height: 100%;
     box-shadow: inset 0px ${spacing('xl')} ${spacing('l')} -${spacing('l')};
   }
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     height: 100%;
 
     :before {