@comicrelief/component-library 8.34.4 → 8.34.5

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

@@ -127,7 +127,7 @@ const Error = exports.Error = (0, _styledComponents.default)(_Text.default).with
 const Form = exports.Form = _styledComponents.default.form.withConfig({
   displayName: "Donatestyle__Form",
   componentId: "sc-8rjm3t-8"
-})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref16 => {
+})(["position:relative;width:100%;background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:0.5rem;margin-top:", ";h3{margin-top:", ";}input{max-width:100%;margin:0;}input[type='submit']{margin:", " 0;}@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], _ref16 => {
   let {
     theme
   } = _ref16;
@@ -176,7 +176,7 @@ const Label = exports.Label = (0, _styledComponents.default)(_Text.default).with
 const AmountField = exports.AmountField = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "Donatestyle__AmountField",
   componentId: "sc-8rjm3t-14"
-})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;@media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:10px;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], _ref21 => {
+})(["position:relative;flex-basis:50%;flex-shrink:0;flex-grow:0;font-weight:400;display:block;@media ", "{flex-basis:60%;}span{position:absolute;font-size:20px;top:50%;transform:translateY(-50%);left:0px;font-weight:500;padding:0px 15px;", ";}input{height:48px;border:2px solid ", ";background:", ";border-radius:0.5rem;padding:", " ", " ", " ", ";&:focus{outline:none;border:2px solid ", ";}}"], _ref21 => {
   let {
     theme
   } = _ref21;

package/dist/components/Organisms/Donate/Form/PopUpComponent.js

@@ -16,7 +16,7 @@ const fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;
 const StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
-})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
+})(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:0.5rem;@media ", "{width:450px;margin-right:auto;margin-left:auto;}"], props => props.fadeOpen, props => props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, props.fadeClose), _ref => {
   let {
     theme
   } = _ref;

package/dist/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -13,7 +13,7 @@ var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"
 const MoneyBuyButton = (0, _styledComponents.default)(_Input.default).withConfig({
   displayName: "MoneyBuy__MoneyBuyButton",
   componentId: "sc-38g5hn-0"
-})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:10px;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;@media ", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
+})(["display:block;input{border:none;background-color:", ";color:", ";font-size:", ";font-family:", ";font-weight:normal;border-radius:0.5rem;padding:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);height:auto;@media ", "{font-size:", ";padding:", ";}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&:active:focus{box-shadow:0px 0px 16px rgba(0,0,0,0.3);}", "}"], _ref => {
   let {
     theme
   } = _ref;

package/dist/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -164,7 +164,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -246,7 +246,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -863,7 +863,7 @@ exports[`Monthly donation renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -949,7 +949,7 @@ exports[`Monthly donation renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -1481,7 +1481,7 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.5rem;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
 }
@@ -1507,7 +1507,7 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.5rem;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
   background-color: #2042AD;
@@ -1588,7 +1588,7 @@ exports[`Single donation renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -1701,7 +1701,7 @@ exports[`Single donation renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -2281,7 +2281,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -2363,7 +2363,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 

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

@@ -20,7 +20,7 @@ const MoneybuyWrapper = exports.MoneybuyWrapper = _styledComponents.default.div.
 const 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;}"], props => props.theme.color('black'), props => props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]), _ref2 => {
+})(["display:inherit;width:100%;padding:8px 20px;height:auto;background-color:white;border-radius:0.5rem;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;}"], props => props.theme.color('black'), props => props.isInactive && (0, _styledComponents.css)(["opacity:0.5;"]), _ref2 => {
   let {
     theme
   } = _ref2;

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

@@ -13,7 +13,7 @@ const sizeMultiplier = 1.4;
 const StyledRangerSlider = exports.StyledRangerSlider = (0, _styledComponents.default)(_reactRangeSliderInput.default).withConfig({
   displayName: "Sliderstyle__StyledRangerSlider",
   componentId: "sc-pyds3x-0"
-})(["background:white;height:16px;border-radius:16px;border:1px solid ", ";.range-slider__range{height:14px;border-radius:10px;background-color:", ";z-index:2;}.range-slider__thumb[data-upper]{&:after{background-color:white;width:", "px;height:", "px;content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:50%;border:", "px solid ", ";transition-property:width,height,border-width;transition-duration:0.15s;}&:hover{&:after{width:", "px;height:", "px;border-width:", "px;}}}.range-slider__thumb[data-lower]{width:0;}"], props => props.theme.color('black'), props => props.theme.color('red'), thumbSize, thumbSize, outlineSize, props => props.theme.color('red'), thumbSize * sizeMultiplier, thumbSize * sizeMultiplier, outlineSize);
+})(["background:white;height:16px;border-radius:1rem;border:1px solid ", ";.range-slider__range{height:14px;border-radius:0.5rem;background-color:", ";z-index:2;}.range-slider__thumb[data-upper]{&:after{background-color:white;width:", "px;height:", "px;content:\"\";position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;border-radius:50%;border:", "px solid ", ";transition-property:width,height,border-width;transition-duration:0.15s;}&:hover{&:after{width:", "px;height:", "px;border-width:", "px;}}}.range-slider__thumb[data-lower]{width:0;}"], props => props.theme.color('black'), props => props.theme.color('red'), thumbSize, thumbSize, outlineSize, props => props.theme.color('red'), thumbSize * sizeMultiplier, thumbSize * sizeMultiplier, outlineSize);
 const SliderWrapper = exports.SliderWrapper = _styledComponents.default.div.withConfig({
   displayName: "Sliderstyle__SliderWrapper",
   componentId: "sc-pyds3x-1"

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

@@ -51,7 +51,7 @@ const FormField = exports.FormField = _styledComponents.default.div.withConfig({
     theme,
     isError
   } = _ref2;
-  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";background-color:", ";transition:background-color 0.3s,color 0.3s;border-radius:10px;border:1px solid ", ";&.selected{background-color:", ";&:hover{background-color:", ";border-color:", ";}span.icon-mp_permissionEmail{background-image:url(", ");}span.icon-mp_permissionPhone{background-image:url(", ");}span.icon-mp_permissionPost{background-image:url(", ");}span.icon-mp_permissionSMS{background-image:url(", ");}> div{label,> span{color:", ";}}}label{position:relative;margin-bottom:0;width:100%;color:", ";font-weight:600;display:flex;justify-content:space-between;}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), theme.color('grey_light'), theme.color('grey'), isError ? theme.color('red') : theme.color('blue_donate'), isError ? theme.color('red_dark') : theme.color('blue_donate'), theme.color('grey_4'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
+  return (0, _styledComponents.css)(["position:relative;margin-bottom:", ";width:100%;display:flex;flex-direction:column;padding:", ";background-color:", ";transition:background-color 0.3s,color 0.3s;border-radius:0.5rem;border:1px solid ", ";&.selected{background-color:", ";&:hover{background-color:", ";border-color:", ";}span.icon-mp_permissionEmail{background-image:url(", ");}span.icon-mp_permissionPhone{background-image:url(", ");}span.icon-mp_permissionPost{background-image:url(", ");}span.icon-mp_permissionSMS{background-image:url(", ");}> div{label,> span{color:", ";}}}label{position:relative;margin-bottom:0;width:100%;color:", ";font-weight:600;display:flex;justify-content:space-between;}h3{position:relative;margin-bottom:", ";&:before{position:absolute;top:0;left:0;width:24px;height:24px;content:'';}}"], (0, _spacing.default)('md'), (0, _spacing.default)('m'), theme.color('grey_light'), theme.color('grey'), isError ? theme.color('red') : theme.color('blue_donate'), isError ? theme.color('red_dark') : theme.color('blue_donate'), theme.color('grey_4'), _EmailWhite.default, _PhoneWhite.default, _PostWhite.default, _TextWhite.default, theme.color('white'), theme.color('black'), (0, _spacing.default)('md'));
 });
 const CheckContainer = exports.CheckContainer = _styledComponents.default.div.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckContainer",
@@ -74,7 +74,7 @@ const CheckLabel = exports.CheckLabel = _styledComponents.default.label.withConf
 const CheckInput = exports.CheckInput = _styledComponents.default.input.withConfig({
   displayName: "MarketingPreferencesDSstyle__CheckInput",
   componentId: "sc-68n85q-8"
-})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:8px;}:checked + span{background:url(", ") no-repeat center ", ";background-size:contain;}"], _ref5 => {
+})(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;width:100%;height:100%;left:0;top:0;margin:0;border:1px solid ", ";+ span{width:30px;height:30px;background-color:", ";border:1px solid ", ";float:left;border-radius:0.5rem;}:checked + span{background:url(", ") no-repeat center ", ";background-size:contain;}"], _ref5 => {
   let {
     theme
   } = _ref5;

package/dist/theme/crTheme/Colors.md

@@ -23,7 +23,7 @@ const Item = styled.div`
   div {
     width: 160px;
     height: 160px;
-    border-radius: 10px;
+    border-radius: 0.5rem;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     justify-content: flex-end;
   }

package/package.json

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

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

@@ -102,7 +102,7 @@ const Form = styled.form`
   width: 100%;
   background-color: ${({ theme }) => theme.color('white')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: ${spacing('md')};
 
   h3 {
@@ -202,7 +202,7 @@ const AmountField = styled(Input)`
     height: 48px;
     border: 2px solid ${({ theme }) => theme.color('grey')};
     background: ${({ theme }) => theme.color('grey_light')};
-    border-radius: 10px;
+    border-radius: 0.5rem;
     padding: ${spacing('sm')} ${spacing('md')} ${spacing('sm')} ${spacing('l')};
     &:focus {
       outline: none;

package/src/components/Organisms/Donate/Form/PopUpComponent.js

@@ -43,7 +43,7 @@ const StyledPopUp = styled.div`
   `}
   background-color: ${({ theme }) => theme.color('blue_light')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
 
   @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 450px;

package/src/components/Organisms/Donate/MoneyBuy/MoneyBuy.js

@@ -14,7 +14,7 @@ const MoneyBuyButton = styled(Input)`
     font-size: ${({ theme }) => theme.fontSize('l')};
     font-family: ${({ theme }) => theme.fontFamilies('Anton')};
     font-weight: normal;
-    border-radius: 10px;
+    border-radius: 0.5rem;
     padding: ${spacing('s')};
     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
     height: auto;

package/src/components/Organisms/Donate/__snapshots__/Donate.test.js.snap

@@ -164,7 +164,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -246,7 +246,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -863,7 +863,7 @@ exports[`Monthly donation renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -949,7 +949,7 @@ exports[`Monthly donation renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -1481,7 +1481,7 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.5rem;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
 }
@@ -1507,7 +1507,7 @@ exports[`Single donation renders correctly 1`] = `
   font-size: 1.5rem;
   font-family: 'Anton',Impact,sans-serif;
   font-weight: normal;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
   background-color: #2042AD;
@@ -1588,7 +1588,7 @@ exports[`Single donation renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -1701,7 +1701,7 @@ exports[`Single donation renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 
@@ -2281,7 +2281,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   width: 100%;
   background-color: #FFFFFF;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
-  border-radius: 10px;
+  border-radius: 0.5rem;
   margin-top: 1rem;
 }
 
@@ -2363,7 +2363,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
   height: 48px;
   border: 2px solid #969598;
   background: #F4F3F5;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 2rem;
 }
 

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

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

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

@@ -8,12 +8,12 @@ const sizeMultiplier = 1.4;
 const StyledRangerSlider = styled(RangeSlider)`
     background: white;
     height: 16px;
-    border-radius: 16px;
+    border-radius: 1rem;
     border: 1px solid ${props => props.theme.color('black')};
 
     .range-slider__range {
         height: 14px;
-        border-radius: 10px;
+        border-radius: 0.5rem;
         background-color: ${props => props.theme.color('red')};
         z-index: 2;
     }

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

@@ -84,7 +84,7 @@ const FormField = styled.div`${({ theme, isError }) => css`
   padding: ${spacing('m')};
   background-color: ${theme.color('grey_light')};
   transition: background-color 0.3s, color 0.3s;
-  border-radius: 10px;
+  border-radius: 0.5rem;
   border: 1px solid ${theme.color('grey')};
 
   &.selected {
@@ -179,7 +179,7 @@ const CheckInput = styled.input`
     background-color: ${({ theme }) => theme.color('white')};
     border: 1px solid ${({ theme }) => theme.color('grey')};
     float: left;
-    border-radius: 8px;
+    border-radius: 0.5rem;
   }
   :checked + span {
     background: url(${checkBoxIcon}) no-repeat center ${({ theme }) => theme.color('white')};

package/src/theme/crTheme/Colors.md

@@ -23,7 +23,7 @@ const Item = styled.div`
   div {
     width: 160px;
     height: 160px;
-    border-radius: 10px;
+    border-radius: 0.5rem;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     justify-content: flex-end;
   }