@comicrelief/component-library 6.1.5 → 6.3.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,125 @@ 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
+
+```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."
+/>;
+```

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/"

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,7 @@ const Signup = ({
   cartID,
   mbshipID,
   noMoneyBuys,
+  PopUpText,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -122,6 +124,10 @@ const Signup = ({
         />
       )}
 
+      {(givingType === 'single' && showGivingSelector)
+        && <PopUpComponent PopUpText={PopUpText} />
+      }
+
       <Form
         onSubmit={e => submitDonation(
           e,
@@ -179,13 +185,19 @@ const Signup = ({
               aria-label="Input a different amount"
             />
           </FormFieldset>
+          {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
+            <Copy as="p">
+              <strong>{`£${amountDonate.toFixed(2)} `}</strong>
+              {moneyBuyCopy}
+            </Copy>
+          )}
           {noMoneyBuys ? (
             <Button type="submit" as="input" value="Donate" />
           ) : (
             <Button
               type="submit"
               as="input"
-              value={givingType === 'single' ? 'Donate once' : 'Donate monthly'}
+              value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
             />
           )}
           {errorMsg && (
@@ -194,12 +206,6 @@ const Signup = ({
               places
             </Error>
           )}
-          {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
-            <Copy as="p">
-              <strong>{`£${amountDonate.toFixed(2)} `}</strong>
-              {moneyBuyCopy}
-            </Copy>
-          )}
         </OuterFieldset>
       </Form>
     </FormWrapper>
@@ -213,11 +219,13 @@ 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
 };
 
 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;

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

@@ -84,9 +84,9 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
   <Wrapper>
     <MoneyBox>
       <input
-        aria-label="Give once"
+        aria-label="Single"
         id="give-once"
-        value="Give once"
+        value="Single"
         type="radio"
         label=""
         errormsg=""
@@ -96,12 +96,12 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
         }}
       />
       <Label active={givingType === 'single'} htmlFor="give-once">
-        Give once
+        Single
       </Label>
       <input
-        aria-label="Give monthly"
+        aria-label="Monthly"
         id="give-monthly"
-        value="Give monthly"
+        value="Monthly"
         type="radio"
         label=""
         errormsg=""
@@ -111,7 +111,7 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
         }}
       />
       <Label active={givingType === 'monthly'} htmlFor="give-monthly">
-        Give monthly
+        Monthly
       </Label>
       <Switch />
     </MoneyBox>