@comicrelief/component-library 8.1.1 → 8.2.0

package/src/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -20,10 +20,10 @@ const optionParser = school => `${school.name}, ${school.post_code}`;
 const SchoolLookup = React.forwardRef(
   (
     {
-      label,
-      placeholder,
-      notFoundMessage,
-      dropdownInstruction,
+      label = 'Enter the name or postcode of your school or nursery',
+      placeholder = 'Type to start search',
+      dropdownInstruction = 'Please select a school from the list below',
+      notFoundMessage = "Sorry, we can't find this school",
       onSelect,
       ...rest
     },
@@ -55,11 +55,4 @@ SchoolLookup.propTypes = {
   notFoundMessage: PropTypes.string
 };
 
-SchoolLookup.defaultProps = {
-  label: 'Enter the name or postcode of your school or nursery',
-  placeholder: 'Type to start search',
-  dropdownInstruction: 'Please select a school from the list below',
-  notFoundMessage: "Sorry, we can't find this school"
-};
-
 export default SchoolLookup;

package/src/components/Molecules/SearchInput/SearchInput.js

@@ -10,7 +10,7 @@ import {
 } from './SearchInput.style';
 
 const SearchInput = ({
-  onChange, placeholder, value, ...rest
+  onChange, placeholder = '', value, ...rest
 }) => (
   <Wrapper>
     <InnerWrapper>
@@ -41,8 +41,4 @@ SearchInput.propTypes = {
   value: PropTypes.string.isRequired
 };
 
-SearchInput.defaultProps = {
-  placeholder: ''
-};
-
 export default SearchInput;

package/src/components/Molecules/SearchResult/SearchResult.js

@@ -59,16 +59,16 @@ const Title = styled(Text)`
  * Search Result component
  */
 const SearchResult = ({
+  imageLow = null,
+  images = null,
+  type = '',
+  date = '',
+  copy = '',
+  smallImageWidth = '45%',
+  largeImageWidth = '100%',
   href,
-  date,
   title,
-  copy,
-  type,
-  imageLow,
-  images,
-  alt,
-  smallImageWidth,
-  largeImageWidth
+  alt
 }) => (
   <Wrapper>
     <Item href={href} type="standard">
@@ -122,14 +122,4 @@ SearchResult.propTypes = {
   imageLow: PropTypes.string
 };
 
-SearchResult.defaultProps = {
-  imageLow: null,
-  images: null,
-  type: '',
-  date: '',
-  copy: '',
-  smallImageWidth: '45%',
-  largeImageWidth: '100%'
-};
-
 export default SearchResult;

package/src/components/Molecules/ShareButton/ShareButton.js

@@ -27,7 +27,7 @@ const handleShare = (e, typeOfShare, urlToShare) => {
 
 /* Share Button component to handle FB and Twitter sharing */
 const ShareButton = ({
-  campaign, copy, urlToShare, ...restProps
+  campaign = 'comicrelief', copy = 'Share with:', urlToShare = null, ...restProps
 }) => {
   let checkedUrl = '';
 
@@ -70,10 +70,4 @@ ShareButton.propTypes = {
   urlToShare: PropTypes.string
 };
 
-ShareButton.defaultProps = {
-  campaign: 'comicrelief',
-  copy: 'Share with:',
-  urlToShare: null
-};
-
 export default ShareButton;

package/src/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -41,7 +41,10 @@ const schoolToString = school => `${school.name}, ${school.post_code}`;
  * @returns {JSX.Element}
  * @constructor
  */
-const SimpleSchoolLookup = ({ onSelect, noResultsMessage, ...rest }) => (
+const SimpleSchoolLookup = ({
+  onSelect, noResultsMessage = 'Sorry, we could not find anything matching your search; please use the manual entry option.',
+  ...rest
+}) => (
   <Lookup
     name="school_lookup"
     label="Enter the name or postcode of your organisation"
@@ -56,10 +59,6 @@ const SimpleSchoolLookup = ({ onSelect, noResultsMessage, ...rest }) => (
   />
 );
 
-SimpleSchoolLookup.defaultProps = {
-  noResultsMessage: 'Sorry, we could not find anything matching your search; please use the manual entry option.'
-};
-
 SimpleSchoolLookup.propTypes = {
   onSelect: PropTypes.func.isRequired,
   noResultsMessage: PropTypes.string

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -17,21 +17,21 @@ const allPlayers = {};
 
 /* Single Message is our main component usually to build landing pages */
 const SingleMessage = ({
-  backgroundColor,
-  copyFirst,
-  imageLow,
-  imageSet,
-  image,
-  imageSet2,
-  image2,
-  imageAltText,
-  imageAltText2,
-  children,
-  fullImage,
-  vhFull,
-  videoID,
-  landscapeVideo,
-  paddingOption
+  backgroundColor = 'white',
+  copyFirst = false,
+  fullImage = false,
+  imageSet = null,
+  imageLow = null,
+  image = null,
+  imageSet2 = null,
+  image2 = null,
+  imageAltText = '',
+  imageAltText2 = '',
+  children = null,
+  vhFull = false,
+  videoID = null,
+  landscapeVideo = false,
+  paddingOption = null
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -240,22 +240,4 @@ SingleMessage.propTypes = {
   paddingOption: PropTypes.string
 };
 
-SingleMessage.defaultProps = {
-  backgroundColor: 'white',
-  copyFirst: false,
-  fullImage: false,
-  imageSet: null,
-  imageLow: null,
-  image: null,
-  imageSet2: null,
-  image2: null,
-  imageAltText: '',
-  imageAltText2: '',
-  children: null,
-  vhFull: false,
-  videoID: null,
-  landscapeVideo: false,
-  paddingOption: null
-};
-
 export default SingleMessage;

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -11,22 +11,22 @@ import {
 import playImage from './assets/play.png';
 
 const SingleMessageDs = ({
-  backgroundColor,
+  backgroundColor = 'white',
+  imageLow = null,
+  images = null,
+  image = null,
+  link = null,
+  ctaBgColor = 'red',
+  linkLabel = null,
+  target = null,
+  imageAltText = '',
+  width = '100%',
+  height = '100%',
+  linkIcon = null,
+  youTubeId = null,
   imageLeft,
-  imageLow,
-  images,
-  image,
-  imageAltText,
-  height,
-  width,
   subtitle,
   children,
-  link,
-  linkLabel,
-  ctaBgColor,
-  target,
-  linkIcon,
-  youTubeId,
   ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -192,20 +192,4 @@ SingleMessageDs.propTypes = {
   youTubeId: PropTypes.string
 };
 
-SingleMessageDs.defaultProps = {
-  backgroundColor: 'white',
-  imageLow: null,
-  images: null,
-  image: null,
-  link: null,
-  ctaBgColor: 'red',
-  linkLabel: null,
-  target: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  linkIcon: null,
-  youTubeId: null
-};
-
 export default SingleMessageDs;

package/src/components/Molecules/Typeahead/Typeahead.js

@@ -12,14 +12,14 @@ const Typeahead = React.forwardRef(
   (
     {
       optionFetcher,
-      optionParser,
+      optionParser = null,
       onSelect,
       id,
       label,
       name,
-      dropdownInstruction,
+      dropdownInstruction = null,
       notFoundMessage,
-      fetchErrorHandler,
+      fetchErrorHandler = () => 'Sorry, there was an unexpected error. Please try again',
       ...rest
     },
     ref
@@ -113,10 +113,4 @@ Typeahead.propTypes = {
   dropdownInstruction: PropTypes.string
 };
 
-Typeahead.defaultProps = {
-  dropdownInstruction: null,
-  optionParser: null,
-  fetchErrorHandler: () => 'Sorry, there was an unexpected error. Please try again'
-};
-
 export default Typeahead;

package/src/components/Molecules/VideoBanner/VideoBanner.js

@@ -10,7 +10,13 @@ const Video = styled.video.attrs(() => ({
 `;
 
 const VideoBanner = ({
-  video, poster, controls, autoPlay, loop, muted, showPosterAfterPlaying
+  video,
+  poster,
+  controls = false,
+  autoPlay = true,
+  loop = false,
+  muted = true,
+  showPosterAfterPlaying = true
 }) => {
   // Use the prop as our default
   const [isMuted, setIsMuted] = useState(muted);
@@ -53,14 +59,6 @@ const VideoBanner = ({
   );
 };
 
-VideoBanner.defaultProps = {
-  showPosterAfterPlaying: true,
-  controls: false,
-  autoPlay: true,
-  loop: false,
-  muted: true
-};
-
 VideoBanner.propTypes = {
   showPosterAfterPlaying: PropTypes.bool,
   video: PropTypes.string.isRequired,

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

@@ -17,41 +17,41 @@ import {
 } from './Donate.style';
 
 const Donate = ({
-  alt,
+  alt = '',
+  data = {},
+  formAlignRight = true,
+  imageLow = null,
+  image = null,
+  images = null,
+  mobileImageLow = null,
+  mobileImage = null,
+  mobileImages = null,
+  mobileAlt = '',
+  desktopOverlayColor = 'transparent',
+  mobileBackgroundColor = 'blue_dark',
+  submitButtonColor = 'red',
+  textColor = 'white',
+  mbshipID = null,
+  otherAmountText =
+  'will help us fund amazing projects in the UK and around the world.',
+  subtitle = '',
+  noMoneyBuys = false,
+  PopUpText = 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
+  chooseAmountText = '',
+  isDesktopOverride = null,
+  otherAmountValue = null,
+  title = null,
+  additionalSingleCopy = null,
+  additionalMonthlyCopy = null,
+  defaultGivingType = null,
+  monthlyTitle = '',
+  monthlySubtitle = '',
   cartID,
   clientID,
-  desktopOverlayColor,
-  mobileBackgroundColor,
-  submitButtonColor,
-  textColor,
+  paddingOption = null,
   donateLink,
-  data,
-  title,
-  subtitle,
-  otherAmountText,
-  formAlignRight,
-  images,
-  image,
-  imageLow,
-  mobileImages,
-  mobileImage,
-  mobileImageLow,
-  mobileAlt,
-  mbshipID,
-  noMoneyBuys,
-  PopUpText,
-  chooseAmountText,
-  isDesktopOverride,
-  otherAmountValue,
-  additionalSingleCopy,
-  additionalMonthlyCopy,
-  defaultGivingType,
-  monthlyTitle,
-  monthlySubtitle,
-  paddingOption,
-  // Just to keep the function call character length under control
-  monthlyChooseAmountText: monthlyChoose,
-  monthlyOtherAmountText: monthlyOther
+  monthlyChooseAmountText: monthlyChoose = '',
+  monthlyOtherAmountText: monthlyOther = ''
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${breakpointValues.L}px)` });
 
@@ -202,39 +202,4 @@ Donate.propTypes = {
   paddingOption: PropTypes.string
 };
 
-Donate.defaultProps = {
-  alt: '',
-  data: {},
-  formAlignRight: true,
-  imageLow: null,
-  image: null,
-  images: null,
-  mobileImageLow: null,
-  mobileImage: null,
-  mobileImages: null,
-  mobileAlt: '',
-  desktopOverlayColor: 'transparent',
-  mobileBackgroundColor: 'blue_dark',
-  submitButtonColor: 'red',
-  textColor: 'white',
-  mbshipID: null,
-  otherAmountText:
-    'will help us fund amazing projects in the UK and around the world.',
-  subtitle: '',
-  noMoneyBuys: false,
-  PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
-  chooseAmountText: '',
-  isDesktopOverride: null,
-  otherAmountValue: null,
-  title: null,
-  additionalSingleCopy: null,
-  additionalMonthlyCopy: null,
-  defaultGivingType: null,
-  monthlyTitle: '',
-  monthlySubtitle: '',
-  monthlyChooseAmountText: '',
-  monthlyOtherAmountText: '',
-  paddingOption: null
-};
-
 export default Donate;

package/src/components/Organisms/Donate/Donate.md

@@ -11,7 +11,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -36,7 +36,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -64,7 +64,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
@@ -217,7 +217,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="transparent"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
@@ -247,7 +247,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="transparent"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -272,7 +272,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -297,7 +297,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   mobileBackgroundColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -321,7 +321,7 @@ import data from './dev-data/data-single';
 
 <Donate
   desktopOverlayColor="blue_dark"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
@@ -346,7 +346,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 <Donate
   alt="Background image"
   mobileBackgroundColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
@@ -375,7 +375,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -404,7 +404,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -432,7 +432,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -460,7 +460,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -488,7 +488,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -515,7 +515,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -543,7 +543,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -574,7 +574,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -605,7 +605,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   alt="Background image"
   mobileBackgroundColor="deep_violet_dark"
   desktopOverlayColor="red"
-  submitButtonColor="blue_dark"
+  submitButtonColor="blue_donate"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -33,18 +33,16 @@ const Signup = ({
   clientID,
   cartID,
   mbshipID,
-  noMoneyBuys,
+  noMoneyBuys = false,
   PopUpText,
   chooseAmountText,
   submitButtonColor,
-  otherAmountValue,
-  additionalSingleCopy,
-  additionalMonthlyCopy,
-  defaultGivingType,
-  monthlyChooseAmountCopy,
-  monthlyOtherAmountCopy,
+  otherAmountValue = null,
+  additionalSingleCopy = null,
+  additionalMonthlyCopy = null,
+  defaultGivingType = null,
   changeGivingType,
-  givingType,
+  givingType = null,
   ...rest
 }) => {
   // const [givingType, setGivingType] = useState();
@@ -345,22 +343,8 @@ Signup.propTypes = {
   additionalSingleCopy: PropTypes.string,
   additionalMonthlyCopy: PropTypes.string,
   defaultGivingType: PropTypes.string,
-  monthlyChooseAmountCopy: PropTypes.string,
-  monthlyOtherAmountCopy: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,
   givingType: PropTypes.string
 };
 
-Signup.defaultProps = {
-  noMoneyBuys: false,
-  otherAmountValue: null,
-  data: {},
-  additionalSingleCopy: null,
-  additionalMonthlyCopy: null,
-  defaultGivingType: null,
-  monthlyChooseAmountCopy: null,
-  monthlyOtherAmountCopy: null,
-  givingType: null
-};
-
 export default Signup;

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

@@ -6,7 +6,7 @@ import {
 } from './GivingSelector.style';
 
 const GivingSelector = ({
-  givingType, changeGivingType, setPopOpen, mbshipID
+  givingType = null, changeGivingType, setPopOpen, mbshipID
 }) => {
   // Only updates giving type and popup status when appropriate
   const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
@@ -51,10 +51,6 @@ const GivingSelector = ({
   );
 };
 
-GivingSelector.defaultProps = {
-  givingType: null
-};
-
 GivingSelector.propTypes = {
   givingType: PropTypes.string,
   changeGivingType: PropTypes.func.isRequired,

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

@@ -12,7 +12,7 @@ const Switch = styled.span`
   display: block;
   position: absolute;
   transition: left 0.15s ease-out;
-  background-color: ${({ theme }) => theme.color('blue')};
+  background-color: ${({ theme }) => theme.color('blue_donate')};
   left: 2px;
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
 `;
@@ -42,7 +42,7 @@ const MoneyBox = styled.div`
     ${hideVisually}
   }
   input:focus:not(:checked) + label {
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue_donate')};
   }
 `;
 
@@ -68,7 +68,7 @@ const Label = styled.label`
   &: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')};
   }
 `;