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

products-embed React component

"use strict";

exports.__esModule = true;

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

var _Close = require("@material-ui/icons/Close");

var _Close2 = _interopRequireDefault(_Close);

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) {
  return {
    productMoreInfoHeaderWrapper: {
      padding: theme.spacing(1),
      borderBottom: "2px solid " + theme.palette.grey[200]
    },
    productMoreInfoHeaderLogoWrapper: {
      border: "2px solid " + theme.palette.grey[200],
      display: "flex",
      height: 100,
      width: 150
    },
    productMoreInfoHeaderLogo: {
      maxWidth: "100%",
      maxHeight: "100%",
      margin: "auto"
    },
    productMoreInfoHeaderCloseButton: {
      position: "absolute",
      top: theme.spacing(1),
      right: theme.spacing(1)
    }
  };
});

var ProductMoreInfoHeader = function ProductMoreInfoHeader(_ref) {
  var title = _ref.title,
      brand = _ref.brand,
      logo = _ref.logo,
      onClose = _ref.onClose;

  var classes = useStyles();

  return _react2.default.createElement(
    "div",
    { className: classes.productMoreInfoHeaderWrapper },
    _react2.default.createElement(
      _core.Grid,
      { container: true },
      _react2.default.createElement(
        _core.Hidden,
        { xsDown: true },
        _react2.default.createElement(
          _core.Grid,
          { item: true, sm: 3, md: 3, xl: 2 },
          _react2.default.createElement(
            "div",
            { className: classes.productMoreInfoHeaderLogoWrapper },
            _react2.default.createElement("img", {
              className: classes.productMoreInfoHeaderLogo,
              src: logo,
              alt: brand
            })
          )
        )
      ),
      _react2.default.createElement(
        _core.Grid,
        { item: true, sm: 9, md: 9, xl: 10, mt: 1 },
        _react2.default.createElement(
          _core.Grid,
          { container: true },
          _react2.default.createElement(
            _core.Grid,
            { item: true, xs: 12 },
            _react2.default.createElement(
              _core.Typography,
              { variant: "h4" },
              brand
            )
          ),
          _react2.default.createElement(
            _core.Grid,
            { item: true, xs: 12 },
            _react2.default.createElement(
              _core.Typography,
              { variant: "subtitle1" },
              title
            )
          )
        )
      )
    ),
    _react2.default.createElement(
      "div",
      { className: classes.productMoreInfoHeaderCloseButton },
      _react2.default.createElement(
        _core.IconButton,
        { "aria-label": "Close", onClick: onClose },
        _react2.default.createElement(_Close2.default, null)
      )
    )
  );
};

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