@comicrelief/component-library 7.22.0 → 7.23.0

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

@@ -4,6 +4,20 @@ import pauseWhite from './assets/Pause--white.svg';
 import playBlack from './assets/Play--black.svg';
 import pauseBlack from './assets/Pause--black.svg';
 
+const PlayButtonWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  &:after {
+    content: "";
+    // Preload all button icons
+    background-image: url(${playWhite}), url(${pauseWhite}), url(${playBlack}), url(${pauseBlack}), none;
+  }
+`;
+
 const PlayButton = styled.button`
   display: flex;
   width: 50px;
@@ -17,8 +31,8 @@ const PlayButton = styled.button`
   padding: 0;
   margin: 0;
   border-radius: 50%;
-  background: ${({ theme }) => theme.color('black')};
-  opacity: 0.75;
+  background: ${({ theme }) => theme.color('white')};
+  opacity: 0.8;
   transition: opacity 0.2s;
 
   &:hover,
@@ -31,9 +45,8 @@ const PlayButton = styled.button`
     outline-width: medium;
   }
 
-  // Non-light coloured video:
-  ${({ lightColouredVideo }) => !lightColouredVideo && css`
-    background: ${({ theme }) => theme.color('white')};
+  ${({ blackPlayButton }) => blackPlayButton && css`
+    background: ${({ theme }) => theme.color('black')};
   `}
 
   ${({ copyLeft }) => !copyLeft && css`
@@ -52,14 +65,6 @@ const PlayButton = styled.button`
   }
 `;
 
-const PlayButtonWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-
 const ProgressRingWrapper = styled.span`
     position: absolute;
     width: 100%;
@@ -81,8 +86,8 @@ const ProgressRingCircle = styled.circle`
     stroke: white; // need to changed based on Promo settings
     fill: transparent;
 
-    // Non-light coloured video, white button, black stroke
-    ${({ lightColouredVideo }) => !lightColouredVideo && css`
+    // White button, black stroke
+    ${({ blackPlayButton }) => !blackPlayButton && css`
       stroke: ${({ theme }) => theme.color('black')};
     `}
 
@@ -97,21 +102,21 @@ const Icon = styled.span`
   width: 50px;
   background: no-repeat center/50% url(${playWhite}) transparent;
 
-  // Light-coloured video, black button, white icons
-  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && !isPlaying) && css`
+  // Black button, white icons
+  ${({ blackPlayButton, isPlaying }) => (blackPlayButton && !isPlaying) && css`
     background-image: url(${playWhite});
   `}
 
-  ${({ lightColouredVideo, isPlaying }) => (lightColouredVideo && isPlaying) && css`
+  ${({ blackPlayButton, isPlaying }) => (blackPlayButton && isPlaying) && css`
     background-image: url(${pauseWhite});
   `}
 
-  // Non-light coloured video, white button, black icons
-  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && !isPlaying) && css`
+  // White button, black icons
+  ${({ blackPlayButton, isPlaying }) => (!blackPlayButton && !isPlaying) && css`
     background-image: url(${playBlack});
   `}
 
-  ${({ lightColouredVideo, isPlaying }) => (!lightColouredVideo && isPlaying) && css`
+  ${({ blackPlayButton, isPlaying }) => (!blackPlayButton && isPlaying) && css`
     background-image: url(${pauseBlack});
   `}
 `;

package/src/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/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>
+```