@comicrelief/component-library 8.1.2 → 8.2.0

package/src/components/Molecules/Box/Box.js

@@ -44,14 +44,13 @@ const Copy = styled.div`
 `;
 
 const Box = ({
-  imageLow,
-  images,
-  image,
+  imageLow = null,
+  images = null,
+  image = null,
   imageAltText,
-  height,
-  width,
-  children,
-  squaredCorners,
+  width = '100%',
+  children = null,
+  squaredCorners = false,
   ...rest
 }) => (
   <Container {...rest}>
@@ -83,15 +82,4 @@ Box.propTypes = {
   squaredCorners: PropTypes.bool
 };
 
-Box.defaultProps = {
-  children: null,
-  imageLow: null,
-  images: null,
-  image: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  squaredCorners: false
-};
-
 export default Box;

package/src/components/Molecules/Card/Card.js

@@ -4,17 +4,17 @@ import Picture from '../../Atoms/Picture/Picture';
 import { Container, Wrapper, Copy } from './Card.style';
 
 const Card = ({
-  backgroundColor,
-  imageLow,
-  images,
-  image,
-  imageAltText,
-  height,
-  width,
-  children,
-  squaredCorners,
-  smallBreakpointRowLayout,
-  mediumBreakpointRowLayout,
+  backgroundColor = 'white',
+  children = null,
+  imageLow = null,
+  images = null,
+  image = null,
+  imageAltText = '',
+  width = '100%',
+  height = '100%',
+  squaredCorners = false,
+  smallBreakpointRowLayout = null,
+  mediumBreakpointRowLayout = null,
   ...rest
 }) => (
   <Container
@@ -65,18 +65,4 @@ Card.propTypes = {
   mediumBreakpointRowLayout: PropTypes.bool
 };
 
-Card.defaultProps = {
-  backgroundColor: 'white',
-  children: null,
-  imageLow: null,
-  images: null,
-  image: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  squaredCorners: false,
-  smallBreakpointRowLayout: null,
-  mediumBreakpointRowLayout: null
-};
-
 export default Card;

package/src/components/Molecules/CardDs/CardDs.js

@@ -7,18 +7,18 @@ import {
 } from './CardDs.style';
 
 const CardDs = ({
-  icon,
-  backgroundColor,
-  imageLow,
-  images,
-  image,
-  imageAltText,
-  height,
-  width,
+  backgroundColor = 'white',
+  imageLow = null,
+  images = null,
+  image = null,
+  link = null,
+  linkLabel = null,
+  target = null,
+  imageAltText = '',
+  width = '100%',
+  height = '100%',
+  icon = null,
   children,
-  link,
-  linkLabel,
-  target,
   ...rest
 }) => {
   const Media = (
@@ -102,18 +102,4 @@ CardDs.propTypes = {
   icon: PropTypes.node
 };
 
-CardDs.defaultProps = {
-  backgroundColor: 'white',
-  imageLow: null,
-  images: null,
-  image: null,
-  link: null,
-  linkLabel: null,
-  target: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  icon: null
-};
-
 export default CardDs;

package/src/components/Molecules/Chip/Chip.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { CheckLabel, Overlay, CheckInput } from './Chip.style';
 
 const Chip = ({
-  category, handleToggle, color, checked
+  category, handleToggle, color = 'purple', checked = false
 }) => (
   <CheckLabel>
     <CheckInput
@@ -27,9 +27,4 @@ Chip.propTypes = {
   handleToggle: PropTypes.func.isRequired
 };
 
-Chip.defaultProps = {
-  color: 'purple',
-  checked: false
-};
-
 export default Chip;

package/src/components/Molecules/Countdown/Countdown.js

@@ -5,7 +5,7 @@ import Text from '../../Atoms/Text/Text';
 import { Wrapper, Digits } from './Countdown.style';
 
 const Countdown = ({
-  endDate, color, endMessage, introMessage
+  endDate, color = 'black', endMessage = null, introMessage = null
 }) => {
   const [countdownHasEnded, setCountdownHasEnded] = useState(false);
   const [countdownTime, setCountdownTime] = useState({
@@ -97,10 +97,4 @@ Countdown.propTypes = {
   introMessage: PropTypes.node
 };
 
-Countdown.defaultProps = {
-  color: 'black',
-  endMessage: null,
-  introMessage: null
-};
-
 export default Countdown;

package/src/components/Molecules/Logos/Logos.js

@@ -10,7 +10,7 @@ const TitleLabel = styled.span`
   color: transparent; 
 `;
 
-const Logos = ({ campaign }) => {
+const Logos = ({ campaign = 'Comic Relief' }) => {
   if (campaign === 'Sport Relief Gameon') {
     return (
       <>
@@ -56,8 +56,4 @@ Logos.propTypes = {
   campaign: PropTypes.string
 };
 
-Logos.defaultProps = {
-  campaign: 'Comic Relief'
-};
-
 export default Logos;

package/src/components/Molecules/Lookup/Lookup.js

@@ -57,8 +57,8 @@ const Lookup = ({
   lookupHandler,
   mapOptionToString,
   onSelect,
-  noResultsMessage,
-  dropdownInstruction,
+  noResultsMessage = 'Sorry, could not find any results for your search',
+  dropdownInstruction = '',
   ...rest
 }) => {
   const [query, setQuery] = useState('');
@@ -140,9 +140,4 @@ Lookup.propTypes = {
   dropdownInstruction: PropTypes.string
 };
 
-Lookup.defaultProps = {
-  noResultsMessage: 'Sorry, could not find any results for your search',
-  dropdownInstruction: ''
-};
-
 export default Lookup;

package/src/components/Molecules/Promo/Promo.js

@@ -10,23 +10,23 @@ import {
 } from './Promo.style';
 
 const Promo = ({
-  copyLeft,
-  backgroundColor,
-  imageLow,
-  imageSet,
-  image,
-  imageAltText,
-  children,
-  position,
-  autoPlay,
-  loop,
-  poster,
-  mobilePoster,
-  showPosterAfterPlaying,
-  videoSrc,
-  mobileVideoSrc,
-  behindTextGradient,
-  blackPlayButton
+  backgroundColor = 'white',
+  copyLeft = false,
+  imageSet = null,
+  imageLow = null,
+  image = null,
+  imageAltText = '',
+  children = null,
+  position = 'none',
+  autoPlay = true,
+  loop = true,
+  poster = null,
+  mobilePoster = null,
+  videoSrc = null,
+  mobileVideoSrc = null,
+  showPosterAfterPlaying = true,
+  behindTextGradient = 'none',
+  blackPlayButton = false
 }) => {
   // Store the appropriate prop in state, dependent on the breakpoint
   const [thisVideoSrc, setThisVideoSrc] = useState(null);
@@ -124,24 +124,4 @@ Promo.propTypes = {
   blackPlayButton: PropTypes.bool
 };
 
-Promo.defaultProps = {
-  backgroundColor: 'white',
-  copyLeft: false,
-  imageSet: null,
-  imageLow: null,
-  image: null,
-  imageAltText: '',
-  children: null,
-  position: 'none',
-  autoPlay: true,
-  loop: true,
-  poster: null,
-  mobilePoster: null,
-  videoSrc: null,
-  mobileVideoSrc: null,
-  showPosterAfterPlaying: true,
-  behindTextGradient: 'none',
-  blackPlayButton: false
-};
-
 export default Promo;

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,