@b2bfinance/products-embed/lib/ProductColumns.js

products-embed React component

"use strict";

exports.__esModule = true;

var _core = require("@material-ui/core");

var _styles = require("@material-ui/styles");

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var useStyles = (0, _styles.makeStyles)(function (theme) {
  var _productColumnWrapper;

  return {
    productColumnWrapper: (_productColumnWrapper = {
      borderTop: "1px solid " + theme.palette.grey[200],
      padding: theme.spacing(2, 1),
      textAlign: "center",
      flexGrow: 0,
      flexBasis: "100%",
      maxWidth: "100%"
    }, _productColumnWrapper[theme.breakpoints.up("md")] = {
      flexBasis: function flexBasis(props) {
        return props.width + "%";
      },
      maxWidth: function maxWidth(props) {
        return props.width + "%";
      },
      margin: theme.spacing(2, 0),
      padding: theme.spacing(0, 2),
      borderTop: 0,
      borderRight: "1px solid " + theme.palette.grey[200]
    }, _productColumnWrapper["&:first-child"] = {
      borderTop: 0
    }, _productColumnWrapper)
  };
});

var ProductColumns = function ProductColumns(_ref) {
  var columns = _ref.columns;

  var classes = useStyles({
    width: 75 / columns.length
  });

  return columns.map(function (column, i) {
    return _react2.default.createElement(
      "div",
      { className: classes.productColumnWrapper, key: i },
      _react2.default.createElement(
        _core.Typography,
        { variant: "subtitle2", component: "div", color: "textPrimary" },
        column.label
      ),
      _react2.default.createElement(
        _core.Typography,
        { variant: "h5", component: "div", color: "textPrimary" },
        column.value
      ),
      column.subtext && _react2.default.createElement(
        _core.Typography,
        { variant: "caption", component: "div", color: "textSecondary" },
        column.subtext
      )
    );
  });
};

exports.default = ProductColumns;
module.exports = exports["default"];