@comicrelief/component-library 8.1.1 → 8.2.0

package/src/components/Atoms/Pagination/Pagination.js

@@ -6,30 +6,39 @@ import { getPages } from './Utils/PaginationCalculator';
 
 /** Customizable Pagination component */
 const Pagination = ({
-  PageComponent,
+  PageComponent = Item,
+  pageComponentProps = {},
+  showFirst = true,
+  showPrevious = true,
+  showNext = true,
+  showLast = true,
+  showMore = true,
+  maxPages = 5,
+  previousLabel = '‹',
+  nextLabel = '›',
+  firstLabel = '«',
+  lastLabel = '»',
+  moreLabel = '...',
+  getPageLabel = currentPage => currentPage.toString(),
+  previousAriaLabel = 'Previous page',
+  nextAriaLabel = 'Next page',
+  firstAriaLabel = 'First page',
+  lastAriaLabel = 'Last page',
+  moreAriaLabel = 'More pages',
+  getPageAriaLabel = currentPage => `Page ${currentPage}`,
+  target = 'self',
+  color = 'black',
+  backgroundColor = 'white',
+  selectedColor = 'white',
+  selectedBackgroundColor = 'red',
+  disabledColor = 'grey_medium',
+  disabledBackgroundColor = 'white',
+  colorOnHover = 'white',
+  backgroundColorOnHover = 'teal',
   totalPages,
-  maxPages,
   currentPage,
-  showFirst,
-  firstLabel,
-  firstAriaLabel,
-  showPrevious,
-  previousLabel,
-  previousAriaLabel,
-  showMore,
-  moreLabel,
-  moreAriaLabel,
-  showNext,
-  nextLabel,
-  nextAriaLabel,
-  showLast,
-  lastLabel,
-  lastAriaLabel,
-  getPageLabel,
-  getPageAriaLabel,
   onSelect,
   createURL,
-  pageComponentProps,
   ...restProps
 }) => {
   if (!totalPages) {
@@ -95,6 +104,15 @@ const Pagination = ({
       pageComponentProps={pageComponentProps}
       createURL={createURL}
       onSelect={onSelect}
+      target={target}
+      color={color}
+      backgroundColor={backgroundColor}
+      selectedColor={selectedColor}
+      selectedBackgroundColor={selectedBackgroundColor}
+      disabledColor={disabledColor}
+      disabledBackgroundColor={disabledBackgroundColor}
+      colorOnHover={colorOnHover}
+      backgroundColorOnHover={backgroundColorOnHover}
       {...restProps}
     />
   );
@@ -181,35 +199,4 @@ Pagination.propTypes = {
   backgroundColorOnHover: PropTypes.string
 };
 
-Pagination.defaultProps = {
-  PageComponent: Item,
-  pageComponentProps: {},
-  showFirst: true,
-  showPrevious: true,
-  showNext: true,
-  showLast: true,
-  showMore: true,
-  maxPages: 5,
-  previousLabel: '‹',
-  nextLabel: '›',
-  firstLabel: '«',
-  lastLabel: '»',
-  moreLabel: '...',
-  getPageLabel: currentPage => currentPage.toString(),
-  previousAriaLabel: 'Previous page',
-  nextAriaLabel: 'Next page',
-  firstAriaLabel: 'First page',
-  lastAriaLabel: 'Last page',
-  moreAriaLabel: 'More pages',
-  getPageAriaLabel: currentPage => `Page ${currentPage}`,
-  target: 'self',
-  color: 'black',
-  backgroundColor: 'white',
-  selectedColor: 'white',
-  selectedBackgroundColor: 'red',
-  disabledColor: 'grey_medium',
-  disabledBackgroundColor: 'white',
-  colorOnHover: 'white',
-  backgroundColorOnHover: 'teal'
-};
 export default Pagination;

package/src/components/Atoms/Picture/Picture.js

@@ -65,16 +65,16 @@ const Image = styled.img`
 
 /** Responsive Picture */
 const Picture = ({
-  images,
-  image,
-  alt,
-  width,
-  height,
-  objectFit,
-  imageLow,
-  isBackgroundImage,
-  smallBreakpointRowLayout,
-  mediumBreakpointRowLayout,
+  images = null,
+  image = null,
+  alt = '',
+  width = '100%',
+  height = 'auto',
+  objectFit = 'none',
+  imageLow = null,
+  isBackgroundImage = false,
+  smallBreakpointRowLayout = null,
+  mediumBreakpointRowLayout = null,
   ...rest
 }) => {
   const document = typeof window !== 'undefined' ? window.document : null;
@@ -172,17 +172,4 @@ Picture.propTypes = {
   mediumBreakpointRowLayout: PropTypes.bool
 };
 
-Picture.defaultProps = {
-  imageLow: null,
-  image: null,
-  images: null,
-  objectFit: 'none',
-  width: '100%',
-  height: 'auto',
-  alt: '',
-  isBackgroundImage: false,
-  smallBreakpointRowLayout: null,
-  mediumBreakpointRowLayout: null
-};
-
 export default withTheme(Picture);

package/src/components/Atoms/RichText/RichText.js

@@ -6,7 +6,7 @@ export const Inner = styled.div`
   text-align: ${props => props.align};
 `;
 
-const RichText = ({ align, markup, ...rest }) => (
+const RichText = ({ align = 'left', markup = '', ...rest }) => (
   <Inner
     align={align}
     dangerouslySetInnerHTML={{ __html: markup }}
@@ -19,9 +19,4 @@ RichText.propTypes = {
   markup: PropTypes.string
 };
 
-RichText.defaultProps = {
-  align: 'left',
-  markup: ''
-};
-
 export default RichText;

package/src/components/Atoms/Select/Select.js

@@ -44,12 +44,12 @@ const Select = React.forwardRef(
       description,
       label,
       options,
-      hideLabel,
-      defaultValue,
-      onChange,
-      greyDescription,
-      className,
-      optional,
+      hideLabel = false,
+      defaultValue = '',
+      onChange = null,
+      greyDescription = false,
+      className = '',
+      optional = false,
       ...rest
     },
     ref
@@ -114,15 +114,4 @@ Select.propTypes = {
   optional: PropTypes.bool
 };
 
-Select.defaultProps = {
-  hideLabel: false,
-  defaultValue: '',
-  onChange: null,
-  /** If true, the 'description' option, which is initially selected but disabled, will be grey
-   *   - like a text input's placeholder */
-  greyDescription: false,
-  className: '',
-  optional: false
-};
-
 export default Select;

package/src/components/Atoms/SocialIcons/SocialIcons.js

@@ -28,7 +28,7 @@ const StyledItem = styled.li`
 `;
 
 /** Social media icons with customizable style linked to campaign social media accounts */
-const SocialIcons = ({ campaign, ...restProps }) => {
+const SocialIcons = ({ target = 'blank', campaign, ...restProps }) => {
   const links = getLinks(campaign);
 
   return (
@@ -36,6 +36,7 @@ const SocialIcons = ({ campaign, ...restProps }) => {
       {Object.keys(icons).map(brand => (
         <StyledItem key={brand}>
           <Icon
+            target={target}
             icon={icons[brand]}
             href={links[brand].url}
             title={links[brand].title}
@@ -55,8 +56,4 @@ SocialIcons.propTypes = {
   target: PropTypes.string
 };
 
-SocialIcons.defaultProps = {
-  target: 'blank'
-};
-
 export default SocialIcons;

package/src/components/Atoms/Text/Text.js

@@ -51,11 +51,14 @@ export const BaseText = styled.span`
  *  Weight is checked for existence to prevent overriding the tag's css
  */
 const Text = ({
-  tag, children, height, weight, family, mobileColor, ...rest
+  tag = 'span', size = 's', color = 'inherit', children = undefined, uppercase = false, height = undefined, weight = undefined, family = null, mobileColor = null, ...rest
 }) => (
   <BaseText
     {...rest}
     as={tag}
+    color={color}
+    size={size}
+    uppercase={uppercase}
     height={height}
     weight={weight}
     family={family}
@@ -88,16 +91,4 @@ Text.propTypes = {
   mobileColor: PropTypes.string
 };
 
-Text.defaultProps = {
-  family: null,
-  tag: 'span',
-  weight: undefined,
-  height: undefined,
-  uppercase: false,
-  size: 's',
-  color: 'inherit',
-  children: undefined,
-  mobileColor: null
-};
-
 export default Text;

package/src/components/Atoms/TextArea/TextArea.js

@@ -32,7 +32,7 @@ const StyledTextArea = styled.textarea`${({ theme, error }) => css`
 `}`;
 
 const TextArea = React.forwardRef(({
-  id, label, hideLabel, errorMsg, rows, className, ...rest
+  id, label, placeholder = '', hideLabel = false, errorMsg = undefined, rows = 4, className = '', ...rest
 }, ref) => (
   <Label
     htmlFor={id}
@@ -43,6 +43,7 @@ const TextArea = React.forwardRef(({
   >
     <StyledTextArea
       {...rest}
+      placeholder={placeholder}
       rows={rows}
       error={!!errorMsg}
       aria-describedby={id}
@@ -68,12 +69,4 @@ TextArea.propTypes = {
   className: PropTypes.string
 };
 
-TextArea.defaultProps = {
-  rows: 4,
-  placeholder: '',
-  errorMsg: undefined,
-  hideLabel: false,
-  className: ''
-};
-
 export default TextArea;

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -35,8 +35,8 @@ const TextInputWithDropdown = React.forwardRef(
       id,
       name,
       label,
-      dropdownInstruction,
-      className,
+      dropdownInstruction = null,
+      className = '',
       ...otherInputProps
     },
     ref
@@ -186,11 +186,6 @@ TextInputWithDropdown.propTypes = {
   dropdownInstruction: PropTypes.string
 };
 
-TextInputWithDropdown.defaultProps = {
-  dropdownInstruction: null,
-  className: ''
-};
-
 Options.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   onSelect: PropTypes.func.isRequired,
@@ -199,8 +194,4 @@ Options.propTypes = {
   resetActiveOption: PropTypes.func.isRequired
 };
 
-Options.defaultProps = {
-  dropdownInstruction: null
-};
-
 export default TextInputWithDropdown;

package/src/components/Molecules/ArticleTeaser/ArticleTeaser.js

@@ -135,14 +135,14 @@ const ArticleTeaser = ({
   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
 }) => (
   <Wrapper>
     <Link href={href} type="standard" category={category} underline={false}>
@@ -209,15 +209,4 @@ ArticleTeaser.propTypes = {
   href: PropTypes.string.isRequired
 };
 
-ArticleTeaser.defaultProps = {
-  imageLow: null,
-  image: null,
-  images: null,
-  category: null,
-  logoSize: null,
-  time: null,
-  alt: '',
-  family: 'Anton'
-};
-
 export default ArticleTeaser;

package/src/components/Molecules/Banner/Banner.js

@@ -24,7 +24,7 @@ const Container = styled.div`
   }
 `;
 
-const Banner = ({ children, backgroundColor }) => (
+const Banner = ({ children, backgroundColor = 'grey_dark' }) => (
   <Wrapper backgroundColor={backgroundColor}>
     <Container>
       { children }
@@ -37,8 +37,4 @@ Banner.propTypes = {
   backgroundColor: PropTypes.string
 };
 
-Banner.defaultProps = {
-  backgroundColor: 'grey_dark'
-};
-
 export default Banner;

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;