@cbinsights/fds/lib/components/Flex/index.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _classcat = _interopRequireDefault(require("classcat"));

/**
 * @description map of alignment prop values to class names
 */
var DirectionPropMap = {
  row: 'flex--row',
  column: 'flex--column'
};
/**
 * @description map of justify prop values to class names
 */

exports.DirectionPropMap = DirectionPropMap;
var JustifyPropMap = {
  end: 'flex--justifyEnd',
  center: 'flex--justifyCenter',
  spaceBetween: 'flex--justifySpaceBetween',
  spaceAround: 'flex--justifySpaceAround'
};
/**
 * @description map of align prop values to class names
 */

exports.JustifyPropMap = JustifyPropMap;
var AlignPropMap = {
  start: 'flex--alignStart',
  end: 'flex--alignEnd',
  center: 'flex--alignCenter',
  stretch: 'flex--alignStretch'
};
exports.AlignPropMap = AlignPropMap;

/**
 * @param {Object} props react props
 * @returns {ReactElement}
 */
var Flex = function Flex(_ref) {
  var _ref$align = _ref.align,
      align = _ref$align === void 0 ? 'stretch' : _ref$align,
      _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
      breakpoint = _ref.switchDirection,
      reverse = _ref.reverse,
      justify = _ref.justify,
      noGutters = _ref.noGutters,
      children = _ref.children;
  var classNames = (0, _classcat.default)(['flex', AlignPropMap[align], DirectionPropMap[direction], justify && JustifyPropMap[justify], (0, _defineProperty2.default)({}, "".concat(breakpoint, ":flex--").concat(direction === 'row' ? 'column' : 'row'), breakpoint), {
    'flex--reverse': reverse
  }, {
    'flex--noGutters': noGutters
  }]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classNames
  }, children);
};

var _default = Flex;
exports.default = _default;