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

products-embed React component

"use strict";

exports.__esModule = true;

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

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

var _Whatshot = require("@material-ui/icons/Whatshot");

var _Whatshot2 = _interopRequireDefault(_Whatshot);

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _ProductLabels = require("./ProductLabels");

var _ProductLabels2 = _interopRequireDefault(_ProductLabels);

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

var useStyles = (0, _styles.makeStyles)(function (theme) {
  var _productHeadingWrappe, _productLogoWrapper, _productLabels;

  return {
    productHeadingWrapper: (_productHeadingWrappe = {
      backgroundColor: theme.palette.grey[200],
      padding: theme.spacing(2)
    }, _productHeadingWrappe[theme.breakpoints.up("xs")] = {
      backgroundColor: "transparent",
      padding: 0,
      borderBottom: 0
    }, _productHeadingWrappe),
    productLogoWrapper: (_productLogoWrapper = {
      marginBottom: theme.spacing(1)
    }, _productLogoWrapper[theme.breakpoints.up("sm")] = {
      backgroundColor: theme.palette.common.white,
      display: "flex",
      padding: theme.spacing(1),
      margin: theme.spacing(0, 2, -1, 1.5),
      border: "1px solid " + theme.palette.grey[200],
      textAlign: "center",
      height: theme.spacing(11)
    }, _productLogoWrapper),
    productLogo: {
      maxWidth: "100%",
      maxHeight: "100%",
      margin: "auto"
    },
    productHighlightedIcon: {
      marginLeft: theme.spacing(0.5),
      color: _colors.orange[300]
    },
    productLabels: (_productLabels = {}, _productLabels[theme.breakpoints.up("sm")] = {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center"
    }, _productLabels)
  };
});

var ProductHeadingRow = function ProductHeadingRow(_ref) {
  var logo = _ref.logo,
      brand = _ref.brand,
      highlighted = _ref.highlighted,
      title = _ref.title,
      labels = _ref.labels;

  var classes = useStyles();

  return _react2.default.createElement(
    _core.Grid,
    {
      className: classes.productHeadingWrapper,
      container: true,
      alignItems: "flex-start"
    },
    _react2.default.createElement(
      _core.Grid,
      { item: true, xs: 12, sm: 3, md: 2 },
      _react2.default.createElement(
        "div",
        { className: classes.productLogoWrapper },
        _react2.default.createElement("img", { className: classes.productLogo, src: logo, alt: brand })
      )
    ),
    _react2.default.createElement(
      _core.Grid,
      { item: true, xs: 12, sm: 5, md: 7 },
      _react2.default.createElement(
        _core.Typography,
        { color: "textPrimary", component: _core.Grid, container: true },
        _react2.default.createElement(
          _core.Grid,
          { item: true, xs: 12 },
          _react2.default.createElement(
            _core.Grid,
            { container: true, alignItems: "center" },
            _react2.default.createElement(
              _core.Grid,
              { item: true },
              _react2.default.createElement(
                _core.Typography,
                { variant: "h5", component: "p" },
                brand
              )
            ),
            _react2.default.createElement(
              _core.Grid,
              { item: true },
              highlighted && _react2.default.createElement(_Whatshot2.default, { className: classes.productHighlightedIcon })
            )
          )
        ),
        _react2.default.createElement(
          _core.Grid,
          { item: true, xs: 12 },
          _react2.default.createElement(
            _core.Typography,
            null,
            title
          )
        )
      )
    ),
    labels && labels.length > 0 && _react2.default.createElement(
      _core.Grid,
      { className: classes.productLabels, item: true, xs: 12, sm: 4, md: 3 },
      _react2.default.createElement(_ProductLabels2.default, { labels: labels })
    )
  );
};

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