@comicrelief/component-library 7.28.0 → 7.30.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/components/Organisms/Header/Header.md

@@ -116,6 +116,8 @@ import data from './data/data';
 import Link from '../../Atoms/Link/Link';
 import searchIcon from './assets/icon--search--2023.svg';
 import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+
 import Icon from '../../Atoms/SocialIcons/Icon/Icon';
 import RichText from '../../Atoms/RichText/RichText';
 
@@ -170,6 +172,17 @@ const [success, setSuccess] = React.useState(false);
           tabIndex="0"
         />
       </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Payin"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+        />
+      </div>
     </>
   }
 />;

package/dist/components/Organisms/Header/assets/PayIn.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 1H2C1.448 1 1 1.448 1 2V7C1 7.552 1.448 8 2 8H4V19V19.5V22C4 22.552 4.448 23 5 23H19C19.552 23 20 22.552 20 22V19.5V19V8H22C22.552 8 23 7.552 23 7V2C23 1.448 22.552 1 22 1ZM6 21V20.5H18V21H6ZM18 18.5H6V6.0625H18V18.5ZM21 6H20V5.0625C20 4.5105 19.552 4.0625 19 4.0625H5C4.448 4.0625 4 4.5105 4 5.0625V6H3V3H21V6ZM8.293 12.2695C7.9025 11.879 7.9025 11.246 8.293 10.8555L11.2925 7.856C11.339 7.809 11.3905 7.7675 11.446 7.7305C11.4695 7.7145 11.4955 7.704 11.52 7.69C11.5525 7.672 11.5835 7.6525 11.618 7.6385C11.6505 7.625 11.6845 7.6175 11.718 7.6075C11.747 7.599 11.7745 7.588 11.8045 7.582C11.934 7.556 12.067 7.556 12.196 7.582C12.226 7.588 12.2535 7.599 12.2825 7.6075C12.316 7.6175 12.35 7.625 12.3825 7.6385C12.417 7.6525 12.448 7.672 12.4805 7.69C12.5055 7.7035 12.531 7.7145 12.5545 7.7305C12.6095 7.7675 12.661 7.809 12.708 7.856L15.7075 10.8555C16.098 11.246 16.098 11.879 15.7075 12.2695C15.512 12.465 15.2565 12.5625 15.0005 12.5625C14.7445 12.5625 14.489 12.465 14.2935 12.2695L13 10.9765V15.5C13 16.052 12.552 16.5 12 16.5C11.448 16.5 11 16.052 11 15.5V10.9765L9.707 12.2695C9.3165 12.66 8.6835 12.66 8.293 12.2695Z" fill="#222222"/>
+</svg>