@comicrelief/component-library 7.38.0 → 7.40.0

package/src/components/Molecules/Card/Card.test.js

@@ -14,6 +14,23 @@ it('renders correctly', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders correctly', () => {
+  const tree = renderWithTheme(
+    <Card
+      image={defaultData.image}
+      images={defaultData.image}
+      backgroundColor="yellow"
+      smallBreakpointLayout="Row"
+      mediumBreakpointLayout="Row"
+    >
+      <h2>Title</h2>
+      <p>Text body copy description. Loads more text test. Loads more text test.</p>
+    </Card>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders correctly with no body', () => {
   const tree = renderWithTheme(
     <Card imageLow={defaultData.image} images={defaultData.image} backgroundColor="yellow" />

package/src/components/Molecules/Card/__snapshots__/Card.test.js.snap

@@ -2,14 +2,75 @@
 
 exports[`renders correctly 1`] = `
 .c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  border-radius: 1rem;
+  overflow: hidden;
+  background: #FFE400;
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  >
+    <h2>
+      Title
+    </h2>
+    <p>
+      Description
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -17,7 +78,6 @@ exports[`renders correctly 1`] = `
 }
 
 .c1 {
-  padding: 2rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,6 +85,31 @@ exports[`renders correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  padding: 2rem;
+}
+
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
 }
 
 <div
@@ -37,7 +122,7 @@ exports[`renders correctly 1`] = `
       Title
     </h2>
     <p>
-      Description
+      Text body copy description. Loads more text test. Loads more text test.
     </p>
   </div>
 </div>
@@ -59,14 +144,11 @@ exports[`renders correctly with no body 1`] = `
 }
 
 .c0 {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  position: relative;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
   height: 100%;
   border-radius: 1rem;
   overflow: hidden;
@@ -77,6 +159,30 @@ exports[`renders correctly with no body 1`] = `
   height: auto;
 }
 
+@media (min-width:0px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:740px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
+@media (min-width:1024px) {
+  .c0 {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+}
+
 <div
   className="c0"
 >

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

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
-import media from '../../../theme/shared/breakpoint';
 import redShed from './assets/CR_RedShed.svg';
 import howWeFund from './assets/CR_Funding.svg';
 import mentalHealth from './assets/CR_MentalHealth.svg';
@@ -56,7 +55,7 @@ const CheckLabel = styled.label`
   padding-right: 1rem;
   flex: 0 0 auto;
   position: relative;
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: ${spacing('md')} ${spacing('md')} 0 0;
   }
 `;

package/src/components/Molecules/Chip/Chip.test.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Chip from './Chip';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Chip from "./Chip";
 
-it('renders article teaser correctly', () => {
-  const handleToggle = e => e.target.value;
+it("renders article teaser correctly", () => {
+  const handleToggle = (e) => e.target.value;
   const tree = renderWithTheme(
     <Chip category="Gender Justice" handleToggle={handleToggle} />
   ).toJSON();
@@ -32,10 +32,6 @@ it('renders article teaser correctly', () => {
       position: relative;
     }
 
-    .c0 (min-width:740px) {
-      margin: 1rem 1rem 0 0;
-    }
-
     .c2 {
       display: block;
       position: absolute;
@@ -93,6 +89,12 @@ it('renders article teaser correctly', () => {
       border-width: 3px;
     }
 
+    @media (min-width:740px) {
+      .c0 {
+        margin: 1rem 1rem 0 0;
+      }
+    }
+
     <label
       className="c0"
     >

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -1,14 +1,18 @@
-import React from 'react';
-import 'jest-styled-components';
+import React from "react";
+import "jest-styled-components";
 
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import PartnerLink from './PartnerLink';
-import Picture from '../../Atoms/Picture/Picture';
-import { defaultData } from '../../../styleguide/data/data';
-it('renders correctly', () => {
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import PartnerLink from "./PartnerLink";
+import Picture from "../../Atoms/Picture/Picture";
+import { defaultData } from "../../../styleguide/data/data";
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <PartnerLink link="https://www.comicrelief.com">
-      <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
+      <Picture
+        alt="test Image"
+        imageLow={defaultData.imageLow}
+        images={defaultData.images}
+      />
     </PartnerLink>
   ).toJSON();
 

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { media, container } from '../../../theme/shared/size';
+import container from '../../../theme/shared/allContainers';
 import spacing from '../../../theme/shared/spacing';
 import zIndex from '../../../theme/shared/zIndex';
 
@@ -10,25 +10,25 @@ const Container = styled.div`
   flex-direction: column;
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex-direction: row;
   }
   ${({ position }) => position === 'upper' && css`
     clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
-    ${media('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
     }
   `}
   ${({ position }) => position === 'lower' && css`
     clip-path: polygon(0 10%,100% 0,100% 100%,0 100%);
-    ${media('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       clip-path: polygon(0 15%,100% 0,100% 100%,0 100%);
     }
   `}
   ${({ position }) => position === 'end' && css`
     clip-path: polygon(0 0, 100% 0, 100% 90%, 0 101%);
     border-radius: 0 0 0 2rem;
-    ${media('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       clip-path: polygon(0 0,100% 0,100% 85%,0% 101%);
       border-radius: 0 0 0 4rem;
     }
@@ -47,7 +47,7 @@ const Wrapper = styled.div`
   position: relative;
 
   ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     min-height: calc(100vh - 90px);
   }
 `;
@@ -57,14 +57,14 @@ const Copy = styled.div`
   padding: ${spacing('m')} ${spacing('m')} ${spacing('xl')};
   ${zIndex('low')};
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 100%;
     padding: ${spacing('xxl')} ${spacing('m')};
   }
 
   ${({ position }) => position === 'lower' && css`
     padding: ${spacing('xl')} ${spacing('m')};
-    ${media('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       padding: 6rem ${spacing('m')};
       margin-top: 6rem;
     }
@@ -77,7 +77,7 @@ const Media = styled.div`
   img {
     object-position: center;
   }
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     height: 100%;
     position: absolute;
   }
@@ -97,7 +97,7 @@ const Gradient = styled.div`
   display: flex;
   align-items: center;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 50%;
     position: absolute;
     top: 0;

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

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 import Input from '../../Atoms/Input/Input';
-import { media } from '../../../theme/shared/size';
 import spacing from '../../../theme/shared/spacing';
 
 const Wrapper = styled.div`
@@ -39,7 +38,7 @@ const SearchField = styled(Input)`
     :focus {
       border: 0;
     }
-    ${media('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       height: 100px;
       font-size: ${({ theme }) => theme.fontSize('xxl')};
     }

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
-import { media, container } from '../../../theme/shared/size';
+import container from '../../../theme/shared/allContainers';
 import zIndex from '../../../theme/shared/zIndex';
 import playIcon from './assets/video--play-icon.svg';
 import playIconHover from './assets/video--play-icon__hover.svg';
@@ -13,7 +13,7 @@ const Container = styled.div`
   flex-direction: column;
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: ${({ copyFirst }) => (copyFirst === true ? 'row-reverse' : 'row')};
     ${({ landscapeVideo, hasVideo, fullImage }) => (landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null)};
   }
@@ -33,7 +33,7 @@ const Copy = styled.div`
   ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
   padding: ${spacing('l')};
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     ${({ vhFull, fullImage }) => (vhFull || fullImage
     ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;'
     : 'height: auto;')};
@@ -49,7 +49,7 @@ const Copy = styled.div`
 
   ${props => props.fullImage
     && css`
-      ${media('small')} {
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
         position: absolute;
         width: 100%;
         right: 0;
@@ -75,7 +75,7 @@ const Copy = styled.div`
           padding: ${spacing('md')};
         `)};
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     ${({ paddingOption }) => handlePadding(paddingOption)};
   }
 `;
@@ -94,7 +94,7 @@ const Media = styled.div`
   ${({ hasVideo }) => (hasVideo
     ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;'
     : null)};
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding-bottom: ${({ landscapeVideo, hasVideo }) => (landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;')};
   }
 `;
@@ -123,7 +123,7 @@ const PlayButton = styled.button`
     background-image: ${({ isBuffering }) => (isBuffering === true ? `url(${loadingIcon})` : `url(${playIconHover})`)};
   }
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     background-size: 100px;
   }
 `;

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

@@ -3,7 +3,6 @@ import styled, { css } from 'styled-components';
 import Input from '../../Atoms/Input/Input';
 import Text from '../../Atoms/Text/Text';
 import spacing from '../../../theme/shared/spacing';
-import { media } from '../../../theme/shared/size';
 import Picture from '../../Atoms/Picture/Picture';
 import zIndex from '../../../theme/shared/zIndex';
 import handlePadding from '../../../utils/_utils';
@@ -15,7 +14,7 @@ const Container = styled.div`
   justify-content: center;
   height: auto;
   background-color: ${({ theme, mobileBackgroundColor }) => theme.color(mobileBackgroundColor)};
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex-direction: row;
     align-items: center;
     justify-content: inherit;
@@ -56,11 +55,11 @@ const Wrapper = styled.div`
     justify-content: center;
   `};
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('xl')} ${spacing('md')};
   }
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     display: flex;
     padding: ${spacing('xl')} 0;
     ${({ paddingOption }) => handlePadding(paddingOption)};
@@ -71,7 +70,7 @@ const TitleWrapperOuter = styled.div`
   width: 100%;
   display: flex;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 50%;
     padding: ${spacing('xl')};
     align-items: center;
@@ -86,7 +85,7 @@ const TitleWrapperInner = styled.div`
 const FormWrapper = styled.div`
   position: relative;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 50%;
   }
 `;
@@ -118,7 +117,7 @@ const Form = styled.form`
     margin: ${spacing('l')} 0;
   }
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 450px;
     margin-right: auto;
     margin-left: auto;
@@ -129,7 +128,7 @@ const OuterFieldset = styled.fieldset`
   padding: 0 ${spacing('md')} ${spacing('md')};
   margin: 0;
   border: none;
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 0 ${spacing('l')} ${spacing('l')};
   }
 
@@ -150,13 +149,13 @@ const MoneyBuys = styled.div`
   justify-content: space-between;
   flex-direction: column;
   margin-bottom: ${spacing('l')};
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
   }
   label {
     flex: 0 0 30%;
     margin-bottom: ${spacing('sm')};
-    ${media('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       margin-bottom: 0;
     }
     input {
@@ -184,7 +183,7 @@ const AmountField = styled(Input)`
   font-weight: 400;
   display: block;
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-basis: 60%;
   }
 
@@ -238,7 +237,7 @@ const Button = styled.button`
     background-color: ${({ theme }) => theme.color('coral_dark')};
   }
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: ${spacing('md')} ${spacing('l')};
   }
 `;

package/src/components/Organisms/Donate/Form/PopUpComponent.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
-import { media } from '../../../../theme/shared/size';
 import CloseCross from '../assets/close.svg';
 
 const closeDuration = 0.6;
@@ -46,7 +45,7 @@ const StyledPopUp = styled.div`
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
   border-radius: 10px;
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 450px;
     margin-right: auto;
     margin-left: auto;

package/src/components/Organisms/Donate/GivingSelector/GivingSelector.style.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-import { media } from '../../../../theme/shared/size';
 import spacing from '../../../../theme/shared/spacing';
 import zIndex from '../../../../theme/shared/zIndex';
 import hideVisually from '../../../../theme/shared/hideVisually';
@@ -32,7 +31,7 @@ const MoneyBox = styled.div`
   margin: ${spacing('md')} 0;
   border-radius: 2rem;
   background: ${({ theme }) => theme.color('blue_light')};
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 450px;
     margin: 0 auto;
   }

package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components';
 
 import Input from '../../../Atoms/Input/Input';
 import spacing from '../../../../theme/shared/spacing';
-import { media } from '../../../../theme/shared/size';
 
 const MoneyBuyButton = styled(Input)`
   display: block;
@@ -19,7 +18,7 @@ const MoneyBuyButton = styled(Input)`
     padding: ${spacing('s')};
     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
     height: auto;
-    ${media('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       font-size: ${({ theme }) => theme.fontSize('xl')};
       padding: ${spacing('m')};
     }

package/src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -70,12 +70,6 @@ exports[`renders correctly 1`] = `
   color: #FFFFFF;
 }
 
-.c15 (min-width:1024px) {
-  width: auto;
-  padding: 1rem 2rem;
-  margin: 0 auto 2rem;
-}
-
 .c8 {
   position: relative;
   display: -webkit-box;
@@ -223,6 +217,14 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c15 {
+    width: auto;
+    padding: 1rem 2rem;
+    margin: 0 auto 2rem;
+  }
+}
+
 @media (min-width:740px) {
   .c13 {
     max-width: 290px;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
-import { container } from '../../../theme/shared/size';
+import container from '../../../theme/shared/allContainers';
 import spacing from '../../../theme/shared/spacing';
 
 const HeaderWrapper = styled.header.attrs(() => ({

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import { media } from '../../../theme/shared/size';
 import checkBoxIcon from './assets/CR_Tick_black.svg';
 import TextInput from './_TextInput';
 
@@ -9,7 +8,7 @@ const OuterWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
     flex-wrap: wrap;
   }
@@ -166,7 +165,7 @@ const ExtraInfo = styled.span`
 const MPTextInput = styled(TextInput)`
   input {
     border: 1px solid  ${({ theme }) => theme.color('black')};;
-    ${media('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       max-width: none;
     }
   }