@comicrelief/component-library 7.29.0 → 7.30.0

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

@@ -1,5 +1,4 @@
-import styled from 'styled-components';
-// import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import Input from '../../Atoms/Input/Input';
 import Text from '../../Atoms/Text/Text';
@@ -48,7 +47,14 @@ const Wrapper = styled.div`
   align-items: center;
   display: block;
   width: 100%;
+  // TO-DO: this condition is WRONG and needs fixing (should be 'false'), but deploy this change will
+  // require a lot of content updates down the line in order to bring the pages back to the desired layout
   flex-direction: ${({ formAlignRight }) => (formAlignRight === true ? 'row-reverse' : 'row')};
+
+  ${({ noTitlesAtAll }) => noTitlesAtAll === true && css`
+    justify-content: center;
+  `};
+
   ${media('small')} {
     padding: ${spacing('xl')} ${spacing('md')};
   }
@@ -58,7 +64,7 @@ const Wrapper = styled.div`
   }
 `;
 
-const Header = styled.div`
+const TitleWrapperOuter = styled.div`
   width: 100%;
   display: flex;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
@@ -69,7 +75,7 @@ const Header = styled.div`
   }
 `;
 
-const HeaderInner = styled.div`
+const TitleWrapperInner = styled.div`
   position: relative;
   text-align: left;
 `;
@@ -243,8 +249,8 @@ export {
   Error,
   FormFieldset,
   FormWrapper,
-  Header,
-  HeaderInner,
+  TitleWrapperInner,
+  TitleWrapperOuter,
   Label,
   Wrapper,
   Form,

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

@@ -80,11 +80,12 @@ const Signup = ({
     if (givingType) {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-      let moneyBuyNewDescription = otherAmountText;
+      let moneyBuyUpdatedDescription = otherAmountText;
 
       givingData.moneybuys.map((moneyBuy, index) => {
-        if (moneyBuy.value === amountDonate) {
-          moneyBuyNewDescription = moneyBuy.description;
+        // Only show the MB-associated copy when we're actually showing moneybuys
+        if (moneyBuy.value === amountDonate && !noMoneyBuys) {
+          moneyBuyUpdatedDescription = moneyBuy.description;
         }
 
         return (
@@ -100,7 +101,7 @@ const Signup = ({
         if (!errorMsg) setErrorMsg(true);
       } else {
         if (errorMsg) setErrorMsg(false);
-        setMoneyBuyCopy(moneyBuyNewDescription);
+        setMoneyBuyCopy(moneyBuyUpdatedDescription);
       }
     }
   }, [
@@ -110,7 +111,8 @@ const Signup = ({
     regularGiving,
     givingType,
     amountDonate,
-    otherAmountText
+    otherAmountText,
+    noMoneyBuys
   ]);
 
   // Updates our flag that differentiates between the popup
@@ -292,7 +294,7 @@ const Signup = ({
               ref={amountRef}
             />
           </FormFieldset>
-          {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
+          {amountDonate >= 1 && moneyBuyCopy && (
             <Copy as="p">
               <strong>{`£${amountDonate} `}</strong>
               {moneyBuyCopy}
@@ -343,10 +345,10 @@ Signup.propTypes = {
   additionalSingleCopy: PropTypes.string,
   additionalMonthlyCopy: PropTypes.string,
   defaultGivingType: PropTypes.string,
-  monthlyChooseAmountCopy: PropTypes.string.isRequired,
-  monthlyOtherAmountCopy: PropTypes.string.isRequired,
+  monthlyChooseAmountCopy: PropTypes.string,
+  monthlyOtherAmountCopy: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
-  givingType: PropTypes.string.isRequired
+  givingType: PropTypes.string
 };
 
 Signup.defaultProps = {
@@ -355,7 +357,10 @@ Signup.defaultProps = {
   data: {},
   additionalSingleCopy: null,
   additionalMonthlyCopy: null,
-  defaultGivingType: null
+  defaultGivingType: null,
+  monthlyChooseAmountCopy: null,
+  monthlyOtherAmountCopy: null,
+  givingType: null
 };
 
 export default Signup;

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

@@ -239,6 +239,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 .c24 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c25 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -257,9 +262,9 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   appearance: none;
 }
 
-.c24:active,
-.c24:focus,
-.c24:hover {
+.c25:active,
+.c25:focus,
+.c25:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -492,7 +497,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c24 {
+  .c25 {
     padding: 1rem 2rem;
   }
 }
@@ -514,6 +519,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -639,8 +645,16 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
               
             </label>
           </div>
-          <button
+          <p
             className="c24"
+          >
+            <strong>
+              £345.67 
+            </strong>
+            will help us fund amazing projects in the UK and around the world.
+          </p>
+          <button
+            className="c25"
             color="red"
             type="submit"
           >
@@ -1142,6 +1156,7 @@ exports[`Monthly donation renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -1803,6 +1818,7 @@ exports[`Single donation renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -2256,6 +2272,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 .c18 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c19 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -2274,9 +2295,9 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   appearance: none;
 }
 
-.c18:active,
-.c18:focus,
-.c18:hover {
+.c19:active,
+.c19:focus,
+.c19:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -2366,7 +2387,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c18 {
+  .c19 {
     padding: 1rem 2rem;
   }
 }
@@ -2381,6 +2402,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -2463,8 +2485,15 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
               
             </label>
           </div>
-          <button
+          <p
             className="c18"
+          >
+            <strong>
+              £10 
+            </strong>
+          </p>
+          <button
+            className="c19"
             color="red"
             type="submit"
           >

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

@@ -1,8 +1,12 @@
 const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle) => {
   let thisTitle; let thisSubtitle;
+  const showSingleCopy = Boolean(subtitle) && Boolean(title);
   const showMonthlyCopy = givingType === 'monthly' && Boolean(monthlySubtitle) && Boolean(monthlyTitle);
-  // Overall flag as to whether we render copy *at all*
-  const showCopy = showMonthlyCopy || (Boolean(subtitle) && Boolean(title));
+  // Overall flag as to whether we render copy for the currently selected givingType
+  const showCopy = showMonthlyCopy || showSingleCopy;
+
+  // Acts as a flag to centre the form when no copy is supplied *at all*
+  const noTitlesAtAll = showSingleCopy === false && showMonthlyCopy === false;
 
   // Apply the override if we've got monthly content AND giving type:
   if (showMonthlyCopy) {
@@ -14,7 +18,9 @@ const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle
     thisSubtitle = subtitle;
   }
 
-  return { showCopy, thisTitle, thisSubtitle };
+  return {
+    showCopy, thisTitle, thisSubtitle, noTitlesAtAll
+  };
 };
 
 const handleCopy = (gType, otherAmount, chooseAmount, monthlyOtherAmount, monthlyChooseAmount) => {