@comicrelief/component-library 7.32.0 → 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.32.0",
+  "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) {
 
 }