@comicrelief/component-library 7.24.2 → 7.25.0

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

@@ -40,7 +40,9 @@ const Donate = _ref => {
     PopUpText,
     chooseAmountText,
     isDesktopOverride,
-    otherAmountValue
+    otherAmountValue,
+    additionalSingleCopy,
+    additionalMonthlyCopy
   } = _ref;
   let isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
@@ -107,7 +109,9 @@ const Donate = _ref => {
     PopUpText: PopUpText,
     chooseAmountText: chooseAmountText,
     submitButtonColor: submitButtonColor,
-    otherAmountValue: otherAmountValue
+    otherAmountValue: otherAmountValue,
+    additionalSingleCopy: additionalSingleCopy,
+    additionalMonthlyCopy: additionalMonthlyCopy
   })));
 };
 Donate.defaultProps = {
@@ -133,6 +137,8 @@ Donate.defaultProps = {
   chooseAmountText: '',
   isDesktopOverride: null,
   otherAmountValue: null,
-  title: null
+  title: null,
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 var _default = exports.default = Donate;

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

@@ -354,3 +354,88 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   isDesktopOverride={false}
 />;
 ```
+
+## Additional copy for BOTH giving types
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-11"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for monthly only
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-12"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for single only
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-13"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+/>;
+```

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

@@ -29,6 +29,8 @@ const Signup = _ref => {
     chooseAmountText,
     submitButtonColor,
     otherAmountValue,
+    additionalSingleCopy,
+    additionalMonthlyCopy,
     ...rest
   } = _ref;
   const [givingType, setGivingType] = (0, _react.useState)('single');
@@ -137,6 +139,9 @@ const Signup = _ref => {
     }
     return "Donate \xA3".concat(amountDonate, " monthly");
   };
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: data => setGivingType(data),
@@ -191,7 +196,9 @@ const Signup = _ref => {
   }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
-  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {
+    className: "additional-copy"
+  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor
   }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
@@ -203,6 +210,8 @@ const Signup = _ref => {
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 var _default = exports.default = Signup;

package/package.json

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

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

@@ -40,7 +40,9 @@ const Donate = ({
   PopUpText,
   chooseAmountText,
   isDesktopOverride,
-  otherAmountValue
+  otherAmountValue,
+  additionalSingleCopy,
+  additionalMonthlyCopy
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -127,6 +129,8 @@ const Donate = ({
           chooseAmountText={chooseAmountText}
           submitButtonColor={submitButtonColor}
           otherAmountValue={otherAmountValue}
+          additionalSingleCopy={additionalSingleCopy}
+          additionalMonthlyCopy={additionalMonthlyCopy}
         />
       </Wrapper>
     </Container>
@@ -159,7 +163,9 @@ Donate.propTypes = {
   PopUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
   isDesktopOverride: PropTypes.bool,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -186,7 +192,9 @@ Donate.defaultProps = {
   chooseAmountText: '',
   isDesktopOverride: null,
   otherAmountValue: null,
-  title: null
+  title: null,
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 
 export default Donate;

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

@@ -354,3 +354,88 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   isDesktopOverride={false}
 />;
 ```
+
+## Additional copy for BOTH giving types
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-11"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for monthly only
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-12"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for single only
+
+```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"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-13"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+/>;
+```

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

@@ -38,6 +38,8 @@ const Signup = ({
   chooseAmountText,
   submitButtonColor,
   otherAmountValue,
+  additionalSingleCopy,
+  additionalMonthlyCopy,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -191,6 +193,10 @@ const Signup = ({
     return `Donate £${amountDonate} monthly`;
   };
 
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
+
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -276,6 +282,14 @@ const Signup = ({
           </Error>
           )}
 
+          {additionalCopy && (
+          <p className="additional-copy">
+            <strong>
+              {additionalCopy}
+            </strong>
+          </p>
+          )}
+
           {noMoneyBuys ? (
             <Button
               type="submit"
@@ -313,13 +327,17 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 
 export default Signup;