@comicrelief/component-library 7.29.0 → 7.31.0

package/README.md

@@ -40,13 +40,13 @@ $ yarn styleguide
 
 To test:
 ```
-$ yarn test
+$ yarn test:unit
 ```
 _Test will run through all Jest tests and watch for any changes on snapshots._
 
 To update snapshots with desired changes brought in through your work:
 ```
-$ yarn test -u
+$ yarn test:unit-update
 ```
 
 To publish

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

@@ -71,7 +71,8 @@ const Donate = _ref => {
   const {
     showCopy,
     thisTitle,
-    thisSubtitle
+    thisSubtitle,
+    noTitlesAtAll
   } = (0, _utils.handleTitles)(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
   const {
     thisOtherAmountText,
@@ -103,10 +104,12 @@ const Donate = _ref => {
     isBackgroundImage: true
   }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
     formAlignRight: formAlignRight,
-    "aria-live": "polite"
-  }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
-    formAlignRight: formAlignRight
-  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    "aria-live": "polite",
+    noTitlesAtAll: noTitlesAtAll
+  }, !noTitlesAtAll && /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperOuter, {
+    formAlignRight: formAlignRight,
+    "data-test": "this-one-here"
+  }, /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: textColor,
     size: "big",
@@ -163,9 +166,9 @@ Donate.defaultProps = {
   additionalSingleCopy: null,
   additionalMonthlyCopy: null,
   defaultGivingType: null,
-  monthlyTitle: null,
-  monthlySubtitle: null,
-  monthlyChooseAmountText: null,
-  monthlyOtherAmountText: null
+  monthlyTitle: '',
+  monthlySubtitle: '',
+  monthlyChooseAmountText: '',
+  monthlyOtherAmountText: ''
 };
 var _default = exports.default = Donate;

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

@@ -131,7 +131,7 @@ setTimeout(()=>{
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-4"
+  mbshipID="mship-5"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -139,6 +139,8 @@ setTimeout(()=>{
   noMoneyBuys
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   otherAmountValue={amountDonate}
+  otherAmountText="Here's an otherAmountText override"
+
 />;
 ```
 
@@ -166,7 +168,7 @@ setTimeout(()=>{
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-6"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -191,7 +193,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-2"
+  mbshipID="mship-7"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -202,7 +204,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 ```
 
 
-## Form align right - no subtitle
+## Form align right, but no copy, so ACTUALLY centre-aligns
 
 ```js
 import data from './dev-data/data';
@@ -220,12 +222,16 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-5"
+  mbshipID="mship-8"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
-  title="Donate Now"
+  // Directly omiting values for these to centre-align
+  title=""
   subtitle=""
+  chooseAmountText=""
+  monthlyTitle=""
+  monthlySubtitle=""
 />;
 ```
 
@@ -245,7 +251,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-6"
+  mbshipID="mship-9"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -270,7 +276,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-7"
+  mbshipID="mship-10"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -295,7 +301,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-8"
+  mbshipID="mship-11"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -316,7 +322,7 @@ import data from './dev-data/data-single';
   mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
-  mbshipID="mship-9"
+  mbshipID="mship-12"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -345,7 +351,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-10"
+  mbshipID="mship-13"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -373,7 +379,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-11"
+  mbshipID="mship-14"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -402,7 +408,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-12"
+  mbshipID="mship-15"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -430,7 +436,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-13"
+  mbshipID="mship-16"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -458,7 +464,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-14"
+  mbshipID="mship-17"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -486,7 +492,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-15"
+  mbshipID="mship-18"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -513,7 +519,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-16"
+  mbshipID="mship-19"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -541,7 +547,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-17"
+  mbshipID="mship-20"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -572,7 +578,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-18"
+  mbshipID="mship-21"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -603,7 +609,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-19"
+  mbshipID="mship-22"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -616,4 +622,4 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   monthlyChooseAmountText="monthlyChooseAmountText here"
   monthlyOtherAmountText="monthlyOtherAmountText here"
 />;
-```
+```

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

@@ -1,19 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.PopUp = exports.OuterFieldset = exports.MoneyBuys = exports.Legend = exports.Label = exports.HeaderInner = exports.Header = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Copy = exports.Container = exports.Button = exports.BgImage = exports.AmountField = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+exports.Wrapper = exports.TitleWrapperOuter = exports.TitleWrapperInner = exports.PopUp = exports.OuterFieldset = exports.MoneyBuys = exports.Legend = exports.Label = exports.FormWrapper = exports.FormFieldset = exports.Form = exports.Error = exports.Copy = 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"));
 var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
-// import styled, { css } from 'styled-components';
-
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
@@ -46,55 +45,60 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
   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'), _ref4 => {
+})(["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'), _ref4 => {
   let {
     formAlignRight
   } = _ref4;
   return formAlignRight === true ? 'row-reverse' : 'row';
+}, _ref5 => {
+  let {
+    noTitlesAtAll
+  } = _ref5;
+  return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
 }, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
-const Header = exports.Header = _styledComponents.default.div.withConfig({
-  displayName: "Donatestyle__Header",
+const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
+  displayName: "Donatestyle__TitleWrapperOuter",
   componentId: "sc-8rjm3t-4"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref5 => {
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
-const HeaderInner = exports.HeaderInner = _styledComponents.default.div.withConfig({
-  displayName: "Donatestyle__HeaderInner",
+const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
+  displayName: "Donatestyle__TitleWrapperInner",
   componentId: "sc-8rjm3t-5"
 })(["position:relative;text-align:left;"]);
 const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
   componentId: "sc-8rjm3t-6"
-})(["position:relative;font-family:", ";", "{width:50%;}"], _ref6 => {
+})(["position:relative;font-family:", ";", "{width:50%;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
 const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
   componentId: "sc-8rjm3t-7"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref7 => {
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.color('red');
-}, _ref8 => {
+}, _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   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;}"], _ref9 => {
+})(["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;}"], _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
@@ -120,20 +124,20 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   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'), _ref10 => {
+})(["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'), _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('grey');
-}, _ref11 => {
+}, _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref12 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.color('grey');
 });
 const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -143,25 +147,25 @@ const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withCo
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
   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'), _ref13 => {
+})(["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'), _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.color('white');
-}, _ref14 => {
+}, _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.fontSize('s');
-}, _ref15 => {
+}, _ref16 => {
   let {
     theme,
     color
-  } = _ref15;
+  } = _ref16;
   return theme.color(color);
-}, _ref16 => {
+}, _ref17 => {
   let {
     theme
-  } = _ref16;
+  } = _ref17;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));

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

@@ -65,10 +65,11 @@ const Signup = _ref => {
   (0, _react.useEffect)(() => {
     if (givingType) {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
-      let moneyBuyNewDescription = otherAmountText;
+      let moneyBuyUpdatedDescription = otherAmountText;
       givingData.moneybuys.map((moneyBuy, index) => {
-        if (moneyBuy.value === amountDonate) {
-          moneyBuyNewDescription = moneyBuy.description;
+        // Only show the MB-associated copy when we're actually showing moneybuys
+        if (moneyBuy.value === amountDonate && !noMoneyBuys) {
+          moneyBuyUpdatedDescription = moneyBuy.description;
         }
         return index === 1 && amountDonate === undefined && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value));
       });
@@ -77,10 +78,10 @@ const Signup = _ref => {
         if (!errorMsg) setErrorMsg(true);
       } else {
         if (errorMsg) setErrorMsg(false);
-        setMoneyBuyCopy(moneyBuyNewDescription);
+        setMoneyBuyCopy(moneyBuyUpdatedDescription);
       }
     }
-  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherAmountText]);
+  }, [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
@@ -214,7 +215,7 @@ const Signup = _ref => {
     onChange: e => setAmountDonate(e.target.value.trim()),
     "aria-label": "Input a different amount",
     ref: amountRef
-  }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
+  }))), amountDonate >= 1 && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
   }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
@@ -233,6 +234,9 @@ Signup.defaultProps = {
   data: {},
   additionalSingleCopy: null,
   additionalMonthlyCopy: null,
-  defaultGivingType: null
+  defaultGivingType: null,
+  monthlyChooseAmountCopy: null,
+  monthlyOtherAmountCopy: null,
+  givingType: null
 };
 var _default = exports.default = Signup;

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

@@ -239,6 +239,11 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 .c24 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c25 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -257,9 +262,9 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   appearance: none;
 }
 
-.c24:active,
-.c24:focus,
-.c24:hover {
+.c25:active,
+.c25:focus,
+.c25:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -492,7 +497,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 @media (min-width:740px) {
-  .c24 {
+  .c25 {
     padding: 1rem 2rem;
   }
 }
@@ -514,6 +519,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -639,8 +645,16 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
               
             </label>
           </div>
-          <button
+          <p
             className="c24"
+          >
+            <strong>
+              £345.67 
+            </strong>
+            will help us fund amazing projects in the UK and around the world.
+          </p>
+          <button
+            className="c25"
             color="red"
             type="submit"
           >
@@ -1142,6 +1156,7 @@ exports[`Monthly donation renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -1803,6 +1818,7 @@ exports[`Single donation renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -2256,6 +2272,11 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 .c18 {
+  line-height: 1.5;
+  margin-top: 2rem;
+}
+
+.c19 {
   width: 100%;
   margin: 2rem 0 2rem;
   color: #FFFFFF;
@@ -2274,9 +2295,9 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   appearance: none;
 }
 
-.c18:active,
-.c18:focus,
-.c18:hover {
+.c19:active,
+.c19:focus,
+.c19:hover {
   outline: none;
   background-color: #961D35;
 }
@@ -2366,7 +2387,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c18 {
+  .c19 {
     padding: 1rem 2rem;
   }
 }
@@ -2381,6 +2402,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   >
     <div
       className="c2"
+      data-test="this-one-here"
     >
       <div
         className="c3"
@@ -2463,8 +2485,15 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
               
             </label>
           </div>
-          <button
+          <p
             className="c18"
+          >
+            <strong>
+              £10 
+            </strong>
+          </p>
+          <button
+            className="c19"
             color="red"
             type="submit"
           >

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

@@ -7,9 +7,13 @@ exports.handleTitles = exports.handleCopy = void 0;
 const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle) => {
   let thisTitle;
   let thisSubtitle;
+  const showSingleCopy = Boolean(subtitle) && Boolean(title);
   const showMonthlyCopy = givingType === 'monthly' && Boolean(monthlySubtitle) && Boolean(monthlyTitle);
-  // Overall flag as to whether we render copy *at all*
-  const showCopy = showMonthlyCopy || Boolean(subtitle) && Boolean(title);
+  // Overall flag as to whether we render copy for the currently selected givingType
+  const showCopy = showMonthlyCopy || showSingleCopy;
+
+  // Acts as a flag to centre the form when no copy is supplied *at all*
+  const noTitlesAtAll = showSingleCopy === false && showMonthlyCopy === false;
 
   // Apply the override if we've got monthly content AND giving type:
   if (showMonthlyCopy) {
@@ -23,7 +27,8 @@ const handleTitles = (givingType, title, subtitle, monthlyTitle, monthlySubtitle
   return {
     showCopy,
     thisTitle,
-    thisSubtitle
+    thisSubtitle,
+    noTitlesAtAll
   };
 };
 exports.handleTitles = handleTitles;

package/dist/theme/crTheme/colors.js

@@ -27,6 +27,7 @@ const colors = {
   green_light: '#F4F2F4',
   grey: '#969598',
   grey_dark: '#222222',
+  grey_stone: '#CEDCDA',
   grey_extra_light: '#f0f0f0',
   grey_for_forms: '#666',
   grey_label: '#5C5C5E',
@@ -43,6 +44,7 @@ const colors = {
   purple_dark: '#48276E',
   purple_light: '#DFC6F6',
   red: '#E52630',
+  red_secondary: '#F9723A',
   red_dark: '#890B11',
   rnd_23_teal: '#3EB1AA',
   rnd_23_yellow: '#FFE300',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.29.0",
+  "version": "7.31.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -24,6 +24,7 @@
     "@babel/cli": "^7.21.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@hookform/resolvers": "^1.3.4",
+    "@playwright/test": "^1.38.1",
     "axios": "^0.21.1",
     "ejs": "^3.1.9",
     "jest-styled-components": "^7.1.1",
@@ -53,6 +54,7 @@
   },
   "scripts": {
     "test:unit": "yarn run jest",
+    "test:unit-update": "yarn jest -u",
     "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
     "styleguide:build": "styleguidist build",
     "postinstall": "yarn run build",
@@ -77,7 +79,6 @@
     ]
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.1",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",