@comicrelief/component-library 7.22.0 → 7.22.1

package/dist/components/Molecules/Promo/Promo.js

@@ -39,7 +39,8 @@ var Promo = function Promo(_ref) {
       showPosterAfterPlaying = _ref.showPosterAfterPlaying,
       videoSrc = _ref.videoSrc,
       mobileVideoSrc = _ref.mobileVideoSrc,
-      lightColouredVideo = _ref.lightColouredVideo;
+      behindTextGradient = _ref.behindTextGradient,
+      blackPlayButton = _ref.blackPlayButton;
 
   // Store the appropriate prop in state, dependent on the breakpoint
   var _useState = (0, _react.useState)(null),
@@ -95,7 +96,8 @@ var Promo = function Promo(_ref) {
     height: "100%"
   }), hasVideo && thisVideoSrc && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PromoVideo.default, {
     copyLeft: copyLeft,
-    lightColouredVideo: lightColouredVideo,
+    behindTextGradient: behindTextGradient,
+    blackPlayButton: blackPlayButton,
     thisVideoSrc: thisVideoSrc,
     thisPoster: thisPoster,
     showPosterAfterPlaying: showPosterAfterPlaying,
@@ -103,11 +105,15 @@ var Promo = function Promo(_ref) {
     loop: loop
   }))), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
     copyLeft: copyLeft
+  }, /*#__PURE__*/_react.default.createElement(_Promo.Gradient, {
+    hasVideo: hasVideo,
+    behindTextGradient: behindTextGradient,
+    copyLeft: copyLeft
   }, /*#__PURE__*/_react.default.createElement(_Promo.Copy, {
     position: position,
     hasVideo: hasVideo,
-    lightColouredVideo: lightColouredVideo
-  }, children)));
+    behindTextGradient: behindTextGradient
+  }, children))));
 };
 
 Promo.defaultProps = {
@@ -126,7 +132,8 @@ Promo.defaultProps = {
   videoSrc: null,
   mobileVideoSrc: null,
   showPosterAfterPlaying: true,
-  lightColouredVideo: false
+  behindTextGradient: 'none',
+  blackPlayButton: false
 };
 var _default = Promo;
 exports.default = _default;

package/dist/components/Molecules/Promo/Promo.md

@@ -15,7 +15,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
 >
   <Text
@@ -51,7 +50,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
 >
   <Text
@@ -87,7 +85,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
 >
   <Text
@@ -123,7 +120,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
 >
   <Text
     tag="h1"
@@ -164,7 +160,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 
 <div>
 <Text tag="h2" size="xl" color="black">
-  Promo Upper w/Video (autoplay and loop)
+  Promo Upper w/Video (autoplay and loop, black text gradient overlay)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -173,12 +169,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
   videoSrc={videoSrc}
   poster={poster}
   loop={true}
   autoplay={true}
+  behindTextGradient='black'
 >
   <Text
     tag="h1"
@@ -206,7 +202,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 <br />
 
 <Text tag="h2" size="xl" color="black">
-  Promo End w/Video (loop only)
+  Promo End w/Video (loop only, no text gradient overlay)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -215,7 +211,6 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
   videoSrc={videoSrc}
   poster={poster}
@@ -248,25 +243,25 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 <br />
 
 <Text tag="h2" size="xl" color="black">
-  Promo Lower w/Video (autoplay only)
+  Promo Lower w/Video (autoplay only, white text gradient overlay)
 </Text>
 <Promo
-  backgroundColor="blue_dark"
+  backgroundColor="blue_light"
   imageSet={defaultData.promoImage}
   image={defaultData.promoImage}
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
   videoSrc={videoSrc}
   poster={poster}
   loop={false}
   autoPlay={true}
+  behindTextGradient='white'
 >
   <Text
     tag="h1"
-    color="white"
+    color="black"
     size="super"
     family="Anton"
     uppercase
@@ -274,12 +269,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   >
     Curabitur pretium tincidunt lacus
   </Text>
-  <Text tag="p" color="white">
+  <Text tag="p" color="black">
     Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
     turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
   </Text>
   <span>
-    <Link href="/" type="button" color="white">
+    <Link href="/" type="button" color="black">
       <Text>
         Show me this
       </Text>
@@ -289,7 +284,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 
 <br />
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay)
+  Promo None w/Video (no loop or autoplay, no text gradient overlay, copy right aligned)
 </Text>
 <Promo
   backgroundColor="blue_dark"
@@ -298,7 +293,6 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={false}
-  hasOverlay={true}
   videoSrc={videoSrc}
   poster={poster}
   loop={false}
@@ -328,7 +322,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, different videos and posters for mobile and desktop)
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, different videos and posters for mobile and desktop)
 </Text>
 <Promo
   backgroundColor="blue_light"
@@ -337,14 +331,13 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   videoSrc={videoSrc}
   mobileVideoSrc={mobileVideoSrc}
   poster={poster}
   mobilePoster={mobilePoster}
   loop={false}
   autoPlay={false}
-  lightColouredVideo={true}
+  behindTextGradient='white'
 >
   <Text
     tag="h1"
@@ -370,7 +363,7 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
 </Promo>
 
 <Text tag="h2" size="xl" color="black">
-  Promo None w/Video (no loop or autoplay, 'light-coloured video' setting, mobile-only video and poster)
+  Promo None w/Video (no loop or autoplay, white text gradient overlay, mobile-only video and poster, black play button)
 </Text>
 <Promo
   backgroundColor="blue_light"
@@ -379,12 +372,12 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   mobileVideoSrc={mobileVideoSrc}
   mobilePoster={mobilePoster}
   loop={false}
   autoPlay={false}
-  lightColouredVideo={true}
+  behindTextGradient='white'
+  blackPlayButton={true}
 >
   <Text
     tag="h1"
@@ -394,19 +387,8 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
     uppercase
     weight="normal"
   >
-    Curabitur pretium tincidunt lacus
-  </Text>
-  <Text tag="p" color="black">
-    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
-    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+    One-Line Special
   </Text>
-  <span>
-    <Link href="/" type="button" color="black">
-      <Text>
-        Show me this
-      </Text>
-    </Link>
-  </span>
 </Promo>
 
 </div>

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Video = exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
+exports.Gradient = exports.Video = exports.Media = exports.Copy = exports.Wrapper = exports.Container = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -42,7 +42,7 @@ exports.Container = Container;
 var Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Wrapper",
   componentId: "sc-kk4nna-1"
-})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
+})(["width:100%;max-width:", ";height:100%;left:0;right:0;margin:0 auto;display:flex;align-items:center;position:relative;", ";", "{min-height:calc(100vh - 90px);}"], _size.container.medium, function (_ref5) {
   var copyLeft = _ref5.copyLeft;
   return !copyLeft && 'justify-content: flex-end';
 }, (0, _size.media)('medium'));
@@ -52,15 +52,8 @@ exports.Wrapper = Wrapper;
 var Copy = _styledComponents.default.div.withConfig({
   displayName: "Promostyle__Copy",
   componentId: "sc-kk4nna-2"
-})(["width:100%;padding:", " ", " ", ";", ";", "{width:70%;padding:", " ", ";}", "{width:50%;padding:", " ", ";", " ", "}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
-  var hasVideo = _ref6.hasVideo;
-  return hasVideo !== false && (0, _styledComponents.css)(["background-color:rgba(0,0,0,0.75);overflow:hidden;box-shadow:0px 0px 75px 100px rgba(0,0,0,0.75);"]);
-}, function (_ref7) {
-  var hasVideo = _ref7.hasVideo,
-      lightColouredVideo = _ref7.lightColouredVideo;
-  return hasVideo !== false && lightColouredVideo && (0, _styledComponents.css)(["background-color:rgba(255,255,255,0.75);box-shadow:0px 0px 75px 100px rgba(255,255,255,0.75);"]);
-}, function (_ref8) {
-  var position = _ref8.position;
+})(["width:100%;padding:", " ", " ", ";", ";", "{width:100%;padding:", " ", ";}", ""], (0, _spacing.default)('m'), (0, _spacing.default)('m'), (0, _spacing.default)('xl'), (0, _zIndex.default)('low'), (0, _size.media)('medium'), (0, _spacing.default)('xxl'), (0, _spacing.default)('m'), function (_ref6) {
+  var position = _ref6.position;
   return position === 'lower' && (0, _styledComponents.css)(["padding:", " ", ";", "{padding:6rem ", ";margin-top:6rem;}"], (0, _spacing.default)('xl'), (0, _spacing.default)('m'), (0, _size.media)('medium'), (0, _spacing.default)('m'));
 });
 
@@ -82,4 +75,18 @@ var Video = _styledComponents.default.video.attrs(function () {
   componentId: "sc-kk4nna-4"
 })(["width:100%;height:100%;object-fit:cover;"]);
 
-exports.Video = Video;
+exports.Video = Video;
+
+var Gradient = _styledComponents.default.div.withConfig({
+  displayName: "Promostyle__Gradient",
+  componentId: "sc-kk4nna-5"
+})(["width:100%;height:100%;display:flex;align-items:center;", "{width:50%;position:absolute;top:0;left:0;", ";", ";}"], (0, _size.media)('medium'), function (_ref7) {
+  var copyLeft = _ref7.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["left:auto;right:0;"]);
+}, function (_ref8) {
+  var hasVideo = _ref8.hasVideo,
+      behindTextGradient = _ref8.behindTextGradient;
+  return hasVideo !== false && behindTextGradient !== 'none' && (0, _styledComponents.css)(["overflow:hidden;background-color:", ";box-shadow:0px 0px 50px 60px ", ";"], behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)', behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)');
+});
+
+exports.Gradient = Gradient;

package/dist/components/Molecules/Promo/_PromoVideo.js

@@ -20,13 +20,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var PromoVideo = function PromoVideo(_ref) {
-  var lightColouredVideo = _ref.lightColouredVideo,
+  var behindTextGradient = _ref.behindTextGradient,
       copyLeft = _ref.copyLeft,
       thisVideoSrc = _ref.thisVideoSrc,
       thisPoster = _ref.thisPoster,
       autoPlay = _ref.autoPlay,
       loop = _ref.loop,
-      showPosterAfterPlaying = _ref.showPosterAfterPlaying;
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+      blackPlayButton = _ref.blackPlayButton;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -107,7 +108,8 @@ var PromoVideo = function PromoVideo(_ref) {
     videoProgress: videoProgress,
     togglePlay: togglePlay,
     isPlaying: isPlaying,
-    lightColouredVideo: lightColouredVideo,
+    behindTextGradient: behindTextGradient,
+    blackPlayButton: blackPlayButton,
     isRestarting: isRestarting
   }));
 };

package/dist/components/Molecules/Promo/_PromoVideoButton.js

@@ -20,7 +20,9 @@ var _excluded = ["togglePlay"];
 var PromoVideoButton = function PromoVideoButton(_ref) {
   var togglePlay = _ref.togglePlay,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButton, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButtonWrapper, {
+    className: "weewee"
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButton, Object.assign({
     onClick: function onClick() {
       togglePlay();
     }

package/dist/components/Molecules/Promo/_PromoVideoButton.style.js

@@ -21,17 +21,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var PlayButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "_PromoVideoButtonstyle__PlayButtonWrapper",
+  componentId: "sc-17cm3uc-0"
+})(["width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;&:after{content:\"\";background-image:url(", "),url(", "),url(", "),url(", "),none;}"], _PlayWhite.default, _PauseWhite.default, _PlayBlack.default, _PauseBlack.default);
+
+exports.PlayButtonWrapper = PlayButtonWrapper;
+
 var PlayButton = _styledComponents.default.button.withConfig({
   displayName: "_PromoVideoButtonstyle__PlayButton",
-  componentId: "sc-17cm3uc-0"
-})(["display:flex;width:50px;height:50px;position:absolute;top:10px;right:10px;align-items:center;justify-content:center;border:0;padding:0;margin:0;border-radius:50%;background:", ";opacity:0.75;transition:opacity 0.2s;&:hover,&:focus{opacity:1.0;}&:focus-visible{outline-style:outset;outline-width:medium;}", " ", " @media ", "{top:20px;right:20px;", "}"], function (_ref) {
+  componentId: "sc-17cm3uc-1"
+})(["display:flex;width:50px;height:50px;position:absolute;top:10px;right:10px;align-items:center;justify-content:center;border:0;padding:0;margin:0;border-radius:50%;background:", ";opacity:0.8;transition:opacity 0.2s;&:hover,&:focus{opacity:1.0;}&:focus-visible{outline-style:outset;outline-width:medium;}", " ", " @media ", "{top:20px;right:20px;", "}"], function (_ref) {
   var theme = _ref.theme;
-  return theme.color('black');
+  return theme.color('white');
 }, function (_ref2) {
-  var lightColouredVideo = _ref2.lightColouredVideo;
-  return !lightColouredVideo && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
+  var blackPlayButton = _ref2.blackPlayButton;
+  return blackPlayButton && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
     var theme = _ref3.theme;
-    return theme.color('white');
+    return theme.color('black');
   });
 }, function (_ref4) {
   var copyLeft = _ref4.copyLeft;
@@ -46,13 +53,6 @@ var PlayButton = _styledComponents.default.button.withConfig({
 
 exports.PlayButton = PlayButton;
 
-var PlayButtonWrapper = _styledComponents.default.div.withConfig({
-  displayName: "_PromoVideoButtonstyle__PlayButtonWrapper",
-  componentId: "sc-17cm3uc-1"
-})(["width:100%;height:100%;position:absolute;top:0;left:0;"]);
-
-exports.PlayButtonWrapper = PlayButtonWrapper;
-
 var ProgressRingWrapper = _styledComponents.default.span.withConfig({
   displayName: "_PromoVideoButtonstyle__ProgressRingWrapper",
   componentId: "sc-17cm3uc-2"
@@ -74,8 +74,8 @@ var ProgressRingCircle = _styledComponents.default.circle.withConfig({
   var strokeDashOffsetStyle = _ref7.strokeDashOffsetStyle;
   return strokeDashOffsetStyle;
 }, function (_ref8) {
-  var lightColouredVideo = _ref8.lightColouredVideo;
-  return !lightColouredVideo && (0, _styledComponents.css)(["stroke:", ";"], function (_ref9) {
+  var blackPlayButton = _ref8.blackPlayButton;
+  return !blackPlayButton && (0, _styledComponents.css)(["stroke:", ";"], function (_ref9) {
     var theme = _ref9.theme;
     return theme.color('black');
   });
@@ -90,21 +90,21 @@ var Icon = _styledComponents.default.span.withConfig({
   displayName: "_PromoVideoButtonstyle__Icon",
   componentId: "sc-17cm3uc-5"
 })(["height:50px;width:50px;background:no-repeat center/50% url(", ") transparent;", " ", " ", " ", ""], _PlayWhite.default, function (_ref11) {
-  var lightColouredVideo = _ref11.lightColouredVideo,
+  var blackPlayButton = _ref11.blackPlayButton,
       isPlaying = _ref11.isPlaying;
-  return lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
+  return blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
 }, function (_ref12) {
-  var lightColouredVideo = _ref12.lightColouredVideo,
+  var blackPlayButton = _ref12.blackPlayButton,
       isPlaying = _ref12.isPlaying;
-  return lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
+  return blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
 }, function (_ref13) {
-  var lightColouredVideo = _ref13.lightColouredVideo,
+  var blackPlayButton = _ref13.blackPlayButton,
       isPlaying = _ref13.isPlaying;
-  return !lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
+  return !blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
 }, function (_ref14) {
-  var lightColouredVideo = _ref14.lightColouredVideo,
+  var blackPlayButton = _ref14.blackPlayButton,
       isPlaying = _ref14.isPlaying;
-  return !lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
+  return !blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
 });
 
 exports.Icon = Icon;