@comicrelief/component-library 8.55.1 → 8.55.2

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

@@ -26,7 +26,6 @@ const DonateBanner = _ref => {
     subtitle = '',
     monthlyTitle = '',
     monthlySubtitle = '',
-    popUpText = 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
     chooseAmountText = null,
     monthlyChooseAmountText = null,
     otherAmountText = 'will help us fund amazing projects in the UK and around the world.',
@@ -41,7 +40,7 @@ const DonateBanner = _ref => {
     donateLink,
     mbshipID
   } = _ref;
-  const isLarge = (0, _reactResponsive.useMediaQuery)({
+  const isLargeBreakpoint = (0, _reactResponsive.useMediaQuery)({
     query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
   });
   const isMedium = (0, _reactResponsive.useMediaQuery)({
@@ -58,14 +57,14 @@ const DonateBanner = _ref => {
     thisOtherAmountText
   } = (0, _utils.handleOtherAmountText)(givingType, otherAmountText, monthlyOtherAmountText);
   const shouldShowImage = donateWidgetIsTextOnly === false;
-  const shouldShowDesktopImage = shouldShowImage && isLarge && imageL && (imageL.images || imageL.image);
-  const shouldShowTopImage = shouldShowImage && !isLarge;
+  const shouldShowDesktopImage = shouldShowImage && isLargeBreakpoint && imageL && (imageL.images || imageL.image);
+  const shouldShowTopImage = shouldShowImage && !isLargeBreakpoint;
   const topImage = isMedium ? imageM : imageS;
-  const shouldRenderTopImage = shouldShowTopImage && topImage && (topImage.images || topImage.image);
+  const shouldRenderTopImage = !!(shouldShowTopImage && topImage && (topImage.images || topImage.image));
 
   // For text-only variants, we hide the title area on non-desktop widths
   // (M and below), so only the form is shown.
-  const shouldShowTitleSection = noTitlesAtAll === false && isLarge && donateWidgetIsTextOnly;
+  const shouldShowTitleSection = noTitlesAtAll === false && isLargeBreakpoint && donateWidgetIsTextOnly;
   return /*#__PURE__*/_react.default.createElement(_DonateBanner.Container, {
     paddingAbove: paddingAbove,
     paddingBelow: paddingBelow,
@@ -103,8 +102,7 @@ const DonateBanner = _ref => {
   }, shouldShowTitleSection && /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperOuter, {
     donateOrientation: donateOrientation
   }, /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    tag: "h2",
-    size: "big",
+    tag: "h1",
     family: "Anton",
     weight: "normal"
   }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -118,7 +116,6 @@ const DonateBanner = _ref => {
     mbshipID: mbshipID,
     donateLink: donateLink,
     hideMoneyBuys: hideMoneyBuys,
-    popUpText: popUpText,
     chooseAmountText: chooseAmountText,
     monthlyChooseAmountText: monthlyChooseAmountText,
     donateWidgetIsTextOnly: donateWidgetIsTextOnly,
@@ -126,7 +123,12 @@ const DonateBanner = _ref => {
     shouldShowTitleSection: shouldShowTitleSection,
     donateOrientation: donateOrientation,
     givingType: givingType,
-    changeGivingType: setGivingType
+    changeGivingType: setGivingType,
+    thisTitle: thisTitle,
+    thisSubtitle: thisSubtitle,
+    showCopy: showCopy,
+    isLargeBreakpoint: isLargeBreakpoint,
+    isMediumBreakpoint: isMedium
   }))));
 };
 var _default = exports.default = DonateBanner;

package/dist/components/Organisms/DonateBanner/DonateBanner.md

@@ -87,7 +87,6 @@ const imageS = {
   monthlySubtitle="A regular gift helps fund long-term impact."
   chooseAmountText="Choose a one-off amount"
   monthlyChooseAmountText="Choose a monthly amount"
-  popUpText="Switching to a single gift means less predictable funding."
 />;
 ```
 
@@ -137,7 +136,30 @@ import data from './dev-data/data';
 />;
 ```
 
-## Different “Other amount” copy for single vs monthly
+## Text-only widget (no image), with giving selector (single vs monthly)
+
+```js
+import data from './dev-data/data';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="grey_light"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3c"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Choose between a one-off or monthly gift."
+  monthlyTitle="Give monthly"
+  monthlySubtitle="A regular gift helps fund long-term impact."
+/>;
+```
+
+## Different "Other amount" copy for single vs monthly
 
 ```js
 import data from './dev-data/data';

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

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.SecondaryTitleText = exports.PrimaryTitleText = exports.OuterFieldset = exports.MoneyBuys = exports.Legend = exports.Label = exports.InnerContainer = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Copy = exports.Container = exports.Button = exports.BgImage = exports.AmountField = void 0;
+exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.SecondaryTitleText = exports.PrimaryTitleText = exports.OuterFieldset = exports.MoneybuyCopy = exports.MoneyBuys = exports.Legend = exports.Label = exports.InnerContainer = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Container = exports.Button = exports.BgImage = exports.AmountField = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Input = _interopRequireDefault(require("../../Atoms/Input/Input"));
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
@@ -31,7 +31,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const InnerContainer = exports.InnerContainer = _styledComponents.default.div.withConfig({
   displayName: "DonateBannerstyle__InnerContainer",
   componentId: "sc-a4o3ek-1"
-})(["position:relative;background-color:", ";border-radius:1rem;overflow:hidden;padding:none;width:100%;box-sizing:border-box;@media ", "{padding:", ";", "}@media ", "{padding-left:", ";padding-right:", ";}max-width:1500px;"], _ref3 => {
+})(["position:relative;background-color:", ";border-radius:1rem;overflow:hidden;padding:none;width:100%;box-sizing:border-box;box-shadow:0px 0px 16px rgba(0,0,0,0.15);@media ", "{padding:", ";", "}@media ", "{padding-left:", ";padding-right:", ";}max-width:1500px;"], _ref3 => {
   let {
     theme,
     componentBackgroundColour
@@ -141,7 +141,7 @@ const Error = exports.Error = (0, _styledComponents.default)(_Text.default).with
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "DonateBannerstyle__Form",
   componentId: "sc-a4o3ek-8"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);margin-left:auto;margin-right:auto;", " h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:100%;margin-right:auto;margin-left:auto;}@media ", "{margin-top:", ";border-radius:0.5rem;max-width:461px;min-width:400px;margin-left:0;margin-right:0;}"], _ref19 => {
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);margin-left:auto;margin-right:auto;", " h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:100%;margin-right:auto;margin-left:auto;}@media ", "{margin-top:", ";border-radius:1rem;max-width:461px;min-width:400px;margin-left:0;margin-right:0;}"], _ref19 => {
   let {
     theme
   } = _ref19;
@@ -166,12 +166,12 @@ const Form = exports.Form = _styledComponents.default.form.withConfig({
 const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "DonateBannerstyle__OuterFieldset",
   componentId: "sc-a4o3ek-9"
-})(["color:", ";padding:0 ", " ", ";margin:0;border:none;@media ", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], _ref23 => {
+})(["color:", ";padding:", ";margin:0;border:none;@media ", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], _ref23 => {
   let {
     theme
   } = _ref23;
   return theme.color('black');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('md'), _ref24 => {
+}, (0, _spacing.default)('m'), _ref24 => {
   let {
     theme
   } = _ref24;
@@ -184,33 +184,28 @@ const Legend = exports.Legend = _styledComponents.default.legend.withConfig({
 const PrimaryTitleText = exports.PrimaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "DonateBannerstyle__PrimaryTitleText",
   componentId: "sc-a4o3ek-11"
-})(["display:block;text-align:left;font-size:", ";font-weight:700;"], _ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.fontSize('s');
-});
+})(["display:block;text-align:left;font-weight:700;"]);
 const SecondaryTitleText = exports.SecondaryTitleText = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "DonateBannerstyle__SecondaryTitleText",
   componentId: "sc-a4o3ek-12"
-})(["display:block;text-align:left;font-size:", ";line-height:1.5;margin-top:", ";"], _ref26 => {
+})(["display:block;text-align:left;font-size:", ";line-height:1.5;margin:", " 0 !important;"], _ref25 => {
   let {
     theme
-  } = _ref26;
+  } = _ref25;
   return theme.fontSize('s');
 }, (0, _spacing.default)('sm'));
 const MoneyBuys = exports.MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "DonateBannerstyle__MoneyBuys",
   componentId: "sc-a4o3ek-13"
-})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";@media ", "{flex-direction:row;margin-top:", ";}label{flex:0 0 31%;margin-bottom:", ";@media ", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('md'), _ref27 => {
+})(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";@media ", "{flex-direction:row;margin-top:", ";}label{flex:0 0 31%;margin-bottom:", ";@media ", "{margin-bottom:0;}input{cursor:pointer;padding:", "  ", ";}}"], (0, _spacing.default)('md'), _ref26 => {
   let {
     theme
-  } = _ref27;
+  } = _ref26;
   return theme.allBreakpoints('M');
-}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref28 => {
+}, (0, _spacing.default)('m'), (0, _spacing.default)('sm'), _ref27 => {
   let {
     theme
-  } = _ref28;
+  } = _ref27;
   return theme.allBreakpoints('M');
 }, (0, _spacing.default)('sm'), (0, _spacing.default)('m'));
 const FormFieldset = exports.FormFieldset = _styledComponents.default.div.withConfig({
@@ -224,45 +219,50 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "DonateBannerstyle__AmountField",
   componentId: "sc-a4o3ek-16"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", " @media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:1px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:1px solid ", ";}}"], _ref29 => {
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", " @media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:1px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:1px solid ", ";}}"], _ref28 => {
   let {
     $noMoneyBuys
-  } = _ref29;
+  } = _ref28;
   return $noMoneyBuys === true && (0, _styledComponents.css)(["margin-top:", ";"], (0, _spacing.default)('sm'));
-}, _ref30 => {
+}, _ref29 => {
   let {
     theme
-  } = _ref30;
+  } = _ref29;
   return theme.allBreakpoints('M');
-}, (0, _zIndex.default)('high'), _ref31 => {
+}, (0, _zIndex.default)('high'), _ref30 => {
   let {
     theme
-  } = _ref31;
+  } = _ref30;
   return theme.color('grey');
-}, _ref32 => {
+}, _ref31 => {
   let {
     theme
-  } = _ref32;
+  } = _ref31;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref33 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref32 => {
   let {
     theme
-  } = _ref33;
+  } = _ref32;
   return theme.color('grey');
 });
-const Copy = exports.Copy = _styledComponents.default.p.withConfig({
-  displayName: "DonateBannerstyle__Copy",
+const MoneybuyCopy = exports.MoneybuyCopy = _styledComponents.default.p.withConfig({
+  displayName: "DonateBannerstyle__MoneybuyCopy",
   componentId: "sc-a4o3ek-17"
-})(["line-height:1.5;margin-top:", ";color:", ";"], (0, _spacing.default)('l'), _ref34 => {
+})(["line-height:1.5;margin-top:", ";color:", ";margin:", " 0 ", ";@media ", "{margin:", " 0 ", ";}"], (0, _spacing.default)('l'), _ref33 => {
   let {
     theme
-  } = _ref34;
+  } = _ref33;
   return theme.color('black');
-});
+}, (0, _spacing.default)('md'), (0, _spacing.default)('sm'), _ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.allBreakpoints('M');
+}, (0, _spacing.default)('m'), (0, _spacing.default)('md'));
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "DonateBannerstyle__Button",
   componentId: "sc-a4o3ek-18"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:0.5rem;border:none;appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}@media ", "{padding:", " ", ";}"], (0, _spacing.default)('sm'), (0, _spacing.default)('sm'), _ref35 => {
+})(["width:100%;margin-top:", ";color:", ";font-size:", ";font-weight:bold;min-height:44px;cursor:pointer;background:", ";text-decoration:none;border-radius:0.5rem;border:none;appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}"], (0, _spacing.default)('md'), _ref35 => {
   let {
     theme
   } = _ref35;
@@ -283,9 +283,4 @@ const Button = exports.Button = _styledComponents.default.button.withConfig({
     theme
   } = _ref38;
   return theme.color('coral_dark');
-}, _ref39 => {
-  let {
-    theme
-  } = _ref39;
-  return theme.allBreakpoints('M');
-}, (0, _spacing.default)('md'), (0, _spacing.default)('l'));
+});

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,