@comicrelief/component-library 6.6.0 → 6.6.1

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 +8 -7
  2. package/dist/theme/shared/size.js +10 -4
  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 +12 -4
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 = require("react-responsive");
12
+ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
13
13
 
14
14
  var _size = require("../../../theme/shared/size");
15
15
 
@@ -43,13 +43,12 @@ 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
- });
49
46
  return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
50
47
  backgroundColor: backgroundColor,
51
48
  id: mbshipID
52
- }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
49
+ }, mobileImages && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
50
+ maxWidth: _size.screenPixelValues.medium - 1
51
+ }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
53
52
  backgroundColor: backgroundColor,
54
53
  image: mobileImage,
55
54
  images: mobileImages,
@@ -58,7 +57,9 @@ var Donate = function Donate(_ref) {
58
57
  width: "100%",
59
58
  height: "100%",
60
59
  alt: mobileAlt
61
- }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
60
+ })), images && /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
61
+ minWidth: _size.screenPixelValues.medium
62
+ }, /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
62
63
  backgroundColor: backgroundColor,
63
64
  image: image,
64
65
  images: images,
@@ -68,7 +69,7 @@ var Donate = function Donate(_ref) {
68
69
  height: "100%",
69
70
  alt: alt,
70
71
  isBackgroundImage: true
71
- }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
72
+ })), /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
72
73
  formAlignRight: formAlignRight,
73
74
  "aria-live": "polite"
74
75
  }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
package/dist/theme/shared/size.js CHANGED
@@ -3,11 +3,17 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.container = exports.screen = exports.media = void 0;
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;
7
13
  var screen = {
8
- small: '740px',
9
- medium: '1024px',
10
- large: '1440px'
14
+ small: "".concat(screenPixelValues.small, "px"),
15
+ medium: "".concat(screenPixelValues.medium, "px"),
16
+ large: "".concat(screenPixelValues.large, "px")
11
17
  };
12
18
  exports.screen = screen;
13
19
 
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.0",
4
+ "version": "6.6.1",
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 { useMediaQuery } from 'react-responsive';
2
+ import MediaQuery from 'react-responsive';
3
3
  import PropTypes from 'prop-types';
4
4
 
5
- import { screen } from '../../../theme/shared/size';
5
+ import { screenPixelValues } 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
- const isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
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
+ )}
41
55
 
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}
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
+ )}
56
71
 
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}
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>
70
94
 
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
- };
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
+ );
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.bool.isRequired
126
+ setPopOpen: PropTypes.func.isRequired
127
127
  };
128
128
 
129
129
  export default GivingSelector;
package/src/theme/shared/size.js CHANGED
@@ -1,7 +1,13 @@
1
+ const screenPixelValues = {
2
+ small: 740,
3
+ medium: 1024,
4
+ large: 1440
5
+ };
6
+
1
7
  const screen = {
2
- small: '740px',
3
- medium: '1024px',
4
- large: '1440px'
8
+ small: `${screenPixelValues.small}px`,
9
+ medium: `${screenPixelValues.medium}px`,
10
+ large: `${screenPixelValues.large}px`
5
11
  };
6
12
 
7
13
  const media = size => {
@@ -17,4 +23,6 @@ const container = {
17
23
  large: '1440px'
18
24
  };
19
25
 
20
- export { media, screen, container };
26
+ export {
27
+ media, screen, container, screenPixelValues
28
+ };