@comicrelief/component-library 6.2.0 → 6.3.0

package/src/components/Molecules/SearchResult/SearchResult.md

@@ -1,12 +1,11 @@
 ### Minimalist
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   title="News article"
   alt="Image's description"
 />;
@@ -15,12 +14,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With copy
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   title="News article"
   copy="News article copy"
   alt="Image's description"
@@ -30,12 +28,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With date
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   date="01 July 2019"
   title="News article"
   alt="Image's description"
@@ -45,12 +42,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With date and type
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   date="01 July 2019"
   type="article"
   title="News article"

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

@@ -2,13 +2,13 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import SearchResult from './SearchResult';
-import data from '../../../styleguide/data/data';
+import { defaultData } from '../../../styleguide/data/data';
 
 it('renders correctly in minimalist form', () => {
   const tree = renderWithTheme(
     <SearchResult
       href="/test"
-      image={data.image}
+      image={defaultData.image}
       title="News article"
       alt="Image's description"
     />
@@ -21,7 +21,7 @@ it('renders correctly with copy', () => {
   const tree = renderWithTheme(
     <SearchResult
       href="/test"
-      image={data.image}
+      image={defaultData.image}
       title="News article"
       copy="News article copy"
       alt="Image's description"
@@ -35,7 +35,7 @@ it('renders correctly with date', () => {
   const tree = renderWithTheme(
     <SearchResult
       href="/test"
-      image={data.image}
+      image={defaultData.image}
       date="01 July 2019"
       title="News article"
       alt="Image's description"
@@ -49,7 +49,7 @@ it('renders correctly with date and type', () => {
   const tree = renderWithTheme(
     <SearchResult
       href="/test"
-      image={data.image}
+      image={defaultData.image}
       date="01 July 2019"
       type="article"
       title="News article"

package/src/components/Molecules/SingleMessage/SingleMessage.md

@@ -1,14 +1,13 @@
 Single Message
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
 >
@@ -29,14 +28,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -59,14 +57,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage no copy
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -91,13 +88,12 @@ Single Message vertical height 100%
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple_dark"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   vhFull
 >
@@ -112,16 +108,15 @@ Single Message double image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="yellow"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
-  imageSet2={data.images}
-  image2={data.image}
+  imageSet2={defaultData.images}
+  image2={defaultData.image}
   imageAltText2=""
 >
   <Text tag="p" color="black" size="xxl">
@@ -135,12 +130,11 @@ Single Message with 16:9 video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -154,12 +148,11 @@ const data = require('../../../styleguide/data/data').default;
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   videoID="WUgvvPRH7Oc"
@@ -175,12 +168,11 @@ Single Message with portrait video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="FoMlSB6ftQg"
@@ -195,12 +187,11 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="fwCQRMlKBnA"
@@ -216,12 +207,11 @@ Single Message with landscape video, 100VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -239,12 +229,11 @@ Single Message with landscape video, 50VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"

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

@@ -2,16 +2,15 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import SingleMessage from './SingleMessage';
-import data from '../../../styleguide/data/data';
-import Text from '../../Atoms/Text/Text';
+import { defaultData }  from '../../../styleguide/data/data';import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 it('renders Single Message with Image correctly', () => {
   const tree = renderWithTheme(
     <SingleMessage
       backgroundColor="purple"
-      imageSet={data.images}
-      image={data.image}
+      imageSet={defaultData.images}
+      image={defaultData.image}
       imageAltText=""
       copyFirst={false}
     >
@@ -47,8 +46,8 @@ it('renders Single Message with full width correctly', () => {
   const tree = renderWithTheme(
     <SingleMessage
       backgroundColor="purple"
-      imageSet={data.images}
-      image={data.image}
+      imageSet={defaultData.images}
+      image={defaultData.image}
       imageAltText=""
       copyFirst={false}
       fullImage
@@ -72,8 +71,8 @@ it('renders Single Message with full width image and no text correctly', () => {
   const tree = renderWithTheme(
     <SingleMessage
       backgroundColor="purple"
-      imageSet={data.images}
-      image={data.image}
+      imageSet={defaultData.images}
+      image={defaultData.image}
       imageAltText=""
       copyFirst={false}
       fullImage
@@ -87,9 +86,9 @@ it('renders Single Message with 100% vertical height image correctly', () => {
   const tree = renderWithTheme(
     <SingleMessage
       backgroundColor="purple"
-      imageLow={data.imageLow}
-      imageSet={data.images}
-      image={data.image}
+      imageLow={defaultData.imageLow}
+      imageSet={defaultData.images}
+      image={defaultData.image}
       imageAltText=""
       vhFull
     >
@@ -107,12 +106,12 @@ it('renders Single Message with double image correctly', () => {
   const tree = renderWithTheme(
     <SingleMessage
       backgroundColor="yellow"
-      imageLow={data.imageLow}
-      imageSet={data.images}
-      image={data.image}
+      imageLow={defaultData.imageLow}
+      imageSet={defaultData.images}
+      image={defaultData.image}
       imageAltText=""
-      imageSet2={data.images}
-      image2={data.image}
+      imageSet2={defaultData.images}
+      image2={defaultData.image}
       imageAltText2=""
     >
       <Text tag="p" color="black" size="xxl">

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

@@ -3,8 +3,7 @@
 ## Image align left and CTA are clickable and links user through to full conten
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -29,8 +28,8 @@ const Title = styled(Text)`
       link='/home'
       linkLabel='Check out'
       backgroundColor='white'
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -51,8 +50,7 @@ const Title = styled(Text)`
 ## Image align right  and CTA are clickable and links user through to full content
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -77,8 +75,8 @@ const Title = styled(Text)`
       ctaBgColor="blue_dark"
       backgroundColor='white'
       imageLeft={false}
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -98,8 +96,7 @@ const Title = styled(Text)`
 ## Image align with non CTA
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -122,8 +119,8 @@ const Title = styled(Text)`
       ctaBgColor="blue_dark"
       backgroundColor='white'
       imageLeft={true}
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -143,8 +140,7 @@ const Title = styled(Text)`
 ## Using the linkIcon prop (to display download icon)
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -155,9 +151,9 @@ import Download from '../../Atoms/Icons/Download';
       link="https://assets.ctfassets.net/zsfivwzfgl3t/EsIEuI1teYkbLB7peOtqP/b43a905cffd89115d642fe5a84ff020a/RND21_fundraise_moneybuys_poster.pdf"
       linkLabel='Download this'
       linkIcon={<Download />}
-      imageLow={data.image}
+      imageLow={defaultData.image}
       imageLeft={true}
-      images={data.images}
+      images={defaultData.images}
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -171,8 +167,7 @@ import Download from '../../Atoms/Icons/Download';
 ## Video with no CTA
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -180,8 +175,8 @@ import Download from '../../Atoms/Icons/Download';
 
 <div>
     <SingleMessageDs
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
     >

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

@@ -4,8 +4,7 @@ import renderWithTheme from '../../../hoc/shallowWithTheme';
 import SingleMessageDs from './SingleMessageDs';
 import Text from '../../Atoms/Text/Text';
 import Download from '../../Atoms/Icons/Download';
-import data from '../../../styleguide/data/data';
-
+import { defaultData } from '../../../styleguide/data/data';
 it('renders correctly', () => {
   const tree = renderWithTheme(
     <SingleMessageDs
@@ -15,8 +14,8 @@ it('renders correctly', () => {
       ctaBgColor="blue_dark"
       backgroundColor="white"
       imageDirection="right"
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText="Happy man going to work"
       subtitle="Subtitle"
       title="Heading Line 1 Heading Line 2"

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
+import { screen } from '../../../theme/shared/size';
 import Text from '../../Atoms/Text/Text';
 import Form from './Form/Form';
 import {
+  MobImage,
   BgImage,
   Container,
   Header,
@@ -25,55 +28,82 @@ const Donate = ({
   images,
   image,
   imageLow,
+  mobileImages,
+  mobileImage,
+  mobileImageLow,
+  mobileAlt,
   mbshipID,
-  noMoneyBuys
-}) => (
-  <Container backgroundColor={backgroundColor} id={mbshipID}>
-    {images ? (
-      <BgImage
-        backgroundColor={backgroundColor}
-        image={image}
-        images={images}
-        imageLow={imageLow}
-        objectFit="cover"
-        width="100%"
-        height="100%"
-        alt={alt}
-        isBackgroundImage
-      />
-    ) : null}
+  noMoneyBuys,
+  PopUpText
+}) => {
+  const isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
-    <Wrapper formAlignRight={formAlignRight}>
-      <Header formAlignRight={formAlignRight}>
-        <HeaderInner>
-          <Text
-            tag="h2"
-            color="white"
-            size="big"
-            family="Anton"
-            weight="normal"
-            uppercase
-          >
-            {title}
-          </Text>
-          <Text tag="p" color="white" size="m">
-            {subtitle}
-          </Text>
-        </HeaderInner>
-      </Header>
+  return (
+    <Container backgroundColor={backgroundColor} id={mbshipID}>
+      {!isDesktop && mobileImages ? (
+        <MobImage
+          backgroundColor={backgroundColor}
+          image={mobileImage}
+          images={mobileImages}
+          imageLow={mobileImageLow}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+          alt={mobileAlt}
+        />
+      ) : null}
 
-      <Form
-        data={data}
-        otherDescription={otherDescription}
-        cartID={cartID}
-        clientID={clientID}
-        mbshipID={mbshipID}
-        donateLink={donateLink}
-        noMoneyBuys={noMoneyBuys}
-      />
-    </Wrapper>
-  </Container>
-);
+      {isDesktop && images ? (
+        <BgImage
+          backgroundColor={backgroundColor}
+          image={image}
+          images={images}
+          imageLow={imageLow}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+          alt={alt}
+          isBackgroundImage
+        />
+      ) : null}
+
+      <Wrapper formAlignRight={formAlignRight}>
+        <Header formAlignRight={formAlignRight}>
+          <HeaderInner>
+            {subtitle && (
+              <>
+                <Text
+                  tag="h2"
+                  color="white"
+                  size="big"
+                  family="Anton"
+                  weight="normal"
+                  uppercase
+                >
+                  {title}
+                </Text>
+                <Text tag="p" color="white" size="m">
+                  {subtitle}
+                </Text>
+              </>
+            )}
+          </HeaderInner>
+        </Header>
+
+        <Form
+          data={data}
+          otherDescription={otherDescription}
+          cartID={cartID}
+          clientID={clientID}
+          mbshipID={mbshipID}
+          donateLink={donateLink}
+          noMoneyBuys={noMoneyBuys}
+          PopUpText={PopUpText}
+        />
+      </Wrapper>
+    </Container>
+  );
+};
 
 Donate.propTypes = {
   alt: PropTypes.string,
@@ -83,14 +113,19 @@ Donate.propTypes = {
   donateLink: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   otherDescription: PropTypes.string,
-  subtitle: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
   imageLow: PropTypes.string,
   image: PropTypes.string,
   images: PropTypes.string,
+  mobileImageLow: PropTypes.string,
+  mobileImage: PropTypes.string,
+  mobileImages: PropTypes.string,
+  mobileAlt: PropTypes.string,
   backgroundColor: PropTypes.string,
   mbshipID: PropTypes.string,
-  noMoneyBuys: PropTypes.bool
+  noMoneyBuys: PropTypes.bool,
+  PopUpText: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -100,11 +135,17 @@ Donate.defaultProps = {
   imageLow: null,
   image: null,
   images: null,
-  backgroundColor: null,
+  mobileImageLow: null,
+  mobileImage: null,
+  mobileImages: null,
+  mobileAlt: '',
+  backgroundColor: 'blue_dark',
   mbshipID: null,
   otherDescription:
     'will help us fund amazing projects in the UK and around the world.',
-  noMoneyBuys: false
+  subtitle: '',
+  noMoneyBuys: false,
+  PopUpText: "Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact."
 };
 
 export default Donate;