@comicrelief/component-library 6.6.2 → 6.6.3

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

@@ -42,10 +42,14 @@ var Donate = function Donate(_ref) {
       mbshipID = _ref.mbshipID,
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
-      chooseAmountText = _ref.chooseAmountText;
+      chooseAmountText = _ref.chooseAmountText,
+      isDesktopOverride = _ref.isDesktopOverride;
+  // Can't assign this conditionally due to Hook rules..
   var isDesktop = (0, _reactResponsive.useMediaQuery)({
     query: "(min-width: ".concat(_size.screen.medium, ")")
-  });
+  }); // ... but we can just do this, allowing the parent to control that if IT re-renders
+
+  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
     id: mbshipID
@@ -114,7 +118,8 @@ Donate.defaultProps = {
   subtitle: '',
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
-  chooseAmountText: ''
+  chooseAmountText: '',
+  isDesktopOverride: null
 };
 var _default = Donate;
 exports.default = _default;

package/package.json

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

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

@@ -35,9 +35,14 @@ const Donate = ({
   mbshipID,
   noMoneyBuys,
   PopUpText,
-  chooseAmountText
+  chooseAmountText,
+  isDesktopOverride
 }) => {
-  const isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
+  // Can't assign this conditionally due to Hook rules..
+  let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
+
+  // ... but we can just do this, allowing the parent to control that if IT re-renders
+  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
 
   return (
     <Container backgroundColor={backgroundColor} id={mbshipID}>
@@ -128,7 +133,8 @@ Donate.propTypes = {
   mbshipID: PropTypes.string,
   noMoneyBuys: PropTypes.bool,
   PopUpText: PropTypes.string,
-  chooseAmountText: PropTypes.string
+  chooseAmountText: PropTypes.string,
+  isDesktopOverride: PropTypes.bool
 };
 
 Donate.defaultProps = {
@@ -149,7 +155,8 @@ Donate.defaultProps = {
   subtitle: '',
   noMoneyBuys: false,
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
-  chooseAmountText: ''
+  chooseAmountText: '',
+  isDesktopOverride: null
 };
 
 export default Donate;

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

@@ -123,7 +123,7 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,
   changeGivingType: PropTypes.func.isRequired,
-  setPopOpen: PropTypes.bool.isRequired
+  setPopOpen: PropTypes.func.isRequired
 };
 
 export default GivingSelector;