@comicrelief/component-library 7.12.1 → 7.13.0

package/dist/components/Molecules/Accordion/Accordion.js

@@ -33,12 +33,14 @@ var Container = _styledComponents.default.div.withConfig({
   return theme.color('white');
 });
 
-var ChevAnima = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
+var ChevronKeyframes = (0, _styledComponents.keyframes)(["0%{margin-top:0rem;}50%{margin-top:0.5rem;}100%{margin-top:0rem;}"]);
 
 var Button = _styledComponents.default.button.withConfig({
   displayName: "Accordion__Button",
   componentId: "sc-19u0s0h-1"
-})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], ChevAnima, (0, _spacing.default)('l'), function (_ref2) {
+})(["display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;transition:bottom 0.1s linear;cursor:pointer;&:focus,&:hover{color:inherit;outline:none;> div{animation-name:", ";animation-duration:0.4s;}}padding:", ";@media ", "{padding:", " ", ";}"], function (props) {
+  return props.ChevronKeyframes;
+}, (0, _spacing.default)('l'), function (_ref2) {
   var theme = _ref2.theme;
   return theme.breakpoint('small');
 }, (0, _spacing.default)('l'), (0, _spacing.default)('lg'));
@@ -78,7 +80,8 @@ var Accordion = function Accordion(_ref6) {
 
   return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: handleOpen,
-    "aria-expanded": isOpen ? 'true' : 'false'
+    "aria-expanded": isOpen ? 'true' : 'false',
+    ChevronKeyframes: ChevronKeyframes
   }, title, /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement(_index.Chevron, {
     colour: "black",
     direction: isOpen ? 'up' : 'down'

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -58,7 +58,7 @@ var SingleMessage = function SingleMessage(_ref) {
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       onPlay = _useState6[0],
-      setonPlay = _useState6[1];
+      setOnPlay = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
@@ -118,7 +118,7 @@ var SingleMessage = function SingleMessage(_ref) {
   }, [hasVideo, isInitialised, uniqueID, videoID, onPlay]);
 
   var handlePlay = function handlePlay(thisUniqueID) {
-    setonPlay(true); // Trigger play and update video state
+    setOnPlay(true); // Trigger play and update video state
 
     var thisVideoID = "".concat(thisUniqueID, "__video");
     setTimeout(function () {

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -154,6 +154,7 @@ import Download from '../../Atoms/Icons/Download';
       imageLow={defaultData.image}
       imageLeft={true}
       images={defaultData.images}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -179,10 +180,11 @@ import Download from '../../Atoms/Icons/Download';
       images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
+      subtitle="subTitle"
     >
       <Text tag='p'>
         Some text and stuff.
       </Text>
     </SingleMessageDs>
 </div>;
-```
+```

package/dist/components/Molecules/VideoBanner/VideoBanner.md

@@ -1,5 +1,5 @@
 ```js
-const poster = require('../../../styleguide/assets/poster.png');
+import poster from '../../../styleguide/assets/poster.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 

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

@@ -52,7 +52,8 @@ var Donate = function Donate(_ref) {
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
-      isDesktopOverride = _ref.isDesktopOverride;
+      isDesktopOverride = _ref.isDesktopOverride,
+      otherAmountValue = _ref.otherAmountValue;
   var isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
   }); // To let us store any updated override, and force a re-render
@@ -63,11 +64,10 @@ var Donate = function Donate(_ref) {
       setOverrideValue = _useState2[1]; // Store the updated override value
 
 
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     setOverrideValue(isDesktopOverride);
   }, [isDesktopOverride]); // If a boolean value has been passed, let it replace our 'internal' value
 
-
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     mobileBackgroundColor: mobileBackgroundColor,
@@ -119,7 +119,8 @@ var Donate = function Donate(_ref) {
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
     chooseAmountText: chooseAmountText,
-    submitButtonColor: submitButtonColor
+    submitButtonColor: submitButtonColor,
+    otherAmountValue: otherAmountValue
   })));
 };
 
@@ -144,7 +145,8 @@ Donate.defaultProps = {
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
-  isDesktopOverride: null
+  isDesktopOverride: null,
+  otherAmountValue: null
 };
 var _default = Donate;
 exports.default = _default;

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

@@ -103,6 +103,102 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
+## Single Giving "No Money Buys" with overridden manual input value
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(123.45);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(567.89);
+}, 3000);
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-4"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button, with overridden manual input value
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+import { useState } from 'react';
+
+// Simulating default state of a parent componenet
+const [amountDonate, setAmountDonate] = useState(111.22);
+
+// Simulating state update of a parent componenet
+setTimeout(()=>{
+  setAmountDonate(333.44);
+}, 3000);
+
+<Donate
+  alt="Background image"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-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."
+  otherAmountValue={amountDonate}
+/>;
+```
+
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+```js
+import data from './dev-data/data-high-value';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  formAlignRight={false}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-2"
+  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."
+  otherAmountText="Overridden via the 'Other amount text' prop"
+/>;
+```
+
+
 ## Form align right - no subtitle
 
 ```js

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

@@ -69,4 +69,23 @@ it('Single donation with no Money Buys renders correctly', function () {
     chooseAmountText: "Overridden via the 'choose amount text' props"
   })).toJSON();
   expect(tree).toMatchSnapshot();
+});
+it('"Single Giving, No Money Buys, with overridden manual input value" renders correctly', function () {
+  var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Donate.default, {
+    mobileBackgroundColor: "blue_dark",
+    desktopOverlayColor: "blue_dark",
+    formAlignRight: false,
+    imageLow: defaultData.pictures.imageLow,
+    images: defaultData.pictures.images,
+    data: _data.default,
+    mbshipID: "mship-4",
+    donateLink: "https://donation.comicrelief.com/",
+    clientID: "donate",
+    cartID: "default-comicrelief",
+    title: "Donate Now",
+    noMoneyBuys: true,
+    subtitle: "Please help us fund life-changing projects in the UK and around the world.",
+    otherAmountValue: 345.67
+  })).toJSON();
+  expect(tree).toMatchSnapshot();
 });

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

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor", "otherAmountValue"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -44,6 +44,7 @@ var Signup = function Signup(_ref) {
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
       submitButtonColor = _ref.submitButtonColor,
+      otherAmountValue = _ref.otherAmountValue,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -78,13 +79,20 @@ var Signup = function Signup(_ref) {
       setPopUpShown = _useState12[1];
 
   (0, _react.useEffect)(function () {
-    var givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
-    // 'philantrophy' carts have been set up to use a single moneybuy.
-    // See ENG-1685 for more details
+    // If a specific 'other amount' has been passed down, use it,
+    // otherwise assign based on the associated moneybuys:
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    } else {
+      var _givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
+      // 'philantrophy' carts have been set up to use a single moneybuy.
+      // See ENG-1685 for more details
+
 
-    var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
-    setAmountDonate(parseFloat(thisAmount));
-  }, [givingType, singleGiving, regularGiving]);
+      var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
+      setAmountDonate(parseFloat(thisAmount));
+    }
+  }, [givingType, singleGiving, regularGiving, otherAmountValue]);
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving;
     var moneyBuyNewDescription = otherAmountText;
@@ -119,9 +127,15 @@ var Signup = function Signup(_ref) {
       setErrorMsg(true);
       setMoneyBuyCopy(false);
     }
-  }; // Create money buy boxes
+  }; // Update the local state if the prop has been set and changed
 
 
+  (0, _react.useEffect)(function () {
+    if (otherAmountValue) {
+      setAmountDonate(parseFloat(otherAmountValue));
+    }
+  }, [otherAmountValue, setAmountDonate]); // Create money buy boxes
+
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
   var showGivingSelector = singleGiving !== null && regularGiving !== null;
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {

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

@@ -30,8 +30,10 @@ var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;di
 var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], fadeOpen, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, fadeClose);
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], function (props) {
+  return props.fadeOpen;
+}, function (props) {
+  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose);
 }, function (_ref) {
   var theme = _ref.theme;
   return theme.color('blue_light');
@@ -69,7 +71,9 @@ var PopUpComponent = function PopUpComponent(_ref3) {
   };
 
   return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
-    isClosed: isClosed
+    isClosed: isClosed,
+    fadeOpen: fadeOpen,
+    fadeClose: fadeClose
   }, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: function onClick() {
       return handleCloser();