@comicrelief/component-library 6.2.0 → 6.4.0

package/src/components/Organisms/Donate/Donate.md

@@ -1,17 +1,20 @@
 # Donate
 
-## Form align right
+## Form align right, with red backgound on desktop view
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="red"
   formAlignRight={true}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -27,13 +30,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -49,13 +55,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -71,13 +80,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -89,3 +101,126 @@ const pictures = require('../../../styleguide/data/data').default;
   otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
+
+## Form align right - no subtitle
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Form align left - no subtitle
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving - no subtitle
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys"
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+
+```js
+import data from './dev-data/data-single';
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+  chooseAmountText="Overridden via the 'choose amount text' props"
+/>;
+```

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

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+// import styled, { css } from 'styled-components';
 
 import Input from '../../Atoms/Input/Input';
 import Text from '../../Atoms/Text/Text';
@@ -8,18 +9,30 @@ import Picture from '../../Atoms/Picture/Picture';
 import zIndex from '../../../theme/shared/zIndex';
 
 const Container = styled.div`
-  background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   position: relative;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   height: auto;
+  background-color: ${({ theme }) => theme.color('blue_dark')};
   ${media('medium')} {
+    flex-direction: row;
     align-items: center;
     justify-content: inherit;
+    background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
   }
 `;
 
+const PopUp = styled.div`
+  background: green;
+  height: 100px;
+`;
+
+const MobImage = styled(Picture)`
+`;
+
 const BgImage = styled(Picture)`
+  display: block;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -223,9 +236,11 @@ const Button = styled.button`
 
 export {
   BgImage,
+  MobImage,
   Button,
   Copy,
   Container,
+  PopUp,
   Error,
   FormFieldset,
   FormWrapper,

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

@@ -5,7 +5,7 @@ import Donate from './Donate';
 import data from './dev-data/data';
 import singleData from './dev-data/data-single';
 
-const pictures = require('../../../styleguide/data/data').default;
+const defaultData = require('../../../styleguide/data/data').defaultData;
 
 it('Monthly donation renders correctly', () => {
   const tree = renderWithTheme(
@@ -13,8 +13,8 @@ it('Monthly donation renders correctly', () => {
       alt="Background image"
       backgroundColor="blue_dark"
       formAlignRight
-      imageLow={pictures.imageLow}
-      images={pictures.images}
+      imageLow={defaultData.pictures.imageLow}
+      images={defaultData.pictures.images}
       data={data}
       mbshipID="mship-1"
       donateLink="https://donation.comicrelief.com/"
@@ -34,8 +34,8 @@ it('Single donation renders correctly', () => {
     <Donate
       backgroundColor="blue_dark"
       formAlignRight={false}
-      imageLow={pictures.imageLow}
-      images={pictures.images}
+      imageLow={defaultData.pictures.imageLow}
+      images={defaultData.pictures.images}
       data={singleData}
       mbshipID="mship-1"
       donateLink="https://donation.comicrelief.com/"
@@ -55,8 +55,8 @@ it('Single donation with no Money Buys renders correctly', () => {
     <Donate
       backgroundColor="blue_dark"
       formAlignRight={false}
-      imageLow={pictures.imageLow}
-      images={pictures.images}
+      imageLow={defaultData.pictures.imageLow}
+      images={defaultData.pictures.images}
       data={singleData}
       mbshipID="mship-1"
       donateLink="https://donation.comicrelief.com/"
@@ -66,6 +66,7 @@ it('Single donation with no Money Buys renders correctly', () => {
       noMoneyBuys
       subtitle="Please help us fund life-changing projects in the UK and around the world."
       otherDescription="will help us fund amazing projects in the UK and around the world."
+      chooseAmountText="Overridden via the 'choose amount text' props"
     />
   ).toJSON();
 

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
+import PopUpComponent from './PopUpComponent';
 import Text from '../../../Atoms/Text/Text';
 import MoneyBox from '../MoneyBox/MoneyBox';
 import {
@@ -30,6 +31,8 @@ const Signup = ({
   cartID,
   mbshipID,
   noMoneyBuys,
+  PopUpText,
+  chooseAmountText,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -122,6 +125,10 @@ const Signup = ({
         />
       )}
 
+      {(givingType === 'single' && showGivingSelector)
+        && <PopUpComponent PopUpText={PopUpText} />
+      }
+
       <Form
         onSubmit={e => submitDonation(
           e,
@@ -136,7 +143,7 @@ const Signup = ({
         <OuterFieldset>
           <Legend>
             <Text tag="span" size="l" weight="bold">
-              {`${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`}
+              {chooseAmountText || `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`}
             </Text>
           </Legend>
           {!noMoneyBuys && (
@@ -213,11 +220,14 @@ Signup.propTypes = {
   otherDescription: PropTypes.string.isRequired,
   mbshipID: PropTypes.string.isRequired,
   noMoneyBuys: PropTypes.bool,
-  data: PropTypes.objectOf(PropTypes.shape)
+  data: PropTypes.objectOf(PropTypes.shape),
+  PopUpText: PropTypes.string.isRequired,
+  chooseAmountText: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
   data: {}
 };
+
 export default Signup;

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

@@ -0,0 +1,63 @@
+/* eslint-disable */ 
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Text from '../../../Atoms/Text/Text';
+import spacing from '../../../../theme/shared/spacing';
+import { media } from '../../../../theme/shared/size';
+import PropTypes from 'prop-types';
+import CloseCross from '../assets/close.svg';
+
+const StyledPopUp = styled.div`
+  display: ${props => props.isPop ? "grid" : "none"};
+  gap: ${spacing('sm')};
+  background-color: ${({ theme }) => theme.color('white')};
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+
+  ${media('small')} {
+    width: 450px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+`;
+
+const TextWrapper = styled.div`
+  margin: 0 32px 32px;
+`;
+
+const Button = styled.button`
+  justify-self: end;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  :active,
+  :focus,
+  :hover {
+    outline: none;
+    border: 1px solid ${({ theme }) => theme.color('grey')};
+  }
+  margin: 17px 17px 0;
+  /* This sets the size of the svg close.svg icon */
+  width: 20px;
+`;
+
+const PopUpComponent = ({ PopUpText }) => {
+  const [isPop, setIsPop] = useState(true);
+
+  return (
+    <StyledPopUp isPop={isPop}>
+      <Button onClick={() => setIsPop(false)} aria-label="Close">
+        <img src={CloseCross} alt="Close cross icon"/>
+      </Button>
+      <TextWrapper>
+        <Text>{ PopUpText }</Text>
+      </TextWrapper>
+    </StyledPopUp>
+  )
+};
+
+PopUpComponent.propTypes = {
+  PopUpText: PropTypes.string.isRequired
+};
+
+export default PopUpComponent;