@comicrelief/component-library 6.3.0 → 6.4.1

package/dist/components/Organisms/Donate/Donate.js

@@ -15,6 +15,8 @@ var _size = require("../../../theme/shared/size");
 
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+
 var _Form = _interopRequireDefault(require("./Form/Form"));
 
 var _Donate = require("./Donate.style");
@@ -39,14 +41,15 @@ var Donate = function Donate(_ref) {
       mobileAlt = _ref.mobileAlt,
       mbshipID = _ref.mbshipID,
       noMoneyBuys = _ref.noMoneyBuys,
-      PopUpText = _ref.PopUpText;
+      PopUpText = _ref.PopUpText,
+      chooseAmountText = _ref.chooseAmountText;
   var isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
   });
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
     id: mbshipID
-  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Donate.MobImage, {
+  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
     backgroundColor: backgroundColor,
     image: mobileImage,
     images: mobileImages,
@@ -88,7 +91,8 @@ var Donate = function Donate(_ref) {
     mbshipID: mbshipID,
     donateLink: donateLink,
     noMoneyBuys: noMoneyBuys,
-    PopUpText: PopUpText
+    PopUpText: PopUpText,
+    chooseAmountText: chooseAmountText
   })));
 };
 
@@ -108,7 +112,8 @@ Donate.defaultProps = {
   otherDescription: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
-  PopUpText: "Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact."
+  PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+  chooseAmountText: ''
 };
 var _default = Donate;
 exports.default = _default;

package/dist/components/Organisms/Donate/Donate.md

@@ -111,7 +111,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -136,7 +136,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -204,7 +204,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
-## Single Giving "No Money Buys", no background image
+## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
@@ -221,5 +221,6 @@ import data from './dev-data/data-single';
   noMoneyBuys
   subtitle=""
   otherDescription="will help us fund amazing projects in the UK and around the world."
+  chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Legend = exports.OuterFieldset = exports.AmountField = exports.MoneyBuys = exports.Form = exports.Wrapper = exports.Label = exports.HeaderInner = exports.Header = exports.FormWrapper = exports.FormFieldset = exports.Error = exports.PopUp = exports.Container = exports.Copy = exports.Button = exports.MobImage = exports.BgImage = void 0;
+exports.Legend = exports.OuterFieldset = exports.AmountField = exports.MoneyBuys = exports.Form = exports.Wrapper = exports.Label = exports.HeaderInner = exports.Header = exports.FormWrapper = exports.FormFieldset = exports.Error = exports.PopUp = exports.Container = exports.Copy = exports.Button = exports.BgImage = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -42,22 +42,20 @@ var PopUp = _styledComponents.default.div.withConfig({
 })(["background:green;height:100px;"]);
 
 exports.PopUp = PopUp;
-var MobImage = (0, _styledComponents.default)(_Picture.default).withConfig({
-  displayName: "Donatestyle__MobImage",
-  componentId: "sc-8rjm3t-2"
-})([""]);
-exports.MobImage = MobImage;
 var BgImage = (0, _styledComponents.default)(_Picture.default).withConfig({
   displayName: "Donatestyle__BgImage",
-  componentId: "sc-8rjm3t-3"
-})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;opacity:0.4;"]);
+  componentId: "sc-8rjm3t-2"
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;", ""], function (_ref3) {
+  var backgroundColor = _ref3.backgroundColor;
+  return backgroundColor !== 'transparent' && "\n    opacity: 0.4;\n  ";
+});
 exports.BgImage = BgImage;
 
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
-  componentId: "sc-8rjm3t-4"
-})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref3) {
-  var formAlignRight = _ref3.formAlignRight;
+  componentId: "sc-8rjm3t-3"
+})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), function (_ref4) {
+  var formAlignRight = _ref4.formAlignRight;
   return formAlignRight === true ? 'row-reverse' : 'row';
 }, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 
@@ -65,9 +63,9 @@ exports.Wrapper = Wrapper;
 
 var Header = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Header",
-  componentId: "sc-8rjm3t-5"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref4) {
-  var theme = _ref4.theme;
+  componentId: "sc-8rjm3t-4"
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref5) {
+  var theme = _ref5.theme;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 
@@ -75,37 +73,37 @@ exports.Header = Header;
 
 var HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__HeaderInner",
-  componentId: "sc-8rjm3t-6"
+  componentId: "sc-8rjm3t-5"
 })(["position:relative;text-align:left;"]);
 
 exports.HeaderInner = HeaderInner;
 
 var FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
-  componentId: "sc-8rjm3t-7"
-})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref5) {
-  var theme = _ref5.theme;
+  componentId: "sc-8rjm3t-6"
+})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref6) {
+  var theme = _ref6.theme;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
 
 exports.FormWrapper = FormWrapper;
 var Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
-  componentId: "sc-8rjm3t-8"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.color('red');
-}, function (_ref7) {
+  componentId: "sc-8rjm3t-7"
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref7) {
   var theme = _ref7.theme;
+  return theme.color('red');
+}, function (_ref8) {
+  var theme = _ref8.theme;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 exports.Error = Error;
 
 var Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
-  componentId: "sc-8rjm3t-9"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], function (_ref8) {
-  var theme = _ref8.theme;
+  componentId: "sc-8rjm3t-8"
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], function (_ref9) {
+  var theme = _ref9.theme;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 
@@ -113,70 +111,70 @@ exports.Form = Form;
 
 var OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Donatestyle__OuterFieldset",
-  componentId: "sc-8rjm3t-10"
+  componentId: "sc-8rjm3t-9"
 })(["padding:0 ", " ", ";margin:0;border:none;", "{padding:0 ", " ", ";}input[type='submit']{margin-bottom:0;}"], (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _size.media)('small'), (0, _spacing.default)('l'), (0, _spacing.default)('l'));
 
 exports.OuterFieldset = OuterFieldset;
 
 var Legend = _styledComponents.default.legend.withConfig({
   displayName: "Donatestyle__Legend",
-  componentId: "sc-8rjm3t-11"
+  componentId: "sc-8rjm3t-10"
 })(["margin:0;padding:", " ", ";display:block;width:100%;"], (0, _spacing.default)('l'), (0, _spacing.default)('sm'));
 
 exports.Legend = Legend;
 
 var MoneyBuys = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__MoneyBuys",
-  componentId: "sc-8rjm3t-12"
+  componentId: "sc-8rjm3t-11"
 })(["display:flex;justify-content:space-between;flex-direction:column;margin-bottom:", ";", "{flex-direction:row;}label{flex:0 0 30%;margin-bottom:", ";", "{margin-bottom:0;}input{cursor:pointer;}}"], (0, _spacing.default)('l'), (0, _size.media)('small'), (0, _spacing.default)('sm'), (0, _size.media)('small'));
 
 exports.MoneyBuys = MoneyBuys;
 
 var FormFieldset = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormFieldset",
-  componentId: "sc-8rjm3t-13"
+  componentId: "sc-8rjm3t-12"
 })(["display:flex;align-items:center;justify-content:center;"]);
 
 exports.FormFieldset = FormFieldset;
 var Label = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Label",
-  componentId: "sc-8rjm3t-14"
+  componentId: "sc-8rjm3t-13"
 })(["margin-right:", ";"], (0, _spacing.default)('sm'));
 exports.Label = Label;
 var AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
-  componentId: "sc-8rjm3t-15"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.color('grey');
-}, function (_ref10) {
+  componentId: "sc-8rjm3t-14"
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{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:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), function (_ref10) {
   var theme = _ref10.theme;
-  return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref11) {
+  return theme.color('grey');
+}, function (_ref11) {
   var theme = _ref11.theme;
+  return theme.color('grey_light');
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref12) {
+  var theme = _ref12.theme;
   return theme.color('grey');
 });
 exports.AmountField = AmountField;
 var Copy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Copy",
-  componentId: "sc-8rjm3t-16"
+  componentId: "sc-8rjm3t-15"
 })(["line-height:1.5;margin-top:", ";"], (0, _spacing.default)('l'));
 exports.Copy = Copy;
 
 var Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
-  componentId: "sc-8rjm3t-17"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.color('white');
-}, function (_ref13) {
+  componentId: "sc-8rjm3t-16"
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), function (_ref13) {
   var theme = _ref13.theme;
-  return theme.fontSize('s');
+  return theme.color('white');
 }, function (_ref14) {
   var theme = _ref14.theme;
-  return theme.color('red');
+  return theme.fontSize('s');
 }, function (_ref15) {
   var theme = _ref15.theme;
+  return theme.color('red');
+}, function (_ref16) {
+  var theme = _ref16.theme;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));
 

package/dist/components/Organisms/Donate/Donate.test.js

@@ -65,7 +65,8 @@ it('Single donation with no Money Buys renders correctly', function () {
     title: "Donate Now",
     noMoneyBuys: true,
     subtitle: "Please help us fund life-changing projects in the UK and around the world.",
-    otherDescription: "will help us fund amazing projects in the UK and around the world."
+    otherDescription: "will help us fund amazing projects in the UK and around the world.",
+    chooseAmountText: "Overridden via the 'choose amount text' props"
   })).toJSON();
   expect(tree).toMatchSnapshot();
 });

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

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText"];
+var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -42,6 +42,7 @@ var Signup = function Signup(_ref) {
       mbshipID = _ref.mbshipID,
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
+      chooseAmountText = _ref.chooseAmountText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -121,7 +122,7 @@ var Signup = function Signup(_ref) {
     tag: "span",
     size: "l",
     weight: "bold"
-  }, "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map(function (_ref2, index) {
+  }, chooseAmountText || "".concat(noMoneyBuys ? 'Enter' : 'Choose', " an amount to give"))), !noMoneyBuys && /*#__PURE__*/_react.default.createElement(_Donate.MoneyBuys, null, givingData.moneybuys.map(function (_ref2, index) {
     var value = _ref2.value;
     return /*#__PURE__*/_react.default.createElement(_MoneyBox.default, {
       isSelected: amountDonate === value,

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

@@ -29,9 +29,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:", ";gap:", ";background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:8px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
+})(["display:", ";background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:8px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
   return props.isPop ? "grid" : "none";
-}, (0, _spacing.default)('sm'), function (_ref) {
+}, function (_ref) {
   var theme = _ref.theme;
   return theme.color('white');
 }, (0, _size.media)('small'));
@@ -44,13 +44,16 @@ var TextWrapper = _styledComponents.default.div.withConfig({
 var Button = _styledComponents.default.button.withConfig({
   displayName: "PopUpComponent__Button",
   componentId: "sc-1d7imlo-2"
-})(["justify-self:end;background:transparent;border:0;cursor:pointer;:active,:focus,:hover{outline:none;border:1px solid ", ";}margin:17px 17px 0;width:20px;"], function (_ref2) {
+})(["justify-self:end;background:transparent;border:0;cursor:pointer;border:1px solid ", ";:active,:focus,:hover{outline:none;border:1px solid ", ";}margin:8px;width:35px;height:35px;padding:5px;img{width:15px;height:15px;vertical-align:middle;}"], function (_ref2) {
   var theme = _ref2.theme;
+  return theme.color('white');
+}, function (_ref3) {
+  var theme = _ref3.theme;
   return theme.color('grey');
 });
 
-var PopUpComponent = function PopUpComponent(_ref3) {
-  var PopUpText = _ref3.PopUpText;
+var PopUpComponent = function PopUpComponent(_ref4) {
+  var PopUpText = _ref4.PopUpText;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

@@ -107,7 +107,6 @@ exports[`Monthly donation renders correctly 1`] = `
 
 .c13 {
   display: grid;
-  gap: 0.5rem;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   border-radius: 8px;
@@ -122,8 +121,11 @@ exports[`Monthly donation renders correctly 1`] = `
   background: transparent;
   border: 0;
   cursor: pointer;
-  margin: 17px 17px 0;
-  width: 20px;
+  border: 1px solid #FFFFFF;
+  margin: 8px;
+  width: 35px;
+  height: 35px;
+  padding: 5px;
 }
 
 .c14:active,
@@ -133,6 +135,12 @@ exports[`Monthly donation renders correctly 1`] = `
   border: 1px solid #969598;
 }
 
+.c14 img {
+  width: 15px;
+  height: 15px;
+  vertical-align: middle;
+}
+
 .c23 {
   display: block;
 }
@@ -742,7 +750,7 @@ exports[`Monthly donation renders correctly 1`] = `
             color="inherit"
             size="s"
           >
-            Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact.
+            Help us deliver long-term impact by converting your single donation into a monthly gift.
           </span>
         </div>
       </div>
@@ -2042,7 +2050,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
               color="inherit"
               size="l"
             >
-              Enter an amount to give
+              Overridden via the 'choose amount text' props
             </span>
           </legend>
           <div

package/dist/theme/crTheme/colors.js

@@ -52,7 +52,8 @@ var colors = {
   white: '#FFFFFF',
   yellow: '#FFE400',
   yellow_dark: '#665700',
-  yellow_light: '#FEFD5A'
+  yellow_light: '#FEFD5A',
+  transparent: 'transparent'
 };
 
 var _default = function _default(colorName) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 import { screen } from '../../../theme/shared/size';
 import Text from '../../Atoms/Text/Text';
+import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
 import {
-  MobImage,
   BgImage,
   Container,
   Header,
@@ -34,14 +34,15 @@ const Donate = ({
   mobileAlt,
   mbshipID,
   noMoneyBuys,
-  PopUpText
+  PopUpText,
+  chooseAmountText
 }) => {
   const isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
   return (
     <Container backgroundColor={backgroundColor} id={mbshipID}>
       {!isDesktop && mobileImages ? (
-        <MobImage
+        <Picture
           backgroundColor={backgroundColor}
           image={mobileImage}
           images={mobileImages}
@@ -99,6 +100,7 @@ const Donate = ({
           donateLink={donateLink}
           noMoneyBuys={noMoneyBuys}
           PopUpText={PopUpText}
+          chooseAmountText={chooseAmountText}
         />
       </Wrapper>
     </Container>
@@ -125,7 +127,8 @@ Donate.propTypes = {
   backgroundColor: PropTypes.string,
   mbshipID: PropTypes.string,
   noMoneyBuys: PropTypes.bool,
-  PopUpText: PropTypes.string
+  PopUpText: PropTypes.string,
+  chooseAmountText: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -145,7 +148,8 @@ Donate.defaultProps = {
     'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
-  PopUpText: "Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact."
+  PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+  chooseAmountText: ''
 };
 
 export default Donate;

package/src/components/Organisms/Donate/Donate.md

@@ -111,7 +111,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -136,7 +136,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  backgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -204,7 +204,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
-## Single Giving "No Money Buys", no background image
+## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
@@ -221,5 +221,6 @@ import data from './dev-data/data-single';
   noMoneyBuys
   subtitle=""
   otherDescription="will help us fund amazing projects in the UK and around the world."
+  chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```

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

@@ -28,9 +28,6 @@ const PopUp = styled.div`
   height: 100px;
 `;
 
-const MobImage = styled(Picture)`
-`;
-
 const BgImage = styled(Picture)`
   display: block;
   position: absolute;
@@ -38,7 +35,9 @@ const BgImage = styled(Picture)`
   left: 0;
   right: 0;
   height: 100%;
-  opacity: 0.4;
+  ${({ backgroundColor }) => backgroundColor !== 'transparent' && `
+    opacity: 0.4;
+  `}
 `;
 
 const Wrapper = styled.div`
@@ -236,7 +235,6 @@ const Button = styled.button`
 
 export {
   BgImage,
-  MobImage,
   Button,
   Copy,
   Container,

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

@@ -66,6 +66,7 @@ it('Single donation with no Money Buys renders correctly', () => {
       noMoneyBuys
       subtitle="Please help us fund life-changing projects in the UK and around the world."
       otherDescription="will help us fund amazing projects in the UK and around the world."
+      chooseAmountText="Overridden via the 'choose amount text' props"
     />
   ).toJSON();
 

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

@@ -32,6 +32,7 @@ const Signup = ({
   mbshipID,
   noMoneyBuys,
   PopUpText,
+  chooseAmountText,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -142,7 +143,7 @@ const Signup = ({
         <OuterFieldset>
           <Legend>
             <Text tag="span" size="l" weight="bold">
-              {`${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`}
+              {chooseAmountText || `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`}
             </Text>
           </Legend>
           {!noMoneyBuys && (
@@ -220,7 +221,8 @@ Signup.propTypes = {
   mbshipID: PropTypes.string.isRequired,
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),
-  PopUpText: PropTypes.string.isRequired
+  PopUpText: PropTypes.string.isRequired,
+  chooseAmountText: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {

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

@@ -9,7 +9,6 @@ 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;
@@ -30,15 +29,23 @@ const Button = styled.button`
   background: transparent;
   border: 0;
   cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.color('white')};
   :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;
+  margin: 8px;
+  width: 35px;
+  height: 35px;
+  padding: 5px;
+
+  img {
+    width: 15px;
+    height: 15px;
+    vertical-align: middle;
+  }
 `;
 
 const PopUpComponent = ({ PopUpText }) => {

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

@@ -107,7 +107,6 @@ exports[`Monthly donation renders correctly 1`] = `
 
 .c13 {
   display: grid;
-  gap: 0.5rem;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   border-radius: 8px;
@@ -122,8 +121,11 @@ exports[`Monthly donation renders correctly 1`] = `
   background: transparent;
   border: 0;
   cursor: pointer;
-  margin: 17px 17px 0;
-  width: 20px;
+  border: 1px solid #FFFFFF;
+  margin: 8px;
+  width: 35px;
+  height: 35px;
+  padding: 5px;
 }
 
 .c14:active,
@@ -133,6 +135,12 @@ exports[`Monthly donation renders correctly 1`] = `
   border: 1px solid #969598;
 }
 
+.c14 img {
+  width: 15px;
+  height: 15px;
+  vertical-align: middle;
+}
+
 .c23 {
   display: block;
 }
@@ -742,7 +750,7 @@ exports[`Monthly donation renders correctly 1`] = `
             color="inherit"
             size="s"
           >
-            Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact.
+            Help us deliver long-term impact by converting your single donation into a monthly gift.
           </span>
         </div>
       </div>
@@ -2042,7 +2050,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
               color="inherit"
               size="l"
             >
-              Enter an amount to give
+              Overridden via the 'choose amount text' props
             </span>
           </legend>
           <div

package/src/theme/crTheme/colors.js

@@ -44,7 +44,8 @@ const colors = {
   white: '#FFFFFF',
   yellow: '#FFE400',
   yellow_dark: '#665700',
-  yellow_light: '#FEFD5A'
+  yellow_light: '#FEFD5A',
+  transparent: 'transparent'
 };
 
 export default colorName => {