@comicrelief/component-library 6.4.1 → 6.6.0

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

@@ -68,7 +68,7 @@ const Donate = ({
         />
       ) : null}
 
-      <Wrapper formAlignRight={formAlignRight}>
+      <Wrapper formAlignRight={formAlignRight} aria-live="polite">
         <Header formAlignRight={formAlignRight}>
           <HeaderInner>
             {subtitle && (

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

@@ -116,18 +116,19 @@ const Signup = ({
   const givingData = givingType === 'single' ? singleGiving : regularGiving;
   const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
+  const [popOpen, setPopOpen] = useState(false);
+
   return (
     <FormWrapper>
       {showGivingSelector && (
         <GivingSelector
           givingType={givingType}
           changeGivingType={data => setGivingType(data)}
+          setPopOpen={setPopOpen}
         />
       )}
 
-      {(givingType === 'single' && showGivingSelector)
-        && <PopUpComponent PopUpText={PopUpText} />
-      }
+      { popOpen && <PopUpComponent PopUpText={PopUpText} /> }
 
       <Form
         onSubmit={e => submitDonation(

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

@@ -1,17 +1,49 @@
 /* eslint-disable */ 
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled, { css, keyframes } 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 fadeClose = keyframes`
+  0% {
+    opacity: 1;
+    max-height: 350px;
+  }
+  100% {
+    opacity: 0;
+    max-height: 0px;
+    display: none;
+    margin-top: -16px;
+  }
+`;
+
+const fadeOpen = keyframes`
+  0% {
+    opacity: 0;
+    max-height: 0px;
+    display: none;
+    margin-top: -16px;
+  }
+  100% {
+    opacity: 1;
+    max-height: 350px;
+  }
+`;
+
 const StyledPopUp = styled.div`
-  display: ${props => props.isPop ? "grid" : "none"};
-  background-color: ${({ theme }) => theme.color('white')};
+  display: grid;
+  overflow: hidden;
+  max-height: 350px;
+  opacity: 1;
+  animation: 0.4s ${fadeOpen} ease;
+  ${props => props.isClosed && css`
+    animation: 0.6s ${fadeClose} ease forwards;
+  `}
+  background-color: ${({ theme }) => theme.color('blue_light')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
+  border-radius: 10px;
 
   ${media('small')} {
     width: 450px;
@@ -26,20 +58,18 @@ const TextWrapper = styled.div`
 
 const Button = styled.button`
   justify-self: end;
-  background: transparent;
+  background-color: transparent;
   border: 0;
   cursor: pointer;
-  border: 1px solid ${({ theme }) => theme.color('white')};
+  width: 30px;
+  height: 30px;
+  margin: 3px;
   :active,
   :focus,
   :hover {
     outline: none;
     border: 1px solid ${({ theme }) => theme.color('grey')};
   }
-  margin: 8px;
-  width: 35px;
-  height: 35px;
-  padding: 5px;
 
   img {
     width: 15px;
@@ -49,11 +79,11 @@ const Button = styled.button`
 `;
 
 const PopUpComponent = ({ PopUpText }) => {
-  const [isPop, setIsPop] = useState(true);
+  const [isClosed, setIsClosed] = useState(false);
 
   return (
-    <StyledPopUp isPop={isPop}>
-      <Button onClick={() => setIsPop(false)} aria-label="Close">
+    <StyledPopUp isClosed={isClosed}>
+      <Button onClick={() => setIsClosed(true)} aria-label="Close">
         <img src={CloseCross} alt="Close cross icon"/>
       </Button>
       <TextWrapper>

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

@@ -80,7 +80,7 @@ const Label = styled.label`
   }
 `;
 
-const GivingSelector = ({ givingType, changeGivingType }) => (
+const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
   <Wrapper>
     <MoneyBox>
       <input
@@ -93,6 +93,7 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
         checked={givingType === 'single'}
         onClick={() => {
           changeGivingType('single');
+          setPopOpen(true);
         }}
       />
       <Label active={givingType === 'single'} htmlFor="give-once">
@@ -108,6 +109,7 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
         checked={givingType === 'monthly'}
         onClick={() => {
           changeGivingType('monthly');
+          setPopOpen(false);
         }}
       />
       <Label active={givingType === 'monthly'} htmlFor="give-monthly">
@@ -120,7 +122,8 @@ const GivingSelector = ({ givingType, changeGivingType }) => (
 
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,
-  changeGivingType: PropTypes.func.isRequired
+  changeGivingType: PropTypes.func.isRequired,
+  setPopOpen: PropTypes.bool.isRequired
 };
 
 export default GivingSelector;