All files / Atoms/Images Background.js

100% Statements 9/9
100% Branches 2/2
100% Functions 5/5
100% Lines 9/9

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            1x 10x 10x 10x 10x         1x 10x                     1x               1x                
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
 
import ImageMap from './ImageMap'
 
const Wrapper = styled.div`
  height: ${(props) => props.height};
  width: ${(props) => props.width};
  background-image: url(${(props) => props.path});
  background-size: ${(props) => (props.stretch ? 'cover' : 'contain')};
  background-repeat: no-repeat;
  background-position: center;
`
 
const Background = ({ children, name, height, width, stretch, ...rest }) => (
  <Wrapper
    height={height}
    path={ImageMap[name]}
    stretch={stretch}
    width={width}
    {...rest}
  >
    {children}
  </Wrapper>
)
 
Background.propTypes = {
  children: PropTypes.node,
  height: PropTypes.string,
  name: PropTypes.string,
  stretch: PropTypes.bool,
  width: PropTypes.string,
}
 
Background.defaultProps = {
  height: '200px',
  name: 'logo',
  stretch: false,
  width: '200px',
}
 
export default Background