@vtex/styleguide/lib/EXPERIMENTAL_Modal/TopBar.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _Close = require("../icon/Close");

var _Close2 = _interopRequireDefault(_Close);

var _utils = require("./utils");

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

function TopBar(_ref, forwardedRef) {
  var showCloseIcon = _ref.showCloseIcon,
      children = _ref.children,
      onClose = _ref.onClose,
      showTopBar = _ref.showTopBar;

  var handleKeyPress = function handleKeyPress(_ref2) {
    var key = _ref2.key;

    if (key === _utils.Key.SPACE || key === _utils.Key.ENTER) {
      onClose();
    }
  };

  return _react2.default.createElement("div", null, _react2.default.createElement("div", {
    className: "min-h-regular min-h-large-ns pl6 pl8-ns"
  }, showCloseIcon && _react2.default.createElement("div", {
    className: 'fr pointer pr5-ns pt5-ns pr4 pt4'
  }, _react2.default.createElement("div", {
    role: "button",
    "aria-label": "Modal Close Button",
    className: (0, _classnames2.default)('ph3-ns pt3-ns pb2-ns ph2 pt2 pb1 br2 hover-b--transparent hover-bg-action-secondary hover-b--action-secondary'),
    onKeyPress: handleKeyPress,
    onClick: onClose,
    ref: forwardedRef,
    tabIndex: 0
  }, _react2.default.createElement(_Close2.default, {
    size: 20,
    color: "black"
  })))), showTopBar && children && _react2.default.createElement("div", {
    className: "t-heading-4 ml8-ns ml7 mb5"
  }, children));
}

exports.default = (0, _react.forwardRef)(TopBar);