@primer/components/lib/Token/TokenBase.js

Primer react components

"use strict";

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

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

var _styledSystem = require("styled-system");

var _constants = require("../constants");

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

const tokenSizes = {
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32
};
exports.tokenSizes = tokenSizes;
const defaultTokenSize = 'md';
exports.defaultTokenSize = defaultTokenSize;

const isTokenInteractive = ({
  as = 'span',
  onClick,
  onFocus,
  tabIndex = -1
}) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));

exports.isTokenInteractive = isTokenInteractive;
const variants = (0, _styledSystem.variant)({
  variants: {
    sm: {
      fontSize: 0,
      gap: 1,
      height: `${tokenSizes.sm}px`,
      paddingLeft: 1,
      paddingRight: 1
    },
    md: {
      fontSize: 0,
      gap: 1,
      height: `${tokenSizes.md}px`,
      paddingLeft: 2,
      paddingRight: 2
    },
    lg: {
      fontSize: 0,
      gap: 2,
      height: `${tokenSizes.lg}px`,
      paddingLeft: 2,
      paddingRight: 2
    },
    xl: {
      fontSize: 1,
      gap: 2,
      height: `${tokenSizes.xl}px`,
      paddingLeft: 3,
      paddingRight: 3
    }
  }
});

const TokenBase = _styledComponents.default.span.attrs(({
  text,
  handleRemove,
  onKeyUp
}) => ({
  onKeyUp: e => {
    onKeyUp && onKeyUp(e);

    if ((e.key === 'Backspace' || e.key === 'Delete') && handleRemove) {
      handleRemove();
    }
  },
  'aria-label': handleRemove ? `${text}, press backspace or delete to remove` : undefined
})).withConfig({
  displayName: "TokenBase",
  componentId: "opajvp-0"
})(["align-items:center;border-radius:999px;cursor:", ";display:inline-flex;font-weight:", ";text-decoration:none;white-space:nowrap;", ""], props => isTokenInteractive(props) ? 'pointer' : 'auto', (0, _constants.get)('fontWeights.bold'), variants);

TokenBase.defaultProps = {
  as: 'span',
  variant: defaultTokenSize
};
var _default = TokenBase;
exports.default = _default;