pure-styled-components/dist/components/Grid/Grid.Unit.js

Styled Component design system based on Pure CSS for React/Preact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledSystem = require("styled-system");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const GridUnit = ({
  className,
  children
}, ...rest) => _react.default.createElement("div", _extends({
  className: className
}, rest), children);
/**
 * Creates a "unit" inside of the flexbox grid.
 * Comparable to a column in Bootstrap or cell in a spreadsheet.
 *
 * @param {object} {className, children}
 */


const Unit = (0, _styledComponents.default)(GridUnit)`
  ${_styledSystem.space}
  ${_styledSystem.width}
  ${_styledSystem.fontSize}
  ${_styledSystem.color}
  display: inline-block;
  *display: inline; /* IE < 8: fake inline-block */
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
`;
Unit.propTypes = {
  /**
   * Responsive margin values (string or array).
   * Similar props: `mt: margin-top`, `mx: margin-left and margin-right`
   */
  m: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),

  /**
   * Responsive padding values (string or array)
   * Similar props: `pt: padding-top`, `px: padding-left and padding-right`
   */
  p: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),

  /**
   * Responsive width values (number or array)
   * Numbers from 0-1 are converted to percentage widths.
   * Numbers greater than 1 are converted to pixel values.
   * String values are passed as raw CSS values.
   * And arrays are converted to responsive width styles.
   */
  width: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),

  /**
   * Responsive width values (number or array)
   * Numbers from 0-8 (or theme.fontSizes.length) are converted to values on the font size scale.
   * Numbers greater than theme.fontSizes.length are converted to raw pixel values.
   * String values are passed as raw CSS values.
   * And array values are converted into responsive values.
   */
  fontSize: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),

  /**
   * Set text alignment inside component
   */
  textAlign: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.string]),

  /**
   * Set font color of component
   */
  color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.string]),

  /**
   * Set background color of component
   */
  bg: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.string]),

  /**
   * Child components (array or single element)
   */
  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
};
/** @component */

var _default = Unit;
exports.default = _default;
//# sourceMappingURL=Grid.Unit.js.map