@comicrelief/component-library 6.6.1 → 6.6.3

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactResponsive = _interopRequireDefault(require("react-responsive"));
+var _reactResponsive = require("react-responsive");
 
 var _size = require("../../../theme/shared/size");
 
@@ -42,13 +42,18 @@ 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
-  }, mobileImages && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    maxWidth: _size.screenPixelValues.medium - 1
-  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
     backgroundColor: backgroundColor,
     image: mobileImage,
     images: mobileImages,
@@ -57,9 +62,7 @@ var Donate = function Donate(_ref) {
     width: "100%",
     height: "100%",
     alt: mobileAlt
-  })), images && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    minWidth: _size.screenPixelValues.medium
-  }, /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
+  }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
     backgroundColor: backgroundColor,
     image: image,
     images: images,
@@ -69,7 +72,7 @@ var Donate = function Donate(_ref) {
     height: "100%",
     alt: alt,
     isBackgroundImage: true
-  })), /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
     formAlignRight: formAlignRight,
     "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
@@ -115,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/dist/theme/shared/size.js

@@ -3,17 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.screenPixelValues = exports.container = exports.screen = exports.media = void 0;
-var screenPixelValues = {
-  small: 740,
-  medium: 1024,
-  large: 1440
-};
-exports.screenPixelValues = screenPixelValues;
+exports.container = exports.screen = exports.media = void 0;
 var screen = {
-  small: "".concat(screenPixelValues.small, "px"),
-  medium: "".concat(screenPixelValues.medium, "px"),
-  large: "".concat(screenPixelValues.large, "px")
+  small: '740px',
+  medium: '1024px',
+  large: '1440px'
 };
 exports.screen = screen;
 

package/package.json

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import MediaQuery from 'react-responsive';
+import { useMediaQuery } from 'react-responsive';
 import PropTypes from 'prop-types';
 
-import { screenPixelValues } from '../../../theme/shared/size';
+import { screen } from '../../../theme/shared/size';
 import Text from '../../Atoms/Text/Text';
 import Picture from '../../Atoms/Picture/Picture';
 import Form from './Form/Form';
@@ -35,77 +35,82 @@ const Donate = ({
   mbshipID,
   noMoneyBuys,
   PopUpText,
-  chooseAmountText
-}) => (
-  <Container backgroundColor={backgroundColor} id={mbshipID}>
-    {mobileImages && (
-    <MediaQuery maxWidth={screenPixelValues.medium - 1}>
-      <Picture
-        backgroundColor={backgroundColor}
-        image={mobileImage}
-        images={mobileImages}
-        imageLow={mobileImageLow}
-        objectFit="cover"
-        width="100%"
-        height="100%"
-        alt={mobileAlt}
-      />
-    </MediaQuery>
-    )}
+  chooseAmountText,
+  isDesktopOverride
+}) => {
+  // Can't assign this conditionally due to Hook rules..
+  let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
-    {images && (
-    <MediaQuery minWidth={screenPixelValues.medium}>
-      <BgImage
-        backgroundColor={backgroundColor}
-        image={image}
-        images={images}
-        imageLow={imageLow}
-        objectFit="cover"
-        width="100%"
-        height="100%"
-        alt={alt}
-        isBackgroundImage
-      />
-    </MediaQuery>
-    )}
+  // ... but we can just do this, allowing the parent to control that if IT re-renders
+  if (isDesktopOverride !== null) isDesktop = isDesktopOverride;
 
-    <Wrapper formAlignRight={formAlignRight} aria-live="polite">
-      <Header formAlignRight={formAlignRight}>
-        <HeaderInner>
-          {subtitle && (
-          <>
-            <Text
-              tag="h2"
-              color="white"
-              size="big"
-              family="Anton"
-              weight="normal"
-              uppercase
-            >
-              {title}
-            </Text>
-            <Text tag="p" color="white" size="m">
-              {subtitle}
-            </Text>
-          </>
-          )}
-        </HeaderInner>
-      </Header>
+  return (
+    <Container backgroundColor={backgroundColor} id={mbshipID}>
+      {!isDesktop && mobileImages ? (
+        <Picture
+          backgroundColor={backgroundColor}
+          image={mobileImage}
+          images={mobileImages}
+          imageLow={mobileImageLow}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+          alt={mobileAlt}
+        />
+      ) : null}
 
-      <Form
-        data={data}
-        otherDescription={otherDescription}
-        cartID={cartID}
-        clientID={clientID}
-        mbshipID={mbshipID}
-        donateLink={donateLink}
-        noMoneyBuys={noMoneyBuys}
-        PopUpText={PopUpText}
-        chooseAmountText={chooseAmountText}
-      />
-    </Wrapper>
-  </Container>
-);
+      {isDesktop && images ? (
+        <BgImage
+          backgroundColor={backgroundColor}
+          image={image}
+          images={images}
+          imageLow={imageLow}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+          alt={alt}
+          isBackgroundImage
+        />
+      ) : null}
+
+      <Wrapper formAlignRight={formAlignRight} aria-live="polite">
+        <Header formAlignRight={formAlignRight}>
+          <HeaderInner>
+            {subtitle && (
+              <>
+                <Text
+                  tag="h2"
+                  color="white"
+                  size="big"
+                  family="Anton"
+                  weight="normal"
+                  uppercase
+                >
+                  {title}
+                </Text>
+                <Text tag="p" color="white" size="m">
+                  {subtitle}
+                </Text>
+              </>
+            )}
+          </HeaderInner>
+        </Header>
+
+        <Form
+          data={data}
+          otherDescription={otherDescription}
+          cartID={cartID}
+          clientID={clientID}
+          mbshipID={mbshipID}
+          donateLink={donateLink}
+          noMoneyBuys={noMoneyBuys}
+          PopUpText={PopUpText}
+          chooseAmountText={chooseAmountText}
+        />
+      </Wrapper>
+    </Container>
+  );
+};
 
 Donate.propTypes = {
   alt: PropTypes.string,
@@ -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/theme/shared/size.js

@@ -1,13 +1,7 @@
-const screenPixelValues = {
-  small: 740,
-  medium: 1024,
-  large: 1440
-};
-
 const screen = {
-  small: `${screenPixelValues.small}px`,
-  medium: `${screenPixelValues.medium}px`,
-  large: `${screenPixelValues.large}px`
+  small: '740px',
+  medium: '1024px',
+  large: '1440px'
 };
 
 const media = size => {
@@ -23,6 +17,4 @@ const container = {
   large: '1440px'
 };
 
-export {
-  media, screen, container, screenPixelValues
-};
+export { media, screen, container };