vcc-ui/lib/components/row/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

"use strict";

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

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

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

var _reactFela = require("react-fela");

var _flex = require("../flex");

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var styles = {
  row: function row(_ref) {
    var theme = _ref.theme,
        align = _ref.align;
    return _defineProperty({
      boxSizing: 'border-box',
      justifyContent: align === 'center' ? 'center' : 'flex-' + align,
      marginLeft: -theme.baselineGrid,
      marginRight: -theme.baselineGrid,
      flexDirection: 'row',
      flexWrap: 'wrap'
    }, theme.breakpoints.fromL, {
      marginLeft: theme.baselineGrid * -1.5,
      marginRight: theme.baselineGrid * -1.5
    });
  }
};

function Row(_ref3) {
  var children = _ref3.children,
      _ref3$align = _ref3.align,
      align = _ref3$align === void 0 ? 'start' : _ref3$align;

  var _useFela = (0, _reactFela.useFela)(),
      theme = _useFela.theme;

  var styleProps = {
    theme: theme,
    align: align
  };
  return _react.default.createElement(_flex.Flex, {
    extend: styles.row(styleProps)
  }, children);
}

Row.propTypes = {
  /** Align columns */
  align: _propTypes.default.oneOf(['start', 'end', 'center']),

  /** A JSX node */
  children: _propTypes.default.node
};