@comicrelief/component-library 7.4.0 → 7.6.0

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

@@ -31,7 +31,10 @@ var Donate = function Donate(_ref) {
   var alt = _ref.alt,
       cartID = _ref.cartID,
       clientID = _ref.clientID,
-      backgroundColor = _ref.backgroundColor,
+      desktopOverlayColor = _ref.desktopOverlayColor,
+      mobileBackgroundColor = _ref.mobileBackgroundColor,
+      submitButtonColor = _ref.submitButtonColor,
+      textColor = _ref.textColor,
       donateLink = _ref.donateLink,
       data = _ref.data,
       title = _ref.title,
@@ -67,11 +70,12 @@ var Donate = function Donate(_ref) {
 
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
-    backgroundColor: backgroundColor,
+    mobileBackgroundColor: mobileBackgroundColor,
+    desktopOverlayColor: desktopOverlayColor,
     id: mbshipID,
     key: overrideValue
   }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
-    backgroundColor: backgroundColor,
+    backgroundColor: mobileBackgroundColor,
     image: mobileImage,
     images: mobileImages,
     imageLow: mobileImageLow,
@@ -80,7 +84,7 @@ var Donate = function Donate(_ref) {
     height: "100%",
     alt: mobileAlt
   }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
-    backgroundColor: backgroundColor,
+    backgroundColor: desktopOverlayColor,
     image: image,
     images: images,
     imageLow: imageLow,
@@ -96,14 +100,14 @@ var Donate = function Donate(_ref) {
     formAlignRight: formAlignRight
   }, /*#__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",
+    color: textColor,
     size: "big",
     family: "Anton",
     weight: "normal",
     uppercase: true
   }, title), /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "p",
-    color: "white",
+    color: textColor,
     size: "m"
   }, subtitle)))), /*#__PURE__*/_react.default.createElement(_Form.default, {
     data: data,
@@ -114,7 +118,8 @@ var Donate = function Donate(_ref) {
     donateLink: donateLink,
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
-    chooseAmountText: chooseAmountText
+    chooseAmountText: chooseAmountText,
+    submitButtonColor: submitButtonColor
   })));
 };
 
@@ -129,7 +134,10 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
-  backgroundColor: 'blue_dark',
+  desktopOverlayColor: 'transparent',
+  mobileBackgroundColor: 'blue_dark',
+  submitButtonColor: 'red',
+  textColor: 'white',
   mbshipID: null,
   otherAmountText: 'will help us fund amazing projects in the UK and around the world.',
   subtitle: '',

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

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red backgound on desktop view
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
 
 ```js
 import data from './dev-data/data';
@@ -9,7 +9,9 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+	submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -33,7 +35,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -58,7 +61,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -82,7 +86,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -108,7 +113,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
+  desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -132,7 +138,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -156,7 +162,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -180,7 +186,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -197,13 +203,14 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
-## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+## Single Giving "No Money Buys", no background image, blue background; overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
 
 <Donate
-  backgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
   mbshipID="mship-9"
@@ -217,7 +224,7 @@ import data from './dev-data/data-single';
 />;
 ```
 
-## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries, red background
 
 ```js
 import data from './dev-data/data';
@@ -226,7 +233,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  mobileBackgroundColor="red"
+  desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -26,12 +26,13 @@ var Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
 })(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.color('blue_dark');
+  var theme = _ref.theme,
+      mobileBackgroundColor = _ref.mobileBackgroundColor;
+  return theme.color(mobileBackgroundColor);
 }, (0, _size.media)('medium'), function (_ref2) {
   var theme = _ref2.theme,
-      backgroundColor = _ref2.backgroundColor;
-  return theme.color(backgroundColor);
+      desktopOverlayColor = _ref2.desktopOverlayColor;
+  return theme.color(desktopOverlayColor);
 });
 
 exports.Container = Container;
@@ -171,8 +172,9 @@ var Button = _styledComponents.default.button.withConfig({
   var theme = _ref14.theme;
   return theme.fontSize('s');
 }, function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.color('red');
+  var theme = _ref15.theme,
+      color = _ref15.color;
+  return theme.color(color);
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.color('coral_dark');

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

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -43,6 +43,7 @@ var Signup = function Signup(_ref) {
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
+      submitButtonColor = _ref.submitButtonColor,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -184,11 +185,13 @@ var Signup = function Signup(_ref) {
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
-    value: "Donate"
+    value: "Donate",
+    color: submitButtonColor
   }) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
-    value: givingType === 'single' ? 'Donate now' : 'Donate monthly'
+    value: givingType === 'single' ? 'Donate now' : 'Donate monthly',
+    color: submitButtonColor
   }))));
 };
 

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -500,7 +500,7 @@ exports[`Monthly donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -835,6 +835,7 @@ exports[`Monthly donation renders correctly 1`] = `
           </div>
           <input
             className="c28"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1251,7 +1252,7 @@ exports[`Single donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1546,6 +1547,7 @@ exports[`Single donation renders correctly 1`] = `
           </p>
           <input
             className="c24"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1845,7 +1847,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -2004,6 +2006,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           </div>
           <input
             className="c18"
+            color="red"
             type="submit"
             value="Donate"
           />

package/package.json

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

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

@@ -18,7 +18,10 @@ const Donate = ({
   alt,
   cartID,
   clientID,
-  backgroundColor,
+  desktopOverlayColor,
+  mobileBackgroundColor,
+  submitButtonColor,
+  textColor,
   donateLink,
   data,
   title,
@@ -52,10 +55,15 @@ const Donate = ({
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
 
   return (
-    <Container backgroundColor={backgroundColor} id={mbshipID} key={overrideValue}>
+    <Container
+      mobileBackgroundColor={mobileBackgroundColor}
+      desktopOverlayColor={desktopOverlayColor}
+      id={mbshipID}
+      key={overrideValue}
+    >
       {!isDesktop && mobileImages ? (
         <Picture
-          backgroundColor={backgroundColor}
+          backgroundColor={mobileBackgroundColor}
           image={mobileImage}
           images={mobileImages}
           imageLow={mobileImageLow}
@@ -68,7 +76,7 @@ const Donate = ({
 
       {isDesktop && images ? (
         <BgImage
-          backgroundColor={backgroundColor}
+          backgroundColor={desktopOverlayColor}
           image={image}
           images={images}
           imageLow={imageLow}
@@ -87,7 +95,7 @@ const Donate = ({
               <>
                 <Text
                   tag="h2"
-                  color="white"
+                  color={textColor}
                   size="big"
                   family="Anton"
                   weight="normal"
@@ -95,7 +103,7 @@ const Donate = ({
                 >
                   {title}
                 </Text>
-                <Text tag="p" color="white" size="m">
+                <Text tag="p" color={textColor} size="m">
                   {subtitle}
                 </Text>
               </>
@@ -113,6 +121,7 @@ const Donate = ({
           noMoneyBuys={noMoneyBuys}
           PopUpText={PopUpText}
           chooseAmountText={chooseAmountText}
+          submitButtonColor={submitButtonColor}
         />
       </Wrapper>
     </Container>
@@ -136,7 +145,10 @@ Donate.propTypes = {
   mobileImage: PropTypes.string,
   mobileImages: PropTypes.string,
   mobileAlt: PropTypes.string,
-  backgroundColor: PropTypes.string,
+  mobileBackgroundColor: PropTypes.string,
+  desktopOverlayColor: PropTypes.string,
+  submitButtonColor: PropTypes.string,
+  textColor: PropTypes.string,
   mbshipID: PropTypes.string,
   noMoneyBuys: PropTypes.bool,
   PopUpText: PropTypes.string,
@@ -155,7 +167,10 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
-  backgroundColor: 'blue_dark',
+  desktopOverlayColor: 'transparent',
+  mobileBackgroundColor: 'blue_dark',
+  submitButtonColor: 'red',
+  textColor: 'white',
   mbshipID: null,
   otherAmountText:
     'will help us fund amazing projects in the UK and around the world.',

package/src/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red backgound on desktop view
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
 
 ```js
 import data from './dev-data/data';
@@ -9,7 +9,9 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+	submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -33,7 +35,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -58,7 +61,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -82,7 +86,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -108,7 +113,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
+  desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -132,7 +138,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -156,7 +162,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -180,7 +186,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -197,13 +203,14 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 />;
 ```
 
-## Single Giving "No Money Buys", no background image, overriding 'choose amount' text
+## Single Giving "No Money Buys", no background image, blue background; overriding 'choose amount' text
 
 ```js
 import data from './dev-data/data-single';
 
 <Donate
-  backgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
   mbshipID="mship-9"
@@ -217,7 +224,7 @@ import data from './dev-data/data-single';
 />;
 ```
 
-## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries
+## Forcing mobile layout via isDesktop override; needed to pass parent prop for external media queries, red background
 
 ```js
 import data from './dev-data/data';
@@ -226,7 +233,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
+  mobileBackgroundColor="red"
+  desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -14,12 +14,12 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: center;
   height: auto;
-  background-color: ${({ theme }) => theme.color('blue_dark')};
+  background-color: ${({ theme, mobileBackgroundColor }) => theme.color(mobileBackgroundColor)};
   ${media('medium')} {
     flex-direction: row;
     align-items: center;
     justify-content: inherit;
-    background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+    background-color: ${({ theme, desktopOverlayColor }) => theme.color(desktopOverlayColor)};
   }
 `;
 
@@ -215,7 +215,7 @@ const Button = styled.button`
   font-weight: bold;
   cursor: pointer;
   min-height: 48px;
-  background: ${({ theme }) => theme.color('red')};
+  background: ${({ theme, color }) => theme.color(color)};
   text-decoration: none;
   border-radius: 2rem;
   border: none;

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

@@ -33,6 +33,7 @@ const Signup = ({
   noMoneyBuys,
   PopUpText,
   chooseAmountText,
+  submitButtonColor,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -211,12 +212,13 @@ const Signup = ({
           )}
 
           {noMoneyBuys ? (
-            <Button type="submit" as="input" value="Donate" />
+            <Button type="submit" as="input" value="Donate" color={submitButtonColor} />
           ) : (
             <Button
               type="submit"
               as="input"
               value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
+              color={submitButtonColor}
             />
           )}
 
@@ -235,7 +237,8 @@ Signup.propTypes = {
   noMoneyBuys: PropTypes.bool,
   data: PropTypes.objectOf(PropTypes.shape),
   PopUpText: PropTypes.string.isRequired,
-  chooseAmountText: PropTypes.string.isRequired
+  chooseAmountText: PropTypes.string.isRequired,
+  submitButtonColor: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -500,7 +500,7 @@ exports[`Monthly donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -835,6 +835,7 @@ exports[`Monthly donation renders correctly 1`] = `
           </div>
           <input
             className="c28"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1251,7 +1252,7 @@ exports[`Single donation renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -1546,6 +1547,7 @@ exports[`Single donation renders correctly 1`] = `
           </p>
           <input
             className="c24"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1845,7 +1847,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
     -webkit-justify-content: inherit;
     -ms-flex-pack: inherit;
     justify-content: inherit;
-    background-color: #274084;
+    background-color: transparent;
   }
 }
 
@@ -2004,6 +2006,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           </div>
           <input
             className="c18"
+            color="red"
             type="submit"
             value="Donate"
           />