@comicrelief/component-library 8.52.3 → 8.53.1

package/.github/workflows/main.yml

@@ -58,7 +58,7 @@ jobs:
 
   playwright:
     name: Playwright test
-    timeout-minutes: 10
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

package/dist/components/Molecules/HeroBanner/HeroBanner.md

@@ -74,7 +74,7 @@ import variants from './_variants';
     imageLow={defaultData.heroBannerImage}
     imageAltText="Image alt text"
     variant={variants.FULL_HEIGHT}
-    ctaText="Register to fundraise but longer"
+    ctaText="Register to fundraise but very very very very long oh it's a big link this one"
     ctaUrl="http://www.comicrelief.com/register"
     ctaNewTab
     copyLeft

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

@@ -133,7 +133,7 @@ const CopyOuterWrapper = exports.CopyOuterWrapper = _styledComponents.default.di
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__Copy",
   componentId: "sc-2ch4eo-4"
-})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref17 => {
+})(["width:100%;", ";border-radius:1rem;padding:", ";color:", ";box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;background-color:", ";", ";", ";@media ", "{width:", ";}"], (0, _zIndex.default)('low'), _ref17 => {
   let {
     variant
   } = _ref17;
@@ -186,7 +186,7 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
 const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CopyInnerWrapper",
   componentId: "sc-2ch4eo-5"
-})(["width:100%;height:100%;display:flex;align-items:center;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
+})(["width:100%;height:100%;display:flex;align-items:center;border-radius:1rem;@media ", "{height:auto;", ";", ";justify-content:", ";}"], _ref24 => {
   let {
     theme
   } = _ref24;
@@ -210,7 +210,7 @@ const CopyInnerWrapper = exports.CopyInnerWrapper = _styledComponents.default.di
 const CTAWrapper = exports.CTAWrapper = _styledComponents.default.div.withConfig({
   displayName: "HeroBannerstyle__CTAWrapper",
   componentId: "sc-2ch4eo-6"
-})(["width:100%;height:auto;position:relative;padding:0.5rem 0;margin-top:1.25rem;", ""], _ref28 => {
+})(["width:100%;height:auto;position:relative;padding:0.5rem 2.5rem 0 0;margin-top:1.25rem;", ""], _ref28 => {
   let {
     variant
   } = _ref28;
@@ -236,7 +236,7 @@ const CtaTextUnderline = exports.CtaTextUnderline = _styledComponents.default.im
 const HeroBannerLink = exports.HeroBannerLink = _styledComponents.default.a.withConfig({
   displayName: "HeroBannerstyle__HeroBannerLink",
   componentId: "sc-2ch4eo-10"
-})(["text-decoration:none;width:100%;@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref30 => {
+})(["text-decoration:none;width:100%;> div{transition:box-shadow 0.35s;box-shadow:rgba(0,0,0,0.15) 0px 0px 1.5rem;}&:hover{> div{box-shadow:rgba(0,0,0,0.25) 0px 0px 1.5rem;}}@media ", "{", " width:", ";> div{width:100%;}&:hover{img.cta-text-underline{opacity:1;}}}"], _ref30 => {
   let {
     theme
   } = _ref30;

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

@@ -116,6 +116,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -130,6 +131,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -435,6 +437,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #FFFFFF;
 }
 
@@ -449,6 +452,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {
@@ -736,6 +740,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   border-radius: 1rem;
   padding: 3rem 1.5rem;
   color: #000000;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1.5rem;
   background-color: #2C0230;
   text-align: center;
 }
@@ -751,6 +756,7 @@ exports[`renders "Text Banner" Hero Banner correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  border-radius: 1rem;
 }
 
 @media (min-width:740px) {

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

@@ -14,6 +14,9 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Form = _interopRequireDefault(require("./Form/Form"));
 var _utils = require("./_utils");
 var _Donate = require("./Donate.style");
+// 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.
 const Donate = _ref => {
   let {
     alt = '',

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

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

package/dist/components/Organisms/DonateBanner/DonateBanner.js

@@ -0,0 +1,132 @@
+"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.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactResponsive = require("react-responsive");
+var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
+var _Form = _interopRequireDefault(require("./Form/Form"));
+var _utils = require("./_utils");
+var _DonateBanner = require("./DonateBanner.style");
+const DonateBanner = _ref => {
+  let {
+    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
+  } = _ref;
+  const isLarge = (0, _reactResponsive.useMediaQuery)({
+    query: `(min-width: ${_allBreakpoints.breakpointValues.L}px)`
+  });
+  const isMedium = (0, _reactResponsive.useMediaQuery)({
+    query: `(min-width: ${_allBreakpoints.breakpointValues.M}px)`
+  });
+  const [givingType, setGivingType] = (0, _react.useState)();
+  const {
+    showCopy,
+    thisTitle,
+    thisSubtitle,
+    noTitlesAtAll
+  } = (0, _utils.handleTitles)(givingType, title, subtitle, monthlyTitle, monthlySubtitle);
+  const {
+    thisOtherAmountText
+  } = (0, _utils.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 /*#__PURE__*/_react.default.createElement(_DonateBanner.Container, {
+    paddingAbove: paddingAbove,
+    paddingBelow: paddingBelow,
+    pageBackgroundColour: pageBackgroundColour,
+    id: mbshipID
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.InnerContainer, {
+    componentBackgroundColour: componentBackgroundColour,
+    $donateWidgetIsTextOnly: donateWidgetIsTextOnly
+  }, shouldRenderTopImage ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
+    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 ? /*#__PURE__*/_react.default.createElement(_DonateBanner.BgImage, {
+    image: imageL.image,
+    images: imageL.images,
+    imageLow: imageL.imageLow,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    alt: imageL.alt || '',
+    isBackgroundImage: true
+  }) : null, /*#__PURE__*/_react.default.createElement(_DonateBanner.Wrapper, {
+    donateOrientation: donateOrientation,
+    "aria-live": "polite",
+    noTitlesAtAll: noTitlesAtAll,
+    hasTopImage: shouldRenderTopImage,
+    shouldShowTitleSection: shouldShowTitleSection
+  }, shouldShowTitleSection && /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperOuter, {
+    donateOrientation: donateOrientation
+  }, /*#__PURE__*/_react.default.createElement(_DonateBanner.TitleWrapperInner, null, showCopy && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "h2",
+    size: "big",
+    family: "Anton",
+    weight: "normal"
+  }, thisTitle), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    tag: "p",
+    size: "m"
+  }, thisSubtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
+    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
+  }))));
+};
+var _default = exports.default = DonateBanner;

package/dist/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."
+/>;
+```