All files ModalHeader.js

100% Statements 9/9
100% Branches 4/4
100% Functions 2/2
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60          3x       3x         3x               1x         3x 2x                               3x   3x             3x            
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import { Flex, CloseButton, deprecatedPropType, Text } from 'pcln-design-system'
 
const HeaderWrapper = styled(Flex)`
  height: 40px;
`
 
const Title = styled(Text)`
  display: flex;
  align-items: center;
`
 
const StyledCloseButton = styled(CloseButton)`
  height: 24px;
  width: 24px;
  svg {
    vertical-align: top;
  }
 
  &:focus {
    background-color: ${(props) => props.theme.palette.primary.dark};
    outline: none;
  }
`
 
const ModalHeader = ({ bg, color, onClose, title }) => (
  <HeaderWrapper
    align='center'
    alignItems='center'
    color={color}
    bg={bg}
    px={3}
  >
    {title && (
      <Title fontSize={1} bold>
        {title}
      </Title>
    )}
    {onClose && <StyledCloseButton onClick={onClose} ml='auto' />}
  </HeaderWrapper>
)
 
ModalHeader.displayName = ModalHeader
 
ModalHeader.propTypes = {
  bg: deprecatedPropType('color'),
  onClose: PropTypes.func,
  color: PropTypes.string,
  title: PropTypes.string,
}
 
ModalHeader.defaultProps = {
  bg: 'blue',
  color: 'white',
}
 
export default ModalHeader