-
Notifications
You must be signed in to change notification settings - Fork 112
/
DisplayPill.tsx
71 lines (68 loc) · 2.14 KB
/
DisplayPill.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import * as React from 'react';
import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
import type {BoxElementProps} from '@twilio-paste/box';
import type {HTMLPasteProps} from '@twilio-paste/types';
import {secureExternalLink} from '@twilio-paste/anchor';
type DisplayPillProps = HTMLPasteProps<'a'> & Pick<BoxElementProps, 'element'>;
/**
* Display represents a saved entity as part of a collection, usually as a result of multi selection.
* Display pills should not be used in forms or for editing
* @example
* <DisplayPill
* onFocus={() => {
* console.log('Focused Tennis!');
* }}
* onBlur={() => {
* console.log('Blurred Tennis!');
* }}
* href="https://google.com"
* >
* Tennis
* </DisplayPill>
* @see https://paste.twilio.design/components/display-pill-group
*/
export const DisplayPill = React.forwardRef<HTMLAnchorElement, DisplayPillProps>(
({element = 'DISPLAY_PILL', ...props}, ref) => {
return (
<Box as="li" listStyleType="none">
<Box
{...safelySpreadBoxProps(props)}
{...(props.href ? secureExternalLink(props.href) : {})}
ref={ref}
element={element}
as={props.href ? 'a' : 'div'}
alignItems="center"
backgroundColor="colorBackgroundWeak"
borderRadius="borderRadiusPill"
boxShadow="shadowBorderWeaker"
color="colorTextWeak"
columnGap="space20"
cursor={props.href ? 'pointer' : 'default'}
display="flex"
fontSize="fontSize20"
fontWeight="fontWeightMedium"
lineHeight="lineHeight10"
paddingX="space30"
paddingY="space20"
outline="none"
_hover={
props.href
? {
backgroundColor: 'colorBackground',
boxShadow: 'shadowBorder',
textDecoration: 'none',
}
: undefined
}
_focus={{
boxShadow: 'shadowFocus',
textDecoration: 'none',
}}
>
{props.children}
</Box>
</Box>
);
}
);
DisplayPill.displayName = 'DisplayPill';