@catho/quantum/Hamburger/Hamburger.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _theme = require("../shared/theme");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Wrapper = _styledComponents["default"].div.withConfig({
  displayName: "Hamburger__Wrapper",
  componentId: "sc-1rwv6qg-0"
})(["display:inline-block;position:relative;width:24px;height:24px;"]);
var Icon = (0, _styledComponents["default"])(_Icon["default"]).withConfig({
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'inverted';
  }
}).withConfig({
  displayName: "Hamburger__Icon",
  componentId: "sc-1rwv6qg-1"
})(["color:", ";"], function (props) {
  return props.inverted ? _theme.colors.neutral[900] : _theme.colors.neutral[0];
});
var IconDot = _styledComponents["default"].span.withConfig({
  displayName: "Hamburger__IconDot",
  componentId: "sc-1rwv6qg-2"
})(["position:absolute;width:7px;height:7px;border:solid 2px ", ";top:0;right:0;border-radius:100%;background-color:", ";"], function (props) {
  return _theme.colors.neutral[props.inverted ? 0 : 1000];
}, _theme.colors.error[700]);
var Hamburger = function Hamburger(_ref) {
  var _ref$inverted = _ref.inverted,
    inverted = _ref$inverted === void 0 ? false : _ref$inverted,
    _ref$showNotification = _ref.showNotification,
    showNotification = _ref$showNotification === void 0 ? false : _ref$showNotification,
    _ref$isOpened = _ref.isOpened,
    isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
    _ref$ariaLabelDescrip = _ref.ariaLabelDescription,
    ariaLabelDescription = _ref$ariaLabelDescrip === void 0 ? 'There are new notifications' : _ref$ariaLabelDescrip;
  var Block = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [showNotification && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDot, {
      "aria-label": ariaLabelDescription,
      inverted: inverted
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
      name: "menu",
      inverted: inverted
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
    "aria-live": "polite",
    children: isOpened ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
      name: "close",
      inverted: inverted
    }) : Block
  });
};
Hamburger.propTypes = {
  showNotification: _propTypes["default"].bool,
  isOpened: _propTypes["default"].bool,
  /** Swap background and text color */
  inverted: _propTypes["default"].bool,
  ariaLabelDescription: _propTypes["default"].string
};
var _default = exports["default"] = Hamburger;