All files / Atoms/Inputs Input.js

100% Statements 14/14
100% Branches 0/0
100% Functions 10/10
100% Lines 13/13

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        3x 24x 24x     24x       24x   24x   24x     24x           24x 24x         24x   3x               3x              
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
 
const Wrapper = styled.input.attrs({
  name: (props) => props.name,
  type: (props) => props.type,
})`
  display: block;
  width: ${(props) => props.width};
  height: 52px;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: ${(props) => props.theme['fontPrimary']};
  font-size: 18px;
  color: ${(props) => props.theme['inputColor']};
  border-width: 1px;
  border-color: ${(props) => props.theme['inputBorderColor']};
  border-style: solid;
  border-radius: 0.5rem;
  background-color: ${(props) => props.theme['inputBackgroundColor']};
  background-image: none;
  outline-width: 0;
  user-select: text;
 
  &:disabled {
    color: ${(props) => props.theme['inputColor']};
    background: ${(props) => props.theme['inputBackgroundColor']};
    cursor: not-allowed;
  }
`
 
const Input = (props) => <Wrapper {...{ ...props, ...props.input }} />
 
Input.propTypes = {
  disabled: PropTypes.bool,
  input: PropTypes.object,
  name: PropTypes.string,
  type: PropTypes.oneOf(['text', 'date', 'number', 'password', 'search']),
  width: PropTypes.string,
}
 
Input.defaultProps = {
  disabled: false,
  type: 'text',
  width: '100%',
}
 
export default Input