@comicrelief/component-library 8.1.2 → 8.2.0

package/dist/components/Atoms/Text/Text.js

@@ -87,31 +87,26 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
  */
 const Text = _ref13 => {
   let {
-    tag,
-    children,
-    height,
-    weight,
-    family,
-    mobileColor,
+    tag = 'span',
+    size = 's',
+    color = 'inherit',
+    children = undefined,
+    uppercase = false,
+    height = undefined,
+    weight = undefined,
+    family = null,
+    mobileColor = null,
     ...rest
   } = _ref13;
   return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
     as: tag,
+    color: color,
+    size: size,
+    uppercase: uppercase,
     height: height,
     weight: weight,
     family: family,
     mobileColor: mobileColor
   }), children);
 };
-Text.defaultProps = {
-  family: null,
-  tag: 'span',
-  weight: undefined,
-  height: undefined,
-  uppercase: false,
-  size: 's',
-  color: 'inherit',
-  children: undefined,
-  mobileColor: null
-};
 var _default = exports.default = Text;

package/dist/components/Atoms/TextArea/TextArea.js

@@ -26,10 +26,11 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     id,
     label,
-    hideLabel,
-    errorMsg,
-    rows,
-    className,
+    placeholder = '',
+    hideLabel = false,
+    errorMsg = undefined,
+    rows = 4,
+    className = '',
     ...rest
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -39,6 +40,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     errorMsg: errorMsg,
     className: className
   }, /*#__PURE__*/_react.default.createElement(StyledTextArea, Object.assign({}, rest, {
+    placeholder: placeholder,
     rows: rows,
     error: !!errorMsg,
     "aria-describedby": id,
@@ -61,11 +63,4 @@ TextArea.propTypes = {
   // (as `rest` is not spread on the outermost component)
   className: _propTypes.default.string
 };
-TextArea.defaultProps = {
-  rows: 4,
-  placeholder: '',
-  errorMsg: undefined,
-  hideLabel: false,
-  className: ''
-};
 var _default = exports.default = TextArea;

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -32,8 +32,8 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
     id,
     name,
     label,
-    dropdownInstruction,
-    className,
+    dropdownInstruction = null,
+    className = '',
     ...otherInputProps
   } = _ref;
   const [activeOption, setActiveOption] = (0, _react.useState)(-1);
@@ -130,11 +130,4 @@ const Options = _ref2 => {
     ref: index === activeOption ? element => element && element.focus() : null
   }, /*#__PURE__*/_react.default.createElement(_Text.default, null, option)))));
 };
-TextInputWithDropdown.defaultProps = {
-  dropdownInstruction: null,
-  className: ''
-};
-Options.defaultProps = {
-  dropdownInstruction: null
-};
 var _default = exports.default = TextInputWithDropdown;

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -141,14 +141,14 @@ const ArticleTeaser = _ref15 => {
     href,
     date,
     title,
-    imageLow,
-    image,
-    images,
-    alt,
-    category,
-    logoSize,
-    family,
-    time
+    imageLow = null,
+    image = null,
+    images = null,
+    alt = '',
+    category = null,
+    logoSize = null,
+    family = 'Anton',
+    time = null
   } = _ref15;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Link, {
     href: href,
@@ -184,14 +184,4 @@ const ArticleTeaser = _ref15 => {
     color: "grey_dark"
   }, time))));
 };
-ArticleTeaser.defaultProps = {
-  imageLow: null,
-  image: null,
-  images: null,
-  category: null,
-  logoSize: null,
-  time: null,
-  alt: '',
-  family: 'Anton'
-};
 var _default = exports.default = ArticleTeaser;

package/dist/components/Molecules/Banner/Banner.js

@@ -36,13 +36,10 @@ const Container = _styledComponents.default.div.withConfig({
 const Banner = _ref4 => {
   let {
     children,
-    backgroundColor
+    backgroundColor = 'grey_dark'
   } = _ref4;
   return /*#__PURE__*/_react.default.createElement(Wrapper, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/_react.default.createElement(Container, null, children));
 };
-Banner.defaultProps = {
-  backgroundColor: 'grey_dark'
-};
 var _default = exports.default = Banner;

package/dist/components/Molecules/Box/Box.js

@@ -43,14 +43,13 @@ const Copy = _styledComponents.default.div.withConfig({
 });
 const Box = _ref5 => {
   let {
-    imageLow,
-    images,
-    image,
+    imageLow = null,
+    images = null,
+    image = null,
     imageAltText,
-    height,
-    width,
-    children,
-    squaredCorners,
+    width = '100%',
+    children = null,
+    squaredCorners = false,
     ...rest
   } = _ref5;
   return /*#__PURE__*/_react.default.createElement(Container, rest, imageLow ? /*#__PURE__*/_react.default.createElement(Image, {
@@ -65,14 +64,4 @@ const Box = _ref5 => {
     squaredCorners: squaredCorners
   })) : null, children ? /*#__PURE__*/_react.default.createElement(Copy, null, children) : null);
 };
-Box.defaultProps = {
-  children: null,
-  imageLow: null,
-  images: null,
-  image: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  squaredCorners: false
-};
 var _default = exports.default = Box;

package/dist/components/Molecules/Card/Card.js

@@ -10,17 +10,17 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Card = require("./Card.style");
 const Card = _ref => {
   let {
-    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
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Card.Container, Object.assign({
@@ -43,17 +43,4 @@ const Card = _ref => {
     mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }, children) : null);
 };
-Card.defaultProps = {
-  backgroundColor: 'white',
-  children: null,
-  imageLow: null,
-  images: null,
-  image: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  squaredCorners: false,
-  smallBreakpointRowLayout: null,
-  mediumBreakpointRowLayout: null
-};
 var _default = exports.default = Card;

package/dist/components/Molecules/CardDs/CardDs.js

@@ -11,18 +11,18 @@ var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 var _CardDs = require("./CardDs.style");
 const CardDs = _ref => {
   let {
-    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
   } = _ref;
   const Media = /*#__PURE__*/_react.default.createElement(_CardDs.Image, {
@@ -68,17 +68,4 @@ const CardDs = _ref => {
     "data-button-cta-copy": linkLabel
   }, linkLabel)));
 };
-CardDs.defaultProps = {
-  backgroundColor: 'white',
-  imageLow: null,
-  images: null,
-  image: null,
-  link: null,
-  linkLabel: null,
-  target: null,
-  imageAltText: '',
-  width: '100%',
-  height: '100%',
-  icon: null
-};
 var _default = exports.default = CardDs;

package/dist/components/Molecules/Chip/Chip.js

@@ -11,8 +11,8 @@ const Chip = _ref => {
   let {
     category,
     handleToggle,
-    color,
-    checked
+    color = 'purple',
+    checked = false
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Chip.CheckLabel, null, /*#__PURE__*/_react.default.createElement(_Chip.CheckInput, {
     onChange: handleToggle,
@@ -22,8 +22,4 @@ const Chip = _ref => {
     checked: checked
   }), /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(_Chip.Overlay, null), category);
 };
-Chip.defaultProps = {
-  color: 'purple',
-  checked: false
-};
 var _default = exports.default = Chip;

package/dist/components/Molecules/Countdown/Countdown.js

@@ -13,9 +13,9 @@ var _Countdown = require("./Countdown.style");
 const Countdown = _ref => {
   let {
     endDate,
-    color,
-    endMessage,
-    introMessage
+    color = 'black',
+    endMessage = null,
+    introMessage = null
   } = _ref;
   const [countdownHasEnded, setCountdownHasEnded] = (0, _react.useState)(false);
   const [countdownTime, setCountdownTime] = (0, _react.useState)({
@@ -88,9 +88,4 @@ const Countdown = _ref => {
     uppercase: true
   }, "seconds"))));
 };
-Countdown.defaultProps = {
-  color: 'black',
-  endMessage: null,
-  introMessage: null
-};
 var _default = exports.default = Countdown;

package/dist/components/Molecules/Logos/Logos.js

@@ -14,7 +14,7 @@ const TitleLabel = _styledComponents.default.span.withConfig({
 })(["line-height:0;font-size:0;color:transparent;"]);
 const Logos = _ref => {
   let {
-    campaign
+    campaign = 'Comic Relief'
   } = _ref;
   if (campaign === 'Sport Relief Gameon') {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
@@ -65,7 +65,4 @@ const Logos = _ref => {
     title: "Go to Comic Relief homepage"
   }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
 };
-Logos.defaultProps = {
-  campaign: 'Comic Relief'
-};
 var _default = exports.default = Logos;

package/dist/components/Molecules/Lookup/Lookup.js

@@ -60,8 +60,8 @@ const Lookup = _ref2 => {
     lookupHandler,
     mapOptionToString,
     onSelect,
-    noResultsMessage,
-    dropdownInstruction,
+    noResultsMessage = 'Sorry, could not find any results for your search',
+    dropdownInstruction = '',
     ...rest
   } = _ref2;
   const [query, setQuery] = (0, _react.useState)('');
@@ -121,10 +121,6 @@ const Lookup = _ref2 => {
     loadingText: "Searching"
   }, buttonText));
 };
-Lookup.defaultProps = {
-  noResultsMessage: 'Sorry, could not find any results for your search',
-  dropdownInstruction: ''
-};
 var _default = exports.default = Lookup;
 var _StyledTextInputWithDropdown = (0, _styledComponents.default)(_TextInputWithDropdown.default).withConfig({
   displayName: "Lookup___StyledTextInputWithDropdown",

package/dist/components/Molecules/Promo/Promo.js

@@ -13,23 +13,23 @@ var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 var _Promo = require("./Promo.style");
 const Promo = _ref => {
   let {
-    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
   } = _ref;
   // Store the appropriate prop in state, dependent on the breakpoint
   const [thisVideoSrc, setThisVideoSrc] = (0, _react.useState)(null);
@@ -97,23 +97,4 @@ const Promo = _ref => {
     behindTextGradient: behindTextGradient
   }, children))));
 };
-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
-};
 var _default = exports.default = Promo;

package/dist/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -20,10 +20,10 @@ const optionFetcher = async query => {
 const optionParser = school => "".concat(school.name, ", ").concat(school.post_code);
 const SchoolLookup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    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
   } = _ref;
@@ -43,10 +43,4 @@ const SchoolLookup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref
   }));
 });
-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"
-};
 var _default = exports.default = SchoolLookup;

package/dist/components/Molecules/SearchInput/SearchInput.js

@@ -10,7 +10,7 @@ var _SearchInput = require("./SearchInput.style");
 const SearchInput = _ref => {
   let {
     onChange,
-    placeholder,
+    placeholder = '',
     value,
     ...rest
   } = _ref;
@@ -29,7 +29,4 @@ const SearchInput = _ref => {
     errorMsg: ""
   }, rest))))));
 };
-SearchInput.defaultProps = {
-  placeholder: ''
-};
 var _default = exports.default = SearchInput;

package/dist/components/Molecules/SearchResult/SearchResult.js

@@ -70,16 +70,16 @@ const Title = (0, _styledComponents.default)(_Text.default).withConfig({
  */
 const SearchResult = _ref7 => {
   let {
+    imageLow = null,
+    images = null,
+    type = '',
+    date = '',
+    copy = '',
+    smallImageWidth = '45%',
+    largeImageWidth = '100%',
     href,
-    date,
     title,
-    copy,
-    type,
-    imageLow,
-    images,
-    alt,
-    smallImageWidth,
-    largeImageWidth
+    alt
   } = _ref7;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(Item, {
     href: href,
@@ -104,13 +104,4 @@ const SearchResult = _ref7 => {
     tag: "p"
   }, copy))));
 };
-SearchResult.defaultProps = {
-  imageLow: null,
-  images: null,
-  type: '',
-  date: '',
-  copy: '',
-  smallImageWidth: '45%',
-  largeImageWidth: '100%'
-};
 var _default = exports.default = SearchResult;

package/dist/components/Molecules/ShareButton/ShareButton.js

@@ -26,9 +26,9 @@ const handleShare = (e, typeOfShare, urlToShare) => {
 /* Share Button component to handle FB and Twitter sharing */
 const ShareButton = _ref => {
   let {
-    campaign,
-    copy,
-    urlToShare,
+    campaign = 'comicrelief',
+    copy = 'Share with:',
+    urlToShare = null,
     ...restProps
   } = _ref;
   let checkedUrl = '';
@@ -53,9 +53,4 @@ const ShareButton = _ref => {
     href: "#"
   }, restProps))))));
 };
-ShareButton.defaultProps = {
-  campaign: 'comicrelief',
-  copy: 'Share with:',
-  urlToShare: null
-};
 var _default = exports.default = ShareButton;

package/dist/components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -47,7 +47,7 @@ const schoolToString = school => "".concat(school.name, ", ").concat(school.post
 const SimpleSchoolLookup = _ref => {
   let {
     onSelect,
-    noResultsMessage,
+    noResultsMessage = 'Sorry, we could not find anything matching your search; please use the manual entry option.',
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Lookup.default, Object.assign({
@@ -62,7 +62,4 @@ const SimpleSchoolLookup = _ref => {
     onSelect: onSelect
   }, rest));
 };
-SimpleSchoolLookup.defaultProps = {
-  noResultsMessage: 'Sorry, we could not find anything matching your search; please use the manual entry option.'
-};
 var _default = exports.default = SimpleSchoolLookup;

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -16,21 +16,21 @@ const allPlayers = {};
 /* Single Message is our main component usually to build landing pages */
 const SingleMessage = _ref => {
   let {
-    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
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
@@ -172,21 +172,4 @@ const SingleMessage = _ref => {
     }, children) : null))
   );
 };
-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
-};
 var _default = exports.default = SingleMessage;

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

@@ -15,22 +15,22 @@ var _SingleMessageDs = require("./SingleMessageDs.style");
 var _play = _interopRequireDefault(require("./assets/play.png"));
 const SingleMessageDs = _ref => {
   let {
-    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
   } = _ref;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -152,19 +152,4 @@ const SingleMessageDs = _ref => {
     title: "Embedded youtube"
   })));
 };
-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
-};
 var _default = exports.default = SingleMessageDs;