@comicrelief/component-library 8.55.0 → 8.55.2

package/dist/theme/shared/animations.js

@@ -67,18 +67,27 @@ const formFieldInputAnimation = function () {
  * @param {boolean} animateScale - Whether to enable the scale animation
  * @param {number} pixelMovement - Amount of movement to apply on hover
  * @param {number} bounceIntensity - Intensity of the springy bounce effect (0-3, default: 1)
+ * @param {boolean} targetChild - Where to apply the transform
+
  * @returns {css} template literal for the animation
  */
 exports.formFieldInputAnimation = formFieldInputAnimation;
 const bounceUpAnimation = function (animateScale) {
   let pixelMovement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
   let bounceIntensity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  let targetChild = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   if (!animateScale) {
     return (0, _styledComponents.css)([""]);
   }
   const pullBack = -0.55 - bounceIntensity * 0.3;
   const overshoot = 1.55 + bounceIntensity * 0.4;
   const duration = 0.2 + bounceIntensity * 0.1;
+
+  // The Hero Banner requires us to apply the transform inside
+  // the anchor, in order to address the 'infinity bounce' bug
+  if (targetChild) {
+    return (0, _styledComponents.css)(["> div{transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;}&:hover,&:focus{> div{transform:translateY(-", "px);}}"], duration, pullBack, overshoot, pixelMovement);
+  }
   return (0, _styledComponents.css)(["transition:transform ", "s cubic-bezier(0.68,", ",0.265,", ");transform-origin:center;&:hover,&:focus{transform:translateY(-", "px);}"], duration, pullBack, overshoot, pixelMovement);
 };
 exports.bounceUpAnimation = bounceUpAnimation;

package/package.json

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

package/src/components/Molecules/HeroBanner/HeroBanner.style.js

@@ -30,6 +30,7 @@ const Container = styled.div`
   flex-direction: column;
   background: ${({ theme, pageBackgroundColour }) => theme.color(pageBackgroundColour)}; 
   justify-content: center; 
+  ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 0 ${paddingBottom};`}
 
   ${({ variant, paddingTop, paddingBottom }) => (variant === variants.TEXT_BANNER && css`
     padding: ${paddingTop} 1rem ${paddingBottom};
@@ -100,11 +101,11 @@ const CopyOuterWrapper = styled.div`
   display: flex;
   width: calc(100% - (2 * 1rem)); 
   
-  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 2rem;' : 'margin: 0; width: 100%;')}
+  ${({ variant }) => (variant !== variants.TEXT_BANNER ? 'margin: -2rem 1rem 0;' : 'margin: 0; width: 100%;')}
 
   @media ${({ theme }) => theme.breakpoints2026('M')} {
     ${({ variant }) => (variant !== variants.TEXT_BANNER
-    ? 'margin: -2rem 2rem 2rem; width: calc(100% - (2 * 2rem));'
+    ? 'margin: -2rem 2rem 0rem; width: calc(100% - (2 * 2rem));'
     : 'margin: 0; width: 100%;')}
   }
 
@@ -237,7 +238,7 @@ const HeroBannerLink = styled.a`
 
   @media ${({ theme }) => theme.breakpoints2026('L')} {
 
-    ${bounceUpAnimation(true, 10, 2)}
+    ${bounceUpAnimation(true, 10, 2, true)}
 
     // As the link is now wrapping the content, it'll take over width duties from 'Copy':
     width: ${({ variant }) => (variant !== variants.TEXT_BANNER ? '92%' : '100%')};

package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap

@@ -73,6 +73,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -107,7 +108,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -211,7 +212,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -394,6 +395,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
 }
 
 .c1 {
@@ -428,7 +430,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   display: -ms-flexbox;
   display: flex;
   width: calc(100% - (2 * 1rem));
-  margin: -2rem 1rem 2rem;
+  margin: -2rem 1rem 0;
 }
 
 .c7 {
@@ -532,7 +534,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
 
 @media (min-width:740px) {
   .c5 {
-    margin: -2rem 2rem 2rem;
+    margin: -2rem 2rem 0rem;
     width: calc(100% - (2 * 2rem));
   }
 }
@@ -700,6 +702,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  padding: 0rem 0 2rem;
   padding: 0rem 1rem 2rem;
 }
 

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

@@ -28,7 +28,6 @@ const DonateBanner = ({
   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.',
@@ -43,7 +42,7 @@ const DonateBanner = ({
   donateLink,
   mbshipID
 }) => {
-  const isLarge = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
+  const isLargeBreakpoint = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
   const isMedium = useMediaQuery({ query: `(min-width: ${breakpointValues.M}px)` });
   const [givingType, setGivingType] = useState();
 
@@ -61,18 +60,21 @@ const DonateBanner = ({
   const shouldShowImage = donateWidgetIsTextOnly === false;
 
   const shouldShowDesktopImage = shouldShowImage
-    && isLarge && imageL
+    && isLargeBreakpoint && imageL
     && (imageL.images || imageL.image);
 
-  const shouldShowTopImage = shouldShowImage && !isLarge;
+  const shouldShowTopImage = shouldShowImage && !isLargeBreakpoint;
   const topImage = isMedium ? imageM : imageS;
 
-  const shouldRenderTopImage = shouldShowTopImage
-    && topImage && (topImage.images || topImage.image);
+  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;
+  const shouldShowTitleSection = noTitlesAtAll === false
+    && isLargeBreakpoint && donateWidgetIsTextOnly;
 
   return (
     <Container
@@ -125,8 +127,7 @@ const DonateBanner = ({
               {showCopy && (
               <>
                 <Text
-                  tag="h2"
-                  size="big"
+                  tag="h1"
                   family="Anton"
                   weight="normal"
                 >
@@ -149,7 +150,6 @@ const DonateBanner = ({
             mbshipID={mbshipID}
             donateLink={donateLink}
             hideMoneyBuys={hideMoneyBuys}
-            popUpText={popUpText}
             chooseAmountText={chooseAmountText}
             monthlyChooseAmountText={monthlyChooseAmountText}
             donateWidgetIsTextOnly={donateWidgetIsTextOnly}
@@ -158,6 +158,11 @@ const DonateBanner = ({
             donateOrientation={donateOrientation}
             givingType={givingType}
             changeGivingType={setGivingType}
+            thisTitle={thisTitle}
+            thisSubtitle={thisSubtitle}
+            showCopy={showCopy}
+            isLargeBreakpoint={isLargeBreakpoint}
+            isMediumBreakpoint={isMedium}
           />
         </Wrapper>
       </InnerContainer>
@@ -176,7 +181,6 @@ DonateBanner.propTypes = {
   subtitle: PropTypes.string,
   monthlyTitle: PropTypes.string,
   monthlySubtitle: PropTypes.string,
-  popUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
   monthlyChooseAmountText: PropTypes.string,
   otherAmountText: PropTypes.string,

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

@@ -87,7 +87,6 @@ const imageS = {
   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."
 />;
 ```
 
@@ -137,7 +136,30 @@ import data from './dev-data/data';
 />;
 ```
 
-## Different “Other amount” copy for single vs monthly
+## Text-only widget (no image), with giving selector (single vs monthly)
+
+```js
+import data from './dev-data/data';
+
+<DonateBanner
+  donateWidgetIsTextOnly
+  pageBackgroundColour="grey_light"
+  paddingAbove="2rem"
+  paddingBelow="2rem"
+  donateOrientation="right"
+  data={data}
+  mbshipID="mbship-3c"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate now"
+  subtitle="Choose between a one-off or monthly gift."
+  monthlyTitle="Give monthly"
+  monthlySubtitle="A regular gift helps fund long-term impact."
+/>;
+```
+
+## Different "Other amount" copy for single vs monthly
 
 ```js
 import data from './dev-data/data';

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

@@ -27,6 +27,7 @@ const InnerContainer = styled.div`
   padding: none;
   width: 100%;
   box-sizing: border-box;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     padding: ${spacing('l')};
     ${({ $donateWidgetIsTextOnly }) => $donateWidgetIsTextOnly && css`
@@ -148,7 +149,7 @@ const Form = styled.form`
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
     margin-top: ${spacing('md')};
-    border-radius: 0.5rem;
+    border-radius: 1rem;
     max-width: 461px;
     min-width: 400px;
     /* Alignment is handled by the outer wrapper on desktop. */
@@ -159,7 +160,7 @@ const Form = styled.form`
 
 const OuterFieldset = styled.fieldset`
   color: ${({ theme }) => theme.color('black')};
-  padding: 0 ${spacing('md')} ${spacing('md')};
+  padding: ${spacing('m')};
   margin: 0;
   border: none;
   @media ${({ theme }) => theme.allBreakpoints('M')} {
@@ -181,7 +182,6 @@ const Legend = styled.legend`
 const PrimaryTitleText = styled(Text)`
   display: block;
   text-align: left;
-  font-size: ${({ theme }) => theme.fontSize('s')};
   font-weight: 700;
 `;
 
@@ -190,7 +190,7 @@ const SecondaryTitleText = styled(Text)`
   text-align: left;
   font-size: ${({ theme }) => theme.fontSize('s')};
   line-height: 1.5;
-  margin-top: ${spacing('sm')};
+  margin: ${spacing('sm')} 0 !important;
 `;
 
 const MoneyBuys = styled.div`
@@ -266,20 +266,24 @@ const AmountField = styled(Input)`
   }
 `;
 
-const Copy = styled.p`
+const MoneybuyCopy = styled.p`
   line-height: 1.5;
   margin-top: ${spacing('l')};
   color: ${({ theme }) => theme.color('black')};
+  margin: ${spacing('md')} 0 ${spacing('sm')};
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    margin: ${spacing('m')} 0 ${spacing('md')};
+  }
 `;
 
 const Button = styled.button`
   width: 100%;
-  margin: ${spacing('sm')} 0 ${spacing('sm')};
+  margin-top: ${spacing('md')};
   color: ${({ theme }) => theme.color('white')};
   font-size: ${({ theme }) => theme.fontSize('s')};
   font-weight: bold;
+  min-height: 44px;
   cursor: pointer;
-  min-height: 48px;
   background: ${({ theme, color }) => theme.color(color)};
   text-decoration: none;
   border-radius: 0.5rem;
@@ -291,16 +295,12 @@ const Button = styled.button`
     outline: none;
     background-color: ${({ theme }) => theme.color('coral_dark')};
   }
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    padding: ${spacing('md')} ${spacing('l')};
-  }
 `;
 
 export {
   BgImage,
   Button,
-  Copy,
+  MoneybuyCopy,
   Container,
   InnerContainer,
   Error,

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

@@ -3,7 +3,6 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import PopUpComponent from './PopUpComponent';
 import MoneyBuy from '../MoneyBuy/MoneyBuy';
 import {
   handleDonateSubmission,
@@ -12,7 +11,7 @@ import {
 } from '../../../../utils/Membership';
 import {
   Button,
-  Copy,
+  MoneybuyCopy,
   Error,
   FormFieldset,
   FormWrapper,
@@ -22,7 +21,8 @@ import {
   AmountField,
   OuterFieldset,
   Legend,
-  PrimaryTitleText
+  PrimaryTitleText,
+  SecondaryTitleText
 } from '../DonateBanner.style';
 import GivingSelector from '../GivingSelector/GivingSelector';
 
@@ -35,22 +35,22 @@ const Signup = ({
   mbshipID,
   donateOrientation = 'right',
   noMoneyBuys = false,
-  popUpText,
-  chooseAmountText = null,
-  monthlyChooseAmountText = null,
   submitButtonColor = 'red',
   changeGivingType,
   givingType = null,
   hasTopImage = false,
   shouldShowTitleSection = false,
+  donateWidgetIsTextOnly = false,
+  thisTitle = null,
+  thisSubtitle = null,
+  showCopy = false,
+  isLargeBreakpoint = false,
+  isMediumBreakpoint = false,
   ...rest
 }) => {
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(10);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
-  const [popOpen, setPopOpen] = useState(false);
-  // In order to keep track of whether the user has ever been shown the popup
-  const [popUpShown, setPopUpShown] = useState(false);
 
   useEffect(() => {
     if (givingType) {
@@ -108,12 +108,6 @@ const Signup = ({
     noMoneyBuys
   ]);
 
-  // Updates our flag that differentiates between the popup
-  // being *currently* open and it *ever* having been shown to user
-  useEffect(() => {
-    if (popOpen && !popUpShown) setPopUpShown(true);
-  }, [popOpen, popUpShown]);
-
   // On load, determine what should actually be the default giving type
   useEffect(() => {
     const newGivingType = singleGiving !== null ? 'single' : 'monthly';
@@ -139,7 +133,7 @@ const Signup = ({
         mbshipId,
         donateURL,
         givingType,
-        popUpShown
+        null
       );
     } else {
       setErrorMsg(true);
@@ -198,18 +192,18 @@ const Signup = ({
     return `Donate £${amountDonate} monthly`;
   };
 
-  const defaultChooseAmountText = `${noMoneyBuys ? 'Enter' : 'Choose'} an amount to give`;
-  const thisChooseAmountText = givingType === 'monthly' && monthlyChooseAmountText
-    ? monthlyChooseAmountText
-    : (chooseAmountText || defaultChooseAmountText);
+  const shouldShowTitleInForm = showCopy && (
+    !donateWidgetIsTextOnly || (donateWidgetIsTextOnly && !isLargeBreakpoint)
+  );
+
+  // Use h1 tag for text-only version, p tag for image version
+  const titleTag = donateWidgetIsTextOnly ? 'h1' : 'p';
 
   return (
     <FormWrapper
       donateOrientation={donateOrientation}
       shouldShowTitleSection={shouldShowTitleSection}
     >
-      { popOpen && <PopUpComponent popUpText={popUpText} setPopOpen={setPopOpen} /> }
-
       <Form
         donateOrientation={donateOrientation}
         hasTopImage={hasTopImage}
@@ -225,16 +219,26 @@ const Signup = ({
         }
       >
         <OuterFieldset>
-          <Legend>
-            <PrimaryTitleText tag="span" color="black">
-              {thisChooseAmountText}
-            </PrimaryTitleText>
-          </Legend>
+          {shouldShowTitleInForm ? (
+            <Legend>
+              <PrimaryTitleText tag={titleTag} $donateWidgetIsTextOnly={donateWidgetIsTextOnly}>
+                {thisTitle}
+              </PrimaryTitleText>
+              {thisSubtitle && (
+                <SecondaryTitleText
+                  tag="p"
+                  $showGivingSelector={showGivingSelector}
+                  $isMediumBreakpoint={isMediumBreakpoint}
+                >
+                  {thisSubtitle}
+                </SecondaryTitleText>
+              )}
+            </Legend>
+          ) : null}
           {showGivingSelector && (
             <GivingSelector
               givingType={givingType}
               changeGivingType={data => changeGivingType(data)}
-              setPopOpen={setPopOpen}
               mbshipID={mbshipID}
             />
           )}
@@ -281,10 +285,10 @@ const Signup = ({
             />
           </FormFieldset>
           {amountDonate >= 1 && moneyBuyCopy && (
-            <Copy>
+            <MoneybuyCopy>
               <strong>{`£${amountDonate} `}</strong>
               {moneyBuyCopy}
-            </Copy>
+            </MoneybuyCopy>
           )}
 
           {errorMsg && (
@@ -319,14 +323,19 @@ Signup.propTypes = {
   donateOrientation: PropTypes.oneOf(['left', 'right']),
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),
-  popUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string,
   monthlyChooseAmountText: PropTypes.string,
   submitButtonColor: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
   givingType: PropTypes.string,
   hasTopImage: PropTypes.bool,
-  shouldShowTitleSection: PropTypes.bool
+  shouldShowTitleSection: PropTypes.bool,
+  donateWidgetIsTextOnly: PropTypes.bool,
+  thisTitle: PropTypes.string,
+  thisSubtitle: PropTypes.string,
+  showCopy: PropTypes.bool,
+  isLargeBreakpoint: PropTypes.bool,
+  isMediumBreakpoint: PropTypes.bool
 };
 
 export default Signup;

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

@@ -6,13 +6,12 @@ import {
 } from './GivingSelector.style';
 
 const GivingSelector = ({
-  givingType = null, changeGivingType, setPopOpen, mbshipID
+  givingType = null, changeGivingType, mbshipID
 }) => {
-  // Only updates giving type and popup status when appropriate
+  // Only updates giving type when appropriate
   const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
     if (currentGivingType !== thisButtonType) {
       changeGivingType(thisButtonType);
-      setPopOpen(thisButtonType === 'single');
     }
   };
 
@@ -54,7 +53,6 @@ const GivingSelector = ({
 GivingSelector.propTypes = {
   givingType: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
-  setPopOpen: PropTypes.func.isRequired,
   mbshipID: PropTypes.string.isRequired
 };
 

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

@@ -27,7 +27,6 @@ const MoneyBox = styled.div`
   margin: ${spacing('sm')} 0;
   overflow: hidden;
   border-radius: 0.5rem;
-  border: 1px solid ${({ theme }) => theme.color('grey')};
   background: ${({ theme }) => theme.color('white')};
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     margin: 0 auto;
@@ -38,6 +37,10 @@ const MoneyBox = styled.div`
   input {
     ${hideVisually}
   }
+  input:focus-visible + label {
+    ${zIndex('high')};
+    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.color('blue_donate')}};
+  }
 `;
 
 const Label = styled.label`
@@ -53,15 +56,29 @@ const Label = styled.label`
   transition: color 0.15s ease-out;
   ${zIndex('medium')};
   cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
-  border-radius: 2rem;
   color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
 
+  /* All this long winded border CSS below is to ensure that the border
+  of the 'selected' giving type is red, rather than a grey line around
+  the whole outside */
+  &:first-of-type {
+    border-left: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-top: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-bottom: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+  &:last-of-type {
+    border-right: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-top: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-bottom: 1px solid ${({ active, theme }) => (active ? theme.color('red') : theme.color('grey'))};
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+
   &:active:focus {
     box-shadow: none;
   }
   &:focus {
     border: none;
-    outline: none;
     box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('red')};
   }
 `;

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

@@ -14,12 +14,20 @@ const MoneyBuyButton = styled(Input)`
     font-family: ${({ theme }) => theme.fontFamilies('Anton')};
     font-weight: normal;
     border-radius: 0.5rem;
-    height: 4rem;
+    height: 3.75rem;
     border: 1px solid ${({ theme }) => theme.color('grey')};
     &:focus {
       border: 1px solid ${({ theme }) => theme.color('red')};
     }
 
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      height: 4.5rem;
+    }
+
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
+      height: 3.4375rem;
+    }
+
     ${({ isSelected }) => isSelected
       && css`
         background-color: ${({ theme }) => theme.color('red')};