All files / elements/Button component.js

100% Statements 18/18
100% Branches 6/6
100% Functions 1/1
100% Lines 18/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103                            7x               7x                         7x                 7x             257x 257x 257x 257x 1x         256x 1x     1x         255x 1x           254x           256x   7x                       7x            
import React from 'react';
import PropTypes from 'prop-types';
import { removeSomeProps } from 'src/utils/componentHelpers';
import { emailHrefString } from 'src/elements/typography/Link/utils';
import { boxShadow } from 'styled-system';
import { Link as ReactRouterLink } from 'react-router-dom';
import {
  flexboxProps,
  layoutProps,
  positionProps,
  spaceProps,
  typography,
} from 'src/utils/styledHelpers';
 
const propsToTrim = {
  ...flexboxProps.propTypes,
  ...layoutProps.propTypes,
  ...positionProps.propTypes,
  ...spaceProps.propTypes,
  ...typography.propTypes,
  variant: PropTypes.string,
};
const propsToTrimForButton = {
  ...propsToTrim,
  ...boxShadow.propTypes,
  bgActiveColor: PropTypes.string,
  bgHoverColor: PropTypes.string,
  contained: false,
  href: PropTypes.string,
  outline: false,
  raised: false,
  target: PropTypes.string,
  to: PropTypes.string,
};
 
const propsToTrimForLink = {
  ...propsToTrim,
  ...boxShadow.propTypes,
  bgActiveColor: PropTypes.string,
  bgHoverColor: PropTypes.string,
  contained: false,
  outline: false,
  raised: false,
};
export const ButtonComponent = ({
  children,
  emailHref,
  href,
  to,
  ...props
}) => {
  let output = null;
  const trimmedPropsLink = removeSomeProps(props, Object.keys(propsToTrimForLink));
  const emailLinkHref = emailHrefString(emailHref);
  if (href) {
    output = (
      <a href={href} {...trimmedPropsLink}>
        <div>{children}</div>
      </a>
    );
  } else if (to) {
    const linkProps = {
      to,
    };
    output = (
      <ReactRouterLink {...trimmedPropsLink} {...linkProps}>
        <div>{children}</div>
      </ReactRouterLink>
    );
  } else if (emailLinkHref) {
    return (
      <a href={emailLinkHref} {...trimmedPropsLink}>
        <div>{children}</div>
      </a>
    );
  } else {
    output = (
      <button type="button" {...removeSomeProps(props, Object.keys(propsToTrimForButton))}>
        <div>{children}</div>
      </button>
    );
  }
  return output;
};
ButtonComponent.propTypes = {
  children: PropTypes.any,
  emailHref: PropTypes.shape({
    bcc: PropTypes.string,
    body: PropTypes.string,
    cc: PropTypes.string,
    subject: PropTypes.string,
    to: PropTypes.string,
  }),
  href: PropTypes.string,
  to: PropTypes.string,
};
ButtonComponent.defaultProps = {
  children: null,
  emailHref: {},
  href: null,
  to: null,
};