@comicrelief/component-library 6.2.0 → 6.4.0

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

@@ -1,17 +1,20 @@
 # Donate
 
-## Form align right
+## Form align right, with red backgound on desktop view
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="red"
   formAlignRight={true}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -27,13 +30,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -49,13 +55,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -71,13 +80,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -89,3 +101,126 @@ const pictures = require('../../../styleguide/data/data').default;
   otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
+
+## Form align right - no subtitle
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Form align left - no subtitle
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving - no subtitle
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys"
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+
+```js
+import data from './dev-data/data-single';
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  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.Container = exports.Copy = exports.Button = 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.MobImage = exports.BgImage = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -21,27 +21,43 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 
+// import styled, { css } from 'styled-components';
 var Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
-})(["background-color:", ";position:relative;display:flex;justify-content:center;height:auto;", "{align-items:center;justify-content:inherit;}"], function (_ref) {
-  var theme = _ref.theme,
-      backgroundColor = _ref.backgroundColor;
+})(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.color('blue_dark');
+}, (0, _size.media)('medium'), function (_ref2) {
+  var theme = _ref2.theme,
+      backgroundColor = _ref2.backgroundColor;
   return theme.color(backgroundColor);
-}, (0, _size.media)('medium'));
+});
 
 exports.Container = Container;
+
+var PopUp = _styledComponents.default.div.withConfig({
+  displayName: "Donatestyle__PopUp",
+  componentId: "sc-8rjm3t-1"
+})(["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-1"
-})(["position:absolute;bottom:0;left:0;right:0;height:100%;opacity:0.4;"]);
+  componentId: "sc-8rjm3t-3"
+})(["display:block;position:absolute;bottom:0;left:0;right:0;height:100%;opacity:0.4;"]);
 exports.BgImage = BgImage;
 
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
-  componentId: "sc-8rjm3t-2"
-})(["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 (_ref2) {
-  var formAlignRight = _ref2.formAlignRight;
+  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;
   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'));
 
@@ -49,9 +65,9 @@ exports.Wrapper = Wrapper;
 
 var Header = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Header",
-  componentId: "sc-8rjm3t-3"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref3) {
-  var theme = _ref3.theme;
+  componentId: "sc-8rjm3t-5"
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], function (_ref4) {
+  var theme = _ref4.theme;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 
@@ -59,37 +75,37 @@ exports.Header = Header;
 
 var HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__HeaderInner",
-  componentId: "sc-8rjm3t-4"
+  componentId: "sc-8rjm3t-6"
 })(["position:relative;text-align:left;"]);
 
 exports.HeaderInner = HeaderInner;
 
 var FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
-  componentId: "sc-8rjm3t-5"
-})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref4) {
-  var theme = _ref4.theme;
+  componentId: "sc-8rjm3t-7"
+})(["position:relative;font-family:", ";", "{width:50%;}"], function (_ref5) {
+  var theme = _ref5.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-6"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.color('red');
-}, function (_ref6) {
+  componentId: "sc-8rjm3t-8"
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], function (_ref6) {
   var theme = _ref6.theme;
+  return theme.color('red');
+}, function (_ref7) {
+  var theme = _ref7.theme;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 exports.Error = Error;
 
 var Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
-  componentId: "sc-8rjm3t-7"
-})(["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 (_ref7) {
-  var theme = _ref7.theme;
+  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;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 
@@ -97,70 +113,70 @@ exports.Form = Form;
 
 var OuterFieldset = _styledComponents.default.fieldset.withConfig({
   displayName: "Donatestyle__OuterFieldset",
-  componentId: "sc-8rjm3t-8"
+  componentId: "sc-8rjm3t-10"
 })(["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-9"
+  componentId: "sc-8rjm3t-11"
 })(["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-10"
+  componentId: "sc-8rjm3t-12"
 })(["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-11"
+  componentId: "sc-8rjm3t-13"
 })(["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-12"
+  componentId: "sc-8rjm3t-14"
 })(["margin-right:", ";"], (0, _spacing.default)('sm'));
 exports.Label = Label;
 var AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
-  componentId: "sc-8rjm3t-13"
-})(["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 (_ref8) {
-  var theme = _ref8.theme;
-  return theme.color('grey');
-}, function (_ref9) {
+  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_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), function (_ref10) {
+  return theme.color('grey');
+}, 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) {
+  var theme = _ref11.theme;
   return theme.color('grey');
 });
 exports.AmountField = AmountField;
 var Copy = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Copy",
-  componentId: "sc-8rjm3t-14"
+  componentId: "sc-8rjm3t-16"
 })(["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-15"
-})(["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 (_ref11) {
-  var theme = _ref11.theme;
-  return theme.color('white');
-}, function (_ref12) {
+  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.fontSize('s');
+  return theme.color('white');
 }, function (_ref13) {
   var theme = _ref13.theme;
-  return theme.color('red');
+  return theme.fontSize('s');
 }, function (_ref14) {
   var theme = _ref14.theme;
+  return theme.color('red');
+}, function (_ref15) {
+  var theme = _ref15.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

@@ -14,15 +14,15 @@ var _data = _interopRequireDefault(require("./dev-data/data"));
 
 var _dataSingle = _interopRequireDefault(require("./dev-data/data-single"));
 
-var pictures = require('../../../styleguide/data/data').default;
+var defaultData = require('../../../styleguide/data/data').defaultData;
 
 it('Monthly donation renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     alt: "Background image",
     backgroundColor: "blue_dark",
     formAlignRight: true,
-    imageLow: pictures.imageLow,
-    images: pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    images: defaultData.pictures.images,
     data: _data.default,
     mbshipID: "mship-1",
     donateLink: "https://donation.comicrelief.com/",
@@ -38,8 +38,8 @@ it('Single donation renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     backgroundColor: "blue_dark",
     formAlignRight: false,
-    imageLow: pictures.imageLow,
-    images: pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    images: defaultData.pictures.images,
     data: _dataSingle.default,
     mbshipID: "mship-1",
     donateLink: "https://donation.comicrelief.com/",
@@ -55,8 +55,8 @@ it('Single donation with no Money Buys renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
     backgroundColor: "blue_dark",
     formAlignRight: false,
-    imageLow: pictures.imageLow,
-    images: pictures.images,
+    imageLow: defaultData.pictures.imageLow,
+    images: defaultData.pictures.images,
     data: _dataSingle.default,
     mbshipID: "mship-1",
     donateLink: "https://donation.comicrelief.com/",
@@ -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

@@ -13,6 +13,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _PopUpComponent = _interopRequireDefault(require("./PopUpComponent"));
+
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 
 var _MoneyBox = _interopRequireDefault(require("../MoneyBox/MoneyBox"));
@@ -23,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherDescription", "clientID", "cartID", "mbshipID", "noMoneyBuys"];
+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); }
 
@@ -39,6 +41,8 @@ var Signup = function Signup(_ref) {
       cartID = _ref.cartID,
       mbshipID = _ref.mbshipID,
       noMoneyBuys = _ref.noMoneyBuys,
+      PopUpText = _ref.PopUpText,
+      chooseAmountText = _ref.chooseAmountText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -108,6 +112,8 @@ var Signup = function Signup(_ref) {
     changeGivingType: function changeGivingType(data) {
       return setGivingType(data);
     }
+  }), givingType === 'single' && showGivingSelector && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
+    PopUpText: PopUpText
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
     onSubmit: function onSubmit(e) {
       return submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink);
@@ -116,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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+
+var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
+
+var _size = require("../../../../theme/shared/size");
+
+var _close = _interopRequireDefault(require("../assets/close.svg"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable */
+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) {
+  return props.isPop ? "grid" : "none";
+}, (0, _spacing.default)('sm'), function (_ref) {
+  var theme = _ref.theme;
+  return theme.color('white');
+}, (0, _size.media)('small'));
+
+var TextWrapper = _styledComponents.default.div.withConfig({
+  displayName: "PopUpComponent__TextWrapper",
+  componentId: "sc-1d7imlo-1"
+})(["margin:0 32px 32px;"]);
+
+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) {
+  var theme = _ref2.theme;
+  return theme.color('grey');
+});
+
+var PopUpComponent = function PopUpComponent(_ref3) {
+  var PopUpText = _ref3.PopUpText;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPop = _useState2[0],
+      setIsPop = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
+    isPop: isPop
+  }, /*#__PURE__*/_react.default.createElement(Button, {
+    onClick: function onClick() {
+      return setIsPop(false);
+    },
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _close.default,
+    alt: "Close cross icon"
+  })), /*#__PURE__*/_react.default.createElement(TextWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, PopUpText)));
+};
+
+var _default = PopUpComponent;
+exports.default = _default;