@comicrelief/component-library 6.6.3 → 6.6.4

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

@@ -7,7 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactResponsive = require("react-responsive");
 
@@ -21,6 +23,10 @@ var _Form = _interopRequireDefault(require("./Form/Form"));
 
 var _Donate = require("./Donate.style");
 
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Donate = function Donate(_ref) {
   var alt = _ref.alt,
       cartID = _ref.cartID,
@@ -44,15 +50,26 @@ var Donate = function Donate(_ref) {
       PopUpText = _ref.PopUpText,
       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
+  }); // To let us store any updated override, and force a re-render
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      overrideValue = _useState2[0],
+      setOverrideValue = _useState2[1]; // Store the updated override value
+
+
+  _react.default.useEffect(function () {
+    setOverrideValue(isDesktopOverride);
+  }, [isDesktopOverride]); // If a boolean value has been passed, let it replace our 'internal' value
+
 
-  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
+  isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
-    id: mbshipID
+    id: mbshipID,
+    key: overrideValue
   }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
     backgroundColor: backgroundColor,
     image: mobileImage,

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

@@ -224,3 +224,30 @@ import data from './dev-data/data-single';
   chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```
+
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="red"
+  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."
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+  isDesktopOverride={false}
+/>;
+```

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
@@ -38,14 +38,21 @@ const Donate = ({
   chooseAmountText,
   isDesktopOverride
 }) => {
-  // 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;
+  // To let us store any updated override, and force a re-render
+  const [overrideValue, setOverrideValue] = useState(null);
+
+  // Store the updated override value
+  React.useEffect(() => {
+    setOverrideValue(isDesktopOverride);
+  }, [isDesktopOverride]);
+
+  // If a boolean value has been passed, let it replace our 'internal' value
+  isDesktop = overrideValue !== null ? overrideValue : isDesktop;
 
   return (
-    <Container backgroundColor={backgroundColor} id={mbshipID}>
+    <Container backgroundColor={backgroundColor} id={mbshipID} key={overrideValue}>
       {!isDesktop && mobileImages ? (
         <Picture
           backgroundColor={backgroundColor}

package/src/components/Organisms/Donate/Donate.md

@@ -224,3 +224,30 @@ import data from './dev-data/data-single';
   chooseAmountText="Overridden via the 'choose amount text' props"
 />;
 ```
+
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  backgroundColor="red"
+  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."
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+  isDesktopOverride={false}
+/>;
+```