@comicrelief/component-library 7.22.0 → 7.23.0

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;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import 'react-range-slider-input/dist/style.css';
+
+import {
+  StyledRangerSlider, SliderWrapper, SliderLabel
+} from './Slider.style';
+
+const Slider = ({
+  min, max, currentAmount, handleChange, steps
+}) => (
+  <SliderWrapper>
+    <SliderLabel htmlFor="ImpactSlider">
+      Slider label to be hidden
+    </SliderLabel>
+    <StyledRangerSlider
+      id="ImpactSlider"
+      name="ImpactSlider"
+      min={min}
+      max={max}
+      width="100%"
+      value={[0, currentAmount]}
+      onInput={handleChange}
+      step={steps}
+      thumbsDisabled={[true, false]}
+      rangeSlideDisabled
+    />
+  </SliderWrapper>
+);
+
+Slider.propTypes = {
+  min: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  steps: PropTypes.number.isRequired,
+  currentAmount: PropTypes.number.isRequired,
+  handleChange: PropTypes.func.isRequired
+};
+
+export default Slider;

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

@@ -0,0 +1,32 @@
+const getUrlParameter = name => {
+  const text = name.replace(/\[]/, '\\[').replace(/[\]]/, '\\]');
+  const regex = new RegExp(`[\\?&]${text}=([^&#]*)`);
+  const results = regex.exec(window.location.search);
+  const param = results === null
+    ? 'generic'
+    : decodeURIComponent(results[1].replace(/\+/g, ' '));
+  return param;
+};
+
+const handleSubmission = (amount, donateLink, cartID, rowID) => {
+  let currentpageUrl = window.location.href;
+
+  const affiliateValue = getUrlParameter(currentpageUrl);
+
+  const reg = /[#?|[\]\\]/g;
+
+  if (currentpageUrl.match(reg) !== null) {
+    const thisMatch = currentpageUrl.match(reg)[0];
+    currentpageUrl = currentpageUrl.substring(0, currentpageUrl.indexOf(thisMatch));
+  }
+
+  // - Q: do we need client IDs? A: 99% of examples just use 'donate' (or 'test' for staging)
+  //
+  // - I guess we still need rowID for the back-browsing scroll stuff?
+  // - TO-DO: add in said scroll stuff
+  const forwardingUrl = `${donateLink}/?cartID=${cartID}&amount=${amount}&clientOverride=donate&currency=GBP&givingType=single&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${rowID}`;
+
+  window.location.href = forwardingUrl;
+};
+
+export default handleSubmission;

package/src/index.js

@@ -74,3 +74,4 @@ export {
   setInitialValues,
   buildValidationSchema
 } from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
+export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';

package/src/styleguide/data/data.js

@@ -26,4 +26,29 @@ const mobileImages = {
     '//https://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1440&h=1080&q=50 1440w'
 };
 
-export { defaultData, mobileImages };
+const testImpactSliderItems = [
+  {
+    poundsPerItem: 1,
+    description: 'Fresh water pumps',
+    imageURL: 'https://images.ctfassets.net/zsfivwzfgl3t/28sKInxW6EsmvOTahWdm8E/3fb8e1488f95bac6a3087b133ae7ce9f/ImpactSliderMoneybuy1.png'
+  },
+  {
+    poundsPerItem: 10,
+    description: 'Food Sachets',
+    imageURL: 'https://images.ctfassets.net/zsfivwzfgl3t/lzxmQMII5PElb4G40vFfk/988486dedd9e45e7cf78cda6f6d0aeaf/ImpactSliderMoneybuy2.png'
+  },
+  {
+    poundsPerItem: 15,
+    description: 'Midwife birthing kits',
+    imageURL: 'https://images.ctfassets.net/zsfivwzfgl3t/53ZeFXhjdpGpAvRRL4v2kI/d70d1cbf3b46bc28703fabb4ec60fef6/ImpactSliderMoneybuy3.png'
+  },
+  {
+    poundsPerItem: 20,
+    description: 'School in a bag kit',
+    imageURL: 'https://images.ctfassets.net/zsfivwzfgl3t/PPIJtSArW4wYy1CXvRGk9/c9de72766db42a0e158889a140c90445/ImpactSliderMoneybuy4.png'
+  }
+];
+
+export {
+  defaultData, mobileImages, testImpactSliderItems
+};