@comicrelief/component-library 7.22.0 → 7.23.0

package/dist/utils/ShareButton/sharePopUpHelper.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /* Handles issues related to screen/browser positions on dual-screen setups-  http://www.xtf.dk/ */
 var popUpCentre = function popUpCentre(url, popUpWidth, popUpHeight) {
   var dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.left;
   var dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screen.top;
   var browserWidth;
   var browserHeight;
-
   if (window.innerWidth) {
     browserWidth = window.innerWidth;
   } else if (document.documentElement.clientWidth) {
@@ -19,7 +17,6 @@ var popUpCentre = function popUpCentre(url, popUpWidth, popUpHeight) {
   } else {
     browserWidth = window.screen.width;
   }
-
   if (window.innerHeight) {
     browserHeight = window.innerHeight;
   } else if (document.documentElement.clientHeight) {
@@ -27,15 +24,13 @@ var popUpCentre = function popUpCentre(url, popUpWidth, popUpHeight) {
   } else {
     browserHeight = window.screen.height;
   }
-
   var popUpLeft = browserWidth / 2 - popUpWidth / 2 + dualScreenLeft;
   var popUpTop = browserHeight / 2 - popUpHeight / 2 + dualScreenTop;
-  var newWindow = window.open(url, '', "width=".concat(popUpWidth, ", height=").concat(popUpHeight, ", top=").concat(popUpTop, ", left=").concat(popUpLeft)); // Shift browser focus to newWindow
+  var newWindow = window.open(url, '', "width=".concat(popUpWidth, ", height=").concat(popUpHeight, ", top=").concat(popUpTop, ", left=").concat(popUpLeft));
 
+  // Shift browser focus to newWindow
   if (window.focus) {
     newWindow.focus();
   }
 };
-
-var _default = popUpCentre;
-exports.default = _default;
+var _default = exports.default = popUpCentre;

package/dist/utils/ShareButton/shareTracking.js

@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var shareTracking = function shareTracking(channel) {
   if (!window.dataLayer) {
     window.dataLayer = [];
   }
-
   window.dataLayer.push({
     event: 'btn_social-share',
     action: channel
   });
 };
-
-var _default = shareTracking;
-exports.default = _default;
+var _default = exports.default = shareTracking;

package/dist/utils/ShareButton/shareUrlHelper.js

@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /* Determine where to grab the URL, depending on the component type and values supplied */
 var shareUrlHelper = function shareUrlHelper(urlToShare, typeOfShare) {
   // Encode the URL so we can happily pass it as a parameter, fragments and all
-  var urlToShareEncoded = encodeURIComponent(urlToShare); // Construct all share urls
+  var urlToShareEncoded = encodeURIComponent(urlToShare);
 
+  // Construct all share urls
   var shareURLs = {
     Twitter: "http://www.twitter.com/intent/tweet?url=".concat(urlToShareEncoded),
     Facebook: "https://www.facebook.com/sharer/sharer.php?u=".concat(urlToShareEncoded)
   };
   return shareURLs[typeOfShare];
 };
-
-var _default = shareUrlHelper;
-exports.default = _default;
+var _default = exports.default = shareUrlHelper;

package/dist/utils/allowListed.js

@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 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 allowListed = function allowListed(url) {
   if (url !== undefined && url !== null && allowList.some(function (v) {
     return url.indexOf(v) >= 0;
   })) {
     return true;
   }
-
   return false;
 };
-
-var _default = allowListed;
-exports.default = _default;
+var _default = exports.default = allowListed;

package/dist/utils/allowListed.test.js

@@ -1,9 +1,7 @@
 "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);
 });

package/dist/utils/internalLinkHelper.js

@@ -1,42 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDomain = exports.InternalLinkHelper = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
 var domainRegEx = new RegExp('(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]');
-
-var InternalLinkHelper = function InternalLinkHelper(link) {
+var InternalLinkHelper = exports.InternalLinkHelper = function InternalLinkHelper(link) {
   // Check our URL for a domain pattern, if so return it
   if (domainRegEx.test(link)) {
     return link;
-  } // If domain-free and internal, prefix it with slash if it doesn't already have one
-
+  }
 
+  // If domain-free and internal, prefix it with slash if it doesn't already have one
   return link.substring(0, 1) === '/' ? link : "/".concat(link);
 };
+var getDomain = exports.getDomain = function getDomain(url) {
+  var thisURL = url;
 
-exports.InternalLinkHelper = InternalLinkHelper;
-
-var getDomain = function getDomain(url) {
-  var thisURL = url; // Strip out protocol
-
-  thisURL = url.replace(/(https?:\/\/)?(www.)?/i, ''); // Strip out subdirectory/path
+  // Strip out protocol
+  thisURL = url.replace(/(https?:\/\/)?(www.)?/i, '');
 
+  // Strip out subdirectory/path
   if (thisURL.indexOf('/') !== -1) {
     var _thisURL$split = thisURL.split('/'),
-        _thisURL$split2 = (0, _slicedToArray2.default)(_thisURL$split, 1),
-        splitURL = _thisURL$split2[0];
-
+      _thisURL$split2 = (0, _slicedToArray2.default)(_thisURL$split, 1),
+      splitURL = _thisURL$split2[0];
     thisURL = splitURL;
   }
-
   return thisURL;
-};
-
-exports.getDomain = getDomain;
+};

package/dist/utils/navHelper.js

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /* Determine where to grab the URL, depending on the component type and values supplied */
 var NavHelper = function NavHelper(navItem) {
   /* Default url path location for 'Pages' */
   var thisUrl = navItem.path;
-
   if (navItem.internal.type === 'ContentfulComponentLink') {
     thisUrl = navItem.reference && navItem.reference.path ? navItem.reference.path : navItem.url;
   }
-
   return thisUrl;
 };
-
-var _default = NavHelper;
-exports.default = _default;
+var _default = exports.default = NavHelper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.22.0",
+  "version": "7.23.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -37,6 +37,7 @@
     "react-hook-form": "^6.3.0",
     "react-modal": "^3.16.1",
     "react-responsive": "^9.0.2",
+    "react-range-slider-input": "^3.0.7",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",

package/react-range-slider-input.d.ts

@@ -0,0 +1,2 @@
+// Polyfill for some lazy development
+declare module 'react-range-slider-input';

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

@@ -6,7 +6,7 @@ import { sizes } from '../../../theme/shared/breakpoint';
 import Picture from '../../Atoms/Picture/Picture';
 
 import {
-  Container, Wrapper, Copy, Media
+  Container, Wrapper, Copy, Media, Gradient
 } from './Promo.style';
 
 const Promo = ({
@@ -25,7 +25,8 @@ const Promo = ({
   showPosterAfterPlaying,
   videoSrc,
   mobileVideoSrc,
-  lightColouredVideo
+  behindTextGradient,
+  blackPlayButton
 }) => {
   // Store the appropriate prop in state, dependent on the breakpoint
   const [thisVideoSrc, setThisVideoSrc] = useState(null);
@@ -80,7 +81,8 @@ const Promo = ({
         <>
           <PromoVideo
             copyLeft={copyLeft}
-            lightColouredVideo={lightColouredVideo}
+            behindTextGradient={behindTextGradient}
+            blackPlayButton={blackPlayButton}
             thisVideoSrc={thisVideoSrc}
             thisPoster={thisPoster}
             showPosterAfterPlaying={showPosterAfterPlaying}
@@ -92,9 +94,11 @@ const Promo = ({
       </Media>
 
       <Wrapper copyLeft={copyLeft}>
-        <Copy position={position} hasVideo={hasVideo} lightColouredVideo={lightColouredVideo}>
-          {children}
-        </Copy>
+        <Gradient hasVideo={hasVideo} behindTextGradient={behindTextGradient} copyLeft={copyLeft}>
+          <Copy position={position} hasVideo={hasVideo} behindTextGradient={behindTextGradient}>
+            {children}
+          </Copy>
+        </Gradient>
       </Wrapper>
     </Container>
   );
@@ -116,7 +120,8 @@ Promo.propTypes = {
   poster: PropTypes.string,
   mobilePoster: PropTypes.string,
   showPosterAfterPlaying: PropTypes.bool,
-  lightColouredVideo: PropTypes.bool
+  behindTextGradient: PropTypes.oneOf(['black', 'white', 'none']),
+  blackPlayButton: PropTypes.bool
 };
 
 Promo.defaultProps = {
@@ -135,7 +140,8 @@ Promo.defaultProps = {
   videoSrc: null,
   mobileVideoSrc: null,
   showPosterAfterPlaying: true,
-  lightColouredVideo: false
+  behindTextGradient: 'none',
+  blackPlayButton: false
 };
 
 export default Promo;

package/src/components/Molecules/Promo/Promo.md

@@ -1,7 +1,8 @@
 Promo
 
 ```js
-const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;
+import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <div>
@@ -15,7 +16,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="upper"
 >
   <Text
@@ -51,7 +51,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="end"
 >
   <Text
@@ -87,7 +86,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
   position="lower"
 >
   <Text
@@ -123,7 +121,6 @@ import Link from '../../Atoms/Link/Link';
   imageLow={defaultData.promoImage}
   imageAltText=""
   copyLeft={true}
-  hasOverlay={true}
 >
   <Text
     tag="h1"
@@ -164,7 +161,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 +170,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 +203,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 +212,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 +244,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 +270,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 +285,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 +294,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 +323,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 +332,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 +364,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 +373,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 +388,8 @@ let mobileVideoSrc = 'https://samplelib.com/lib/preview/mp4/sample-10s.mp4';
     uppercase
     weight="normal"
   >
-    Curabitur pretium tincidunt lacus
+    One-Line Special
   </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.
-  </Text>
-  <span>
-    <Link href="/" type="button" color="black">
-      <Text>
-        Show me this
-      </Text>
-    </Link>
-  </span>
 </Promo>
 
 </div>

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

@@ -44,6 +44,7 @@ const Wrapper = styled.div`
   margin: 0 auto;
   display: flex;
   align-items: center;
+  position: relative;
 
   ${({ copyLeft }) => !copyLeft && 'justify-content: flex-end'};
   ${media('medium')} {
@@ -57,22 +58,8 @@ const Copy = styled.div`
   ${zIndex('low')};
 
   ${media('medium')} {
-    width: 70%;
-    padding: ${spacing('xl')} ${spacing('m')};
-  }
-  ${media('medium')} {
-    width: 50%;
+    width: 100%;
     padding: ${spacing('xxl')} ${spacing('m')};
-
-    ${({ hasVideo }) => hasVideo !== false && css`
-      background-color: rgba(0,0,0,0.75);
-      overflow: hidden;
-      box-shadow: 0px 0px 75px 100px rgba(0, 0, 0, 0.75);
-    `}
-    ${({ hasVideo, lightColouredVideo }) => (hasVideo !== false && lightColouredVideo) && css`
-    background-color: rgba(255, 255, 255, 0.75);
-    box-shadow: 0px 0px 75px 100px rgba(255, 255, 255, 0.75);
-  `}
   }
 
   ${({ position }) => position === 'lower' && css`
@@ -104,6 +91,31 @@ const Video = styled.video.attrs(() => ({
   object-fit: cover;
 `;
 
+const Gradient = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  ${media('medium')} {
+    width: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    ${({ copyLeft }) => (!copyLeft) && css`
+      left: auto;
+      right: 0;
+    `};
+
+    ${({ hasVideo, behindTextGradient }) => (hasVideo !== false && behindTextGradient !== 'none') && css`
+      overflow: hidden;
+      background-color:${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+      box-shadow: 0px 0px 50px 60px ${behindTextGradient === 'black' ? 'rgba(0,0,0,0.5)' : 'rgba(255, 255, 255, 0.5)'};
+   `};
+  }
+`;
+
 export {
-  Container, Wrapper, Copy, Media, Video
+  Container, Wrapper, Copy, Media, Video, Gradient
 };

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

@@ -4,13 +4,14 @@ import { Video } from './Promo.style';
 import PromoVideoButton from './_PromoVideoButton';
 
 const PromoVideo = ({
-  lightColouredVideo,
+  behindTextGradient,
   copyLeft,
   thisVideoSrc,
   thisPoster,
   autoPlay,
   loop,
-  showPosterAfterPlaying
+  showPosterAfterPlaying,
+  blackPlayButton
 }) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isRestarting, setIsRestarting] = useState(false);
@@ -18,13 +19,15 @@ const PromoVideo = ({
   const videoEl = useRef(null);
 
   const togglePlay = () => {
-    if (isPlaying) videoEl.current.pause();
-    else videoEl.current.play();
-    setIsPlaying(!isPlaying);
+    if (videoEl.current) {
+      if (isPlaying) videoEl.current.pause();
+      else videoEl.current.play();
+      setIsPlaying(!isPlaying);
+    }
   };
 
   const updateTime = () => {
-    if (videoEl.current.duration) {
+    if (videoEl.current && videoEl.current.duration) {
       // Calculate the percentage of the video played:
       const percentage = Math.round((videoEl.current.currentTime / videoEl.current.duration) * 100);
       // Because a completely smooth animation is impossible with the 250ms-ish frequency of
@@ -85,7 +88,8 @@ const PromoVideo = ({
         videoProgress={videoProgress}
         togglePlay={togglePlay}
         isPlaying={isPlaying}
-        lightColouredVideo={lightColouredVideo}
+        behindTextGradient={behindTextGradient}
+        blackPlayButton={blackPlayButton}
         isRestarting={isRestarting}
       />
     </>
@@ -94,7 +98,8 @@ const PromoVideo = ({
 
 PromoVideo.propTypes = {
   copyLeft: PropTypes.bool.isRequired,
-  lightColouredVideo: PropTypes.bool.isRequired,
+  behindTextGradient: PropTypes.oneOf(['black', 'white', 'none']).isRequired,
+  blackPlayButton: PropTypes.bool.isRequired,
   thisVideoSrc: PropTypes.string.isRequired,
   thisPoster: PropTypes.string.isRequired,
   autoPlay: PropTypes.bool.isRequired,

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

@@ -6,7 +6,7 @@ import { PlayButtonWrapper, PlayButton, Icon } from './_PromoVideoButton.style';
 const PromoVideoButton = ({
   togglePlay, ...rest
 }) => (
-  <PlayButtonWrapper>
+  <PlayButtonWrapper className="weewee">
     <PlayButton
       onClick={() => { togglePlay(); }}
       {...rest}