@comicrelief/component-library 8.1.2 → 8.2.0

package/src/components/Atoms/Icons/Arrow.js

@@ -22,7 +22,7 @@ const Icon = styled.svg`
 `;
 
 const Arrow = ({
-  colour, mobileColour, theme, size, direction, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, direction = 'up', ...rest
 }) => (
   <Icon
     direction={direction}
@@ -46,11 +46,4 @@ Arrow.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Arrow.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24,
-  direction: 'up'
-};
-
 export default withTheme(Arrow);

package/src/components/Atoms/Icons/AtSign.js

@@ -15,7 +15,7 @@ const StyledSVG = styled.svg`
 `;
 
 const AtSign = ({
-  theme, size, colour, mobileColour, ...rest
+  theme, size = 24, colour = 'white', mobileColour = null, ...rest
 }) => (
   <StyledSVG
     width={size}
@@ -36,10 +36,4 @@ AtSign.propTypes = {
   mobileColour: PropTypes.string
 };
 
-AtSign.defaultProps = {
-  size: 24,
-  colour: 'white',
-  mobileColour: null
-};
-
 export default withTheme(AtSign);

package/src/components/Atoms/Icons/Chevron.js

@@ -22,7 +22,7 @@ const Icon = styled.svg`
 `;
 
 const Chevron = ({
-  colour, mobileColour, theme, size, direction, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, direction = 'up', ...rest
 }) => (
   <Icon
     direction={direction}
@@ -47,11 +47,4 @@ Chevron.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Chevron.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24,
-  direction: 'up'
-};
-
 export default withTheme(Chevron);

package/src/components/Atoms/Icons/Download.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Download = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Download.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Download.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Download);

package/src/components/Atoms/Icons/External.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const External = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ External.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-External.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(External);

package/src/components/Atoms/Icons/Favourite.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Favourite = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Favourite.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Favourite.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Favourite);

package/src/components/Atoms/Icons/Internal.js

@@ -13,7 +13,7 @@ const StyledSVG = styled.svg`
 `;
 
 const Internal = ({
-  colour, mobileColour, theme, size, ...rest
+  colour = 'white', mobileColour = null, theme, size = 24, ...rest
 }) => (
   <StyledSVG
     {...rest}
@@ -36,10 +36,4 @@ Internal.propTypes = {
   theme: PropTypes.objectOf(PropTypes.shape).isRequired
 };
 
-Internal.defaultProps = {
-  colour: 'white',
-  mobileColour: null,
-  size: 24
-};
-
 export default withTheme(Internal);

package/src/components/Atoms/Input/Input.js

@@ -62,16 +62,17 @@ const Prefix = styled.div`
 const Input = React.forwardRef(
   (
     {
-      errorMsg,
+      errorMsg = '',
       id,
       label,
-      showLabel,
+      showLabel = true,
       type,
-      hasAria,
-      className,
-      labelProps,
-      prefix,
-      optional,
+      hasAria = true,
+      className = '',
+      placeholder = '',
+      labelProps = {},
+      prefix = '',
+      optional = null,
       ...rest
     },
     ref
@@ -90,6 +91,7 @@ const Input = React.forwardRef(
         <InputField
           id={id}
           type={type}
+          placeholder={placeholder}
           error={!!errorMsg}
           aria-describedby={hasAria ? id : undefined}
           ref={ref}
@@ -127,15 +129,4 @@ Input.propTypes = {
   optional: PropTypes.bool
 };
 
-Input.defaultProps = {
-  showLabel: true,
-  hasAria: true,
-  placeholder: '',
-  errorMsg: '',
-  labelProps: {},
-  className: '',
-  prefix: '',
-  optional: null
-};
-
 export default Input;

package/src/components/Atoms/Label/Label.js

@@ -47,10 +47,10 @@ const LabelText = ({
  * @constructor
  */
 const Label = ({
-  children,
+  children = null,
   label,
-  hideLabel,
-  optional,
+  hideLabel = false,
+  optional = null,
   ...rest
 }) => (
   <LabelElement {...rest} optional={optional}>
@@ -70,12 +70,6 @@ Label.propTypes = {
   optional: PropTypes.bool
 };
 
-Label.defaultProps = {
-  hideLabel: false,
-  children: null,
-  optional: null
-};
-
 LabelText.propTypes = {
   label: PropTypes.oneOfType([
     PropTypes.string,
@@ -85,8 +79,4 @@ LabelText.propTypes = {
   children: PropTypes.node
 };
 
-LabelText.defaultProps = {
-  hideLabel: false,
-  children: null
-};
 export default Label;

package/src/components/Atoms/Link/Link.js

@@ -9,15 +9,15 @@ let window = '';
 
 const Link = ({
   children,
-  color,
-  mobileColour,
+  color = 'red',
+  mobileColour = null,
   href,
-  target,
-  type,
-  home,
-  underline,
-  icon,
-  iconFirst,
+  target = null,
+  type = 'standard',
+  home = false,
+  underline = true,
+  icon = null,
+  iconFirst = false,
   ...rest
 }) => {
   const [documentHost, setDocumentHost] = useState('');
@@ -59,6 +59,7 @@ const Link = ({
       href={href}
       target={window}
       type={type}
+      home={home}
       iconFirst={iconFirst}
       underline={underline}
     >
@@ -89,15 +90,4 @@ Link.propTypes = {
   icon: PropTypes.node
 };
 
-Link.defaultProps = {
-  type: 'standard',
-  color: 'red',
-  mobileColour: null,
-  target: null,
-  home: false,
-  underline: true,
-  iconFirst: false,
-  icon: null
-};
-
 export default Link;

package/src/components/Atoms/Logo/Logo.js

@@ -46,7 +46,7 @@ const themeSwitcher = theme => {
 };
 
 const Logo = ({
-  rotate, sizeSm, sizeMd, campaign
+  rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
 }) => (
   <LogoWrapper rotate={rotate ? 1 : 0} sizeSm={sizeSm} sizeMd={sizeMd}>
     <Image
@@ -68,11 +68,4 @@ Logo.propTypes = {
   campaign: PropTypes.string
 };
 
-Logo.defaultProps = {
-  rotate: false,
-  sizeSm: '51px', // - to work with the header 75px height and 12px padding
-  sizeMd: '70px',
-  campaign: 'Comic Relief'
-};
-
 export default Logo;

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;