All files / Molecules/SearchBars SearchBarUnderlined.js

100% Statements 8/8
100% Branches 0/0
100% Functions 3/3
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              1x             8x   8x   1x       1x                 1x             8x               1x                
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
 
import { Input } from '../../Atoms/Inputs'
import { Icon } from '../../Atoms/Icons'
 
const Wrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid
    ${(props) => props.theme['searchBarUnderlinedBorderColor']};
  background-color: ${(props) =>
    props.theme['searchBarUnderlinedBackgroundColor']};
`
const SearchInput = styled(Input)`
  background-color: inherit;
  border-color: transparent;
`
const IconContainer = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 40px;
`
 
const SearchBarUnderlined = ({
  children,
  onChange,
  onClick,
  value,
  ...rest
}) => (
  <Wrapper>
    <SearchInput onChange={onChange} value={value} {...rest} />
    <IconContainer>
      <Icon name="search-filled" onClick={onClick} selectable size="20px" />
    </IconContainer>
  </Wrapper>
)
 
SearchBarUnderlined.propTypes = {
  children: PropTypes.node,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
  value: PropTypes.any,
}
 
export default SearchBarUnderlined