@comicrelief/component-library 8.52.2 → 8.53.0

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -32,7 +32,7 @@ exports[`renders correctly with data prop 1`] = `
   object-fit: cover;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
@@ -85,7 +85,7 @@ exports[`renders correctly with data prop 1`] = `
   pointer-events: none;
 }
 
-.c17 {
+.c18 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -107,6 +107,22 @@ exports[`renders correctly with data prop 1`] = `
   flex-shrink: 0;
 }
 
+.c17 {
+  padding-left: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -305,7 +321,7 @@ exports[`renders correctly with data prop 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c17 {
+  .c18 {
     background: #222222;
   }
 }
@@ -500,19 +516,23 @@ exports[`renders correctly with data prop 1`] = `
             <div
               className="c17"
             >
-              <svg
+              <div
                 className="c18"
-                fill="none"
-                height="13"
-                viewBox="0 0 15 13"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  className="c19"
+                  fill="none"
+                  height="13"
+                  viewBox="0 0 15 13"
+                  width="15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -540,7 +560,7 @@ exports[`renders correctly without image 1`] = `
   line-height: inherit;
 }
 
-.c14 {
+.c15 {
   display: inline-block;
   color: #FFFFFF;
   fill: currentColor;
@@ -576,7 +596,7 @@ exports[`renders correctly without image 1`] = `
   pointer-events: none;
 }
 
-.c13 {
+.c14 {
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -598,6 +618,22 @@ exports[`renders correctly without image 1`] = `
   flex-shrink: 0;
 }
 
+.c13 {
+  padding-left: 1rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -758,7 +794,7 @@ exports[`renders correctly without image 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c13 {
+  .c14 {
     background: #222222;
   }
 }
@@ -922,19 +958,23 @@ exports[`renders correctly without image 1`] = `
             <div
               className="c13"
             >
-              <svg
+              <div
                 className="c14"
-                fill="none"
-                height="13"
-                viewBox="0 0 15 13"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  className="c15"
+                  fill="none"
+                  height="13"
+                  viewBox="0 0 15 13"
+                  width="15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.58496 0.349976C9.1395 -0.116662 8.40641 -0.116634 7.96094 0.349976C7.52803 0.803486 7.5281 1.53021 7.96094 1.98376L11.1582 5.33337H1.13672C0.48748 5.33337 0 5.87822 0 6.50037C2.15408e-05 7.1225 0.487494 7.66736 1.13672 7.66736H11.1582L7.96094 11.017C7.52806 11.4705 7.52899 12.1972 7.96191 12.6508C8.18163 12.8803 8.47556 13.0004 8.77344 13.0004C9.07114 13.0002 9.36533 12.8808 9.58496 12.6508L14.6758 7.31677L14.6748 7.3158L14.6875 7.3031L14.6865 7.30212C14.6954 7.29215 14.7044 7.28482 14.71 7.27771C14.7117 7.27545 14.7133 7.27285 14.7148 7.27087C14.7485 7.23203 14.7824 7.18925 14.8135 7.14099L14.8154 7.13806C14.8354 7.10658 14.8493 7.07842 14.8564 7.06384L14.8652 7.04626L14.8662 7.04431L14.8672 7.04333C14.8672 7.04333 14.868 7.04057 14.8691 7.03845C14.8709 7.03512 14.8758 7.02671 14.8799 7.01892L14.8802 7.01839C14.8888 7.002 14.9034 6.97423 14.917 6.93982V6.93787C14.9303 6.90375 14.9391 6.87285 14.9443 6.85388C14.9469 6.84458 14.9498 6.83567 14.9512 6.83044C14.9527 6.82454 14.9535 6.8228 14.9541 6.82068C14.9541 6.82068 14.9542 6.81753 14.9551 6.81482L14.958 6.80603L14.9586 6.80422C14.9631 6.78961 14.9718 6.76119 14.9785 6.72693V6.72498C15.0066 6.57705 15.0066 6.4246 14.9785 6.27673V6.27478L14.958 6.19568L14.9551 6.18591L14.9531 6.18005L14.9512 6.17224C14.9497 6.1664 14.9481 6.15677 14.9453 6.14685C14.9398 6.12695 14.9307 6.09654 14.917 6.06189C14.9032 6.02688 14.8885 5.99813 14.8799 5.98181C14.8758 5.97402 14.8709 5.96562 14.8691 5.96228L14.8564 5.93689C14.849 5.92177 14.8351 5.89372 14.8154 5.86267L14.8145 5.86072L14.7529 5.7738C14.7316 5.74659 14.7094 5.72129 14.6875 5.69763C14.6837 5.69341 14.6802 5.68854 14.6758 5.68396L9.58496 0.349976Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>

package/src/components/Molecules/CTA/shared/CTACard.js

@@ -12,6 +12,7 @@ import {
   CTA,
   CTAText,
   CTATextUnderline,
+  ArrowIconOuter,
   ArrowIconWrapper,
   CardWrapper
 } from './CTACard.style';
@@ -88,9 +89,11 @@ const CTACard = ({
                   aria-hidden="true"
                 />
               </CTAText>
-              <ArrowIconWrapper>
-                <ArrowIcon />
-              </ArrowIconWrapper>
+              <ArrowIconOuter>
+                <ArrowIconWrapper>
+                  <ArrowIcon />
+                </ArrowIconWrapper>
+              </ArrowIconOuter>
             </CTA>
           )}
         </CopyAndLinkSection>

package/src/components/Molecules/CTA/shared/CTACard.style.js

@@ -88,6 +88,13 @@ const ArrowIconWrapper = styled.div`
   flex-shrink: 0;
 `;
 
+const ArrowIconOuter = styled.div`
+  padding-left: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
 // Card wrapper link - makes entire card clickable
 const CardLink = styled.a`
   display: flex;
@@ -316,6 +323,7 @@ export {
   CTA,
   CTAText,
   CTATextUnderline,
+  ArrowIconOuter,
   ArrowIconWrapper,
   CardWrapper
 };

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

@@ -8,6 +8,11 @@ import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
 import { handleTitles, handleCopy } from './_utils';
 
+// NB this is now our 'old' Donate widget, which is being replaced by the DonateBanner component
+// This component is now deprecated and will be removed in a future release.
+
+// TODO: Remove this component in a future release.
+
 import {
   BgImage,
   Container,

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

@@ -45,7 +45,6 @@ const Signup = ({
   givingType = null,
   ...rest
 }) => {
-  // const [givingType, setGivingType] = useState();
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);

package/src/components/Organisms/DonateBanner/DonateBanner.js

@@ -0,0 +1,210 @@
+import React, { useState } from 'react';
+import { useMediaQuery } from 'react-responsive';
+import PropTypes from 'prop-types';
+
+import { breakpointValues } from '../../../theme/shared/allBreakpoints';
+import Text from '../../Atoms/Text/Text';
+import Picture from '../../Atoms/Picture/Picture';
+import Form from './Form/Form';
+import { handleTitles, handleOtherAmountText } from './_utils';
+
+import {
+  BgImage,
+  Container,
+  InnerContainer,
+  TitleWrapperInner,
+  TitleWrapperOuter,
+  Wrapper
+} from './DonateBanner.style';
+
+const DonateBanner = ({
+  donateWidgetIsTextOnly = false,
+  donateOrientation = 'right',
+  paddingAbove = '2rem',
+  paddingBelow = '2rem',
+  pageBackgroundColour = 'transparent',
+  componentBackgroundColour = 'white',
+  title = null,
+  subtitle = '',
+  monthlyTitle = '',
+  monthlySubtitle = '',
+  popUpText = 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+  chooseAmountText = null,
+  monthlyChooseAmountText = null,
+  otherAmountText = 'will help us fund amazing projects in the UK and around the world.',
+  monthlyOtherAmountText = '',
+  hideMoneyBuys = false,
+  imageL = null,
+  imageM = null,
+  imageS = null,
+  data = {},
+  cartID,
+  clientID,
+  donateLink,
+  mbshipID
+}) => {
+  const isLarge = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
+  const isMedium = useMediaQuery({ query: `(min-width: ${breakpointValues.M}px)` });
+  const [givingType, setGivingType] = useState();
+
+  const {
+    showCopy,
+    thisTitle,
+    thisSubtitle,
+    noTitlesAtAll
+  } = handleTitles(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
+
+  const {
+    thisOtherAmountText
+  } = handleOtherAmountText(givingType, otherAmountText, monthlyOtherAmountText);
+
+  const shouldShowImage = donateWidgetIsTextOnly === false;
+
+  const shouldShowDesktopImage = shouldShowImage
+    && isLarge && imageL
+    && (imageL.images || imageL.image);
+
+  const shouldShowTopImage = shouldShowImage && !isLarge;
+  const topImage = isMedium ? imageM : imageS;
+
+  const shouldRenderTopImage = shouldShowTopImage
+    && topImage && (topImage.images || topImage.image);
+
+  // For text-only variants, we hide the title area on non-desktop widths
+  // (M and below), so only the form is shown.
+  const shouldShowTitleSection = noTitlesAtAll === false && isLarge && donateWidgetIsTextOnly;
+
+  return (
+    <Container
+      paddingAbove={paddingAbove}
+      paddingBelow={paddingBelow}
+      pageBackgroundColour={pageBackgroundColour}
+      id={mbshipID}
+    >
+      <InnerContainer
+        componentBackgroundColour={componentBackgroundColour}
+        $donateWidgetIsTextOnly={donateWidgetIsTextOnly}
+      >
+        {shouldRenderTopImage ? (
+          <Picture
+            image={topImage.image}
+            images={topImage.images}
+            imageLow={topImage.imageLow}
+            objectFit="cover"
+            width="100%"
+            height="100%"
+            alt={topImage.alt || ''}
+            // Force React to re-render with any updated image details
+            key={topImage.imageLow}
+          />
+        ) : null}
+
+        {shouldShowDesktopImage ? (
+          <BgImage
+            image={imageL.image}
+            images={imageL.images}
+            imageLow={imageL.imageLow}
+            objectFit="cover"
+            width="100%"
+            height="100%"
+            alt={imageL.alt || ''}
+            isBackgroundImage
+          />
+        ) : null}
+
+        <Wrapper
+          donateOrientation={donateOrientation}
+          aria-live="polite"
+          noTitlesAtAll={noTitlesAtAll}
+          hasTopImage={shouldRenderTopImage}
+          shouldShowTitleSection={shouldShowTitleSection}
+        >
+          {shouldShowTitleSection && (
+          <TitleWrapperOuter donateOrientation={donateOrientation}>
+            <TitleWrapperInner>
+              {showCopy && (
+              <>
+                <Text
+                  tag="h2"
+                  size="big"
+                  family="Anton"
+                  weight="normal"
+                >
+                  {thisTitle}
+                </Text>
+                <Text tag="p" size="m">
+                  {thisSubtitle}
+                </Text>
+              </>
+              )}
+            </TitleWrapperInner>
+          </TitleWrapperOuter>
+          )}
+
+          <Form
+            data={data}
+            otherAmountText={thisOtherAmountText}
+            cartID={cartID}
+            clientID={clientID}
+            mbshipID={mbshipID}
+            donateLink={donateLink}
+            hideMoneyBuys={hideMoneyBuys}
+            popUpText={popUpText}
+            chooseAmountText={chooseAmountText}
+            monthlyChooseAmountText={monthlyChooseAmountText}
+            donateWidgetIsTextOnly={donateWidgetIsTextOnly}
+            hasTopImage={shouldRenderTopImage}
+            shouldShowTitleSection={shouldShowTitleSection}
+            donateOrientation={donateOrientation}
+            givingType={givingType}
+            changeGivingType={setGivingType}
+          />
+        </Wrapper>
+      </InnerContainer>
+    </Container>
+  );
+};
+
+DonateBanner.propTypes = {
+  donateWidgetIsTextOnly: PropTypes.bool,
+  donateOrientation: PropTypes.oneOf(['left', 'right']),
+  paddingAbove: PropTypes.string,
+  paddingBelow: PropTypes.string,
+  pageBackgroundColour: PropTypes.string,
+  componentBackgroundColour: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  monthlyTitle: PropTypes.string,
+  monthlySubtitle: PropTypes.string,
+  popUpText: PropTypes.string,
+  chooseAmountText: PropTypes.string,
+  monthlyChooseAmountText: PropTypes.string,
+  otherAmountText: PropTypes.string,
+  monthlyOtherAmountText: PropTypes.string,
+  hideMoneyBuys: PropTypes.bool,
+  imageL: PropTypes.shape({
+    images: PropTypes.string,
+    imageLow: PropTypes.string,
+    image: PropTypes.string,
+    alt: PropTypes.string
+  }),
+  imageM: PropTypes.shape({
+    images: PropTypes.string,
+    imageLow: PropTypes.string,
+    image: PropTypes.string,
+    alt: PropTypes.string
+  }),
+  imageS: PropTypes.shape({
+    images: PropTypes.string,
+    imageLow: PropTypes.string,
+    image: PropTypes.string,
+    alt: PropTypes.string
+  }),
+  data: PropTypes.objectOf(PropTypes.shape),
+  cartID: PropTypes.string.isRequired,
+  clientID: PropTypes.string.isRequired,
+  donateLink: PropTypes.string.isRequired,
+  mbshipID: PropTypes.string.isRequired
+};
+
+export default DonateBanner;

package/src/components/Organisms/DonateBanner/DonateBanner.md

@@ -0,0 +1,168 @@
+# DonateBanner
+
+## Image banner (widget right), custom padding + background
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageM = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageS = {
+  images: mobilePictures.images,
+  imageLow: mobilePictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="0rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  imageL={imageL}
+  imageM={imageM}
+  imageS={imageS}
+  data={data}
+  mbshipID="mbship-1"
+  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."
+/>;
+```
+
+## Image banner (widget left), monthly title/subtitle + choose amount text overrides
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageM = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+const imageS = {
+  images: mobilePictures.images,
+  imageLow: mobilePictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="left"
+  imageL={imageL}
+  imageM={imageM}
+  imageS={imageS}
+  data={data}
+  mbshipID="mbship-2"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate today"
+  subtitle="Your support can help people facing the toughest times."
+  monthlyTitle="Give monthly"
+  monthlySubtitle="A regular gift helps fund long-term impact."
+  chooseAmountText="Choose a one-off amount"
+  monthlyChooseAmountText="Choose a monthly amount"
+  popUpText="Switching to a single gift means less predictable funding."
+/>;
+```
+
+## Text-only widget (no image), custom widget background + text colour
+
+```js
+import data from './dev-data/data-single';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="rnd_25_glitzy_grape"
+  componentBackgroundColour="deep_violet_dark"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Make a difference today."
+  chooseAmountText="Enter an amount to give"
+  noMoneyBuys
+/>;
+```
+
+## Text-only widget (no image), with the usual moneybuys, standard colours
+
+```js
+import data from './dev-data/data';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="grey_light"
+  componentBackgroundColour="white"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3b"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Choose an amount or pick a moneybuy."
+/>;
+```
+
+## Different “Other amount” copy for single vs monthly
+
+```js
+import data from './dev-data/data';
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+const imageL = {
+  images: desktopPictures.images,
+  imageLow: desktopPictures.imageLow,
+  alt: 'Background image'
+};
+
+<DonateBanner
+  pageBackgroundColour="grey_light"
+  paddingAbove="0rem"
+  paddingBelow="0rem"
+  donateOrientation="left"
+  imageL={imageL}
+  data={data}
+  mbshipID="mbship-4"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Help fund life-changing work."
+  otherAmountText="can help support people in crisis."
+  monthlyOtherAmountText="each month can help provide long-term support."
+/>;
+```