@comicrelief/component-library 6.1.5 → 6.3.0

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;

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

@@ -1,17 +1,20 @@
 # Donate
 
-## Form align right
+## Form align right, with red backgound on desktop view
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="blue_dark"
+  backgroundColor="red"
   formAlignRight={true}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -27,13 +30,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -49,13 +55,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -71,13 +80,16 @@ const pictures = require('../../../styleguide/data/data').default;
 
 ```js
 import data from './dev-data/data-single';
-const pictures = require('../../../styleguide/data/data').default;
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   backgroundColor="blue_dark"
   formAlignRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -89,3 +101,125 @@ const pictures = require('../../../styleguide/data/data').default;
   otherDescription="will help us fund amazing projects in the UK and around the world."
 />;
 ```
+
+## Form align right - no subtitle
+
+```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="blue_dark"
+  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=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Form align left - no subtitle
+
+```js
+import data from './dev-data/data';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  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=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving - no subtitle
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  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=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys"
+
+```js
+import data from './dev-data/data-single';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  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"
+  noMoneyBuys
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```
+
+## Single Giving "No Money Buys", no background image
+
+```js
+import data from './dev-data/data-single';
+
+<Donate
+  backgroundColor="blue_dark"
+  formAlignRight={false}
+  data={data}
+  mbshipID="mship-1"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  noMoneyBuys
+  subtitle=""
+  otherDescription="will help us fund amazing projects in the UK and around the world."
+/>;
+```