@age/quantum/Hamburger/Hamburger.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _theme = require("../shared/theme");

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

var HAMBURGER_SIZE = 24;
var NOTIFICATION_SIZE = 7;

var getColors = function getColors(_ref) {
  var inverted = _ref.inverted;
  var weight = !inverted ? 0 : 900;
  return _theme.colors.neutral[weight];
};

var HamburgerWrapper = _styledComponents.default.div.withConfig({
  displayName: "Hamburger__HamburgerWrapper",
  componentId: "d3x1kx-0"
})(["display:inline-block;position:relative;width:", "px;height:", "px;"], HAMBURGER_SIZE, HAMBURGER_SIZE);

var NotificationIcon = _styledComponents.default.span.withConfig({
  displayName: "Hamburger__NotificationIcon",
  componentId: "d3x1kx-1"
})(["position:absolute;width:", "px;height:", "px;border:solid 2px ", "}};top:0;right:0;border-radius:", "px;background-color:", ";"], NOTIFICATION_SIZE, NOTIFICATION_SIZE, function (props) {
  return _theme.colors.neutral[props.inverted ? 0 : 1000];
}, NOTIFICATION_SIZE, _theme.colors.error[700]);

var HamburgerIconWrapper = (0, _styledComponents.default)(_Menu.default).withConfig({
  displayName: "Hamburger__HamburgerIconWrapper",
  componentId: "d3x1kx-2"
})(["color:", ";"], getColors);
var CloseIconWrapper = (0, _styledComponents.default)(_Close.default).withConfig({
  displayName: "Hamburger__CloseIconWrapper",
  componentId: "d3x1kx-3"
})(["color:", ";"], getColors);

var Hamburger = function Hamburger(_ref2) {
  var showNotification = _ref2.showNotification,
      isOpened = _ref2.isOpened,
      inverted = _ref2.inverted,
      ariaLabelDescription = _ref2.ariaLabelDescription;

  var HamburgerBlock = _react.default.createElement(_react.default.Fragment, null, showNotification && _react.default.createElement(NotificationIcon, {
    "aria-label": ariaLabelDescription,
    inverted: inverted
  }), _react.default.createElement(HamburgerIconWrapper, {
    inverted: inverted ? 1 : 0
  }));

  return _react.default.createElement(HamburgerWrapper, {
    "aria-live": "polite"
  }, !isOpened ? HamburgerBlock : _react.default.createElement(CloseIconWrapper, {
    inverted: inverted
  }));
};

HamburgerWrapper.displayName = 'HamburgerWrapper';
Hamburger.displayName = 'Hamburger';
Hamburger.propTypes = {
  showNotification: _propTypes.default.bool,
  isOpened: _propTypes.default.bool,

  /** Swap background and text color */
  inverted: _propTypes.default.bool,
  ariaLabelDescription: _propTypes.default.string
};
Hamburger.defaultProps = {
  inverted: false,
  showNotification: false,
  isOpened: false,
  ariaLabelDescription: 'There are new notifications'
};
var _default = Hamburger;
exports.default = _default;