@primer/react/lib/KeybindingHint/components/Key.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var _VisuallyHidden = require('../../_VisuallyHidden.js');
var keyNames = require('../key-names.js');
var useIsMacOS = require('../../hooks/useIsMacOS.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

/** Renders a single key with accessible alternative text. */
const Key = ({
  name,
  format
}) => {
  const isMacOS = useIsMacOS.useIsMacOS();
  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(_VisuallyHidden, null, keyNames.accessibleKeyName(name, isMacOS)), /*#__PURE__*/React__default.default.createElement("span", {
    "aria-hidden": true
  }, format === 'condensed' ? keyNames.condensedKeyName(name, isMacOS) : keyNames.fullKeyName(name, isMacOS)));
};

exports.Key = Key;