@comicrelief/component-library 6.2.0 → 6.3.0

package/dist/components/Molecules/SingleMessage/SingleMessage.md

@@ -1,14 +1,13 @@
 Single Message
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
 >
@@ -29,14 +28,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -59,14 +57,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage no copy
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -91,13 +88,12 @@ Single Message vertical height 100%
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple_dark"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   vhFull
 >
@@ -112,16 +108,15 @@ Single Message double image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="yellow"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
-  imageSet2={data.images}
-  image2={data.image}
+  imageSet2={defaultData.images}
+  image2={defaultData.image}
   imageAltText2=""
 >
   <Text tag="p" color="black" size="xxl">
@@ -135,12 +130,11 @@ Single Message with 16:9 video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -154,12 +148,11 @@ const data = require('../../../styleguide/data/data').default;
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   videoID="WUgvvPRH7Oc"
@@ -175,12 +168,11 @@ Single Message with portrait video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="FoMlSB6ftQg"
@@ -195,12 +187,11 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="fwCQRMlKBnA"
@@ -216,12 +207,11 @@ Single Message with landscape video, 100VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -239,12 +229,11 @@ Single Message with landscape video, 50VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"

package/dist/components/Molecules/SingleMessage/SingleMessage.test.js

@@ -10,7 +10,7 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _SingleMessage = _interopRequireDefault(require("./SingleMessage"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
@@ -19,8 +19,8 @@ var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 it('renders Single Message with Image correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
-    imageSet: _data.default.images,
-    image: _data.default.image,
+    imageSet: _data.defaultData.images,
+    image: _data.defaultData.image,
     imageAltText: "",
     copyFirst: false
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -51,8 +51,8 @@ it('renders Single Message with no Image correctly', function () {
 it('renders Single Message with full width correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
-    imageSet: _data.default.images,
-    image: _data.default.image,
+    imageSet: _data.defaultData.images,
+    image: _data.defaultData.image,
     imageAltText: "",
     copyFirst: false,
     fullImage: true
@@ -73,8 +73,8 @@ it('renders Single Message with full width correctly', function () {
 it('renders Single Message with full width image and no text correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
-    imageSet: _data.default.images,
-    image: _data.default.image,
+    imageSet: _data.defaultData.images,
+    image: _data.defaultData.image,
     imageAltText: "",
     copyFirst: false,
     fullImage: true
@@ -84,9 +84,9 @@ it('renders Single Message with full width image and no text correctly', functio
 it('renders Single Message with 100% vertical height image correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "purple",
-    imageLow: _data.default.imageLow,
-    imageSet: _data.default.images,
-    image: _data.default.image,
+    imageLow: _data.defaultData.imageLow,
+    imageSet: _data.defaultData.images,
+    image: _data.defaultData.image,
     imageAltText: "",
     vhFull: true
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -99,12 +99,12 @@ it('renders Single Message with 100% vertical height image correctly', function
 it('renders Single Message with double image correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessage.default, {
     backgroundColor: "yellow",
-    imageLow: _data.default.imageLow,
-    imageSet: _data.default.images,
-    image: _data.default.image,
+    imageLow: _data.defaultData.imageLow,
+    imageSet: _data.defaultData.images,
+    image: _data.defaultData.image,
     imageAltText: "",
-    imageSet2: _data.default.images,
-    image2: _data.default.image,
+    imageSet2: _data.defaultData.images,
+    image2: _data.defaultData.image,
     imageAltText2: ""
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -3,8 +3,7 @@
 ## Image align left and CTA are clickable and links user through to full conten
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -29,8 +28,8 @@ const Title = styled(Text)`
       link='/home'
       linkLabel='Check out'
       backgroundColor='white'
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -51,8 +50,7 @@ const Title = styled(Text)`
 ## Image align right  and CTA are clickable and links user through to full content
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -77,8 +75,8 @@ const Title = styled(Text)`
       ctaBgColor="blue_dark"
       backgroundColor='white'
       imageLeft={false}
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -98,8 +96,7 @@ const Title = styled(Text)`
 ## Image align with non CTA
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -122,8 +119,8 @@ const Title = styled(Text)`
       ctaBgColor="blue_dark"
       backgroundColor='white'
       imageLeft={true}
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       imageAltText='Happy man going to work'
       subtitle="Subtitle"
       height='100%'
@@ -143,8 +140,7 @@ const Title = styled(Text)`
 ## Using the linkIcon prop (to display download icon)
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -155,9 +151,9 @@ import Download from '../../Atoms/Icons/Download';
       link="https://assets.ctfassets.net/zsfivwzfgl3t/EsIEuI1teYkbLB7peOtqP/b43a905cffd89115d642fe5a84ff020a/RND21_fundraise_moneybuys_poster.pdf"
       linkLabel='Download this'
       linkIcon={<Download />}
-      imageLow={data.image}
+      imageLow={defaultData.image}
       imageLeft={true}
-      images={data.images}
+      images={defaultData.images}
     >
       <Text tag='p'>
         Whatever you’ve got planned, the Sport Relief shop has everything you need
@@ -171,8 +167,7 @@ import Download from '../../Atoms/Icons/Download';
 ## Video with no CTA
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
@@ -180,8 +175,8 @@ import Download from '../../Atoms/Icons/Download';
 
 <div>
     <SingleMessageDs
-      imageLow={data.image}
-      images={data.images}
+      imageLow={defaultData.image}
+      images={defaultData.images}
       youTubeId="faz0JeBB41M"
       imageLeft={true}
     >

package/dist/components/Molecules/SingleMessageDS/SingleMessageDs.test.js

@@ -14,7 +14,7 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
 var _Download = _interopRequireDefault(require("../../Atoms/Icons/Download"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SingleMessageDs.default, {
@@ -24,8 +24,8 @@ it('renders correctly', function () {
     ctaBgColor: "blue_dark",
     backgroundColor: "white",
     imageDirection: "right",
-    imageLow: _data.default.image,
-    images: _data.default.images,
+    imageLow: _data.defaultData.image,
+    images: _data.defaultData.images,
     imageAltText: "Happy man going to work",
     subtitle: "Subtitle",
     title: "Heading Line 1 Heading Line 2",

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

@@ -9,6 +9,10 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactResponsive = require("react-responsive");
+
+var _size = require("../../../theme/shared/size");
+
 var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
 var _Form = _interopRequireDefault(require("./Form/Form"));
@@ -29,12 +33,29 @@ var Donate = function Donate(_ref) {
       images = _ref.images,
       image = _ref.image,
       imageLow = _ref.imageLow,
+      mobileImages = _ref.mobileImages,
+      mobileImage = _ref.mobileImage,
+      mobileImageLow = _ref.mobileImageLow,
+      mobileAlt = _ref.mobileAlt,
       mbshipID = _ref.mbshipID,
-      noMoneyBuys = _ref.noMoneyBuys;
+      noMoneyBuys = _ref.noMoneyBuys,
+      PopUpText = _ref.PopUpText;
+  var isDesktop = (0, _reactResponsive.useMediaQuery)({
+    query: "(min-width: ".concat(_size.screen.medium, ")")
+  });
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
     backgroundColor: backgroundColor,
     id: mbshipID
-  }, images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
+  }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Donate.MobImage, {
+    backgroundColor: backgroundColor,
+    image: mobileImage,
+    images: mobileImages,
+    imageLow: mobileImageLow,
+    objectFit: "cover",
+    width: "100%",
+    height: "100%",
+    alt: mobileAlt
+  }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
     backgroundColor: backgroundColor,
     image: image,
     images: images,
@@ -48,7 +69,7 @@ var Donate = function Donate(_ref) {
     formAlignRight: formAlignRight
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
     formAlignRight: formAlignRight
-  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, subtitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: "white",
     size: "big",
@@ -59,14 +80,15 @@ var Donate = function Donate(_ref) {
     tag: "p",
     color: "white",
     size: "m"
-  }, subtitle))), /*#__PURE__*/_react.default.createElement(_Form.default, {
+  }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
     otherDescription: otherDescription,
     cartID: cartID,
     clientID: clientID,
     mbshipID: mbshipID,
     donateLink: donateLink,
-    noMoneyBuys: noMoneyBuys
+    noMoneyBuys: noMoneyBuys,
+    PopUpText: PopUpText
   })));
 };
 
@@ -77,10 +99,16 @@ Donate.defaultProps = {
   imageLow: null,
   image: null,
   images: null,
-  backgroundColor: null,
+  mobileImageLow: null,
+  mobileImage: null,
+  mobileImages: null,
+  mobileAlt: '',
+  backgroundColor: 'blue_dark',
   mbshipID: null,
   otherDescription: 'will help us fund amazing projects in the UK and around the world.',
-  noMoneyBuys: false
+  subtitle: '',
+  noMoneyBuys: false,
+  PopUpText: "Will you become one of our valued monthly supporters by converting your single donation into a smaller, monthly donation? By giving monthly, you'll help us deliver long-term impact."
 };
 var _default = Donate;
 exports.default = _default;