@comicrelief/component-library 7.31.1 → 7.33.0

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

@@ -29,7 +29,8 @@ const SingleMessage = _ref => {
     fullImage,
     vhFull,
     videoID,
-    landscapeVideo
+    landscapeVideo,
+    paddingOption
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -166,7 +167,8 @@ const SingleMessage = _ref => {
       hasImage: hasImage,
       copyFirst: copyFirst,
       hasVideo: hasVideo,
-      vhFull: vhFull
+      vhFull: vhFull,
+      paddingOption: paddingOption
     }, children) : null))
   );
 };
@@ -184,6 +186,7 @@ SingleMessage.defaultProps = {
   children: null,
   vhFull: false,
   videoID: null,
-  landscapeVideo: false
+  landscapeVideo: false,
+  paddingOption: null
 };
 var _default = exports.default = SingleMessage;

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

@@ -84,6 +84,59 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
+Single Message with no Image - padding unmodified
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_on">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+Single Message with no Image - no bottom padding
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="lower_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+
+Single Message with no Image - no top padding
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="upper_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+Single Message with no Image - no top and bottom padding 
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
 Single Message vertical height 100%
 
 ```js

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

@@ -13,6 +13,7 @@ var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
 var _videoPlayIcon = _interopRequireDefault(require("./assets/video--play-icon.svg"));
 var _videoPlayIcon__hover = _interopRequireDefault(require("./assets/video--play-icon__hover.svg"));
 var _loader = _interopRequireDefault(require("./assets/loader.svg"));
+var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Container",
   componentId: "sc-86zg20-0"
@@ -48,7 +49,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:", ";", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref6 => {
+})(["width:100%;", ";", ";padding:", ";", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";", "{", ";}"], (0, _zIndex.default)('low'), _ref6 => {
   let {
     hasVideo,
     fullImage
@@ -76,113 +77,118 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
     theme
   } = _ref10;
   return theme.breakpoint('small');
-}, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
+}, _size.container.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), (0, _size.media)('medium'), _ref11 => {
+  let {
+    paddingOption
+  } = _ref11;
+  return (0, _utils.default)(paddingOption);
+});
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"
-})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";", "{padding-bottom:", ";}"], _ref11 => {
+})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";", "{padding-bottom:", ";}"], _ref12 => {
   let {
     fullImage
-  } = _ref11;
+  } = _ref12;
   return fullImage ? 'height: 200px;' : 'height: 280px;';
-}, _ref12 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.breakpoint('small');
-}, _ref13 => {
+}, _ref14 => {
   let {
     fullImage
-  } = _ref13;
+  } = _ref14;
   return fullImage ? '100%' : '50%';
-}, _ref14 => {
+}, _ref15 => {
   let {
     fullImage
-  } = _ref14;
+  } = _ref15;
   return fullImage ? 'min-height: 500px;' : null;
-}, _ref15 => {
+}, _ref16 => {
   let {
     vhFull,
     fullImage
-  } = _ref15;
+  } = _ref16;
   return vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null;
-}, _ref16 => {
+}, _ref17 => {
   let {
     doubleImage
-  } = _ref16;
+  } = _ref17;
   return doubleImage && 'display: flex; flex-direction: column';
-}, _ref17 => {
+}, _ref18 => {
   let {
     hasVideo
-  } = _ref17;
+  } = _ref18;
   return hasVideo ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;' : null;
-}, (0, _size.media)('small'), _ref18 => {
+}, (0, _size.media)('small'), _ref19 => {
   let {
     landscapeVideo,
     hasVideo
-  } = _ref18;
+  } = _ref19;
   return landscapeVideo && hasVideo ? 'calc(56.25% / 2);' : '0;';
 });
 const PlayButton = exports.PlayButton = _styledComponents.default.button.withConfig({
   displayName: "SingleMessagestyle__PlayButton",
   componentId: "sc-86zg20-3"
-})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref19 => {
+})(["", ";cursor:pointer;width:100%;height:100%;position:absolute;top:0;border:0;margin:0;padding:0;text-indent:-9999px;background:rgba(0,0,0,0) center no-repeat;background-size:70px;background-image:", ";", ";display:", ";&:focus,&:hover{background-image:", ";}", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref20 => {
   let {
     isBuffering
-  } = _ref19;
+  } = _ref20;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon.default, ")");
-}, _ref20 => {
+}, _ref21 => {
   let {
     copyFirst
-  } = _ref20;
+  } = _ref21;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, _ref21 => {
+}, _ref22 => {
   let {
     isPlaying
-  } = _ref21;
+  } = _ref22;
   return isPlaying ? 'none' : 'block';
-}, _ref22 => {
+}, _ref23 => {
   let {
     isBuffering
-  } = _ref22;
+  } = _ref23;
   return isBuffering === true ? "url(".concat(_loader.default, ")") : "url(".concat(_videoPlayIcon__hover.default, ")");
 }, (0, _size.media)('small'));
 const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Image",
   componentId: "sc-86zg20-4"
-})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref23 => {
+})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref24 => {
   let {
     theme
-  } = _ref23;
+  } = _ref24;
   return theme.breakpoint('small');
-}, _ref24 => {
+}, _ref25 => {
   let {
     fullImage,
     vhFull
-  } = _ref24;
+  } = _ref25;
   return fullImage || vhFull ? 'absolute' : null;
-}, _ref25 => {
+}, _ref26 => {
   let {
     doubleImage
-  } = _ref25;
+  } = _ref26;
   return doubleImage && 'height: 50%';
-}, _ref26 => {
+}, _ref27 => {
   let {
     isPlaying
-  } = _ref26;
+  } = _ref27;
   return isPlaying ? (0, _zIndex.default)('base') : (0, _zIndex.default)('low');
-}, _ref27 => {
+}, _ref28 => {
   let {
     hasVideo
-  } = _ref27;
+  } = _ref28;
   return hasVideo ? 'position: absolute; top: 0; left: 0;' : null;
 });
 const VideoWrapper = exports.VideoWrapper = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__VideoWrapper",
   componentId: "sc-86zg20-5"
-})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref28 => {
+})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref29 => {
   let {
     isPlaying
-  } = _ref28;
+  } = _ref29;
   return isPlaying ? (0, _zIndex.default)('medium') : (0, _zIndex.default)('base');
 });

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

@@ -104,6 +104,10 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -312,6 +316,10 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -498,6 +506,10 @@ exports[`renders Single Message with double image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }
@@ -506,6 +518,10 @@ exports[`renders Single Message with double image correctly 1`] = `
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -766,6 +782,10 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -920,6 +940,10 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1052,6 +1076,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }
@@ -1060,6 +1088,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }

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

@@ -47,6 +47,7 @@ const Donate = _ref => {
     defaultGivingType,
     monthlyTitle,
     monthlySubtitle,
+    paddingOption,
     // Just to keep the function call character length under control
     monthlyChooseAmountText: monthlyChoose,
     monthlyOtherAmountText: monthlyOther
@@ -105,7 +106,8 @@ const Donate = _ref => {
   }) : null, /*#__PURE__*/_react.default.createElement(_Donate.Wrapper, {
     formAlignRight: formAlignRight,
     "aria-live": "polite",
-    noTitlesAtAll: noTitlesAtAll
+    noTitlesAtAll: noTitlesAtAll,
+    paddingOption: paddingOption
   }, !noTitlesAtAll && /*#__PURE__*/_react.default.createElement(_Donate.TitleWrapperOuter, {
     formAlignRight: formAlignRight,
     "data-test": "this-one-here"
@@ -169,6 +171,7 @@ Donate.defaultProps = {
   monthlyTitle: '',
   monthlySubtitle: '',
   monthlyChooseAmountText: '',
-  monthlyOtherAmountText: ''
+  monthlyOtherAmountText: '',
+  paddingOption: null
 };
 var _default = exports.default = Donate;

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

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
 
 ```js
 import data from './dev-data/data';
@@ -24,10 +24,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="upper_off"
 />;
 ```
 
-## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart, and 'no bottom padding' option
 ```js
 import data from './dev-data/data-high-value';
 const mobilePictures = require('../../../styleguide/data/data').mobileImages;
@@ -50,10 +51,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   otherAmountText="Overridden via the 'Other amount text' prop"
+  paddingOption="lower_off"
 />;
 ```
 
-## Single Giving
+## Single Giving, with 'no padding' option
 
 ```js
 import data from './dev-data/data-single';
@@ -76,6 +78,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="both_off"
 />;
 ```
 

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

@@ -13,6 +13,7 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 var _size = require("../../../theme/shared/size");
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _utils = _interopRequireDefault(require("../../../utils/_utils"));
 const Container = exports.Container = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Container",
   componentId: "sc-8rjm3t-0"
@@ -45,7 +46,7 @@ const BgImage = exports.BgImage = (0, _styledComponents.default)(_Picture.defaul
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__Wrapper",
   componentId: "sc-8rjm3t-3"
-})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref4 => {
+})(["position:relative;text-align:center;padding:", " ", ";flex-direction:row;align-items:center;display:block;width:100%;flex-direction:", ";", ";", "{padding:", " ", ";}", "{display:flex;padding:", " 0;", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('md'), _ref4 => {
   let {
     formAlignRight
   } = _ref4;
@@ -55,14 +56,19 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
     noTitlesAtAll
   } = _ref5;
   return noTitlesAtAll === true && (0, _styledComponents.css)(["justify-content:center;"]);
-}, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'));
+}, (0, _size.media)('small'), (0, _spacing.default)('xl'), (0, _spacing.default)('md'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), _ref6 => {
+  let {
+    paddingOption
+  } = _ref6;
+  return (0, _utils.default)(paddingOption);
+});
 const TitleWrapperOuter = exports.TitleWrapperOuter = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__TitleWrapperOuter",
   componentId: "sc-8rjm3t-4"
-})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref6 => {
+})(["width:100%;display:flex;font-family:", ";", "{width:50%;padding:", ";align-items:center;}"], _ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'), (0, _spacing.default)('xl'));
 const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.div.withConfig({
@@ -72,33 +78,33 @@ const TitleWrapperInner = exports.TitleWrapperInner = _styledComponents.default.
 const FormWrapper = exports.FormWrapper = _styledComponents.default.div.withConfig({
   displayName: "Donatestyle__FormWrapper",
   componentId: "sc-8rjm3t-6"
-})(["position:relative;font-family:", ";", "{width:50%;}"], _ref7 => {
+})(["position:relative;font-family:", ";", "{width:50%;}"], _ref8 => {
   let {
     theme
-  } = _ref7;
+  } = _ref8;
   return theme.fontFamilies(theme.font.regular);
 }, (0, _size.media)('medium'));
 const Error = exports.Error = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "Donatestyle__Error",
   componentId: "sc-8rjm3t-7"
-})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref8 => {
+})(["color:", ";font-size:", ";font-weight:500;margin-top:", ";"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.color('red');
-}, _ref9 => {
+}, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.fontSize('s');
 }, (0, _spacing.default)('l'));
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   componentId: "sc-8rjm3t-8"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref10 => {
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref11 => {
   let {
     theme
-  } = _ref10;
+  } = _ref11;
   return theme.color('white');
 }, (0, _spacing.default)('md'), (0, _spacing.default)('md'), (0, _spacing.default)('l'), (0, _size.media)('small'));
 const OuterFieldset = exports.OuterFieldset = _styledComponents.default.fieldset.withConfig({
@@ -124,20 +130,20 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   componentId: "sc-8rjm3t-14"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), _ref11 => {
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], (0, _size.media)('small'), (0, _zIndex.default)('high'), _ref12 => {
   let {
     theme
-  } = _ref11;
+  } = _ref12;
   return theme.color('grey');
-}, _ref12 => {
+}, _ref13 => {
   let {
     theme
-  } = _ref12;
+  } = _ref13;
   return theme.color('grey_light');
-}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref13 => {
+}, (0, _spacing.default)('sm'), (0, _spacing.default)('md'), (0, _spacing.default)('sm'), (0, _spacing.default)('l'), _ref14 => {
   let {
     theme
-  } = _ref13;
+  } = _ref14;
   return theme.color('grey');
 });
 const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withConfig({
@@ -147,25 +153,25 @@ const Copy = exports.Copy = (0, _styledComponents.default)(_Text.default).withCo
 const Button = exports.Button = _styledComponents.default.button.withConfig({
   displayName: "Donatestyle__Button",
   componentId: "sc-8rjm3t-16"
-})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref14 => {
+})(["width:100%;margin:", " 0 ", ";color:", ";font-size:", ";font-weight:bold;cursor:pointer;min-height:48px;background:", ";text-decoration:none;border-radius:2rem;border:none;box-shadow:0px 0px 16px rgba(0,0,0,0.15);appearance:none;:active,:focus,:hover{outline:none;background-color:", ";}", "{padding:", " ", ";}"], (0, _spacing.default)('l'), (0, _spacing.default)('l'), _ref15 => {
   let {
     theme
-  } = _ref14;
+  } = _ref15;
   return theme.color('white');
-}, _ref15 => {
+}, _ref16 => {
   let {
     theme
-  } = _ref15;
+  } = _ref16;
   return theme.fontSize('s');
-}, _ref16 => {
+}, _ref17 => {
   let {
     theme,
     color
-  } = _ref16;
+  } = _ref17;
   return theme.color(color);
-}, _ref17 => {
+}, _ref18 => {
   let {
     theme
-  } = _ref17;
+  } = _ref18;
   return theme.color('coral_dark');
 }, (0, _size.media)('small'), (0, _spacing.default)('md'), (0, _spacing.default)('l'));

package/dist/utils/_utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const handlePadding = paddingOption => {
+  switch (paddingOption) {
+    case 'upper_off':
+      return 'padding-top: 0;';
+    case 'lower_off':
+      return 'padding-bottom: 0;';
+    case 'both_off':
+      return 'padding-top: 0; padding-bottom: 0';
+    // To leave pre-existing styles untouched
+    case 'both_on':
+      return null;
+    // Just in case
+    default:
+      return null;
+  }
+};
+var _default = exports.default = handlePadding;

package/package.json

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

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -30,7 +30,8 @@ const SingleMessage = ({
   fullImage,
   vhFull,
   videoID,
-  landscapeVideo
+  landscapeVideo,
+  paddingOption
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -207,6 +208,7 @@ const SingleMessage = ({
               copyFirst={copyFirst}
               hasVideo={hasVideo}
               vhFull={vhFull}
+              paddingOption={paddingOption}
             >
               {children}
             </Copy>
@@ -234,7 +236,8 @@ SingleMessage.propTypes = {
   /** Image will be the height of the viewport */
   vhFull: PropTypes.bool,
   videoID: PropTypes.string,
-  landscapeVideo: PropTypes.bool
+  landscapeVideo: PropTypes.bool,
+  paddingOption: PropTypes.string
 };
 
 SingleMessage.defaultProps = {
@@ -251,7 +254,8 @@ SingleMessage.defaultProps = {
   children: null,
   vhFull: false,
   videoID: null,
-  landscapeVideo: false
+  landscapeVideo: false,
+  paddingOption: null
 };
 
 export default SingleMessage;

package/src/components/Molecules/SingleMessage/SingleMessage.md

@@ -84,6 +84,59 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
+Single Message with no Image - padding unmodified
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_on">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+Single Message with no Image - no bottom padding
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="lower_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+
+Single Message with no Image - no top padding
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="upper_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
+Single Message with no Image - no top and bottom padding 
+
+```js
+import Text from '../../Atoms/Text/Text';
+
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_off">
+  <Text tag="p" color="white" size="xxl">
+    “The creativity that goes into helping people have a better life is
+    extraordinary.”
+  </Text>
+</SingleMessage>;
+```
+
 Single Message vertical height 100%
 
 ```js

package/src/components/Molecules/SingleMessage/SingleMessage.style.js

@@ -5,6 +5,7 @@ import zIndex from '../../../theme/shared/zIndex';
 import playIcon from './assets/video--play-icon.svg';
 import playIconHover from './assets/video--play-icon__hover.svg';
 import loadingIcon from './assets/loader.svg';
+import handlePadding from '../../../utils/_utils';
 
 const Container = styled.div`
   display: flex;
@@ -31,6 +32,7 @@ const Copy = styled.div`
   ${zIndex('low')};
   ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
   padding: ${spacing('l')};
+  
   ${media('small')} {
     ${({ vhFull, fullImage }) => (vhFull || fullImage
     ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;'
@@ -44,6 +46,7 @@ const Copy = styled.div`
     justify-content: center;
     padding: ${spacing('xl')};
   }
+
   ${props => props.fullImage
     && css`
       ${media('small')} {
@@ -52,17 +55,13 @@ const Copy = styled.div`
         right: 0;
         top: 50%;
         transform: translateY(-50%);
-        ${props.copyFirst
-    ? css`
-              left: 0;
-            `
-    : null}
+        ${props.copyFirst ? css`left: 0;` : null}
         width: 50%;
       }
     `};
+
   ${props => (props.hasImage
-    ? css`
-          @media ${({ theme }) => theme.breakpoint('small')} {
+    ? css`@media ${({ theme }) => theme.breakpoint('small')} {
             width: 50%;
           }
         `
@@ -75,6 +74,10 @@ const Copy = styled.div`
           margin: auto;
           padding: ${spacing('md')};
         `)};
+
+  ${media('medium')} {
+    ${({ paddingOption }) => handlePadding(paddingOption)};
+  }      
 `;
 
 const Media = styled.div`

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -104,6 +104,10 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -312,6 +316,10 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -498,6 +506,10 @@ exports[`renders Single Message with double image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }
@@ -506,6 +518,10 @@ exports[`renders Single Message with double image correctly 1`] = `
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -766,6 +782,10 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -920,6 +940,10 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1052,6 +1076,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }
@@ -1060,6 +1088,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
+@media (min-width:1024px) {
+
+}
+
 @media (min-width:740px) {
 
 }

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

@@ -48,6 +48,7 @@ const Donate = ({
   defaultGivingType,
   monthlyTitle,
   monthlySubtitle,
+  paddingOption,
   // Just to keep the function call character length under control
   monthlyChooseAmountText: monthlyChoose,
   monthlyOtherAmountText: monthlyOther
@@ -113,7 +114,7 @@ const Donate = ({
         />
       ) : null}
 
-      <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll}>
+      <Wrapper formAlignRight={formAlignRight} aria-live="polite" noTitlesAtAll={noTitlesAtAll} paddingOption={paddingOption}>
 
         {/* Only render if there is SOME title copy; otherwise,
         we need to the space to centre-align the form */}
@@ -197,7 +198,8 @@ Donate.propTypes = {
   monthlyTitle: PropTypes.string,
   monthlySubtitle: PropTypes.string,
   monthlyChooseAmountText: PropTypes.string,
-  monthlyOtherAmountText: PropTypes.string
+  monthlyOtherAmountText: PropTypes.string,
+  paddingOption: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -231,7 +233,8 @@ Donate.defaultProps = {
   monthlyTitle: '',
   monthlySubtitle: '',
   monthlyChooseAmountText: '',
-  monthlyOtherAmountText: ''
+  monthlyOtherAmountText: '',
+  paddingOption: null
 };
 
 export default Donate;

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

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button and 'no top padding' option
 
 ```js
 import data from './dev-data/data';
@@ -24,10 +24,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="upper_off"
 />;
 ```
 
-## Form align left, with custom message after choosing an "Other amount" to donate, high value cart.
+## Form align left, with custom message after choosing an "Other amount" to donate, high value cart, and 'no bottom padding' option
 ```js
 import data from './dev-data/data-high-value';
 const mobilePictures = require('../../../styleguide/data/data').mobileImages;
@@ -50,10 +51,11 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
   otherAmountText="Overridden via the 'Other amount text' prop"
+  paddingOption="lower_off"
 />;
 ```
 
-## Single Giving
+## Single Giving, with 'no padding' option
 
 ```js
 import data from './dev-data/data-single';
@@ -76,6 +78,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   cartID="default-comicrelief"
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
+  paddingOption="both_off"
 />;
 ```
 

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

@@ -6,6 +6,7 @@ import spacing from '../../../theme/shared/spacing';
 import { media } from '../../../theme/shared/size';
 import Picture from '../../Atoms/Picture/Picture';
 import zIndex from '../../../theme/shared/zIndex';
+import handlePadding from '../../../utils/_utils';
 
 const Container = styled.div`
   position: relative;
@@ -58,9 +59,11 @@ const Wrapper = styled.div`
   ${media('small')} {
     padding: ${spacing('xl')} ${spacing('md')};
   }
+
   ${media('medium')} {
     display: flex;
     padding: ${spacing('xl')} 0;
+    ${({ paddingOption }) => handlePadding(paddingOption)};
   }
 `;
 

package/src/utils/_utils.js

@@ -0,0 +1,18 @@
+const handlePadding = paddingOption => {
+  switch (paddingOption) {
+    case 'upper_off':
+      return 'padding-top: 0;';
+    case 'lower_off':
+      return 'padding-bottom: 0;';
+    case 'both_off':
+      return 'padding-top: 0; padding-bottom: 0';
+      // To leave pre-existing styles untouched
+    case 'both_on':
+      return null;
+      // Just in case
+    default:
+      return null;
+  }
+};
+
+export default handlePadding;