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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
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: "SKILL"
48
+ tagType: "Skill"
49
49
  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
50
50
  selected: true,
51
51
  showInfo: true,
52
- tagType: "SKILL"
52
+ tagType: "Skill"
53
53
  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
54
54
  showInfo: true,
55
- tagType: "SKILL"
55
+ tagType: "Skill"
56
56
  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
57
57
  showInfo: true,
58
- tagType: "SKILL"
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(Tag, {
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 ? "3px 4px 4px 10px" : props.small ? "calc(".concat(themeGet("space.2")(props), " - 1px)") + " " + themeGet("space.3")(props) + " " + themeGet("space.2")(props) + " " + themeGet("space.3")(props) : "3px 10px 4px 10px";
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 ? "2px 7px 5px 7px" : props.showInfo ? "1px 11px 4px 10px" : "2px 8px 5px 8px";
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 themeGet("space.s")(props);
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(TagValueText, {
137
- showStrikeThrough: showStrikeThrough
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
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orcs-design-system",
3
- "version": "3.1.9",
3
+ "version": "3.1.10",
4
4
  "engines": {
5
5
  "node": "18.17.1"
6
6
  },