Styled System Box

Box.js

/**
 * Box
 *
 * Usage:
 *  <Box
 *    margin='small|medium|large|none'
 *    margin={{
 *      hz: 'small|medium|large|none',
 *      vt: 'small|medium|large|none'
 *    }}
 *    padding='small|medium|large|none'
 *    padding={{
 *      hz: 'small|medium|large|none',
 *      vt: 'small|medium|large|none'
 *    }}
 *  >
 *
 * @type {React.StatelessComponent}
 */
import styled from 'styled-components'
import {
  responsiveStyle,
  theme,
  space,
  width,
  fontSize,
  fontWeight,
  color,
  flex,
  flexWrap,
  flexDirection,
  alignItems,
  alignSelf,
  justifyContent,
  textAlign,
  borderRadius,
  borderColor,
  borderWidth,
  boxShadow,
  hover,
  focus,
  active,
  disabled
} from 'styled-system'

const letterSpacing = responsiveStyle({
  prop: 'letterSpacing',
  cssProperty: 'letter-spacing'
})

const StyledBox = styled.div`
  flex: 0 0 auto;
  ${flex}
  ${flexWrap}
  ${flexDirection}
  ${alignItems}
  ${alignSelf}
  ${justifyContent}
  ${space}
  ${width}
  ${fontSize}
  ${fontWeight}
  ${letterSpacing}
  ${color}
  ${textAlign}
  ${borderColor}
  ${borderRadius}
  ${borderWidth}
  ${boxShadow}
  ${hover}
  ${focus}
  ${active}
  ${disabled}
  font-family: ${props => props.fontFamily || theme('font.family', 'Arial')};
  overflow-y: ${props =>
    props.scroll === 'vertical' || props.scroll === 'both' ?
      'scroll' :
      'visible'};
  overflow-x: ${props =>
    props.scroll === 'horizontal' || props.scroll === 'both' ?
      'scroll' :
      'visible'};
  display: ${props => (props.flexContainer ? 'flex' : 'block')};
  height: ${props => (props.full ? '100%' : props.height || 'auto')};
`

export default StyledBox