All files / Atoms/Buttons Button.js

100% Statements 15/15
100% Branches 8/8
100% Functions 10/10
100% Lines 15/15

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        1x 10x   1x 10x                   10x 10x     10x       10x 10x     10x 10x     1x 10x     1x             1x              
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
 
const getHoverColor = (disabled, theme) =>
  disabled ? theme['buttonBackgroundColor'] : theme['buttonHoverColor']
 
const Wrapper = styled.button.attrs({
  type: (props) => props.type,
})`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 30px;
  box-sizing: border-box;
  font-size: 18px;
  color: ${(props) => props.theme['buttonColor']};
  background-color: ${(props) => props.theme['buttonBackgroundColor']};
  border: none;
  border-radius: 5px;
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  outline: none;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  font-family: ${(props) => props.theme['fontPrimary']};
 
  &:hover {
    background-color: ${(props) => getHoverColor(props.disabled, props.theme)};
    transform: ${(props) => (props.bounced ? 'scale(0.95)' : 'none')};
  }
`
const Button = ({ children, ...rest }) => (
  <Wrapper {...rest}>{children}</Wrapper>
)
 
Button.propTypes = {
  bounced: PropTypes.bool,
  children: PropTypes.node,
  disabled: PropTypes.bool,
  type: PropTypes.oneOf(['button', 'reset', 'submit']),
}
 
Button.defaultProps = {
  bounced: false,
  disabled: false,
  type: 'button',
}
 
export default Button