@comicrelief/component-library 7.21.0 → 7.22.1

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

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Promo = require("./Promo.style");
+
+var _PromoVideoButton = _interopRequireDefault(require("./_PromoVideoButton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 behindTextGradient = _ref.behindTextGradient,
+      copyLeft = _ref.copyLeft,
+      thisVideoSrc = _ref.thisVideoSrc,
+      thisPoster = _ref.thisPoster,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+      blackPlayButton = _ref.blackPlayButton;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPlaying = _useState2[0],
+      setIsPlaying = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isRestarting = _useState4[0],
+      setIsRestarting = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      videoProgress = _useState6[0],
+      setVideoProgress = _useState6[1];
+
+  var videoEl = (0, _react.useRef)(null);
+
+  var togglePlay = function togglePlay() {
+    if (isPlaying) videoEl.current.pause();else videoEl.current.play();
+    setIsPlaying(!isPlaying);
+  };
+
+  var updateTime = function updateTime() {
+    if (videoEl.current.duration) {
+      // Calculate the percentage of the video played:
+      var percentage = Math.round(videoEl.current.currentTime / videoEl.current.duration * 100); // Because a completely smooth animation is impossible with the 250ms-ish frequency of
+      // the 'timeupdate' event, we're electing to just update the ring every 25%.
+
+      var nearest = 25;
+      var roundedPercentage = percentage + nearest / 2 - (percentage + nearest / 2) % nearest;
+      setVideoProgress(roundedPercentage);
+    }
+  }; // Only loads once the initial screensize check is complete
+
+
+  (0, _react.useEffect)(function () {
+    // Use truthy comparison so either a null OR undefined value won't work
+    if (thisVideoSrc != null) {
+      videoEl.current.addEventListener('timeupdate', updateTime); // Trigger on-load autoplay if apppropriate
+
+      if (autoPlay && !isPlaying) {
+        togglePlay();
+      }
+
+      videoEl.current.addEventListener('ended', function () {
+        // Used purely to halt the CSS animation:
+        setIsRestarting(true); // If this is a non-looping video, add a listener to update our local state
+        // once the video's ended, to let the user retrigger it manually:
+
+        if (!loop) {
+          setIsPlaying(false);
+          setVideoProgress(0); // Reload the video to show the poster image:
+
+          if (showPosterAfterPlaying) videoEl.current.load();
+        } else {
+          // Rather than using the Video 'loop' property, we retrigger
+          // it in *code* as there's no 'restarted' to hook into:
+          togglePlay();
+        } // Grace period to allow the animation to reset
+
+
+        setTimeout(function () {
+          setIsRestarting(false);
+        }, 100);
+      });
+    } // CERTAINLY don't want this re-running for EACH of these variable updates, sorry Lint...
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [thisVideoSrc]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Promo.Video, {
+    ref: videoEl,
+    src: thisVideoSrc,
+    poster: thisPoster,
+    muted: true
+  }, "Your browser does not support this video filetype."), /*#__PURE__*/_react.default.createElement(_PromoVideoButton.default, {
+    copyLeft: copyLeft,
+    videoProgress: videoProgress,
+    togglePlay: togglePlay,
+    isPlaying: isPlaying,
+    behindTextGradient: behindTextGradient,
+    blackPlayButton: blackPlayButton,
+    isRestarting: isRestarting
+  }));
+};
+
+var _default = PromoVideo;
+exports.default = _default;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ProgressRing = _interopRequireDefault(require("./_ProgressRing"));
+
+var _PromoVideoButton = require("./_PromoVideoButton.style");
+
+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, {
+    className: "weewee"
+  }, /*#__PURE__*/_react.default.createElement(_PromoVideoButton.PlayButton, Object.assign({
+    onClick: function onClick() {
+      togglePlay();
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement(_PromoVideoButton.Icon, rest), /*#__PURE__*/_react.default.createElement(_ProgressRing.default, rest)));
+};
+
+var _default = PromoVideoButton;
+exports.default = _default;

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

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = exports.PlayButtonWrapper = exports.PlayButton = exports.ProgressRingCircle = exports.ProgressRingSVG = exports.ProgressRingWrapper = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _PlayWhite = _interopRequireDefault(require("./assets/Play--white.svg"));
+
+var _PauseWhite = _interopRequireDefault(require("./assets/Pause--white.svg"));
+
+var _PlayBlack = _interopRequireDefault(require("./assets/Play--black.svg"));
+
+var _PauseBlack = _interopRequireDefault(require("./assets/Pause--black.svg"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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-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('white');
+}, function (_ref2) {
+  var blackPlayButton = _ref2.blackPlayButton;
+  return blackPlayButton && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.color('black');
+  });
+}, function (_ref4) {
+  var copyLeft = _ref4.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["right:auto;left:10px;"]);
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.breakpoint('medium');
+}, function (_ref6) {
+  var copyLeft = _ref6.copyLeft;
+  return !copyLeft && (0, _styledComponents.css)(["right:auto;left:20px;"]);
+});
+
+exports.PlayButton = PlayButton;
+
+var ProgressRingWrapper = _styledComponents.default.span.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingWrapper",
+  componentId: "sc-17cm3uc-2"
+})(["position:absolute;width:100%;height:100%;display:flex;"]);
+
+exports.ProgressRingWrapper = ProgressRingWrapper;
+
+var ProgressRingSVG = _styledComponents.default.svg.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingSVG",
+  componentId: "sc-17cm3uc-3"
+})([""]);
+
+exports.ProgressRingSVG = ProgressRingSVG;
+
+var ProgressRingCircle = _styledComponents.default.circle.withConfig({
+  displayName: "_PromoVideoButtonstyle__ProgressRingCircle",
+  componentId: "sc-17cm3uc-4"
+})(["z-index:100;transition:stroke-dashoffset 0.5s;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dashoffset:", ";stroke:white;fill:transparent;", " ", ""], function (_ref7) {
+  var strokeDashOffsetStyle = _ref7.strokeDashOffsetStyle;
+  return strokeDashOffsetStyle;
+}, function (_ref8) {
+  var blackPlayButton = _ref8.blackPlayButton;
+  return !blackPlayButton && (0, _styledComponents.css)(["stroke:", ";"], function (_ref9) {
+    var theme = _ref9.theme;
+    return theme.color('black');
+  });
+}, function (_ref10) {
+  var isRestarting = _ref10.isRestarting;
+  return isRestarting && (0, _styledComponents.css)(["transition:none;"]);
+});
+
+exports.ProgressRingCircle = ProgressRingCircle;
+
+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 blackPlayButton = _ref11.blackPlayButton,
+      isPlaying = _ref11.isPlaying;
+  return blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
+}, function (_ref12) {
+  var blackPlayButton = _ref12.blackPlayButton,
+      isPlaying = _ref12.isPlaying;
+  return blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
+}, function (_ref13) {
+  var blackPlayButton = _ref13.blackPlayButton,
+      isPlaying = _ref13.isPlaying;
+  return !blackPlayButton && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
+}, function (_ref14) {
+  var blackPlayButton = _ref14.blackPlayButton,
+      isPlaying = _ref14.isPlaying;
+  return !blackPlayButton && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
+});
+
+exports.Icon = Icon;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders Promo correctly 1`] = `
-.c6 {
+.c7 {
   color: #FFFFFF;
   font-size: 5rem;
   line-height: 5rem;
@@ -16,7 +16,7 @@ exports[`renders Promo correctly 1`] = `
   line-height: 3rem;
 }
 
-.c7 {
+.c8 {
   color: #FFFFFF;
   font-size: 1rem;
   line-height: 1rem;
@@ -39,7 +39,7 @@ exports[`renders Promo correctly 1`] = `
   object-fit: cover;
 }
 
-.c8 {
+.c9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -68,7 +68,7 @@ exports[`renders Promo correctly 1`] = `
   color: #000000;
 }
 
-.c8:hover {
+.c9:hover {
   background-color: #969598;
   color: #000000;
 }
@@ -102,13 +102,14 @@ exports[`renders Promo correctly 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   width: 100%;
   padding: 1.5rem 1.5rem 4rem;
   z-index: 1;
@@ -123,8 +124,21 @@ exports[`renders Promo correctly 1`] = `
   object-position: center;
 }
 
+.c5 {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media (min-width:740px) {
-  .c6 {
+  .c7 {
     font-size: 4rem;
     line-height: 4rem;
     margin-bottom: 2rem;
@@ -132,7 +146,7 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c7 {
     font-size: 5rem;
     line-height: 5rem;
     margin-bottom: 2rem;
@@ -140,7 +154,7 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c9 {
     width: auto;
   }
 }
@@ -160,23 +174,27 @@ exports[`renders Promo correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 70%;
-    padding: 4rem 1.5rem;
+  .c6 {
+    width: 100%;
+    padding: 8rem 1.5rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 50%;
-    padding: 8rem 1.5rem;
+  .c1 {
+    height: 100%;
+    position: absolute;
   }
 }
 
 @media (min-width:1024px) {
-  .c1 {
-    height: 100%;
+  .c5 {
+    width: 50%;
     position: absolute;
+    top: 0;
+    left: 0;
+    left: auto;
+    right: 0;
   }
 }
 
@@ -211,38 +229,42 @@ exports[`renders Promo correctly 1`] = `
     <div
       className="c5"
     >
-      <h1
+      <div
         className="c6"
-        color="white"
-        size="super"
-      >
-        Curabitur pretium tincidunt lacus
-      </h1>
-      <p
-        className="c7"
-        color="white"
-        size="s"
       >
-        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
-      </p>
-      <span>
-        <a
+        <h1
+          className="c7"
+          color="white"
+          size="super"
+        >
+          Curabitur pretium tincidunt lacus
+        </h1>
+        <p
           className="c8"
           color="white"
-          href="/"
-          target="_self"
-          type="button"
+          size="s"
         >
-          Show me this
-        </a>
-      </span>
+          Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+        </p>
+        <span>
+          <a
+            className="c9"
+            color="white"
+            href="/"
+            target="_self"
+            type="button"
+          >
+            Show me this
+          </a>
+        </span>
+      </div>
     </div>
   </div>
 </div>
 `;
 
 exports[`renders Promo correctly end position 1`] = `
-.c6 {
+.c7 {
   color: #FFFFFF;
   font-size: 5rem;
   line-height: 5rem;
@@ -257,7 +279,7 @@ exports[`renders Promo correctly end position 1`] = `
   line-height: 3rem;
 }
 
-.c7 {
+.c8 {
   color: #FFFFFF;
   font-size: 1rem;
   line-height: 1rem;
@@ -280,7 +302,7 @@ exports[`renders Promo correctly end position 1`] = `
   object-fit: cover;
 }
 
-.c8 {
+.c9 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -309,7 +331,7 @@ exports[`renders Promo correctly end position 1`] = `
   color: #000000;
 }
 
-.c8:hover {
+.c9:hover {
   background-color: #969598;
   color: #000000;
 }
@@ -346,13 +368,14 @@ exports[`renders Promo correctly end position 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
-.c5 {
+.c6 {
   width: 100%;
   padding: 1.5rem 1.5rem 4rem;
   z-index: 1;
@@ -367,8 +390,21 @@ exports[`renders Promo correctly end position 1`] = `
   object-position: center;
 }
 
+.c5 {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 @media (min-width:740px) {
-  .c6 {
+  .c7 {
     font-size: 4rem;
     line-height: 4rem;
     margin-bottom: 2rem;
@@ -376,7 +412,7 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c6 {
+  .c7 {
     font-size: 5rem;
     line-height: 5rem;
     margin-bottom: 2rem;
@@ -384,7 +420,7 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:740px) {
-  .c8 {
+  .c9 {
     width: auto;
   }
 }
@@ -412,23 +448,27 @@ exports[`renders Promo correctly end position 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 70%;
-    padding: 4rem 1.5rem;
+  .c6 {
+    width: 100%;
+    padding: 8rem 1.5rem;
   }
 }
 
 @media (min-width:1024px) {
-  .c5 {
-    width: 50%;
-    padding: 8rem 1.5rem;
+  .c1 {
+    height: 100%;
+    position: absolute;
   }
 }
 
 @media (min-width:1024px) {
-  .c1 {
-    height: 100%;
+  .c5 {
+    width: 50%;
     position: absolute;
+    top: 0;
+    left: 0;
+    left: auto;
+    right: 0;
   }
 }
 
@@ -463,31 +503,35 @@ exports[`renders Promo correctly end position 1`] = `
     <div
       className="c5"
     >
-      <h1
+      <div
         className="c6"
-        color="white"
-        size="super"
-      >
-        Curabitur pretium tincidunt lacus
-      </h1>
-      <p
-        className="c7"
-        color="white"
-        size="s"
       >
-        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
-      </p>
-      <span>
-        <a
+        <h1
+          className="c7"
+          color="white"
+          size="super"
+        >
+          Curabitur pretium tincidunt lacus
+        </h1>
+        <p
           className="c8"
           color="white"
-          href="/"
-          target="_self"
-          type="button"
+          size="s"
         >
-          Show me this
-        </a>
-      </span>
+          Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+        </p>
+        <span>
+          <a
+            className="c9"
+            color="white"
+            href="/"
+            target="_self"
+            type="button"
+          >
+            Show me this
+          </a>
+        </span>
+      </div>
     </div>
   </div>
 </div>

package/dist/components/Molecules/Promo/assets/Pause--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#222222"/>
+</svg>

package/dist/components/Molecules/Promo/assets/Pause--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C10.8954 6 10 6.89543 10 8V40C10 41.1046 10.8954 42 12 42H17C18.1046 42 19 41.1046 19 40V8C19 6.89543 18.1046 6 17 6H12ZM31 6C29.8954 6 29 6.89543 29 8V40C29 41.1046 29.8954 42 31 42H36C37.1046 42 38 41.1046 38 40V8C38 6.89543 37.1046 6 36 6H31Z" fill="#FFFFFF"/>
+</svg>

package/dist/components/Molecules/Promo/assets/Play--black.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#222222"/>
+</svg>

package/dist/components/Molecules/Promo/assets/Play--white.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6845 22.5846L11.457 6.22056C10.9505 5.92706 10.326 5.92656 9.819 6.21856C9.3125 6.51056 9 7.05156 9 7.63656V40.3641C9 40.9491 9.3125 41.4901 9.8195 41.7821C10.0725 41.9276 10.3545 42.0001 10.6365 42.0001C10.92 42.0001 11.2035 41.9266 11.4575 41.7796L39.685 25.4161C40.189 25.1231 40.5 24.5836 40.5 24.0001C40.5 23.4166 40.189 22.8771 39.6845 22.5846Z" fill="#FFFFFF"/>
+</svg>

package/package.json

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