feat: Impact Slider padding options (#865)

Author: AndyEPhipps

src/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -11,7 +11,8 @@ import {
 
 const ImpactSlider = ({
   heading, cartID, donateLink, rowID, items, step, max,
-  backgroundColour = 'grey_light', opacityAnimation = false, children, defaultSliderValue = null
+  backgroundColour = 'grey_light', opacityAnimation = false, children,
+  defaultSliderValue = null, paddingTop = '2rem', paddingBottom = '2rem'
 }) => {
   // Use the lowest possible amount as our default:
   const [currentAmount, setCurrentAmount] = useState(defaultSliderValue || step);
@@ -28,7 +29,12 @@ const ImpactSlider = ({
   };
 
   return (
-    <OuterWrapper backgroundColour={backgroundColour} id={rowID}>
+    <OuterWrapper
+      backgroundColour={backgroundColour}
+      id={rowID}
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+    >
       <InnerWrapper>
         <Text tag="h1" family="Anton" weight="normal" size="xl">{heading}</Text>
         <Copy>
@@ -82,6 +88,8 @@ ImpactSlider.propTypes = {
   defaultSliderValue: PropTypes.number,
   opacityAnimation: PropTypes.bool,
   backgroundColour: PropTypes.string,
+  paddingTop: PropTypes.string,
+  paddingBottom: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       poundsPerItem: PropTypes.number.isRequired,

src/components/Organisms/ImpactSlider/ImpactSlider.md

@@ -1,4 +1,4 @@
-# Impact Slider (w/opacity animation)
+# Impact Slider (w/opacity animation & default padding options)
 
 ```js
 const { testImpactSliderItems} = require('../../../styleguide/data/data');
@@ -20,7 +20,7 @@ import Text from '../../Atoms/Text/Text';
   </ImpactSlider>
 ```
 
-# Impact Slider (w/o opacity animation, w/default value)
+# Impact Slider (w/o opacity animation, w/default value & custom padding options)
 ```js
 const { testImpactSliderItems} = require('../../../styleguide/data/data');
 import Text from '../../Atoms/Text/Text';
@@ -35,6 +35,8 @@ import Text from '../../Atoms/Text/Text';
   max={100}
   defaultSliderValue={45}
   backgroundColour="white"
+  paddingTop="6rem"
+  paddingBottom="6rem"
   >
     <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.

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

@@ -1,19 +1,12 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import Text from '../../Atoms/Text/Text';
 import Button from '../../Atoms/Button/Button';
 
 const OuterWrapper = styled.div`
   position: relative;
   max-width: 100%;
   background-color: ${props => props.theme.color(`${props.backgroundColour}`)};
-  padding: 32px 16px;
-
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    padding: 50px;
-  }
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    padding: 64px 0;
-  }
+  ${({ paddingTop, paddingBottom }) => css`padding: ${paddingTop} 2rem ${paddingBottom};`}
 `;
 
 const InnerWrapper = styled.div`