@comicrelief/component-library 7.20.0 → 7.22.0

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 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) {
+  var theme = _ref.theme;
+  return theme.color('black');
+}, function (_ref2) {
+  var lightColouredVideo = _ref2.lightColouredVideo;
+  return !lightColouredVideo && (0, _styledComponents.css)(["background:", ";"], function (_ref3) {
+    var theme = _ref3.theme;
+    return theme.color('white');
+  });
+}, 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 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"
+})(["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 lightColouredVideo = _ref8.lightColouredVideo;
+  return !lightColouredVideo && (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 lightColouredVideo = _ref11.lightColouredVideo,
+      isPlaying = _ref11.isPlaying;
+  return lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayWhite.default);
+}, function (_ref12) {
+  var lightColouredVideo = _ref12.lightColouredVideo,
+      isPlaying = _ref12.isPlaying;
+  return lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseWhite.default);
+}, function (_ref13) {
+  var lightColouredVideo = _ref13.lightColouredVideo,
+      isPlaying = _ref13.isPlaying;
+  return !lightColouredVideo && !isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PlayBlack.default);
+}, function (_ref14) {
+  var lightColouredVideo = _ref14.lightColouredVideo,
+      isPlaying = _ref14.isPlaying;
+  return !lightColouredVideo && isPlaying && (0, _styledComponents.css)(["background-image:url(", ");"], _PauseBlack.default);
+});
+
+exports.Icon = Icon;

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/dist/components/Organisms/Footer/Footer.js

@@ -58,7 +58,7 @@ Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false,
+  overrideallowList: false,
   additionalLegalLine: ''
 };
 var _default = Footer;

package/dist/components/Organisms/Footer/Footer.md

@@ -8,12 +8,12 @@ import footerCopy from './data/footerCopy';
     <p>Standard footer</p>
     <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
 
-    <p>Overrides whitelist functionality for external usage</p>
+    <p>Overrides allowList functionality for external usage</p>
     <Footer 
       navItems={data} 
       footerCopy={footerCopy.copy} 
       campaign="Comic Relief" 
-      overrideWhiteList 
+      overrideallowList 
     />
     
     <p>Adding a additionalLegalLine to the top of the footer</p>

package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -1206,7 +1206,7 @@ exports[`renders correctly 1`] = `
                     color="white"
                     size="s"
                   >
-                    Test whitelisted external link
+                    Test allowListed external link
                   </span>
                 </a>
               </li>
@@ -1226,7 +1226,7 @@ exports[`renders correctly 1`] = `
                     color="white"
                     size="s"
                   >
-                    Test non-whitelisted external link
+                    Test non-allowListed external link
                   </span>
                   <span
                     className="c24"

package/dist/components/Organisms/Footer/data/data.js

@@ -151,13 +151,13 @@ var _default = {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test whitelisted external link',
+      title: 'Test allowListed external link',
       url: 'https://www.sportrelief.com',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test non-whitelisted external link',
+      title: 'Test non-allowListed external link',
       url: 'https://bing.com',
       internal: {
         type: 'ContentfulComponentLink'

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -23,7 +23,7 @@ var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 
-var _whiteListed = _interopRequireDefault(require("../../../../utils/whiteListed"));
+var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
 
 var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
 
@@ -103,7 +103,7 @@ var MainNav = function MainNav(_ref) {
     /* Determine which field represents our url path */
 
     var thisUrl = (0, _navHelper.default)(thisFirstChild);
-    var relNoopener = !(0, _whiteListed.default)(thisUrl) && 'noopener';
+    var relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
     var hasSubMenu = group.links && group.links.length > 1;
     var hasPopUp = hasSubMenu ? 'true' : null;
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);

package/dist/components/Organisms/Header/data/data.js

@@ -126,13 +126,13 @@ var _default = {
     title: 'External Links (menu group)',
     id: 'eaec5191-bbb3-5e8d-b966-c53fff34998a',
     links: [{
-      title: 'Test whitelisted external link',
+      title: 'Test allowListed external link',
       url: 'https://www.sportrelief.com',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test non-whitelisted external link',
+      title: 'Test non-allowListed external link',
       url: 'https://bing.com',
       internal: {
         type: 'ContentfulComponentLink'

package/dist/index.js

@@ -35,10 +35,10 @@ Object.defineProperty(exports, "zIndex", {
     return _zIndex.default;
   }
 });
-Object.defineProperty(exports, "whiteListed", {
+Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function get() {
-    return _whiteListed.default;
+    return _allowListed.default;
   }
 });
 Object.defineProperty(exports, "spacing", {
@@ -406,7 +406,7 @@ var _hideVisually = _interopRequireDefault(require("./theme/shared/hideVisually"
 
 var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));
 
-var _whiteListed = _interopRequireDefault(require("./utils/whiteListed"));
+var _allowListed = _interopRequireDefault(require("./utils/allowListed"));
 
 var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 

package/dist/utils/{whiteListed.js → allowListed.js}

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var whiteList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com'];
+var allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
 
-var whiteListed = function whiteListed(url) {
-  if (url !== undefined && url !== null && whiteList.some(function (v) {
+var allowListed = function allowListed(url) {
+  if (url !== undefined && url !== null && allowList.some(function (v) {
     return url.indexOf(v) >= 0;
   })) {
     return true;
@@ -16,5 +16,5 @@ var whiteListed = function whiteListed(url) {
   return false;
 };
 
-var _default = whiteListed;
+var _default = allowListed;
 exports.default = _default;

package/dist/utils/allowListed.test.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _allowListed = _interopRequireDefault(require("./allowListed"));
+
+it('link is allowListed', function () {
+  expect((0, _allowListed.default)('https://www.comicrelief.com/home')).toBe(true);
+});
+it('link is not allowListed', function () {
+  expect((0, _allowListed.default)('https://www.google.co.uk/')).toBe(false);
+});

package/docs/utils.md

@@ -5,13 +5,13 @@ _Hide Visually_
 how to use in your styled component
 `export const Component = styled.span'${hideVisually};';`
 
-_whiteListed_
+_allowListed_
 
-`import { whiteListed } from '@comicrelief/component-library';`
+`import { allowListed } from '@comicrelief/component-library';`
 
-`whiteListed(url)`
+`allowListed(url)`
 
-Check if a url is whiteListed. Used to check links and change link target.
+Check if a url is allowListed. Used to check links and change link target.
 
 _Z Index_
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.20.0",
+  "version": "7.22.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -75,7 +75,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "cypress": "^8.3.0",
+    "cypress": "13.2.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",

package/src/components/Atoms/Link/Link.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
-import whiteListed from '../../../utils/whiteListed';
+import allowListed from '../../../utils/allowListed';
 import { getDomain } from '../../../utils/internalLinkHelper';
 
 let window = '';
@@ -22,7 +22,7 @@ const Link = ({
   const [documentHost, setDocumentHost] = useState('');
   /**
    * If we haven't specifically set the target via props, check if
-   * this is an internal link OR on our whitelist before making it a '_self' link
+   * this is an internal link OR on our allowList before making it a '_self' link
    */
   if (target === null) {
     // Use our helper function to determine the raw domains to compare
@@ -30,7 +30,7 @@ const Link = ({
     const linkDomain = getDomain(href);
 
     // Additional check for applications that need more control
-    const isWhiteListOverridden = rest.overrideWhiteList === true;
+    const isallowListOverridden = rest.overrideallowList === true;
 
     /**
      * If the link has no domain supplied (likely '/' or '#')
@@ -38,9 +38,9 @@ const Link = ({
      * in a new tab
      */
     const isExternalLink = linkDomain !== '' && (currentDomain !== linkDomain);
-    const isWhiteListed = whiteListed(href);
+    const isallowListed = allowListed(href);
 
-    window = isExternalLink && (isWhiteListOverridden || !isWhiteListed) ? '_blank' : '_self';
+    window = isExternalLink && (isallowListOverridden || !isallowListed) ? '_blank' : '_self';
   } else {
     window = target === 'blank' ? '_blank' : '_self';
   }

package/src/components/Molecules/Promo/Promo.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import PromoVideo from './_PromoVideo';
+import { sizes } from '../../../theme/shared/breakpoint';
+
 import Picture from '../../Atoms/Picture/Picture';
 
 import {
@@ -7,21 +10,60 @@ import {
 } from './Promo.style';
 
 const Promo = ({
-  copyFirst,
+  copyLeft,
   backgroundColor,
   imageLow,
   imageSet,
   image,
   imageAltText,
   children,
-  position
+  position,
+  autoPlay,
+  loop,
+  poster,
+  mobilePoster,
+  showPosterAfterPlaying,
+  videoSrc,
+  mobileVideoSrc,
+  lightColouredVideo
 }) => {
-  const hasImage = imageSet || false;
+  // Store the appropriate prop in state, dependent on the breakpoint
+  const [thisVideoSrc, setThisVideoSrc] = useState(null);
+  const [thisPoster, setThisPoster] = useState(null);
+
+  // Let either field define this, just in case
+  const hasVideo = Boolean(videoSrc || mobileVideoSrc);
+  // A 'video-y' Promo will override and ignore any 'non-Video' images;
+  // none of these fields are required so we have to handle them accordingly:
+  const hasImage = Boolean(imageSet && !hasVideo);
+
+  // Runs on initial load:
+  useEffect(() => {
+    if (hasVideo) {
+      // Checks size on load ONLY; don't want to mess about with listeners:
+      const isDesktop = window.innerWidth >= sizes.nav; // 1024+ px
+      let currentPoster; let currentSrc;
+
+      // If we've got both desktop AND mobile videos, let the
+      // *current* screen width define which video src to use:
+      if (videoSrc && mobileVideoSrc) {
+        currentSrc = isDesktop ? videoSrc : mobileVideoSrc;
+        currentPoster = isDesktop ? poster : mobilePoster;
+      } else {
+        // Else, pick whatever we DO actually have:
+        currentSrc = videoSrc || mobileVideoSrc;
+        currentPoster = poster || mobilePoster;
+      }
+
+      setThisVideoSrc(currentSrc);
+      setThisPoster(currentPoster);
+    }
+  }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
-      {hasImage && (
-      <Media imageRight={copyFirst}>
+      <Media imageRight={copyLeft}>
+        {(hasImage && !hasVideo) && (
         <Picture
           alt={imageAltText}
           imageLow={imageLow}
@@ -31,10 +73,28 @@ const Promo = ({
           width="100%"
           height="100%"
         />
+        )}
+        {/* If no poster image is supplied, it'll gracefully
+        fall back to the first frame, so only checking for a src here */}
+        {(hasVideo && thisVideoSrc) && (
+        <>
+          <PromoVideo
+            copyLeft={copyLeft}
+            lightColouredVideo={lightColouredVideo}
+            thisVideoSrc={thisVideoSrc}
+            thisPoster={thisPoster}
+            showPosterAfterPlaying={showPosterAfterPlaying}
+            autoPlay={autoPlay}
+            loop={loop}
+          />
+        </>
+        )}
       </Media>
-      )}
-      <Wrapper copyFirst={copyFirst}>
-        <Copy position={position}>{children}</Copy>
+
+      <Wrapper copyLeft={copyLeft}>
+        <Copy position={position} hasVideo={hasVideo} lightColouredVideo={lightColouredVideo}>
+          {children}
+        </Copy>
       </Wrapper>
     </Container>
   );
@@ -42,24 +102,40 @@ const Promo = ({
 
 Promo.propTypes = {
   backgroundColor: PropTypes.string,
-  copyFirst: PropTypes.bool,
+  copyLeft: PropTypes.bool,
   imageLow: PropTypes.string,
   imageSet: PropTypes.string,
   image: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node,
-  position: PropTypes.oneOf(['upper', 'lower', 'end', 'none'])
+  position: PropTypes.oneOf(['upper', 'lower', 'end', 'none']),
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  videoSrc: PropTypes.string,
+  mobileVideoSrc: PropTypes.string,
+  poster: PropTypes.string,
+  mobilePoster: PropTypes.string,
+  showPosterAfterPlaying: PropTypes.bool,
+  lightColouredVideo: PropTypes.bool
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
-  position: 'none'
+  position: 'none',
+  autoPlay: true,
+  loop: true,
+  poster: null,
+  mobilePoster: null,
+  videoSrc: null,
+  mobileVideoSrc: null,
+  showPosterAfterPlaying: true,
+  lightColouredVideo: false
 };
 
 export default Promo;