@muvehealth/fixins/dist/elements/Grid/index.js.flow

Component library for Muvehealth

// @flow
import styled from 'react-emotion'
import {
  alignContent,
  alignItems,
  borders,
  color,
  gridAutoFlow,
  gridColumnGap,
  gridGap,
  gridRowGap,
  gridTemplateColumns,
  gridTemplateRows,
  height,
  justifyContent,
  maxWidth,
  style,
  space,
  width,
} from 'styled-system'
import { shouldForwardProp } from '../../utils'

const justifyItems = style({
  prop: 'justifyItems',
})

const gridTemplateAreas = style({
  prop: 'gridTemplateAreas',
})

const Grid = styled('div', { shouldForwardProp })(
  {
    display: 'grid',
    '@media print': {
      display: 'block !important',
      border: 'none',
      padding: 0,
      margin: 0,
    },
  }, ({ direction, cols }) => ({
    ...(direction === 'rows'
      ? {
        gridTemplateRows: cols ? `repeat(${cols}, 1fr)` : null,
      }
      : {
        gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : null,
      }),
  }),
  alignContent,
  alignItems,
  borders,
  color,
  gridAutoFlow,
  gridColumnGap,
  gridGap,
  gridRowGap,
  gridTemplateAreas,
  gridTemplateColumns,
  gridTemplateRows,
  height,
  justifyContent,
  justifyItems,
  maxWidth,
  space,
  width,
)

export default Grid