@comicrelief/component-library 7.3.0 → 7.4.0

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

@@ -36,7 +36,7 @@ var Donate = function Donate(_ref) {
       data = _ref.data,
       title = _ref.title,
       subtitle = _ref.subtitle,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       formAlignRight = _ref.formAlignRight,
       images = _ref.images,
       image = _ref.image,
@@ -107,7 +107,7 @@ var Donate = function Donate(_ref) {
     size: "m"
   }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
-    otherDescription: otherDescription,
+    otherAmountText: otherAmountText,
     cartID: cartID,
     clientID: clientID,
     mbshipID: mbshipID,
@@ -131,7 +131,7 @@ Donate.defaultProps = {
   mobileAlt: '',
   backgroundColor: 'blue_dark',
   mbshipID: null,
-  otherDescription: 'will help us fund amazing projects in the UK and around the world.',
+  otherAmountText: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',

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

@@ -22,11 +22,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -47,7 +46,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -72,7 +71,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
 />;
 ```
 
@@ -98,7 +96,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   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."
 />;
 ```
 
@@ -124,7 +121,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +145,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +169,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,7 +194,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -220,8 +213,7 @@ import data from './dev-data/data-single';
   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"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
@@ -247,7 +239,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
   isDesktopOverride={false}
 />;
 ```

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", "chooseAmountText"];
+var _excluded = ["data", "donateLink", "otherAmountText", "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); }
 
@@ -36,7 +36,7 @@ var Signup = function Signup(_ref) {
       singleGiving = _ref$data.singleGiving,
       regularGiving = _ref$data.regularGiving,
       donateLink = _ref.donateLink,
-      otherDescription = _ref.otherDescription,
+      otherAmountText = _ref.otherAmountText,
       clientID = _ref.clientID,
       cartID = _ref.cartID,
       mbshipID = _ref.mbshipID,
@@ -86,7 +86,7 @@ var Signup = function Signup(_ref) {
   }, [givingType, singleGiving, regularGiving]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;
-    var moneyBuyNewDescription = otherDescription;
+    var moneyBuyNewDescription = otherAmountText;
     givingData.moneybuys.map(function (moneyBuy, index) {
       if (moneyBuy.value === amountDonate) {
         moneyBuyNewDescription = moneyBuy.description;
@@ -102,7 +102,7 @@ var Signup = function Signup(_ref) {
       if (errorMsg) setErrorMsg(false);
       setMoneyBuyCopy(moneyBuyNewDescription);
     }
-  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherDescription]); // Updates our flag that differentiates between the popup
+  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText]); // Updates our flag that differentiates between the popup
   // being *currently* open and it *ever* having been shown to user
 
   (0, _react.useEffect)(function () {

package/package.json

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

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

@@ -23,7 +23,7 @@ const Donate = ({
   data,
   title,
   subtitle,
-  otherDescription,
+  otherAmountText,
   formAlignRight,
   images,
   image,
@@ -105,7 +105,7 @@ const Donate = ({
 
         <Form
           data={data}
-          otherDescription={otherDescription}
+          otherAmountText={otherAmountText}
           cartID={cartID}
           clientID={clientID}
           mbshipID={mbshipID}
@@ -126,7 +126,7 @@ Donate.propTypes = {
   clientID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string,
+  otherAmountText: PropTypes.string,
   subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
   imageLow: PropTypes.string,
@@ -157,7 +157,7 @@ Donate.defaultProps = {
   mobileAlt: '',
   backgroundColor: 'blue_dark',
   mbshipID: null,
-  otherDescription:
+  otherAmountText:
     'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',
   noMoneyBuys: false,

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

@@ -22,11 +22,10 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
 />;
 ```
 
-## Form align left
+## Form align left, with custom message after choosing an "Other amount" to donate.
 
 ```js
 import data from './dev-data/data';
@@ -47,7 +46,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
+  otherAmountText="Overridden via the 'Other amount text' prop"
 />;
 ```
 
@@ -72,7 +71,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
 />;
 ```
 
@@ -98,7 +96,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   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."
 />;
 ```
 
@@ -124,7 +121,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -149,7 +145,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -174,7 +169,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -200,7 +194,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   noMoneyBuys
   subtitle=""
-  otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
 
@@ -220,8 +213,7 @@ import data from './dev-data/data-single';
   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"
+  chooseAmountText="Overridden via the 'choose amount text' prop"
 />;
 ```
 
@@ -247,7 +239,6 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   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."
   isDesktopOverride={false}
 />;
 ```

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

@@ -26,7 +26,7 @@ import GivingSelector from '../GivingSelector/GivingSelector';
 const Signup = ({
   data: { singleGiving, regularGiving },
   donateLink,
-  otherDescription,
+  otherAmountText,
   clientID,
   cartID,
   mbshipID,
@@ -59,7 +59,7 @@ const Signup = ({
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
-    let moneyBuyNewDescription = otherDescription;
+    let moneyBuyNewDescription = otherAmountText;
 
     givingData.moneybuys.map((moneyBuy, index) => {
       if (moneyBuy.value === amountDonate) {
@@ -88,7 +88,7 @@ const Signup = ({
     regularGiving,
     givingType,
     amountDonate,
-    otherDescription
+    otherAmountText
   ]);
 
   // Updates our flag that differentiates between the popup
@@ -230,7 +230,7 @@ Signup.propTypes = {
   clientID: PropTypes.string.isRequired,
   cartID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
-  otherDescription: PropTypes.string.isRequired,
+  otherAmountText: PropTypes.string.isRequired,
   mbshipID: PropTypes.string.isRequired,
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),