@comicrelief/component-library 8.55.0 → 8.55.2

package/dist/components/Organisms/DonateBanner/Form/Form.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
 var _MoneyBuy = _interopRequireDefault(require("../MoneyBuy/MoneyBuy"));
 var _Membership = require("../../../../utils/Membership");
 var _DonateBanner = require("../DonateBanner.style");
@@ -25,22 +24,22 @@ const Signup = _ref => {
     mbshipID,
     donateOrientation = 'right',
     noMoneyBuys = false,
-    popUpText,
-    chooseAmountText = null,
-    monthlyChooseAmountText = null,
     submitButtonColor = 'red',
     changeGivingType,
     givingType = null,
     hasTopImage = false,
     shouldShowTitleSection = false,
+    donateWidgetIsTextOnly = false,
+    thisTitle = null,
+    thisSubtitle = null,
+    showCopy = false,
+    isLargeBreakpoint = false,
+    isMediumBreakpoint = false,
     ...rest
   } = _ref;
   const [errorMsg, setErrorMsg] = (0, _react.useState)(false);
   const [amountDonate, setAmountDonate] = (0, _react.useState)(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = (0, _react.useState)(true);
-  const [popOpen, setPopOpen] = (0, _react.useState)(false);
-  // In order to keep track of whether the user has ever been shown the popup
-  const [popUpShown, setPopUpShown] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     if (givingType) {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -75,12 +74,6 @@ const Signup = _ref => {
     }
   }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText, noMoneyBuys]);
 
-  // Updates our flag that differentiates between the popup
-  // being *currently* open and it *ever* having been shown to user
-  (0, _react.useEffect)(() => {
-    if (popOpen && !popUpShown) setPopUpShown(true);
-  }, [popOpen, popUpShown]);
-
   // On load, determine what should actually be the default giving type
   (0, _react.useEffect)(() => {
     const newGivingType = singleGiving !== null ? 'single' : 'monthly';
@@ -90,7 +83,7 @@ const Signup = _ref => {
   const submitDonation = (event, amount, clientId, cartId, mbshipId, donateURL) => {
     event.preventDefault();
     if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
-      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType, popUpShown);
+      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType, null);
     } else {
       setErrorMsg(true);
       setMoneyBuyCopy(false);
@@ -141,26 +134,28 @@ const Signup = _ref => {
     }
     return `Donate £${amountDonate} monthly`;
   };
-  const defaultChooseAmountText = `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`;
-  const thisChooseAmountText = givingType === 'monthly' && monthlyChooseAmountText ? monthlyChooseAmountText : chooseAmountText || defaultChooseAmountText;
+  const shouldShowTitleInForm = showCopy && (!donateWidgetIsTextOnly || donateWidgetIsTextOnly && !isLargeBreakpoint);
+
+  // Use h1 tag for text-only version, p tag for image version
+  const titleTag = donateWidgetIsTextOnly ? 'h1' : 'p';
   return /*#__PURE__*/_react.default.createElement(_DonateBanner.FormWrapper, {
     donateOrientation: donateOrientation,
     shouldShowTitleSection: shouldShowTitleSection
-  }, popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
-    popUpText: popUpText,
-    setPopOpen: setPopOpen
-  }), /*#__PURE__*/_react.default.createElement(_DonateBanner.Form, {
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.Form, {
     donateOrientation: donateOrientation,
     hasTopImage: hasTopImage,
     shouldShowTitleSection: shouldShowTitleSection,
     onSubmit: e => submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink)
-  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.OuterFieldset, null, /*#__PURE__*/_react.default.createElement(_DonateBanner.Legend, null, /*#__PURE__*/_react.default.createElement(_DonateBanner.PrimaryTitleText, {
-    tag: "span",
-    color: "black"
-  }, thisChooseAmountText)), showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.OuterFieldset, null, shouldShowTitleInForm ? /*#__PURE__*/_react.default.createElement(_DonateBanner.Legend, null, /*#__PURE__*/_react.default.createElement(_DonateBanner.PrimaryTitleText, {
+    tag: titleTag,
+    $donateWidgetIsTextOnly: donateWidgetIsTextOnly
+  }, thisTitle), thisSubtitle && /*#__PURE__*/_react.default.createElement(_DonateBanner.SecondaryTitleText, {
+    tag: "p",
+    $showGivingSelector: showGivingSelector,
+    $isMediumBreakpoint: isMediumBreakpoint
+  }, thisSubtitle)) : null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: data => changeGivingType(data),
-    setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), !noMoneyBuys && givingType && /*#__PURE__*/_react.default.createElement(_DonateBanner.MoneyBuys, null, givingData.moneybuys.map((_ref2, index) => {
     let {
@@ -199,7 +194,7 @@ const Signup = _ref => {
     placeholder: "0.00",
     onChange: e => setAmountDonate(e.target.value.trim()),
     ref: amountRef
-  }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_DonateBanner.Copy, null, /*#__PURE__*/_react.default.createElement("strong", null, `£${amountDonate} `), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_DonateBanner.Error, {
+  }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_DonateBanner.MoneybuyCopy, null, /*#__PURE__*/_react.default.createElement("strong", null, `£${amountDonate} `), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_DonateBanner.Error, {
     className: "error--amount",
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), /*#__PURE__*/_react.default.createElement(_DonateBanner.Button, {

package/dist/components/Organisms/DonateBanner/GivingSelector/GivingSelector.js

@@ -11,14 +11,12 @@ const GivingSelector = _ref => {
   let {
     givingType = null,
     changeGivingType,
-    setPopOpen,
     mbshipID
   } = _ref;
-  // Only updates giving type and popup status when appropriate
+  // Only updates giving type when appropriate
   const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
     if (currentGivingType !== thisButtonType) {
       changeGivingType(thisButtonType);
-      setPopOpen(thisButtonType === 'single');
     }
   };
   return /*#__PURE__*/_react.default.createElement(_GivingSelector.Wrapper, null, /*#__PURE__*/_react.default.createElement(_GivingSelector.MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {

package/dist/components/Organisms/DonateBanner/GivingSelector/GivingSelector.style.js

@@ -25,26 +25,26 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
 const MoneyBox = exports.MoneyBox = _styledComponents.default.div.withConfig({
   displayName: "GivingSelectorstyle__MoneyBox",
   componentId: "sc-bcwmru-2"
-})(["width:100%;position:relative;display:flex;flex-direction:row;margin:", " 0;overflow:hidden;border-radius:0.5rem;border:1px solid ", ";background:", ";@media ", "{margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50%);}input{", "}"], (0, _spacing.default)('sm'), _ref2 => {
+})(["width:100%;position:relative;display:flex;flex-direction:row;margin:", " 0;overflow:hidden;border-radius:0.5rem;background:", ";@media ", "{margin:0 auto;}.give-monthly:checked ~ ", "{left:calc(50%);}input{", "}input:focus-visible + label{", ";box-shadow:inset 0 0 0 2px ", "};}"], (0, _spacing.default)('sm'), _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.color('grey');
+  return theme.color('white');
 }, _ref3 => {
   let {
     theme
   } = _ref3;
-  return theme.color('white');
-}, _ref4 => {
+  return theme.allBreakpoints('M');
+}, Switch, _hideVisually.default, (0, _zIndex.default)('high'), _ref4 => {
   let {
     theme
   } = _ref4;
-  return theme.allBreakpoints('M');
-}, Switch, _hideVisually.default);
+  return theme.color('blue_donate');
+});
 const Label = exports.Label = _styledComponents.default.label.withConfig({
   displayName: "GivingSelectorstyle__Label",
   componentId: "sc-bcwmru-3"
-})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], _ref5 => {
+})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";color:", ";&:first-of-type{border-left:1px solid ", ";border-top:1px solid ", ";border-bottom:1px solid ", ";border-radius:0.5rem 0 0 0.5rem;}&:last-of-type{border-right:1px solid ", ";border-top:1px solid ", ";border-bottom:1px solid ", ";border-radius:0 0.5rem 0.5rem 0;}&:active:focus{box-shadow:none;}&:focus{border:none;box-shadow:inset 0 0 0 4px ", ";}"], _ref5 => {
   let {
     theme
   } = _ref5;
@@ -67,7 +67,43 @@ const Label = exports.Label = _styledComponents.default.label.withConfig({
   return active === true ? theme.color('white') : theme.color('black');
 }, _ref9 => {
   let {
+    active,
     theme
   } = _ref9;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref10 => {
+  let {
+    active,
+    theme
+  } = _ref10;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref11 => {
+  let {
+    active,
+    theme
+  } = _ref11;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref12 => {
+  let {
+    active,
+    theme
+  } = _ref12;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref13 => {
+  let {
+    active,
+    theme
+  } = _ref13;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref14 => {
+  let {
+    active,
+    theme
+  } = _ref14;
+  return active ? theme.color('red') : theme.color('grey');
+}, _ref15 => {
+  let {
+    theme
+  } = _ref15;
   return theme.color('red');
 });

package/dist/components/Organisms/DonateBanner/MoneyBuy/MoneyBuy.js

@@ -12,7 +12,7 @@ var _Input = _interopRequireDefault(require("../../../Atoms/Input/Input"));
 const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "MoneyBuy__MoneyBuyButton",
   componentId: "sc-1ggxiga-0"
-})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:0.5rem;height:4rem;border:1px solid ", ";&:focus{border:1px solid ", ";}", "}"], _ref => {
+})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:0.5rem;height:3.75rem;border:1px solid ", ";&:focus{border:1px solid ", ";}@media ", "{height:4.5rem;}@media ", "{height:3.4375rem;}", "}"], _ref => {
   let {
     theme
   } = _ref;
@@ -44,33 +44,43 @@ const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig
   return theme.color('red');
 }, _ref7 => {
   let {
-    isSelected
+    theme
   } = _ref7;
-  return isSelected && (0, _styledComponents.css)(["background-color:", ";border:1px solid ", ";color:", ";"], _ref8 => {
+  return theme.allBreakpoints('M');
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('L');
+}, _ref9 => {
+  let {
+    isSelected
+  } = _ref9;
+  return isSelected && (0, _styledComponents.css)(["background-color:", ";border:1px solid ", ";color:", ";"], _ref10 => {
     let {
       theme
-    } = _ref8;
+    } = _ref10;
     return theme.color('red');
-  }, _ref9 => {
+  }, _ref11 => {
     let {
       theme
-    } = _ref9;
+    } = _ref11;
     return theme.color('red');
-  }, _ref10 => {
+  }, _ref12 => {
     let {
       theme
-    } = _ref10;
+    } = _ref12;
     return theme.color('white');
   });
 });
-const MoneyBuy = _ref11 => {
+const MoneyBuy = _ref13 => {
   let {
     setOtherAmount,
     amount = '10',
     currency = '£',
     description = 'description',
     ...rest
-  } = _ref11;
+  } = _ref13;
   return /*#__PURE__*/_react.default.createElement(MoneyBuyButton, Object.assign({}, rest, {
     label: description,
     showLabel: false,