jobiqo-cl/lib/src/components/02-atoms/06-layout/04-grid/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);

/**
 * Component that maps directly to CSS grid properties.
 *
 * This component was taken / inspired by https://styled-css-grid.js.org/
 */
/**
 * MinRowHeight prop can be used to set a minimum row height. defaults to 20px.
 */
const autoRows = ({ minRowHeight = '20px' }) => `minmax(${minRowHeight}, auto)`;
/**
 * "rows" or "columns" property when set to a number a shorthand for grid-template-columns: repeat(N, 1fr).
 * However, when you pass a string, the value is passed directly to the CSS property,
 * allowing you leverage the full power of this property.
 */
const frGetter = value => typeof value === 'number' ? `repeat(${value}, 1fr)` : value;
/**
 * The gap between elements. Default value is set to 8px.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
 */
const gapValue = ({ gap = '20px' }) => gap;
/**
 * The grid-auto-flow property. Default value is set to 8px.
 *
 * The grid-auto-flow CSS property controls how the auto-placement algorithm works,
 * specifying exactly how auto-placed items get flowed into the grid.
 * This property may take one of two forms:
 * a single keyword: one of row, column, or dense.
 * two keywords: row dense or column dense.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
 */
const flowValue = ({ flow = 'row' }) => flow;
/**
 * Will transform the array of "areas" passed to the grid so that it matches
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
 */
const formatAreas = areas => areas.map(area => `"${area}"`).join(' ');
/**
 * Renders a CSS Grid based on properties sent to the component according to the
 * CSS Grid spec.
 */
const Grid = styled__default.div `
  display: grid;
  height: ${({ height = 'auto' }) => height};
  grid-auto-flow: ${flowValue};
  grid-auto-rows: ${autoRows};
  ${({ rows }) => rows && `grid-template-rows: ${frGetter(rows)}`};
  grid-template-columns: ${({ columns = 12 }) => frGetter(columns)};
  grid-gap: ${gapValue};
  ${({ columnGap }) => columnGap && `column-gap: ${columnGap}`};
  ${({ rowGap }) => rowGap && `row-gap: ${rowGap}`};
  ${({ areas }) => areas && `grid-template-areas: ${formatAreas(areas)}`};
  ${({ justifyContent }) => justifyContent && `justify-content: ${justifyContent}`};
  ${({ alignContent }) => alignContent && `align-content: ${alignContent}`};
`;

exports.Grid = Grid;
exports.default = Grid;