@comicrelief/component-library 6.6.1 → 6.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Organisms/Donate/Donate.js +7 -8
  2. package/dist/theme/shared/size.js +4 -10
  3. package/package.json +1 -1
  4. package/src/components/Organisms/Donate/Donate.js +69 -69
  5. package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js +1 -1
  6. package/src/theme/shared/size.js +4 -12
package/dist/components/Organisms/Donate/Donate.js CHANGED
@@ -9,7 +9,7 @@ exports.default = void 0;
9
9
 
10
10
  var _react = _interopRequireDefault(require("react"));
11
11
 
12
- var _reactResponsive = _interopRequireDefault(require("react-responsive"));
12
+ var _reactResponsive = require("react-responsive");
13
13
 
14
14
  var _size = require("../../../theme/shared/size");
15
15
 
@@ -43,12 +43,13 @@ var Donate = function Donate(_ref) {
43
43
  noMoneyBuys = _ref.noMoneyBuys,
44
44
  PopUpText = _ref.PopUpText,
45
45
  chooseAmountText = _ref.chooseAmountText;
46
+ var isDesktop = (0, _reactResponsive.useMediaQuery)({
47
+ query: "(min-width: ".concat(_size.screen.medium, ")")
48
+ });
46
49
  return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
47
50
  backgroundColor: backgroundColor,
48
51
  id: mbshipID
49
- }, mobileImages && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
50
- maxWidth: _size.screenPixelValues.medium - 1
51
- }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
52
+ }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
52
53
  backgroundColor: backgroundColor,
53
54
  image: mobileImage,
54
55
  images: mobileImages,
@@ -57,9 +58,7 @@ var Donate = function Donate(_ref) {
57
58
  width: "100%",
58
59
  height: "100%",
59
60
  alt: mobileAlt
60
- })), images && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
61
- minWidth: _size.screenPixelValues.medium
62
- }, /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
61
+ }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
63
62
  backgroundColor: backgroundColor,
64
63
  image: image,
65
64
  images: images,
@@ -69,7 +68,7 @@ var Donate = function Donate(_ref) {
69
68
  height: "100%",
70
69
  alt: alt,
71
70
  isBackgroundImage: true
72
- })), /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
71
+ }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
73
72
  formAlignRight: formAlignRight,
74
73
  "aria-live": "polite"
75
74
  }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
package/dist/theme/shared/size.js CHANGED
@@ -3,17 +3,11 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.screenPixelValues = exports.container = exports.screen = exports.media = void 0;
7
- var screenPixelValues = {
8
- small: 740,
9
- medium: 1024,
10
- large: 1440
11
- };
12
- exports.screenPixelValues = screenPixelValues;
6
+ exports.container = exports.screen = exports.media = void 0;
13
7
  var screen = {
14
- small: "".concat(screenPixelValues.small, "px"),
15
- medium: "".concat(screenPixelValues.medium, "px"),
16
- large: "".concat(screenPixelValues.large, "px")
8
+ small: '740px',
9
+ medium: '1024px',
10
+ large: '1440px'
17
11
  };
18
12
  exports.screen = screen;
19
13
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "6.6.1",
4
+ "version": "6.6.2",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Organisms/Donate/Donate.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import MediaQuery from 'react-responsive';
2
+ import { useMediaQuery } from 'react-responsive';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
- import { screenPixelValues } from '../../../theme/shared/size';
5
+ import { screen } from '../../../theme/shared/size';
6
6
  import Text from '../../Atoms/Text/Text';
7
7
  import Picture from '../../Atoms/Picture/Picture';
8
8
  import Form from './Form/Form';
@@ -36,76 +36,76 @@ const Donate = ({
36
36
  noMoneyBuys,
37
37
  PopUpText,
38
38
  chooseAmountText
39
- }) => (
40
- <Container backgroundColor={backgroundColor} id={mbshipID}>
41
- {mobileImages && (
42
- <MediaQuery maxWidth={screenPixelValues.medium - 1}>
43
- <Picture
44
- backgroundColor={backgroundColor}
45
- image={mobileImage}
46
- images={mobileImages}
47
- imageLow={mobileImageLow}
48
- objectFit="cover"
49
- width="100%"
50
- height="100%"
51
- alt={mobileAlt}
52
- />
53
- </MediaQuery>
54
- )}
39
+ }) => {
40
+ const isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
55
41
 
56
- {images && (
57
- <MediaQuery minWidth={screenPixelValues.medium}>
58
- <BgImage
59
- backgroundColor={backgroundColor}
60
- image={image}
61
- images={images}
62
- imageLow={imageLow}
63
- objectFit="cover"
64
- width="100%"
65
- height="100%"
66
- alt={alt}
67
- isBackgroundImage
68
- />
69
- </MediaQuery>
70
- )}
42
+ return (
43
+ <Container backgroundColor={backgroundColor} id={mbshipID}>
44
+ {!isDesktop && mobileImages ? (
45
+ <Picture
46
+ backgroundColor={backgroundColor}
47
+ image={mobileImage}
48
+ images={mobileImages}
49
+ imageLow={mobileImageLow}
50
+ objectFit="cover"
51
+ width="100%"
52
+ height="100%"
53
+ alt={mobileAlt}
54
+ />
55
+ ) : null}
71
56
 
72
- <Wrapper formAlignRight={formAlignRight} aria-live="polite">
73
- <Header formAlignRight={formAlignRight}>
74
- <HeaderInner>
75
- {subtitle && (
76
- <>
77
- <Text
78
- tag="h2"
79
- color="white"
80
- size="big"
81
- family="Anton"
82
- weight="normal"
83
- uppercase
84
- >
85
- {title}
86
- </Text>
87
- <Text tag="p" color="white" size="m">
88
- {subtitle}
89
- </Text>
90
- </>
91
- )}
92
- </HeaderInner>
93
- </Header>
57
+ {isDesktop && images ? (
58
+ <BgImage
59
+ backgroundColor={backgroundColor}
60
+ image={image}
61
+ images={images}
62
+ imageLow={imageLow}
63
+ objectFit="cover"
64
+ width="100%"
65
+ height="100%"
66
+ alt={alt}
67
+ isBackgroundImage
68
+ />
69
+ ) : null}
94
70
 
95
- <Form
96
- data={data}
97
- otherDescription={otherDescription}
98
- cartID={cartID}
99
- clientID={clientID}
100
- mbshipID={mbshipID}
101
- donateLink={donateLink}
102
- noMoneyBuys={noMoneyBuys}
103
- PopUpText={PopUpText}
104
- chooseAmountText={chooseAmountText}
105
- />
106
- </Wrapper>
107
- </Container>
108
- );
71
+ <Wrapper formAlignRight={formAlignRight} aria-live="polite">
72
+ <Header formAlignRight={formAlignRight}>
73
+ <HeaderInner>
74
+ {subtitle && (
75
+ <>
76
+ <Text
77
+ tag="h2"
78
+ color="white"
79
+ size="big"
80
+ family="Anton"
81
+ weight="normal"
82
+ uppercase
83
+ >
84
+ {title}
85
+ </Text>
86
+ <Text tag="p" color="white" size="m">
87
+ {subtitle}
88
+ </Text>
89
+ </>
90
+ )}
91
+ </HeaderInner>
92
+ </Header>
93
+
94
+ <Form
95
+ data={data}
96
+ otherDescription={otherDescription}
97
+ cartID={cartID}
98
+ clientID={clientID}
99
+ mbshipID={mbshipID}
100
+ donateLink={donateLink}
101
+ noMoneyBuys={noMoneyBuys}
102
+ PopUpText={PopUpText}
103
+ chooseAmountText={chooseAmountText}
104
+ />
105
+ </Wrapper>
106
+ </Container>
107
+ );
108
+ };
109
109
 
110
110
  Donate.propTypes = {
111
111
  alt: PropTypes.string,
package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js CHANGED
@@ -123,7 +123,7 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
123
123
  GivingSelector.propTypes = {
124
124
  givingType: PropTypes.string.isRequired,
125
125
  changeGivingType: PropTypes.func.isRequired,
126
- setPopOpen: PropTypes.func.isRequired
126
+ setPopOpen: PropTypes.bool.isRequired
127
127
  };
128
128
 
129
129
  export default GivingSelector;
package/src/theme/shared/size.js CHANGED
@@ -1,13 +1,7 @@
1
- const screenPixelValues = {
2
- small: 740,
3
- medium: 1024,
4
- large: 1440
5
- };
6
-
7
1
  const screen = {
8
- small: `${screenPixelValues.small}px`,
9
- medium: `${screenPixelValues.medium}px`,
10
- large: `${screenPixelValues.large}px`
2
+ small: '740px',
3
+ medium: '1024px',
4
+ large: '1440px'
11
5
  };
12
6
 
13
7
  const media = size => {
@@ -23,6 +17,4 @@ const container = {
23
17
  large: '1440px'
24
18
  };
25
19
 
26
- export {
27
- media, screen, container, screenPixelValues
28
- };
20
+ export { media, screen, container };