@comicrelief/component-library 8.55.5 → 8.56.0

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

@@ -31,7 +31,9 @@ const SingleMessage = _ref => {
     videoID = null,
     landscapeVideo = false,
     paddingTop = '2rem',
-    paddingBottom = '2rem'
+    paddingBottom = '2rem',
+    smPaddingTop = '2rem',
+    smPaddingBottom = '2rem'
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -41,6 +43,8 @@ const SingleMessage = _ref => {
   // 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;
+  const thisSmPaddingTop = hasImage || hasVideo ? '0rem' : smPaddingTop;
+  const thisSmPaddingBottom = hasImage || hasVideo ? '0rem' : smPaddingBottom;
 
   // States to track video status
   const [isInitialised, setIsInitialised] = (0, _react.useState)(false);
@@ -133,7 +137,9 @@ const SingleMessage = _ref => {
       fullImage: fullImage,
       ref: thisRef,
       paddingTop: thisPaddingTop,
-      paddingBottom: thisPaddingBottom
+      paddingBottom: thisPaddingBottom,
+      smPaddingTop: thisSmPaddingTop,
+      smPaddingBottom: thisSmPaddingBottom
     }, imageSet || imageSet2 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_SingleMessage.Media, {
       doubleImage: doubleImage,
       isPlaying: isPlaying,

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

@@ -16,7 +16,7 @@ var _loader = _interopRequireDefault(require("./assets/loader.svg"));
 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:", ";padding-top:", ";padding-bottom:", ";iframe{height:100%;width:100%;position:absolute;top:0;", ";", ";}@media ", "{flex-direction:", ";", ";}"], _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:", ";", ";padding-top:", ";padding-bottom:", ";}"], _ref => {
   let {
     theme,
     backgroundColor
@@ -24,14 +24,14 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
   return theme.color(backgroundColor);
 }, _ref2 => {
   let {
-    paddingTop
+    smPaddingTop
   } = _ref2;
-  return paddingTop;
+  return smPaddingTop;
 }, _ref3 => {
   let {
-    paddingBottom
+    smPaddingBottom
   } = _ref3;
-  return paddingBottom;
+  return smPaddingBottom;
 }, _ref4 => {
   let {
     copyFirst
@@ -59,165 +59,175 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
     fullImage
   } = _ref8;
   return landscapeVideo && hasVideo && !fullImage ? 'min-height: 0;' : null;
+}, _ref9 => {
+  let {
+    paddingTop
+  } = _ref9;
+  return paddingTop;
+}, _ref10 => {
+  let {
+    paddingBottom
+  } = _ref10;
+  return paddingBottom;
 });
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Copy",
   componentId: "sc-86zg20-1"
-})(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref9 => {
+})(["width:100%;", ";", ";padding:0 ", ";@media ", "{", ";", ";flex-direction:column;justify-content:center;padding:0 ", ";}", ";", ";"], (0, _zIndex.default)('low'), _ref11 => {
   let {
     hasVideo,
     fullImage
-  } = _ref9;
+  } = _ref11;
   return hasVideo === true && fullImage === true ? 'display: none;' : null;
-}, (0, _spacing.default)('l'), _ref10 => {
+}, (0, _spacing.default)('l'), _ref12 => {
   let {
     theme
-  } = _ref10;
+  } = _ref12;
   return theme.allBreakpoints('M');
-}, _ref11 => {
+}, _ref13 => {
   let {
     vhFull,
     fullImage
-  } = _ref11;
+  } = _ref13;
   return vhFull || fullImage ? 'min-height: calc(100vh - 5.625rem); flex-direction: column; justify-content: center;' : 'height: auto;';
-}, _ref12 => {
+}, _ref14 => {
   let {
     hasVideo,
     fullImage
-  } = _ref12;
+  } = _ref14;
   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 => {
+}, (0, _spacing.default)('xl'), props => props.fullImage && (0, _styledComponents.css)(["@media ", "{position:absolute;width:100%;right:0;top:50%;transform:translateY(-50%);", " width:50%;}"], _ref15 => {
   let {
     theme
-  } = _ref13;
+  } = _ref15;
   return theme.allBreakpoints('M');
-}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref14 => {
+}, props.copyFirst ? (0, _styledComponents.css)(["left:0;"]) : null), props => props.hasImage ? (0, _styledComponents.css)(["@media ", "{width:50%;}"], _ref16 => {
   let {
     theme
-  } = _ref14;
+  } = _ref16;
   return theme.allBreakpoints('M');
-}) : (0, _styledComponents.css)(["@media ", "{width:100%;max-width ", ";padding:0 ", ";}margin:auto;padding:", ";"], _ref15 => {
+}) : (0, _styledComponents.css)(["margin:auto;padding:0 ", ";@media ", "{width:100%;max-width ", ";padding:0 ", ";}"], (0, _spacing.default)('md'), _ref17 => {
   let {
     theme
-  } = _ref15;
+  } = _ref17;
   return theme.allBreakpoints('M');
-}, _containers.default.small, (0, _spacing.default)('xl'), (0, _spacing.default)('md')));
+}, _containers.default.small, (0, _spacing.default)('xl')));
 const Media = exports.Media = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Media",
   componentId: "sc-86zg20-2"
-})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";@media ", "{padding-bottom:", ";}"], _ref16 => {
+})(["width:100%;", ";@media ", "{height:auto;width:", ";", ";", ";}position:relative;", ";", ";@media ", "{padding-bottom:", ";}"], _ref18 => {
   let {
     fullImage
-  } = _ref16;
+  } = _ref18;
   return fullImage ? 'height: 200px;' : 'height: 280px;';
-}, _ref17 => {
+}, _ref19 => {
   let {
     theme
-  } = _ref17;
+  } = _ref19;
   return theme.allBreakpoints('M');
-}, _ref18 => {
+}, _ref20 => {
   let {
     fullImage
-  } = _ref18;
+  } = _ref20;
   return fullImage ? '100%' : '50%';
-}, _ref19 => {
+}, _ref21 => {
   let {
     fullImage
-  } = _ref19;
+  } = _ref21;
   return fullImage ? 'min-height: 500px;' : null;
-}, _ref20 => {
+}, _ref22 => {
   let {
     vhFull,
     fullImage
-  } = _ref20;
+  } = _ref22;
   return vhFull && fullImage ? 'min-height: calc(100vh - 5.625rem);' : null;
-}, _ref21 => {
+}, _ref23 => {
   let {
     doubleImage
-  } = _ref21;
+  } = _ref23;
   return doubleImage && 'display: flex; flex-direction: column';
-}, _ref22 => {
+}, _ref24 => {
   let {
     hasVideo
-  } = _ref22;
+  } = _ref24;
   return hasVideo ? 'height: auto; overflow: hidden; padding-bottom: 56.25%;' : null;
-}, _ref23 => {
+}, _ref25 => {
   let {
     theme
-  } = _ref23;
+  } = _ref25;
   return theme.allBreakpoints('M');
-}, _ref24 => {
+}, _ref26 => {
   let {
     landscapeVideo,
     hasVideo
-  } = _ref24;
+  } = _ref26;
   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:", ";}@media ", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref25 => {
+})(["", ";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:", ";}@media ", "{background-size:100px;}"], (0, _zIndex.default)('medium'), _ref27 => {
   let {
     isBuffering
-  } = _ref25;
+  } = _ref27;
   return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon.default})`;
-}, _ref26 => {
+}, _ref28 => {
   let {
     copyFirst
-  } = _ref26;
+  } = _ref28;
   return copyFirst === true ? 'left: auto; right: 0;' : 'left: 0; right: auto;';
-}, _ref27 => {
+}, _ref29 => {
   let {
     isPlaying
-  } = _ref27;
+  } = _ref29;
   return isPlaying ? 'none' : 'block';
-}, _ref28 => {
+}, _ref30 => {
   let {
     isBuffering
-  } = _ref28;
+  } = _ref30;
   return isBuffering === true ? `url(${_loader.default})` : `url(${_videoPlayIcon__hover.default})`;
-}, _ref29 => {
+}, _ref31 => {
   let {
     theme
-  } = _ref29;
+  } = _ref31;
   return theme.allBreakpoints('M');
 });
 const Image = exports.Image = _styledComponents.default.div.withConfig({
   displayName: "SingleMessagestyle__Image",
   componentId: "sc-86zg20-4"
-})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref30 => {
+})(["@media ", "{img{position:", ";}}width:100%;height:100%;", ";", ";", ";"], _ref32 => {
   let {
     theme
-  } = _ref30;
+  } = _ref32;
   return theme.allBreakpoints('M');
-}, _ref31 => {
+}, _ref33 => {
   let {
     fullImage,
     vhFull
-  } = _ref31;
+  } = _ref33;
   return fullImage || vhFull ? 'absolute' : null;
-}, _ref32 => {
+}, _ref34 => {
   let {
     doubleImage
-  } = _ref32;
+  } = _ref34;
   return doubleImage && 'height: 50%';
-}, _ref33 => {
+}, _ref35 => {
   let {
     isPlaying
-  } = _ref33;
+  } = _ref35;
   return isPlaying ? (0, _zIndex.default)('base') : (0, _zIndex.default)('low');
-}, _ref34 => {
+}, _ref36 => {
   let {
     hasVideo
-  } = _ref34;
+  } = _ref36;
   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;", ";"], _ref35 => {
+})(["width:100%;height:100%;position:absolute;top:0;left:0;", ";"], _ref37 => {
   let {
     isPlaying
-  } = _ref35;
+  } = _ref37;
   return isPlaying ? (0, _zIndex.default)('medium') : (0, _zIndex.default)('base');
 });

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

@@ -100,6 +100,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -408,6 +410,8 @@ exports[`renders Single Message with Image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -616,6 +620,8 @@ exports[`renders Single Message with double image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -961,6 +967,8 @@ exports[`renders Single Message with full width correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -1157,6 +1165,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -1279,7 +1289,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
   z-index: 1;
   padding: 0 2rem;
   margin: auto;
-  padding: 1rem;
+  padding: 0 1rem;
 }
 
 @media (min-width:740px) {
@@ -1317,6 +1327,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
   }
 }
 

package/package.json

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

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

@@ -32,7 +32,9 @@ const SingleMessage = ({
   videoID = null,
   landscapeVideo = false,
   paddingTop = '2rem',
-  paddingBottom = '2rem'
+  paddingBottom = '2rem',
+  smPaddingTop = '2rem',
+  smPaddingBottom = '2rem'
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -42,6 +44,8 @@ const SingleMessage = ({
   // 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;
+  const thisSmPaddingTop = hasImage || hasVideo ? '0rem' : smPaddingTop;
+  const thisSmPaddingBottom = hasImage || hasVideo ? '0rem' : smPaddingBottom;
 
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
@@ -147,6 +151,8 @@ const SingleMessage = ({
           ref={thisRef}
           paddingTop={thisPaddingTop}
           paddingBottom={thisPaddingBottom}
+          smPaddingTop={thisSmPaddingTop}
+          smPaddingBottom={thisSmPaddingBottom}
         >
           {imageSet || imageSet2 ? (
             <>
@@ -249,8 +255,9 @@ SingleMessage.propTypes = {
   videoID: PropTypes.string,
   landscapeVideo: PropTypes.bool,
   paddingTop: PropTypes.string,
-  paddingBottom: PropTypes.string
-
+  paddingBottom: PropTypes.string,
+  smPaddingTop: PropTypes.string,
+  smPaddingBottom: PropTypes.string
 };
 
 export default SingleMessage;

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

@@ -12,8 +12,8 @@ const Container = styled.div`
   flex-direction: column;
   overflow: hidden;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  padding-top: ${({ paddingTop }) => paddingTop};
-  padding-bottom: ${({ paddingBottom }) => paddingBottom};
+  padding-top: ${({ smPaddingTop }) => smPaddingTop};
+  padding-bottom: ${({ smPaddingBottom }) => smPaddingBottom};
 
   iframe {
     height: 100%;
@@ -27,6 +27,8 @@ const Container = styled.div`
   @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};
   }
 `;
 
@@ -64,19 +66,21 @@ const Copy = styled.div`
     `};
 
   ${props => (props.hasImage
-    ? css`@media ${({ theme }) => theme.allBreakpoints('M')} {
-            width: 50%;
-          }
-        `
+    ? css`
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
+        width: 50%;
+      }
+    `
     : css`
-          @media ${({ theme }) => theme.allBreakpoints('M')} {
-            width: 100%;
-            max-width ${containers.small};
-            padding: 0 ${spacing('xl')};
-          }
-          margin: auto;
-          padding: ${spacing('md')};
-        `)};
+      margin: auto;
+      padding: 0 ${spacing('md')};
+      
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
+        width: 100%;
+        max-width ${containers.small};
+        padding: 0 ${spacing('xl')};
+      }
+    `)};
 `;
 
 const Media = styled.div`

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

@@ -100,6 +100,8 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -408,6 +410,8 @@ exports[`renders Single Message with Image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -616,6 +620,8 @@ exports[`renders Single Message with double image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -961,6 +967,8 @@ exports[`renders Single Message with full width correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -1157,6 +1165,8 @@ exports[`renders Single Message with full width image and no text correctly 1`]
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 0rem;
+    padding-bottom: 0rem;
   }
 }
 
@@ -1279,7 +1289,7 @@ exports[`renders Single Message with no Image correctly 1`] = `
   z-index: 1;
   padding: 0 2rem;
   margin: auto;
-  padding: 1rem;
+  padding: 0 1rem;
 }
 
 @media (min-width:740px) {
@@ -1317,6 +1327,8 @@ exports[`renders Single Message with no Image correctly 1`] = `
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
   }
 }