@comicrelief/component-library 7.23.0 → 7.23.1

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

@@ -19,7 +19,7 @@ var MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.wi
 var Moneybuy = exports.Moneybuy = _styledComponents.default.div.withConfig({
   displayName: "ImpactMoneybuysstyle__Moneybuy",
   componentId: "sc-1lsmpzi-1"
-})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";;position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], function (props) {
+})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:10px;border:1px solid ", ";position:relative;flex-direction:row;align-items:center;justify-content:flex-start;opacity:1;", " @media ", "{width:70%;padding:8px 40px;}@media ", "{padding:20px 14px;flex-direction:column;width:18%;max-height:none;}"], function (props) {
   return props.theme.color('black');
 }, function (props) {
   return props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]);

package/dist/components/Organisms/ImpactSlider/ImpactSlider.js

@@ -22,6 +22,7 @@ var ImpactSlider = function ImpactSlider(_ref) {
     items = _ref.items,
     step = _ref.step,
     max = _ref.max,
+    backgroundColour = _ref.backgroundColour,
     opacityAnimation = _ref.opacityAnimation,
     children = _ref.children,
     defaultSliderValue = _ref.defaultSliderValue;
@@ -39,7 +40,9 @@ var ImpactSlider = function ImpactSlider(_ref) {
   var handleSubmit = function handleSubmit() {
     (0, _utils.default)(currentAmount, donateLink, cartID, rowID);
   };
-  return /*#__PURE__*/_react.default.createElement(_ImpactSlider.OuterWrapper, null, /*#__PURE__*/_react.default.createElement(_ImpactSlider.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  return /*#__PURE__*/_react.default.createElement(_ImpactSlider.OuterWrapper, {
+    backgroundColour: backgroundColour
+  }, /*#__PURE__*/_react.default.createElement(_ImpactSlider.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h1",
     family: "Anton",
     uppercase: true,
@@ -66,6 +69,7 @@ var ImpactSlider = function ImpactSlider(_ref) {
 };
 ImpactSlider.defaultProps = {
   opacityAnimation: false,
-  defaultSliderValue: null
+  defaultSliderValue: null,
+  backgroundColour: 'grey_extra_light'
 };
 var _default = exports.default = ImpactSlider;

package/dist/components/Organisms/ImpactSlider/ImpactSlider.md

@@ -34,6 +34,7 @@ import Text from '../../Atoms/Text/Text';
   step={5}
   max={100}
   defaultSliderValue={45}
+  backgroundColour="white"
   >
     <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.

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

@@ -12,7 +12,7 @@ var OuterWrapper = exports.OuterWrapper = _styledComponents.default.div.withConf
   displayName: "ImpactSliderstyle__OuterWrapper",
   componentId: "sc-1fpimol-0"
 })(["position:relative;margin:0 auto;max-width:100%;background-color:", ";padding:32px 16px;@media ", "{padding:50px;}@media ", "{padding:64px 0;}"], function (props) {
-  return props.theme.color('grey_extra_light');
+  return props.theme.color("".concat(props.backgroundColour));
 }, function (_ref) {
   var theme = _ref.theme;
   return theme.breakpoint('small');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.23.0",
+  "version": "7.23.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

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

@@ -23,7 +23,7 @@ const Moneybuy = styled.div`
     height: auto;
     background-color: white;
     border-radius: 10px;
-    border: 1px solid ${props => props.theme.color('black')};;
+    border: 1px solid ${props => props.theme.color('black')};
     position: relative;
     flex-direction: row;
     align-items: center;

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

@@ -10,8 +10,8 @@ import {
 } from './ImpactSlider.style';
 
 const ImpactSlider = ({
-  heading, cartID, donateLink, rowID, items, step,
-  max, opacityAnimation, children, defaultSliderValue
+  heading, cartID, donateLink, rowID, items, step, max,
+  backgroundColour, opacityAnimation, children, defaultSliderValue
 }) => {
   // Use the lowest possible amount as our default:
   const [currentAmount, setCurrentAmount] = useState(defaultSliderValue || step);
@@ -28,7 +28,7 @@ const ImpactSlider = ({
   };
 
   return (
-    <OuterWrapper>
+    <OuterWrapper backgroundColour={backgroundColour}>
       <InnerWrapper>
         <Text tag="h1" family="Anton" uppercase weight="normal" size="xl">{heading}</Text>
         <Copy>
@@ -67,7 +67,8 @@ const ImpactSlider = ({
 
 ImpactSlider.defaultProps = {
   opacityAnimation: false,
-  defaultSliderValue: null
+  defaultSliderValue: null,
+  backgroundColour: 'grey_extra_light'
 };
 
 ImpactSlider.propTypes = {
@@ -80,6 +81,7 @@ ImpactSlider.propTypes = {
   max: PropTypes.number.isRequired,
   defaultSliderValue: PropTypes.number,
   opacityAnimation: PropTypes.bool,
+  backgroundColour: PropTypes.string,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       poundsPerItem: PropTypes.number.isRequired,

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

@@ -34,6 +34,7 @@ import Text from '../../Atoms/Text/Text';
   step={5}
   max={100}
   defaultSliderValue={45}
+  backgroundColour="white"
   >
     <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.

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

@@ -6,7 +6,7 @@ const OuterWrapper = styled.div`
   position: relative;
   margin: 0 auto;
   max-width: 100%;
-  background-color: ${props => props.theme.color('grey_extra_light')};
+  background-color: ${props => props.theme.color(`${props.backgroundColour}`)};
   padding: 32px 16px;
 
   @media ${({ theme }) => theme.breakpoint('small')} {