orcs-design-system 3.1.9 → 3.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,7 @@ export var defaultAvatar = function defaultAvatar() {
|
|
|
14
14
|
title: "Ayden Lundgre",
|
|
15
15
|
initials: "AL",
|
|
16
16
|
subtitle: "Senior Business Analyst",
|
|
17
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
17
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
defaultAvatar.storyName = "Default";
|
|
@@ -37,7 +37,7 @@ export var imageOnly = function imageOnly() {
|
|
|
37
37
|
return /*#__PURE__*/React.createElement(Spacer, {
|
|
38
38
|
my: 4
|
|
39
39
|
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
40
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
40
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
41
41
|
imageAlt: "Ayden Lundgre"
|
|
42
42
|
}));
|
|
43
43
|
};
|
|
@@ -58,7 +58,7 @@ export var nameLink = function nameLink() {
|
|
|
58
58
|
}, "Ayden Lundgre"),
|
|
59
59
|
subtitle: "Senior Business Analyst",
|
|
60
60
|
initials: "AL",
|
|
61
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
61
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
62
62
|
imageAlt: "Ayden Lundgre"
|
|
63
63
|
});
|
|
64
64
|
};
|
|
@@ -76,7 +76,7 @@ export var small = function small() {
|
|
|
76
76
|
title: "Ayden Lundgre",
|
|
77
77
|
subtitle: "Senior Business Analyst",
|
|
78
78
|
initials: "AL",
|
|
79
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
79
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
80
80
|
}), /*#__PURE__*/React.createElement(Avatar, {
|
|
81
81
|
sizing: "small",
|
|
82
82
|
title: /*#__PURE__*/React.createElement(StyledLink, {
|
|
@@ -84,7 +84,7 @@ export var small = function small() {
|
|
|
84
84
|
}, "Ayden Lundgre"),
|
|
85
85
|
subtitle: "Senior Business Analyst",
|
|
86
86
|
initials: "AL",
|
|
87
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
87
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
88
88
|
}));
|
|
89
89
|
};
|
|
90
90
|
small.storyName = "Small";
|
|
@@ -102,7 +102,7 @@ export var large = function large() {
|
|
|
102
102
|
title: "Ayden Lundgre",
|
|
103
103
|
subtitle: "Senior Business Analyst",
|
|
104
104
|
initials: "AL",
|
|
105
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
105
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
106
106
|
}), /*#__PURE__*/React.createElement(Avatar, {
|
|
107
107
|
sizing: "large",
|
|
108
108
|
title: /*#__PURE__*/React.createElement(StyledLink, {
|
|
@@ -110,7 +110,7 @@ export var large = function large() {
|
|
|
110
110
|
}, "Ayden Lundgre"),
|
|
111
111
|
subtitle: "Senior Business Analyst",
|
|
112
112
|
initials: "AL",
|
|
113
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
113
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
114
114
|
}));
|
|
115
115
|
};
|
|
116
116
|
large.storyName = "Large";
|
|
@@ -135,7 +135,7 @@ export var subtitleContent = function subtitleContent() {
|
|
|
135
135
|
href: "#"
|
|
136
136
|
}, "Ayden Lundgre"),
|
|
137
137
|
initials: "AL",
|
|
138
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
138
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
139
139
|
subtitleContent: /*#__PURE__*/React.createElement(Badge, {
|
|
140
140
|
mt: "xs"
|
|
141
141
|
}, "Senior Business Analyst")
|
|
@@ -145,7 +145,7 @@ export var subtitleContent = function subtitleContent() {
|
|
|
145
145
|
href: "#"
|
|
146
146
|
}, "Ayden Lundgre"),
|
|
147
147
|
initials: "AL",
|
|
148
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
148
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
149
149
|
imageAlt: "Ayden Lundgre",
|
|
150
150
|
subtitleContent: /*#__PURE__*/React.createElement(Flex, {
|
|
151
151
|
flexWrap: "wrap"
|
|
@@ -167,7 +167,7 @@ export var localTime = function localTime() {
|
|
|
167
167
|
href: "#"
|
|
168
168
|
}, "Ayden Lundgre"),
|
|
169
169
|
initials: "AL",
|
|
170
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
170
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
171
171
|
imageAlt: "Ayden Lundgre",
|
|
172
172
|
subtitleContent: /*#__PURE__*/React.createElement(Badge, {
|
|
173
173
|
mt: "xs"
|
|
@@ -187,7 +187,7 @@ export var inverted = function inverted() {
|
|
|
187
187
|
title: "Ayden Lundgre",
|
|
188
188
|
subtitle: "Senior Business Analyst",
|
|
189
189
|
initials: "AL",
|
|
190
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
190
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
|
|
191
191
|
}), /*#__PURE__*/React.createElement(Avatar, {
|
|
192
192
|
type: "inverted",
|
|
193
193
|
title: /*#__PURE__*/React.createElement(StyledLink, {
|
|
@@ -195,7 +195,7 @@ export var inverted = function inverted() {
|
|
|
195
195
|
}, "Ayden Lundgre"),
|
|
196
196
|
subtitle: "Senior Business Analyst",
|
|
197
197
|
initials: "AL",
|
|
198
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
198
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
199
199
|
imageAlt: "Ayden Lundgre"
|
|
200
200
|
}), /*#__PURE__*/React.createElement(Avatar, {
|
|
201
201
|
type: "inverted",
|
|
@@ -213,7 +213,7 @@ export var inverted = function inverted() {
|
|
|
213
213
|
}, "Ayden Lundgre"),
|
|
214
214
|
subtitle: "Senior Business Analyst",
|
|
215
215
|
initials: "AL",
|
|
216
|
-
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
216
|
+
image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
|
|
217
217
|
imageAlt: "Ayden Lundgre"
|
|
218
218
|
})));
|
|
219
219
|
};
|
|
@@ -9,7 +9,7 @@ export var defaultHeader = function defaultHeader() {
|
|
|
9
9
|
return /*#__PURE__*/React.createElement(HeaderSimple, {
|
|
10
10
|
appName: "App Name",
|
|
11
11
|
userName: "Michael",
|
|
12
|
-
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
12
|
+
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
|
|
13
13
|
currentWorskapce: "Org Design Workspace"
|
|
14
14
|
});
|
|
15
15
|
};
|
|
@@ -19,7 +19,7 @@ export var headerWithSearch = function headerWithSearch() {
|
|
|
19
19
|
variant: "search",
|
|
20
20
|
appName: "App Name",
|
|
21
21
|
userName: "Michael",
|
|
22
|
-
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/
|
|
22
|
+
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
|
|
23
23
|
currentWorskapce: "Org Design Workspace",
|
|
24
24
|
searchComponent: /*#__PURE__*/React.createElement(TextInput, {
|
|
25
25
|
fullWidth: true,
|
|
@@ -45,17 +45,17 @@ export var showInfo = function showInfo() {
|
|
|
45
45
|
}, /*#__PURE__*/React.createElement(Tag, {
|
|
46
46
|
selected: true,
|
|
47
47
|
showInfo: true,
|
|
48
|
-
tagType: "
|
|
48
|
+
tagType: "Skill"
|
|
49
49
|
}, "devops"), /*#__PURE__*/React.createElement(Tag, {
|
|
50
50
|
selected: true,
|
|
51
51
|
showInfo: true,
|
|
52
|
-
tagType: "
|
|
52
|
+
tagType: "Skill"
|
|
53
53
|
}, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
|
|
54
54
|
showInfo: true,
|
|
55
|
-
tagType: "
|
|
55
|
+
tagType: "Skill"
|
|
56
56
|
}, "product design"), /*#__PURE__*/React.createElement(Tag, {
|
|
57
57
|
showInfo: true,
|
|
58
|
-
tagType: "
|
|
58
|
+
tagType: "Skill"
|
|
59
59
|
}, "digital transformation"));
|
|
60
60
|
};
|
|
61
61
|
export var showEdit = function showEdit() {
|
|
@@ -201,11 +201,139 @@ export var smallVariant = function smallVariant() {
|
|
|
201
201
|
}, "Agile Coach");
|
|
202
202
|
};
|
|
203
203
|
export var highlightedVariant = function highlightedVariant() {
|
|
204
|
-
return /*#__PURE__*/React.createElement(
|
|
204
|
+
return /*#__PURE__*/React.createElement(Spacer, {
|
|
205
|
+
m: "2px"
|
|
206
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
205
207
|
selected: true,
|
|
206
208
|
highlighted: true,
|
|
207
209
|
tagType: "specialist"
|
|
208
|
-
}, "Agile Coach");
|
|
210
|
+
}, "Agile Coach"));
|
|
211
|
+
};
|
|
212
|
+
export var personTag = function personTag() {
|
|
213
|
+
return /*#__PURE__*/React.createElement(Spacer, {
|
|
214
|
+
m: "2px"
|
|
215
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
216
|
+
disabled: true,
|
|
217
|
+
personEntity: {
|
|
218
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
219
|
+
}
|
|
220
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
221
|
+
disabled: true,
|
|
222
|
+
personEntity: {
|
|
223
|
+
initials: "MD"
|
|
224
|
+
}
|
|
225
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
226
|
+
disabled: true,
|
|
227
|
+
personEntity: true
|
|
228
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
229
|
+
personEntity: {
|
|
230
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
231
|
+
}
|
|
232
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
233
|
+
personEntity: {
|
|
234
|
+
initials: "MD"
|
|
235
|
+
}
|
|
236
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
237
|
+
personEntity: true
|
|
238
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
239
|
+
selected: true,
|
|
240
|
+
personEntity: {
|
|
241
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
242
|
+
}
|
|
243
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
244
|
+
selected: true,
|
|
245
|
+
personEntity: {
|
|
246
|
+
initials: "MD"
|
|
247
|
+
}
|
|
248
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
249
|
+
selected: true,
|
|
250
|
+
personEntity: true
|
|
251
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
252
|
+
selected: true,
|
|
253
|
+
highlighted: true,
|
|
254
|
+
personEntity: {
|
|
255
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
256
|
+
}
|
|
257
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
258
|
+
selected: true,
|
|
259
|
+
highlighted: true,
|
|
260
|
+
personEntity: {
|
|
261
|
+
initials: "MD"
|
|
262
|
+
}
|
|
263
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
264
|
+
selected: true,
|
|
265
|
+
highlighted: true,
|
|
266
|
+
personEntity: true
|
|
267
|
+
}, "Maximillian Dubois"));
|
|
268
|
+
};
|
|
269
|
+
export var personTagSmall = function personTagSmall() {
|
|
270
|
+
return /*#__PURE__*/React.createElement(Spacer, {
|
|
271
|
+
m: "2px"
|
|
272
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
273
|
+
small: true,
|
|
274
|
+
disabled: true,
|
|
275
|
+
personEntity: {
|
|
276
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
277
|
+
}
|
|
278
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
279
|
+
small: true,
|
|
280
|
+
disabled: true,
|
|
281
|
+
personEntity: {
|
|
282
|
+
initials: "MD"
|
|
283
|
+
}
|
|
284
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
285
|
+
small: true,
|
|
286
|
+
disabled: true,
|
|
287
|
+
personEntity: true
|
|
288
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
289
|
+
small: true,
|
|
290
|
+
personEntity: {
|
|
291
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
292
|
+
}
|
|
293
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
294
|
+
small: true,
|
|
295
|
+
personEntity: {
|
|
296
|
+
initials: "MD"
|
|
297
|
+
}
|
|
298
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
299
|
+
small: true,
|
|
300
|
+
personEntity: true
|
|
301
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
302
|
+
small: true,
|
|
303
|
+
selected: true,
|
|
304
|
+
personEntity: {
|
|
305
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
306
|
+
}
|
|
307
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
308
|
+
small: true,
|
|
309
|
+
selected: true,
|
|
310
|
+
personEntity: {
|
|
311
|
+
initials: "MD"
|
|
312
|
+
}
|
|
313
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
314
|
+
small: true,
|
|
315
|
+
selected: true,
|
|
316
|
+
personEntity: true
|
|
317
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
318
|
+
small: true,
|
|
319
|
+
selected: true,
|
|
320
|
+
highlighted: true,
|
|
321
|
+
personEntity: {
|
|
322
|
+
avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
|
|
323
|
+
}
|
|
324
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
325
|
+
small: true,
|
|
326
|
+
selected: true,
|
|
327
|
+
highlighted: true,
|
|
328
|
+
personEntity: {
|
|
329
|
+
initials: "MD"
|
|
330
|
+
}
|
|
331
|
+
}, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
|
|
332
|
+
small: true,
|
|
333
|
+
selected: true,
|
|
334
|
+
highlighted: true,
|
|
335
|
+
personEntity: true
|
|
336
|
+
}, "Maximillian Dubois"));
|
|
209
337
|
};
|
|
210
338
|
defaultTag.__docgenInfo = {
|
|
211
339
|
"description": "",
|
|
@@ -261,4 +389,14 @@ highlightedVariant.__docgenInfo = {
|
|
|
261
389
|
"description": "",
|
|
262
390
|
"methods": [],
|
|
263
391
|
"displayName": "highlightedVariant"
|
|
392
|
+
};
|
|
393
|
+
personTag.__docgenInfo = {
|
|
394
|
+
"description": "",
|
|
395
|
+
"methods": [],
|
|
396
|
+
"displayName": "personTag"
|
|
397
|
+
};
|
|
398
|
+
personTagSmall.__docgenInfo = {
|
|
399
|
+
"description": "",
|
|
400
|
+
"methods": [],
|
|
401
|
+
"displayName": "personTagSmall"
|
|
264
402
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
-
var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted"];
|
|
2
|
+
var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted", "personEntity"];
|
|
3
3
|
import React from "react";
|
|
4
4
|
import styled, { css, ThemeProvider } from "styled-components";
|
|
5
5
|
import PropTypes from "prop-types";
|
|
6
6
|
import { space, layout } from "styled-system";
|
|
7
|
+
import Avatar from "../Avatar";
|
|
7
8
|
import Icon from "../Icon";
|
|
8
9
|
import Loading from "../Loading";
|
|
9
10
|
import { themeGet } from "@styled-system/theme-get";
|
|
@@ -33,7 +34,7 @@ var TagValue = styled.button.attrs(function (props) {
|
|
|
33
34
|
}, function (props) {
|
|
34
35
|
return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : themeGet("colors.primary")(props);
|
|
35
36
|
}, function (props) {
|
|
36
|
-
return props.showEdit || props.showInfo || props.showRemove ? "
|
|
37
|
+
return (props.showEdit || props.showInfo || props.showRemove) && props.small ? "2px 4px 2px 6px" : props.showEdit || props.showInfo || props.showRemove ? "3px 4px 3px 10px" : props.small ? "2px 6px 2px 6px" : "3px 10px 3px 10px";
|
|
37
38
|
}, function (props) {
|
|
38
39
|
return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
|
|
39
40
|
}, function (props) {
|
|
@@ -54,18 +55,18 @@ var TagValue = styled.button.attrs(function (props) {
|
|
|
54
55
|
var TagValueText = styled.div.withConfig({
|
|
55
56
|
displayName: "Tag__TagValueText",
|
|
56
57
|
componentId: "sc-1dh2aa8-2"
|
|
57
|
-
})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";"], function (props) {
|
|
58
|
+
})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], function (props) {
|
|
58
59
|
return props.showStrikeThrough ? "line-through" : "none";
|
|
59
60
|
}, function (props) {
|
|
60
|
-
return themeGet("fontSizes.1")(props);
|
|
61
|
+
return props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props);
|
|
61
62
|
});
|
|
62
63
|
var TagActionIconWrapper = styled(TagValue).withConfig({
|
|
63
64
|
displayName: "Tag__TagActionIconWrapper",
|
|
64
65
|
componentId: "sc-1dh2aa8-3"
|
|
65
|
-
})(["border-radius:", ";padding:", ";&:focus{z-index:2;}", ""], function (props) {
|
|
66
|
+
})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], function (props) {
|
|
66
67
|
return props.showRemove ? "0" : "0 15px 15px 0";
|
|
67
68
|
}, function (props) {
|
|
68
|
-
return props.showRemove ? "
|
|
69
|
+
return props.showRemove ? "0 7px 0 7px" : props.showInfo ? "0 12px 0 11px" : "0 8px 0 8px";
|
|
69
70
|
}, function (props) {
|
|
70
71
|
return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
|
|
71
72
|
return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
|
|
@@ -87,7 +88,7 @@ var TagType = styled.div.withConfig({
|
|
|
87
88
|
displayName: "Tag__TagType",
|
|
88
89
|
componentId: "sc-1dh2aa8-5"
|
|
89
90
|
})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
|
|
90
|
-
return
|
|
91
|
+
return props.small ? "6px" : "10px";
|
|
91
92
|
}, function (props) {
|
|
92
93
|
return props.small ? themeGet("space.1")(props) : themeGet("space.2")(props);
|
|
93
94
|
}, function (props) {
|
|
@@ -99,6 +100,22 @@ var TagType = styled.div.withConfig({
|
|
|
99
100
|
}, function (props) {
|
|
100
101
|
return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
|
|
101
102
|
});
|
|
103
|
+
var TagAvatar = styled(Avatar).withConfig({
|
|
104
|
+
displayName: "Tag__TagAvatar",
|
|
105
|
+
componentId: "sc-1dh2aa8-6"
|
|
106
|
+
})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], function (props) {
|
|
107
|
+
return props.small ? "20px" : "22px";
|
|
108
|
+
}, function (props) {
|
|
109
|
+
return props.small ? "20px" : "22px";
|
|
110
|
+
}, themeGet("space.xs"), function (props) {
|
|
111
|
+
return props.small ? "-4px" : "-7px";
|
|
112
|
+
}, function (props) {
|
|
113
|
+
return props.small ? "0.9rem" : "1rem";
|
|
114
|
+
}, function (props) {
|
|
115
|
+
return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
|
|
116
|
+
}, function (props) {
|
|
117
|
+
return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
|
|
118
|
+
});
|
|
102
119
|
|
|
103
120
|
/**
|
|
104
121
|
* The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
|
|
@@ -123,6 +140,7 @@ export default function Tag(_ref) {
|
|
|
123
140
|
isPending = _ref.isPending,
|
|
124
141
|
small = _ref.small,
|
|
125
142
|
highlighted = _ref.highlighted,
|
|
143
|
+
personEntity = _ref.personEntity,
|
|
126
144
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
127
145
|
var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
|
|
128
146
|
selected: selected,
|
|
@@ -133,8 +151,16 @@ export default function Tag(_ref) {
|
|
|
133
151
|
showRemove: showRemove,
|
|
134
152
|
onClick: onSelect,
|
|
135
153
|
small: small
|
|
136
|
-
}, /*#__PURE__*/React.createElement(
|
|
137
|
-
|
|
154
|
+
}, personEntity && /*#__PURE__*/React.createElement(TagAvatar, {
|
|
155
|
+
selected: selected,
|
|
156
|
+
highlighted: highlighted,
|
|
157
|
+
disabled: disabled,
|
|
158
|
+
small: small,
|
|
159
|
+
image: personEntity.avatarSrc,
|
|
160
|
+
initials: personEntity.initials
|
|
161
|
+
}), /*#__PURE__*/React.createElement(TagValueText, {
|
|
162
|
+
showStrikeThrough: showStrikeThrough,
|
|
163
|
+
small: small
|
|
138
164
|
}, showStrikeThrough && /*#__PURE__*/React.createElement("span", {
|
|
139
165
|
className: "sr-only"
|
|
140
166
|
}, "Striked out:"), children), tagType && /*#__PURE__*/React.createElement(TagType, {
|
|
@@ -195,6 +221,8 @@ Tag.propTypes = {
|
|
|
195
221
|
onInfo: PropTypes.func,
|
|
196
222
|
/** Can add a type to a tag as text */
|
|
197
223
|
tagType: PropTypes.string,
|
|
224
|
+
/** Can add an img url for showing a person's avatar if the tag is used for a person */
|
|
225
|
+
personAvatar: PropTypes.string,
|
|
198
226
|
/** Adds disabled attribute and styling to tag */
|
|
199
227
|
disabled: PropTypes.bool,
|
|
200
228
|
/** Adds loading spinner to tag to indicate awaiting an action to complete */
|
|
@@ -206,7 +234,9 @@ Tag.propTypes = {
|
|
|
206
234
|
/** Applies the small variant styles */
|
|
207
235
|
small: PropTypes.bool,
|
|
208
236
|
/** Applies a highlighted style and colour to the tag */
|
|
209
|
-
highlighted: PropTypes.bool
|
|
237
|
+
highlighted: PropTypes.bool,
|
|
238
|
+
/** Allows you to set a person avatar image or initials */
|
|
239
|
+
personEntity: PropTypes.object
|
|
210
240
|
};
|
|
211
241
|
Tag.defaultProps = {
|
|
212
242
|
selected: false,
|
|
@@ -361,6 +391,13 @@ Tag.__docgenInfo = {
|
|
|
361
391
|
},
|
|
362
392
|
"required": false
|
|
363
393
|
},
|
|
394
|
+
"personAvatar": {
|
|
395
|
+
"description": "Can add an img url for showing a person's avatar if the tag is used for a person",
|
|
396
|
+
"type": {
|
|
397
|
+
"name": "string"
|
|
398
|
+
},
|
|
399
|
+
"required": false
|
|
400
|
+
},
|
|
364
401
|
"isPending": {
|
|
365
402
|
"description": "Adds loading spinner to tag to indicate awaiting an action to complete",
|
|
366
403
|
"type": {
|
|
@@ -374,6 +411,13 @@ Tag.__docgenInfo = {
|
|
|
374
411
|
"name": "object"
|
|
375
412
|
},
|
|
376
413
|
"required": false
|
|
414
|
+
},
|
|
415
|
+
"personEntity": {
|
|
416
|
+
"description": "Allows you to set a person avatar image or initials",
|
|
417
|
+
"type": {
|
|
418
|
+
"name": "object"
|
|
419
|
+
},
|
|
420
|
+
"required": false
|
|
377
421
|
}
|
|
378
422
|
}
|
|
379
423
|
};
|