@primer/components
Version:
Primer react components
83 lines (82 loc) • 2.36 kB
JavaScript
import styled from 'styled-components';
import { variant } from 'styled-system';
import { get } from '../constants';
import sx from '../sx';
export const tokenSizes = {
small: '16px',
medium: '20px',
large: '24px',
extralarge: '32px'
};
export const defaultTokenSize = 'medium';
export const isTokenInteractive = ({
as = 'span',
onClick,
onFocus,
tabIndex = -1
}) => Boolean(onFocus || onClick || tabIndex > -1 || ['a', 'button'].includes(as));
const variants = 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 = styled.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', get('fontWeights.bold'), variants, sx);
TokenBase.defaultProps = {
as: 'span',
size: defaultTokenSize
};
export default TokenBase;