@comicrelief/component-library 7.22.1 → 7.23.0

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
+};