All files / components/Button Button.js

100% Statements 8/8
100% Branches 8/8
100% Functions 2/2
100% Lines 8/8

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          13x     4x     13x       13x                     13x                           13x                 4x           13x      
import React from 'react';
import { node, bool, string, oneOfType, oneOf, func } from 'prop-types';
import styled from 'styled-components';
import StyledButton from './StyledButton';
 
const ContentWrapper = styled.span`
  display: flex;
  align-items: center;
  opacity: ${({ submitting }) => (submitting ? '0' : '1')};
`;
 
ContentWrapper.propTypes = {
  submitting: bool.isRequired,
};
 
const SpinnerWrapper = styled.span`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
`;
 
const propTypes = {
  /** submitting flag that shows a component passed to renderSpinner prop */
  submitting: bool,
  /** btnTypes keys in the theme passed to <ButtonProvider /> */
  btnType: string,
  /** sizings keys in the theme passed to <ButtonProvider /> */
  sizing: string,
  /** spinner component shown when submitting flag is true */
  renderSpinner: node,
  /** rendered html tag or custom router link component */
  as: oneOfType([oneOf(['a', 'button']), func]),
  children: node,
};
 
const Button = ({
  btnType: btntype = 'default',
  sizing = 'm',
  submitting = false,
  renderSpinner,
  children,
  as = 'button',
  ...rest
}) => (
  <StyledButton as={as} sizing={sizing} btntype={btntype} {...rest}>
    {submitting && <SpinnerWrapper>{renderSpinner}</SpinnerWrapper>}
    <ContentWrapper submitting={submitting}>{children}</ContentWrapper>
  </StyledButton>
);
 
Button.propTypes = propTypes;
 
export default Button;