@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");

var _sx = _interopRequireDefault(require("../sx"));

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

const tokenSizes = {
  small: '16px',
  medium: '20px',
  large: '24px',
  extralarge: '32px'
};
exports.tokenSizes = tokenSizes;
const defaultTokenSize = 'medium';
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)({
  prop: 'size',
  variants: {
    small: {
      fontSize: 0,
      height: tokenSizes.small,
      // without setting lineHeight to match height, the "x" appears vertically mis-aligned
      lineHeight: tokenSizes.small,
      paddingLeft: 1,
      paddingRight: 1,
      // need to explicitly set padding top and bottom to "0" to override default `<button>` element styles
      // without setting these, the "x" appears vertically mis-aligned
      paddingTop: 0,
      paddingBottom: 0
    },
    medium: {
      fontSize: 0,
      height: tokenSizes.medium,
      lineHeight: tokenSizes.medium,
      paddingLeft: 2,
      paddingRight: 2,
      paddingTop: 0,
      paddingBottom: 0
    },
    large: {
      fontSize: 0,
      height: tokenSizes.large,
      lineHeight: tokenSizes.large,
      paddingLeft: 2,
      paddingRight: 2,
      paddingTop: 0,
      paddingBottom: 0
    },
    extralarge: {
      fontSize: 1,
      height: tokenSizes.extralarge,
      lineHeight: tokenSizes.extralarge,
      paddingLeft: 3,
      paddingRight: 3,
      paddingTop: 0,
      paddingBottom: 0
    }
  }
});

const TokenBase = _styledComponents.default.span.attrs(({
  text,
  onRemove,
  onKeyDown
}) => ({
  onKeyDown: event => {
    onKeyDown && onKeyDown(event);

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

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