@comicrelief/component-library 8.53.3 → 8.54.1

package/dist/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -62,7 +62,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -195,7 +195,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -257,7 +257,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -363,7 +363,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -496,7 +496,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -558,7 +558,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -664,7 +664,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -797,7 +797,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -859,7 +859,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -965,7 +965,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -1098,7 +1098,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -1160,7 +1160,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"

package/dist/components/Molecules/CTA/CTASingleCard/CTASingleCard.md

@@ -33,7 +33,7 @@ const exampleCard = {
   id: 'single-card-1',
   label: 'Example Label',
   body: (
-    <Text tag="p">
+    <Text tag="p" style={{ marginTop: '22px' }}>
       <strong>Single Card</strong> content here
     </Text>
   ),
@@ -62,7 +62,7 @@ const exampleCard = {
   id: 'single-card-2',
   label: 'Example Label',
   body: (
-    <Text tag="p">
+    <Text tag="p" style={{ marginTop: '22px' }}>
       Single card
     </Text>
   ),

package/dist/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -241,7 +241,7 @@ exports[`renders correctly with data prop 1`] = `
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 1rem;
+  padding-top: 2rem;
 }
 
 .c0 {
@@ -768,7 +768,7 @@ exports[`renders correctly without image 1`] = `
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 1rem;
+  padding-top: 2rem;
 }
 
 .c0 {

package/dist/components/Molecules/CTA/shared/CTACard.style.js

@@ -232,4 +232,4 @@ const CardLabel = exports.CardLabel = _styledComponents.default.div.withConfig({
 const CTA = exports.CTA = _styledComponents.default.div.withConfig({
   displayName: "CTACardstyle__CTA",
   componentId: "sc-si8xx1-10"
-})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;"]);
+})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:auto;padding-top:2rem;"]);

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

@@ -30,12 +30,18 @@ const SingleMessage = _ref => {
     vhFull = false,
     videoID = null,
     landscapeVideo = false,
-    paddingOption = null
+    paddingTop = '2rem',
+    paddingBottom = '2rem'
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
   const hasVideo = Boolean(videoID !== null && videoID !== '');
 
+  // While the Content Team don't use image or video Single Msgs any more, this just keeps
+  // things looking nice in the CL; only using the new props where they want 'em:
+  const thisPaddingTop = hasImage || hasVideo ? '0rem' : paddingTop;
+  const thisPaddingBottom = hasImage || hasVideo ? '0rem' : paddingBottom;
+
   // States to track video status
   const [isInitialised, setIsInitialised] = (0, _react.useState)(false);
   const [isPlaying, setIsPlaying] = (0, _react.useState)(false);
@@ -125,7 +131,9 @@ const SingleMessage = _ref => {
       hasVideo: hasVideo,
       landscapeVideo: landscapeVideo,
       fullImage: fullImage,
-      ref: thisRef
+      ref: thisRef,
+      paddingTop: thisPaddingTop,
+      paddingBottom: thisPaddingBottom
     }, imageSet || imageSet2 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SingleMessage.Media, {
       doubleImage: doubleImage,
       isPlaying: isPlaying,
@@ -172,7 +180,8 @@ const SingleMessage = _ref => {
       copyFirst: copyFirst,
       hasVideo: hasVideo,
       vhFull: vhFull,
-      paddingOption: paddingOption
+      paddingTop: paddingTop,
+      paddingBottom: paddingBottom
     }, children) : null))
   );
 };

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

@@ -71,7 +71,7 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
-Single Message with no Image
+Single Message with no Image (default padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -84,12 +84,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - padding unmodified
+Single Message with no Image (no padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
 
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_on">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="0rem" paddingBottom="0rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”
@@ -97,39 +97,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no bottom padding
+Single Message with no Image (big 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">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="4rem" paddingBottom="4rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”

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

@@ -13,11 +13,10 @@ 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"
-})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";@media ", "{flex-direction:", ";", ";}iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}"], _ref => {
+})(["display:flex;position:relative;flex-direction:column;overflow:hidden;background:", ";padding-top:", ";padding-bottom:", ";iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}@media ", "{flex-direction:", ";", ";}"], _ref => {
   let {
     theme,
     backgroundColor
@@ -25,84 +24,84 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(backgroundColor);
 }, _ref2 => {
   let {
-    theme
+    paddingTop
   } = _ref2;
-  return theme.allBreakpoints('M');
+  return paddingTop;
 }, _ref3 => {
   let {
-    copyFirst
+    paddingBottom
   } = _ref3;
-  return copyFirst === true ? 'row-reverse' : 'row';
+  return paddingBottom;
 }, _ref4 => {
   let {
-    landscapeVideo,
-    hasVideo,
-    fullImage
+    copyFirst
   } = _ref4;
-  return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
+  return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
 }, _ref5 => {
   let {
-    copyFirst
+    isPlaying
   } = _ref5;
-  return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
+  return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
 }, _ref6 => {
   let {
-    isPlaying
+    theme
   } = _ref6;
-  return isPlaying ? (0, _zIndex.default)('high') : (0, _zIndex.default)('base');
+  return theme.allBreakpoints('M');
+}, _ref7 => {
+  let {
+    copyFirst
+  } = _ref7;
+  return copyFirst === true ? 'row-reverse' : 'row';
+}, _ref8 => {
+  let {
+    landscapeVideo,
+    hasVideo,
+    fullImage
+  } = _ref8;
+  return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:", ";}", ";", ";@media ", "{", ";}"], (0, _zIndex.default)('low'), _ref7 => {
+})(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref9 => {
   let {
     hasVideo,
     fullImage
-  } = _ref7;
+  } = _ref9;
   return hasVideo === true && fullImage === true ? 'display: none;' : null;
-}, (0, _spacing.default)('l'), _ref8 => {
+}, (0, _spacing.default)('l'), _ref10 => {
   let {
     theme
-  } = _ref8;
+  } = _ref10;
   return theme.allBreakpoints('M');
-}, _ref9 => {
+}, _ref11 => {
   let {
     vhFull,
     fullImage
-  } = _ref9;
+  } = _ref11;
   return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
-}, _ref10 => {
+}, _ref12 => {
   let {
     hasVideo,
     fullImage
-  } = _ref10;
-  return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
-}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.allBreakpoints('M');
-}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref12 => {
-  let {
-    theme
   } = _ref12;
-  return theme.allBreakpoints('M');
-}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:", ";}margin:auto;padding:", ";"], _ref13 => {
+  return hasVideo === true && fullImage === true ? 'display: none;' : 'display: flex;';
+}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref13 => {
   let {
     theme
   } = _ref13;
   return theme.allBreakpoints('M');
-}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')), _ref14 => {
+}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref14 => {
   let {
     theme
   } = _ref14;
-  return theme.allBreakpoints('L');
-}, _ref15 => {
+  return theme.allBreakpoints('M');
+}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:0 ", ";}margin:auto;padding:", ";"], _ref15 => {
   let {
-    paddingOption
+    theme
   } = _ref15;
-  return (0, _utils.default)(paddingOption);
-});
+  return theme.allBreakpoints('M');
+}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"

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

@@ -49,6 +49,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -64,7 +66,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -122,7 +124,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -132,10 +134,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -319,6 +317,8 @@ exports[`renders Single Message with Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -334,7 +334,7 @@ exports[`renders Single Message with Image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -425,7 +425,7 @@ exports[`renders Single Message with Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -435,10 +435,6 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -561,6 +557,8 @@ exports[`renders Single Message with double image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #FFE400;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -576,7 +574,7 @@ exports[`renders Single Message with double image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -639,7 +637,7 @@ exports[`renders Single Message with double image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -649,10 +647,6 @@ exports[`renders Single Message with double image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -661,10 +655,6 @@ exports[`renders Single Message with double image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -880,6 +870,8 @@ exports[`renders Single Message with full width correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -895,7 +887,7 @@ exports[`renders Single Message with full width correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -993,7 +985,7 @@ exports[`renders Single Message with full width correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1016,10 +1008,6 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1122,6 +1110,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -1182,10 +1172,6 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1274,6 +1260,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .c0 iframe {
@@ -1289,7 +1277,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
 .c1 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
   margin: auto;
   padding: 1rem;
 }
@@ -1332,6 +1320,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1346,7 +1338,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1354,14 +1346,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   .c1 {
     width: 100%;
     max-width: 880px;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -1370,10 +1358,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }

package/package.json

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

package/src/components/Molecules/CTA/CTAMultiCard/__snapshots__/CTAMultiCard.test.js.snap

@@ -62,7 +62,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -195,7 +195,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -257,7 +257,7 @@ exports[`handles data structure correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -363,7 +363,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -496,7 +496,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -558,7 +558,7 @@ exports[`renders 2 columns layout correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -664,7 +664,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -797,7 +797,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -859,7 +859,7 @@ exports[`renders carousel mode correctly 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -965,7 +965,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -1098,7 +1098,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"
@@ -1160,7 +1160,7 @@ exports[`renders correctly with data prop 1`] = `
                 </p>
               </div>
               <div
-                className="CTACardstyle__CTA-sc-si8xx1-10 eOIMHN"
+                className="CTACardstyle__CTA-sc-si8xx1-10 noohS"
               >
                 <span
                   className="CTACardstyle__CTAText-sc-si8xx1-1 dQjaWt"

package/src/components/Molecules/CTA/CTASingleCard/CTASingleCard.md

@@ -33,7 +33,7 @@ const exampleCard = {
   id: 'single-card-1',
   label: 'Example Label',
   body: (
-    <Text tag="p">
+    <Text tag="p" style={{ marginTop: '22px' }}>
       <strong>Single Card</strong> content here
     </Text>
   ),
@@ -62,7 +62,7 @@ const exampleCard = {
   id: 'single-card-2',
   label: 'Example Label',
   body: (
-    <Text tag="p">
+    <Text tag="p" style={{ marginTop: '22px' }}>
       Single card
     </Text>
   ),

package/src/components/Molecules/CTA/CTASingleCard/__snapshots__/CTASingleCard.test.js.snap

@@ -241,7 +241,7 @@ exports[`renders correctly with data prop 1`] = `
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 1rem;
+  padding-top: 2rem;
 }
 
 .c0 {
@@ -768,7 +768,7 @@ exports[`renders correctly without image 1`] = `
   -ms-flex-pack: justify;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 1rem;
+  padding-top: 2rem;
 }
 
 .c0 {

package/src/components/Molecules/CTA/shared/CTACard.style.js

@@ -310,7 +310,7 @@ const CTA = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding-top: 1rem;
+  padding-top: 2rem;
 `;
 
 export {

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

@@ -31,12 +31,18 @@ const SingleMessage = ({
   vhFull = false,
   videoID = null,
   landscapeVideo = false,
-  paddingOption = null
+  paddingTop = '2rem',
+  paddingBottom = '2rem'
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
   const hasVideo = Boolean(videoID !== null && videoID !== '');
 
+  // While the Content Team don't use image or video Single Msgs any more, this just keeps
+  // things looking nice in the CL; only using the new props where they want 'em:
+  const thisPaddingTop = hasImage || hasVideo ? '0rem' : paddingTop;
+  const thisPaddingBottom = hasImage || hasVideo ? '0rem' : paddingBottom;
+
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -139,6 +145,8 @@ const SingleMessage = ({
           landscapeVideo={landscapeVideo}
           fullImage={fullImage}
           ref={thisRef}
+          paddingTop={thisPaddingTop}
+          paddingBottom={thisPaddingBottom}
         >
           {imageSet || imageSet2 ? (
             <>
@@ -210,7 +218,8 @@ const SingleMessage = ({
               copyFirst={copyFirst}
               hasVideo={hasVideo}
               vhFull={vhFull}
-              paddingOption={paddingOption}
+              paddingTop={paddingTop}
+              paddingBottom={paddingBottom}
             >
               {children}
             </Copy>
@@ -239,7 +248,9 @@ SingleMessage.propTypes = {
   vhFull: PropTypes.bool,
   videoID: PropTypes.string,
   landscapeVideo: PropTypes.bool,
-  paddingOption: PropTypes.string
+  paddingTop: PropTypes.string,
+  paddingBottom: PropTypes.string
+
 };
 
 export default SingleMessage;

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

@@ -71,7 +71,7 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
-Single Message with no Image
+Single Message with no Image (default padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -84,12 +84,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - padding unmodified
+Single Message with no Image (no padding)
 
 ```js
 import Text from '../../Atoms/Text/Text';
 
-<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingOption="both_on">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="0rem" paddingBottom="0rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”
@@ -97,39 +97,12 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no bottom padding
+Single Message with no Image (big 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">
+<SingleMessage backgroundColor="purple_dark" copyFirst={false} paddingTop="4rem" paddingBottom="4rem">
   <Text tag="p" color="white" size="xxl">
     “The creativity that goes into helping people have a better life is
     extraordinary.”

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

@@ -5,7 +5,6 @@ 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;
@@ -13,10 +12,9 @@ const Container = styled.div`
   flex-direction: column;
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    flex-direction: ${({ copyFirst }) => (copyFirst === true ? 'row-reverse' : 'row')};
-    ${({ landscapeVideo, hasVideo, fullImage }) => (landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null)};
-  }
+  padding-top: ${({ paddingTop }) => paddingTop};
+  padding-bottom: ${({ paddingBottom }) => paddingBottom};
+
   iframe {
     height: 100%;
     width: 100%;
@@ -25,13 +23,18 @@ const Container = styled.div`
     ${({ copyFirst }) => (copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;')};
     ${({ isPlaying }) => (isPlaying ? zIndex('high') : zIndex('base'))};
   }
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    flex-direction: ${({ copyFirst }) => (copyFirst === true ? 'row-reverse' : 'row')};
+    ${({ landscapeVideo, hasVideo, fullImage }) => (landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null)};
+  }
 `;
 
 const Copy = styled.div`
   width: 100%;
   ${zIndex('low')};
   ${({ hasVideo, fullImage }) => (hasVideo === true && fullImage === true ? 'display: none;' : null)};
-  padding: ${spacing('l')};
+  padding: 0 ${spacing('l')};
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     ${({ vhFull, fullImage }) => (vhFull || fullImage
@@ -44,7 +47,7 @@ const Copy = styled.div`
 
     flex-direction: column;
     justify-content: center;
-    padding: ${spacing('xl')};
+    padding: 0 ${spacing('xl')};
   }
 
   ${props => props.fullImage
@@ -69,15 +72,11 @@ const Copy = styled.div`
           @media ${({ theme }) => theme.allBreakpoints('M')} {
             width: 100%;
             max-width ${containers.small};
-            padding: ${spacing('xl')};
+            padding: 0 ${spacing('xl')};
           }
           margin: auto;
           padding: ${spacing('md')};
         `)};
-
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    ${({ paddingOption }) => handlePadding(paddingOption)};
-  }
 `;
 
 const Media = styled.div`

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

@@ -49,6 +49,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -64,7 +66,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -122,7 +124,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -132,10 +134,6 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -319,6 +317,8 @@ exports[`renders Single Message with Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -334,7 +334,7 @@ exports[`renders Single Message with Image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -425,7 +425,7 @@ exports[`renders Single Message with Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -435,10 +435,6 @@ exports[`renders Single Message with Image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -561,6 +557,8 @@ exports[`renders Single Message with double image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #FFE400;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -576,7 +574,7 @@ exports[`renders Single Message with double image correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -639,7 +637,7 @@ exports[`renders Single Message with double image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -649,10 +647,6 @@ exports[`renders Single Message with double image correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -661,10 +655,6 @@ exports[`renders Single Message with double image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -880,6 +870,8 @@ exports[`renders Single Message with full width correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -895,7 +887,7 @@ exports[`renders Single Message with full width correctly 1`] = `
 .c5 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
 }
 
 .c1 {
@@ -993,7 +985,7 @@ exports[`renders Single Message with full width correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1016,10 +1008,6 @@ exports[`renders Single Message with full width correctly 1`] = `
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1122,6 +1110,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
 }
 
 .c0 iframe {
@@ -1182,10 +1172,6 @@ exports[`renders Single Message with full width image and no text correctly 1`]
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1274,6 +1260,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
   flex-direction: column;
   overflow: hidden;
   background: #6F3AAB;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .c0 iframe {
@@ -1289,7 +1277,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
 .c1 {
   width: 100%;
   z-index: 1;
-  padding: 2rem;
+  padding: 0 2rem;
   margin: auto;
   padding: 1rem;
 }
@@ -1332,6 +1320,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   }
 }
 
+@media (min-width:740px) {
+
+}
+
 @media (min-width:740px) {
   .c1 {
     height: auto;
@@ -1346,7 +1338,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
@@ -1354,14 +1346,10 @@ exports[`renders Single Message with no Image correctly 1`] = `
   .c1 {
     width: 100%;
     max-width: 880px;
-    padding: 4rem;
+    padding: 0 4rem;
   }
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }
@@ -1370,10 +1358,6 @@ exports[`renders Single Message with no Image correctly 1`] = `
 
 }
 
-@media (min-width:1024px) {
-
-}
-
 @media (min-width:740px) {
 
 }