| 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176 |
89x
6x
6x
1x
5x
3x
2x
2x
6x
1x
5x
5x
6x
6x
6x
89x
89x
| import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '@collab-ui/react';
/**
*
* @category containers
* @component chip
* @variations collab-ui-react
*
*/
const Chip = ({
className,
leftContent,
fileDownloadLink,
fileType,
rightContent,
subTitle,
title,
type,
}) => {
Chip.displayName = 'Chip';
// This appears to be a false positive
// See: https://github.com/yannickcr/eslint-plugin-react/issues/1181
// eslint-disable-next-line react/no-multi-comp
function buildChipLeft() {
if (type === 'file') {
return <Icon name={`file-${fileType}_32`} />;
}
if (type === 'recording') {
return <Icon name="play-circle_32" color="white" />;
}
Iif (type === 'unauthorized') {
return <Icon name="warning_32" />;
}
return leftContent;
}
// eslint-disable-next-line react/no-multi-comp
function buildChipRight() {
if (rightContent) {
return rightContent;
}
Iif (type === 'file' && fileDownloadLink) {
return (
<a className="file-download" download href={fileDownloadLink}>
<i className="icon icon-download_32" />
</a>
);
}
return null;
}
const chipLeft = buildChipLeft();
const chipRight = buildChipRight();
return (
<div className={'cui-chip' + `${(className && ` ${className}`) || ''}`}>
<div className={'cui-chip-left' + `${(type && ` ${type}`) || ''}`}>
{chipLeft}
</div>
<div className="cui-chip-center">
{title && <div className="cui-chip__title lead">{title}</div>}
{subTitle && (
<div className="cui-chip__sub-title subheader">{subTitle}</div>
)}
</div>
{chipRight && <div className="cui-chip-right">{chipRight}</div>}
</div>
);
};
Chip.propTypes = {
/** @prop Optional css class string | '' */
className: PropTypes.string,
/** @prop Sets file for anchor element to download | '' */
fileDownloadLink: PropTypes.string,
/** @prop Sets type of file | null */
fileType: PropTypes.oneOf([
'audio',
'graph',
'image',
'locked',
'missing',
'pdf',
'spreadsheet',
'text',
'video',
'zip',
]),
/** @prop Node that becomes the content on the left of Chip | null */
leftContent: PropTypes.node,
/** @prop NOde that becomes the content on the right of Chip | null */
rightContent: PropTypes.node,
/** @prop Text of the Chip's subtitle | '' */
subTitle: PropTypes.string,
/** @prop Text of the Chip's title | null */
title: PropTypes.string,
/** @prop Sets the type of icon for the Chip | null */
type: PropTypes.oneOf(['file', 'recording', 'unauthorized']),
};
Chip.defaultProps = {
className: '',
fileDownloadLink: '',
fileType: null,
leftContent: null,
rightContent: null,
subTitle: '',
title: null,
type: null,
};
export default Chip;
/**
* @component chip
* @section recording
* @react
import { Chip } from '@collab-ui/react';
export default function ChipDefault() {
return (
<Chip
type="unauthorized"
title="Webex Teams Recording"
subTitle="18 min"
/>
);
}
**/
/**
* @component chip
* @section recording
* @react
import { Chip } from '@collab-ui/react';
export default function ChipRecording() {
return (
<Chip
type="recording"
title="Webex Teams Recording"
subTitle="18 min"
/>
);
}
**/
/**
* @component chip
* @section file
* @react
import { Chip } from '@collab-ui/react';
export default function ChipFile() {
return (
<Chip
type="file"
fileType="audio"
title="Filename.mp3"
subTitle="23kb"
fileDownloadLink="https://www.google.com"
/>
);
}
**/
|