@comicrelief/component-library 7.22.1 → 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.1",
+  "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.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>

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

@@ -19,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

package/src/components/Organisms/ImpactSlider/ImpactMoneybuys.style.js

@@ -0,0 +1,96 @@
+import styled, { css } from 'styled-components';
+import Text from '../../Atoms/Text/Text';
+
+const MoneybuyWrapper = styled.div`
+    margin-top: 32px;
+    width: 100%;
+    display: flex;
+    align-content: space-between;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+        flex-direction: row;
+        align-items: stretch;
+    }
+`;
+
+const Moneybuy = styled.div`
+    display: inherit;
+    width: 100%;
+    padding: 8px 20px;
+    height: auto;
+    background-color: white;
+    border-radius: 10px;
+    border: 1px solid ${props => props.theme.color('black')};;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    opacity: 1;
+
+    ${props => props.isInactive && css`
+        opacity: 0.5;
+    `}
+
+    @media ${({ theme }) => theme.breakpoint('small')} {
+        width: 70%;
+        padding: 8px 40px;
+
+    }
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+        padding: 20px 14px;
+        flex-direction: column;
+        width: 18%;
+        max-height: none;
+    }
+`;
+
+const OrLabel = styled(Text)`
+    display: inherit;
+    align-items: center;
+    margin: 8px 0;
+    font-size: 14px;
+`;
+
+const MoneybuyImage = styled.span`
+    background: center / 65% no-repeat url("${props => props.imageURL}"), 
+    ${props => props.theme.color('grey_extra_light')};
+    width: 48px;
+    height: 48px;
+    border-radius: 48px;
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+        width: 0;
+        height: 0;
+        padding: 30%;
+        border-radius: 100%;
+      }
+`;
+
+const MoneybuyAmount = styled(Text)`
+    text-align: center;
+    margin: 0 10px;
+    width: 25%;
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+        margin: 8px 15px 2px;
+        width: auto;
+    }
+`;
+
+const MoneybuyDescription = styled(Text)`
+    text-align: left;
+    width: 50%;
+
+    @media ${({ theme }) => theme.breakpoint('medium')} {
+        width: 100%;
+        text-align: center;
+    }
+`;
+
+export {
+  MoneybuyWrapper, Moneybuy, OrLabel, MoneybuyImage, MoneybuyAmount, MoneybuyDescription
+};

package/src/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Text from '../../Atoms/Text/Text';
+import Slider from './_Slider';
+import Moneybuys from './_ImpactMoneybuys';
+import handleSubmission from './_utils';
+
+import {
+  OuterWrapper, InnerWrapper, Copy, CurrentAmountCopy, SubmitButton
+} from './ImpactSlider.style';
+
+const ImpactSlider = ({
+  heading, cartID, donateLink, rowID, items, step,
+  max, opacityAnimation, children, defaultSliderValue
+}) => {
+  // Use the lowest possible amount as our default:
+  const [currentAmount, setCurrentAmount] = useState(defaultSliderValue || step);
+
+  const handleChange = thisValue => {
+    if (thisValue) {
+      // Return the value of the 'thumb' we care about:
+      setCurrentAmount(thisValue[1]);
+    }
+  };
+
+  const handleSubmit = () => {
+    handleSubmission(currentAmount, donateLink, cartID, rowID);
+  };
+
+  return (
+    <OuterWrapper>
+      <InnerWrapper>
+        <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">{heading}</Text>
+        <Copy>
+          {children}
+        </Copy>
+        <CurrentAmountCopy tag="p" size="s">
+          A donation of
+          {' '}
+          £
+          {currentAmount}
+          {' '}
+          could help pay for:
+        </CurrentAmountCopy>
+        <Slider
+          currentAmount={currentAmount}
+          min={step}
+          max={max}
+          handleChange={handleChange}
+          steps={step}
+        />
+        <Moneybuys
+          items={items}
+          currentAmount={currentAmount}
+          opacityAnimation={opacityAnimation}
+        />
+        <SubmitButton type="submit" onClick={handleSubmit} disabled={currentAmount === 0}>
+          Donate £
+          {currentAmount}
+          {' '}
+          now
+        </SubmitButton>
+      </InnerWrapper>
+    </OuterWrapper>
+  );
+};
+
+ImpactSlider.defaultProps = {
+  opacityAnimation: false,
+  defaultSliderValue: null
+};
+
+ImpactSlider.propTypes = {
+  heading: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  cartID: PropTypes.string.isRequired,
+  donateLink: PropTypes.string.isRequired,
+  rowID: PropTypes.string.isRequired,
+  step: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  defaultSliderValue: PropTypes.number,
+  opacityAnimation: PropTypes.bool,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      poundsPerItem: PropTypes.number.isRequired,
+      description: PropTypes.string.isRequired,
+      imageURL: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default ImpactSlider;

package/src/components/Organisms/ImpactSlider/ImpactSlider.md

@@ -0,0 +1,42 @@
+# Impact Slider (w/opacity animation)
+
+```js
+const { testImpactSliderItems} = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+<ImpactSlider
+  heading="Your donations will change lives"
+  donateLink="https://donation-staging.spa.comicrelief.com"
+  rowID="to-come-from-the-cms"
+  cartID="to-also-come-from-the-cms"
+  items={testImpactSliderItems}
+  step={5}
+  max={100}
+  opacityAnimation={true}
+  >
+    <Text tag="p" color="black">
+      Use this slider to see how your donation can make a difference to lives in the UK and around the globe this winter.
+    </Text>
+  </ImpactSlider>
+```
+
+# Impact Slider (w/o opacity animation, w/default value)
+```js
+const { testImpactSliderItems} = require('../../../styleguide/data/data');
+import Text from '../../Atoms/Text/Text';
+
+<ImpactSlider
+  heading="Your donations will change lives"
+  donateLink="https://donation-staging.spa.comicrelief.com"
+  rowID="to-come-from-the-cms"
+  cartID="to-also-come-from-the-cms"
+  items={testImpactSliderItems}
+  step={5}
+  max={100}
+  defaultSliderValue={45}
+  >
+    <Text tag="p" color="black">
+      Use this slider to see how your donation can make a difference to lives in the UK and around the globe this winter.
+    </Text>
+  </ImpactSlider>
+```

package/src/components/Organisms/ImpactSlider/ImpactSlider.style.js

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import Text from '../../Atoms/Text/Text';
+import Button from '../../Atoms/Button/Button';
+
+const OuterWrapper = styled.div`
+  position: relative;
+  margin: 0 auto;
+  max-width: 100%;
+  background-color: ${props => props.theme.color('grey_extra_light')};
+  padding: 32px 16px;
+
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    padding: 50px;
+  }
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    padding: 64px 0;
+  }
+`;
+
+const InnerWrapper = styled.div`
+  width: 100%;
+  max-width: 780px;
+  margin: 0 auto;
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    h1 {
+      font-size: 48px;
+      line-height: 48px;
+    }
+  }
+`;
+
+const Copy = styled.div`
+  position: relative;
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    p {
+      font-size: 20px;
+      line-height: 24.38px;
+    }
+  }
+`;
+
+const CurrentAmountCopy = styled(Text)`
+  font-weight: bold;
+  margin-top: 16px;
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    font-size: 20px;
+    line-height: 24.38px;
+    margin: 24px 0 38px;
+  }
+`;
+
+const SubmitButton = styled(Button)`
+  margin: 32px auto 0;
+  width: 100%;
+  font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
+  display: block;
+  
+  @media ${({ theme }) => theme.breakpoint('small')} {
+    width: 70%;
+    margin: 40px auto 0;
+  }
+
+  @media ${({ theme }) => theme.breakpoint('medium')} {
+    width: 100%;
+  }
+`;
+
+export {
+  OuterWrapper, Copy, CurrentAmountCopy, SubmitButton, InnerWrapper
+};

package/src/components/Organisms/ImpactSlider/Slider.style.js

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+import RangeSlider from 'react-range-slider-input';
+
+const thumbSize = 30;
+const outlineSize = thumbSize / 2.5;
+const sizeMultiplier = 1.4;
+
+const StyledRangerSlider = styled(RangeSlider)`
+    background: white;
+    height: 16px;
+    border-radius: 16px;
+    border: 1px solid ${props => props.theme.color('black')};
+
+    .range-slider__range {
+        height: 14px;
+        border-radius: 10px;
+        background-color: ${props => props.theme.color('red')};
+        z-index: 2;
+    }
+
+    .range-slider__thumb[data-upper] {
+        &:after {
+            background-color: white;
+            width: ${thumbSize}px;
+            height: ${thumbSize}px;
+            content: "";
+            position: absolute;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            border-radius: 50%;
+            border: ${outlineSize}px solid ${props => props.theme.color('red')};
+            transition-property: width, height, border-width;
+            transition-duration: 0.15s;
+        }
+
+        &:hover {
+            &:after {
+                width: ${thumbSize * sizeMultiplier}px;
+                height: ${thumbSize * sizeMultiplier}px;
+                border-width: ${outlineSize}px;
+            }
+        }
+    }
+
+    // Hide other slider thumb, as per example from the docs
+    .range-slider__thumb[data-lower] {
+        width: 0;
+    }
+`;
+
+const SliderWrapper = styled.div`
+    width: 100%;
+    margin-top: 25px;
+`;
+
+const SliderLabel = styled.label`
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+`;
+
+export {
+  StyledRangerSlider, SliderWrapper, SliderLabel
+};

package/src/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  MoneybuyWrapper, Moneybuy, OrLabel, MoneybuyImage, MoneybuyAmount, MoneybuyDescription
+} from './ImpactMoneybuys.style';
+
+const Moneybuys = ({ items, currentAmount, opacityAnimation }) => (
+  <MoneybuyWrapper>
+    {items.map((item, index) => {
+      const roundedPerPound = Math.floor(item.poundsPerItem);
+      const thisAmount = Math.floor(currentAmount / roundedPerPound);
+      const isInactive = !(!opacityAnimation || currentAmount >= roundedPerPound);
+
+      return (
+        <Fragment key={roundedPerPound}>
+          <Moneybuy isInactive={isInactive} data-testid={`impact-slider--moneybuy-${index + 1}`}>
+            <MoneybuyImage imageURL={item.imageURL} />
+            <MoneybuyAmount tag="p" family="Anton" uppercase weight="normal" size="xl" data-testid="moneybuy-amount">{thisAmount}</MoneybuyAmount>
+            <MoneybuyDescription tag="p" size="sm" data-testid="moneybuy-description">{item.description}</MoneybuyDescription>
+          </Moneybuy>
+          { index < (items.length - 1) && (
+            <OrLabel tag="span">Or</OrLabel>
+          )}
+        </Fragment>
+      );
+    })}
+  </MoneybuyWrapper>
+);
+
+Moneybuys.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      poundsPerItem: PropTypes.number.isRequired,
+      description: PropTypes.string.isRequired,
+      imageURL: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  currentAmount: PropTypes.number.isRequired,
+  opacityAnimation: PropTypes.bool.isRequired
+};
+
+export default Moneybuys;