@comicrelief/component-library 8.1.1 → 8.2.0

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

@@ -25,7 +25,7 @@ const MoneyBuyButton = styled(Input)`
     &:focus {
       border: none;
       outline: none;
-      box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+      box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
     }
     &:active:focus {
       box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
@@ -33,7 +33,7 @@ const MoneyBuyButton = styled(Input)`
 
     ${({ isSelected }) => isSelected
       && css`
-        background-color: ${({ theme }) => theme.color('blue')};
+        background-color: ${({ theme }) => theme.color('blue_donate')};
         box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
         color: ${({ theme }) => theme.color('white')};
         &:focus {
@@ -45,9 +45,9 @@ const MoneyBuyButton = styled(Input)`
 
 const MoneyBuy = ({
   setOtherAmount,
-  amount,
-  currency,
-  description,
+  amount = '10',
+  currency = '£',
+  description = 'description',
   ...rest
 }) => (
   <MoneyBuyButton
@@ -69,10 +69,4 @@ MoneyBuy.propTypes = {
   setOtherAmount: PropTypes.func.isRequired
 };
 
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
-
 export default MoneyBuy;

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

@@ -278,7 +278,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
   position: absolute;
   -webkit-transition: left 0.15s ease-out;
   transition: left 0.15s ease-out;
-  background-color: #0565D1;
+  background-color: #2042AD;
   left: 2px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
@@ -327,7 +327,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 }
 
 .c8 input:focus:not(:checked) + label {
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 .c10 {
@@ -366,7 +366,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 .c10:focus {
   border: none;
   outline: none;
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 .c9 {
@@ -405,7 +405,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
 .c9:focus {
   border: none;
   outline: none;
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 @media (min-width:740px) {
@@ -958,7 +958,7 @@ exports[`Monthly donation renders correctly 1`] = `
   position: absolute;
   -webkit-transition: left 0.15s ease-out;
   transition: left 0.15s ease-out;
-  background-color: #0565D1;
+  background-color: #2042AD;
   left: 2px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
 }
@@ -1007,7 +1007,7 @@ exports[`Monthly donation renders correctly 1`] = `
 }
 
 .c8 input:focus:not(:checked) + label {
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 .c9 {
@@ -1046,7 +1046,7 @@ exports[`Monthly donation renders correctly 1`] = `
 .c9:focus {
   border: none;
   outline: none;
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 @media (min-width:740px) {
@@ -1426,7 +1426,7 @@ exports[`Single donation renders correctly 1`] = `
 .c13 input:focus {
   border: none;
   outline: none;
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 .c13 input:active:focus {
@@ -1447,7 +1447,7 @@ exports[`Single donation renders correctly 1`] = `
   border-radius: 10px;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.15);
   height: auto;
-  background-color: #0565D1;
+  background-color: #2042AD;
   box-shadow: 0px 0px 16px rgba(0,0,0,0.3);
   color: #FFFFFF;
 }
@@ -1455,7 +1455,7 @@ exports[`Single donation renders correctly 1`] = `
 .c18 input:focus {
   border: none;
   outline: none;
-  box-shadow: inset 0 0 0 4px #0565D1;
+  box-shadow: inset 0 0 0 4px #2042AD;
 }
 
 .c18 input:active:focus {

package/src/components/Organisms/EmailSignUp/_EmailSignUp.js

@@ -22,10 +22,10 @@ const EmailSignUp = ({
   topCopy,
   successCopy,
   privacyCopy,
-  backgroundColour,
-  buttonColour,
+  backgroundColour = 'deep_violet_dark',
+  buttonColour = 'red',
   formContext,
-  columnLayout,
+  columnLayout = false,
   ...rest
 }) => {
   const {
@@ -126,10 +126,4 @@ EmailSignUp.propTypes = {
   columnLayout: PropTypes.bool
 };
 
-EmailSignUp.defaultProps = {
-  backgroundColour: 'deep_violet_dark',
-  buttonColour: 'red',
-  columnLayout: false
-};
-
 export { EmailSignUp, buildEsuValidationSchema, ESU_FIELDS };

package/src/components/Organisms/EmailSignUp/_TextInput.js

@@ -7,9 +7,9 @@ import Input from '../../Atoms/Input/Input';
 const TextInput = ({
   fieldName,
   label,
-  optional,
-  fieldType,
-  formContext,
+  optional = null,
+  fieldType = 'text',
+  formContext = null,
   ...rest
 }) => {
   const { formState: { errors }, register } = formContext;
@@ -28,12 +28,6 @@ const TextInput = ({
   return <Input {...props} {...register(fieldName)} />;
 };
 
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
-
 TextInput.propTypes = {
   fieldName: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,

package/src/components/Organisms/Footer/Footer.js

@@ -16,14 +16,14 @@ import {
 } from './Footer.style';
 
 const Footer = ({
-  navItems, footerCopy, campaign, additionalLegalLine, ...rest
+  navItems = {}, footerCopy = '', campaign = 'Comic Relief', additionalLegalLine = '', overrideallowList = false, ...rest
 }) => {
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
 
   return (
     <div>
-      <FooterWrapper navItems {...rest}>
+      <FooterWrapper overrideallowList={overrideallowList} navItems {...rest}>
         <InnerWrapper>
           {additionalLegalLine
             && <FooterLegalLine tag="p" color="grey">{additionalLegalLine}</FooterLegalLine>
@@ -56,12 +56,4 @@ Footer.propTypes = {
   additionalLegalLine: PropTypes.string
 };
 
-Footer.defaultProps = {
-  navItems: {},
-  footerCopy: '',
-  campaign: 'Comic Relief',
-  overrideallowList: false,
-  additionalLegalLine: ''
-};
-
 export default Footer;

package/src/components/Organisms/Footer/Nav/Nav.js

@@ -16,7 +16,7 @@ import {
   SubNavLink
 } from './Nav.style';
 
-const FooterNav = ({ navItems, ...rest }) => {
+const FooterNav = ({ navItems = {}, ...rest }) => {
   const { menuGroups } = navItems;
   const [isExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -123,8 +123,4 @@ FooterNav.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape)
 };
 
-FooterNav.defaultProps = {
-  navItems: {}
-};
-
 export default FooterNav;

package/src/components/Organisms/Header/Header.js

@@ -8,7 +8,7 @@ import {
 } from './Header.style';
 
 const Header = ({
-  navItems, metaIcons, campaign, ...rest
+  navItems = {}, metaIcons, campaign = 'Comic Relief', ...rest
 }) => (
   <HeaderWrapper navItems {...rest}>
     <InnerWrapper>
@@ -29,9 +29,4 @@ Header.propTypes = {
   campaign: PropTypes.string
 };
 
-Header.defaultProps = {
-  navItems: {},
-  campaign: 'Comic Relief'
-};
-
 export default Header;

package/src/components/Organisms/Header/Nav/Nav.js

@@ -21,7 +21,7 @@ import {
   ChevronWrapper
 } from './Nav.style';
 
-const MainNav = ({ navItems }) => {
+const MainNav = ({ navItems = {} }) => {
   const { menuGroups } = navItems;
   const [isExpandable, setIsExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -180,8 +180,4 @@ MainNav.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape)
 };
 
-MainNav.defaultProps = {
-  navItems: {}
-};
-
 export default MainNav;

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

@@ -11,7 +11,7 @@ import {
 
 const ImpactSlider = ({
   heading, cartID, donateLink, rowID, items, step, max,
-  backgroundColour, opacityAnimation, children, defaultSliderValue
+  backgroundColour = 'grey_extra_light', opacityAnimation = false, children, defaultSliderValue = null
 }) => {
   // Use the lowest possible amount as our default:
   const [currentAmount, setCurrentAmount] = useState(defaultSliderValue || step);
@@ -65,12 +65,6 @@ const ImpactSlider = ({
   );
 };
 
-ImpactSlider.defaultProps = {
-  opacityAnimation: false,
-  defaultSliderValue: null,
-  backgroundColour: 'grey_extra_light'
-};
-
 ImpactSlider.propTypes = {
   heading: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,

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

@@ -9,7 +9,7 @@ import {
 } from './MarketingPreferencesDS.style';
 
 const CheckAnswer = ({
-  name, mpValidationOptions, userSelection, formContext
+  name, mpValidationOptions, userSelection = null, formContext = null
 }) => {
   const { setValue, clearErrors, register } = formContext;
 
@@ -63,11 +63,6 @@ const CheckAnswer = ({
   );
 };
 
-CheckAnswer.defaultProps = {
-  userSelection: null,
-  formContext: null
-};
-
 CheckAnswer.propTypes = {
   name: PropTypes.string.isRequired,
   /* These options are created in _MarketingPrefsConfig.js, passed to react-hook-form

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

@@ -15,11 +15,11 @@ import {
 } from './_MarketingPrefsConfig';
 
 const MarketingPreferencesDS = ({
-  copyTop,
-  copyBottom,
+  copyTop = defaultCopyTop,
+  copyBottom = defaultCopyBottom,
   mpValidationOptions,
-  id,
-  formContext
+  id = null,
+  formContext = null
 }) => {
   const { formState: { errors }, control } = formContext;
 
@@ -241,7 +241,7 @@ const MarketingPreferencesDS = ({
 };
 
 // removes from DOM completely
-const MaybeDisabled = ({ children, disabled }) => {
+const MaybeDisabled = ({ children = null, disabled = false }) => {
   if (disabled) return null;
   return children;
 };
@@ -256,23 +256,11 @@ MarketingPreferencesDS.propTypes = {
   formContext: PropTypes.shape()
 };
 
-MarketingPreferencesDS.defaultProps = {
-  copyTop: defaultCopyTop,
-  copyBottom: defaultCopyBottom,
-  id: null,
-  formContext: null
-};
-
 MaybeDisabled.propTypes = {
   children: PropTypes.node,
   disabled: PropTypes.bool
 };
 
-MaybeDisabled.defaultProps = {
-  children: null,
-  disabled: false
-};
-
 export {
   MarketingPreferencesDS, setInitialValues, buildValidationSchema
 };

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

@@ -4,7 +4,7 @@ import Input from '../../Atoms/Input/Input';
 
 const TextInput = ({
   fieldName, label,
-  optional, fieldType, formContext, ...rest
+  optional = null, fieldType = 'text', formContext = null, ...rest
 }) => {
   const { formState: { errors }, register } = formContext;
 
@@ -23,12 +23,6 @@ const TextInput = ({
   return <Input {...props} {...register(fieldName)} />;
 };
 
-TextInput.defaultProps = {
-  optional: null,
-  fieldType: 'text',
-  formContext: null
-};
-
 TextInput.propTypes = {
   fieldName: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,

package/src/components/Organisms/Membership/Form/Form.js

@@ -27,7 +27,7 @@ const Signup = ({
   data: { regularGiving },
   donateLink,
   otherDescription,
-  clientID,
+  clientID = 'the_fix',
   cartID,
   mbshipID,
   ...rest
@@ -204,8 +204,4 @@ Signup.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape)
 };
 
-Signup.defaultProps = {
-  clientID: 'the_fix',
-  data: {}
-};
 export default Signup;

package/src/components/Organisms/Membership/Membership.js

@@ -8,19 +8,19 @@ import {
 } from './Membership.style';
 
 const Membership = ({
-  alt,
+  alt = '',
+  data = {},
+  formAligntRight = true,
+  imageLow = null,
+  image = null,
+  images = null,
+  backgroundColor = null,
+  mbshipID = null,
   cartID,
-  backgroundColor,
   donateLink,
-  data,
   title,
   subtitle,
-  otherDescription,
-  formAligntRight,
-  images,
-  image,
-  imageLow,
-  mbshipID
+  otherDescription
 }) => (
   <Container
     formAligntRight={formAligntRight}
@@ -72,14 +72,4 @@ Membership.propTypes = {
   mbshipID: PropTypes.string
 };
 
-Membership.defaultProps = {
-  alt: '',
-  data: {},
-  formAligntRight: true,
-  imageLow: null,
-  image: null,
-  images: null,
-  backgroundColor: null,
-  mbshipID: null
-};
 export default Membership;

package/src/components/Organisms/Membership/MoneyBox/MoneyBox.js

@@ -24,9 +24,9 @@ const MoneyBox = styled(Input)`
 
 const MoneyBuy = ({
   setOtherAmount,
-  amount,
-  currency,
-  description,
+  amount = '10',
+  currency = '£',
+  description = 'description',
   ...rest
 }) => (
   <MoneyBox
@@ -48,10 +48,4 @@ MoneyBuy.propTypes = {
   setOtherAmount: PropTypes.func.isRequired
 };
 
-MoneyBuy.defaultProps = {
-  amount: '10',
-  currency: '£',
-  description: 'description'
-};
-
 export default MoneyBuy;