@helpscout/hsds-react/components/KeyboardBadge/KeyboardBadge.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _classnames = _interopRequireDefault(require("classnames"));

var _KeyboardBadge = require("./KeyboardBadge.css");

var _jsxRuntime = require("react/jsx-runtime");

var isApple = function isApple() {
  return typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
};

var IS_APPLE = isApple();

var formatHotkey = function formatHotkey(hotkey) {
  if (!hotkey) return ''; // !we need to recalculate when in test mode so we can test correctly for Mac, PC and linux

  var apple = process.env.NODE_ENV === 'test' ? isApple() : IS_APPLE;
  return hotkey.replaceAll('+', ' + ').replaceAll('mod', apple ? '⌘' : 'Ctrl').split(' ').map(function (t) {
    if (t.length < 2) return t;
    return t.charAt(0).toUpperCase() + t.slice(1);
  }).join(' ');
};

function KeyboardBadge(props) {
  var className = props.className,
      children = props.children,
      value = props.value,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "children", "value"]);
  var componentClassName = (0, _classnames.default)('c-KeyboardBadge', className);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardBadge.KeyboardBadgeUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
    "data-testid": "KeyboardBadge",
    className: componentClassName,
    children: formatHotkey(value)
  }));
}

KeyboardBadge.defaultProps = {
  'data-cy': 'KeyboardBadge'
};
KeyboardBadge.propTypes = {
  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Text of what will appear in the badge */
  value: _propTypes.default.string.isRequired
};
var _default = KeyboardBadge;
exports.default = _default;