@zendeskgarden/react-avatars 8.51.0 → 8.53.1

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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +336 -82
  2. package/dist/index.esm.js +319 -83
  3. package/dist/typings/styled/StyledStatusIndicator.d.ts +16 -0
  4. package/dist/typings/styled/index.d.ts +1 -0
  5. package/dist/typings/styled/utility.d.ts +8 -0
  6. package/dist/typings/types/index.d.ts +1 -1
  7. package/package.json +4 -3
package/dist/index.cjs.js CHANGED
@@ -12,17 +12,36 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var React = require('react');
13
13
  var PropTypes = require('prop-types');
14
14
  var styled = require('styled-components');
15
- var polished = require('polished');
16
15
  var reactTheming = require('@zendeskgarden/react-theming');
16
+ var polished = require('polished');
17
17
 
18
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
19
 
20
+ function _interopNamespace(e) {
21
+ if (e && e.__esModule) return e;
22
+ var n = Object.create(null);
23
+ if (e) {
24
+ Object.keys(e).forEach(function (k) {
25
+ if (k !== 'default') {
26
+ var d = Object.getOwnPropertyDescriptor(e, k);
27
+ Object.defineProperty(n, k, d.get ? d : {
28
+ enumerable: true,
29
+ get: function () { return e[k]; }
30
+ });
31
+ }
32
+ });
33
+ }
34
+ n["default"] = e;
35
+ return Object.freeze(n);
36
+ }
37
+
38
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
20
39
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
40
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
22
41
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
23
42
 
24
- function _extends() {
25
- _extends = Object.assign || function (target) {
43
+ function _extends$4() {
44
+ _extends$4 = Object.assign || function (target) {
26
45
  for (var i = 1; i < arguments.length; i++) {
27
46
  var source = arguments[i];
28
47
 
@@ -36,7 +55,7 @@ function _extends() {
36
55
  return target;
37
56
  };
38
57
 
39
- return _extends.apply(this, arguments);
58
+ return _extends$4.apply(this, arguments);
40
59
  }
41
60
 
42
61
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -75,97 +94,319 @@ function _objectWithoutProperties(source, excluded) {
75
94
  return target;
76
95
  }
77
96
 
97
+ function _slicedToArray(arr, i) {
98
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
99
+ }
100
+
101
+ function _toConsumableArray(arr) {
102
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
103
+ }
104
+
105
+ function _arrayWithoutHoles(arr) {
106
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
107
+ }
108
+
109
+ function _arrayWithHoles(arr) {
110
+ if (Array.isArray(arr)) return arr;
111
+ }
112
+
113
+ function _iterableToArray(iter) {
114
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
115
+ }
116
+
117
+ function _iterableToArrayLimit(arr, i) {
118
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
119
+
120
+ if (_i == null) return;
121
+ var _arr = [];
122
+ var _n = true;
123
+ var _d = false;
124
+
125
+ var _s, _e;
126
+
127
+ try {
128
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
129
+ _arr.push(_s.value);
130
+
131
+ if (i && _arr.length === i) break;
132
+ }
133
+ } catch (err) {
134
+ _d = true;
135
+ _e = err;
136
+ } finally {
137
+ try {
138
+ if (!_n && _i["return"] != null) _i["return"]();
139
+ } finally {
140
+ if (_d) throw _e;
141
+ }
142
+ }
143
+
144
+ return _arr;
145
+ }
146
+
147
+ function _unsupportedIterableToArray(o, minLen) {
148
+ if (!o) return;
149
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
150
+ var n = Object.prototype.toString.call(o).slice(8, -1);
151
+ if (n === "Object" && o.constructor) n = o.constructor.name;
152
+ if (n === "Map" || n === "Set") return Array.from(o);
153
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
154
+ }
155
+
156
+ function _arrayLikeToArray(arr, len) {
157
+ if (len == null || len > arr.length) len = arr.length;
158
+
159
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
160
+
161
+ return arr2;
162
+ }
163
+
164
+ function _nonIterableSpread() {
165
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
166
+ }
167
+
168
+ function _nonIterableRest() {
169
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
170
+ }
171
+
172
+ var _g$1;
173
+
174
+ function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
175
+
176
+ var SvgClockStroke$1 = function SvgClockStroke(props) {
177
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
178
+ xmlns: "http://www.w3.org/2000/svg",
179
+ width: 12,
180
+ height: 12,
181
+ focusable: "false",
182
+ viewBox: "0 0 12 12",
183
+ "aria-hidden": "true"
184
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
185
+ fill: "none",
186
+ stroke: "currentColor"
187
+ }, /*#__PURE__*/React__namespace.createElement("circle", {
188
+ cx: 6,
189
+ cy: 6,
190
+ r: 5.5
191
+ }), /*#__PURE__*/React__namespace.createElement("path", {
192
+ strokeLinecap: "round",
193
+ strokeLinejoin: "round",
194
+ d: "M5.5 3v3.5H8"
195
+ }))));
196
+ };
197
+
198
+ var _g;
199
+
200
+ function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
201
+
202
+ var SvgClockStroke = function SvgClockStroke(props) {
203
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
204
+ xmlns: "http://www.w3.org/2000/svg",
205
+ width: 16,
206
+ height: 16,
207
+ focusable: "false",
208
+ viewBox: "0 0 16 16",
209
+ "aria-hidden": "true"
210
+ }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
211
+ fill: "none",
212
+ stroke: "currentColor"
213
+ }, /*#__PURE__*/React__namespace.createElement("circle", {
214
+ cx: 8,
215
+ cy: 8,
216
+ r: 7.5
217
+ }), /*#__PURE__*/React__namespace.createElement("path", {
218
+ strokeLinecap: "round",
219
+ strokeLinejoin: "round",
220
+ d: "M7.5 3v5.5H11"
221
+ }))));
222
+ };
223
+
224
+ var _path$1;
225
+
226
+ function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
227
+
228
+ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
229
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
230
+ xmlns: "http://www.w3.org/2000/svg",
231
+ width: 12,
232
+ height: 12,
233
+ focusable: "false",
234
+ viewBox: "0 0 12 12",
235
+ "aria-hidden": "true"
236
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
237
+ fill: "currentColor",
238
+ d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
239
+ })));
240
+ };
241
+
242
+ var _path;
243
+
244
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
245
+
246
+ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
247
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
248
+ xmlns: "http://www.w3.org/2000/svg",
249
+ width: 16,
250
+ height: 16,
251
+ focusable: "false",
252
+ viewBox: "0 0 16 16",
253
+ "aria-hidden": "true"
254
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
255
+ fill: "currentColor",
256
+ d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
257
+ })));
258
+ };
259
+
78
260
  var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
79
- var STATUS = ['available', 'away'];
261
+ var STATUS = ['available', 'away', 'transfers', 'offline'];
80
262
 
81
- var COMPONENT_ID$1 = 'avatars.text';
263
+ var COMPONENT_ID$2 = 'avatars.text';
82
264
  var StyledText = styled__default["default"].span.attrs({
83
- 'data-garden-id': COMPONENT_ID$1,
84
- 'data-garden-version': '8.51.0'
265
+ 'data-garden-id': COMPONENT_ID$2,
266
+ 'data-garden-version': '8.53.1'
85
267
  }).withConfig({
86
268
  displayName: "StyledText",
87
269
  componentId: "sc-1a6hivh-0"
88
270
  })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
89
- return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
271
+ return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
90
272
  });
91
273
  StyledText.defaultProps = {
92
274
  theme: reactTheming.DEFAULT_THEME
93
275
  };
94
276
 
95
- var COMPONENT_ID = 'avatars.avatar';
96
- var TRANSITION_DURATION = 0.25;
97
- var badgeStyles = function badgeStyles(props) {
98
- var content = "''";
99
- var position = '0';
100
- var padding = '0';
101
- var minWidth = '0';
277
+ var _ref$1 = ['active'].concat(_toConsumableArray(STATUS)),
278
+ active$1 = _ref$1[0],
279
+ available$1 = _ref$1[1],
280
+ away$1 = _ref$1[2],
281
+ transfers$1 = _ref$1[3],
282
+ offline$1 = _ref$1[4];
283
+ function getStatusColor(status) {
284
+ var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : reactTheming.DEFAULT_THEME;
285
+ switch (status) {
286
+ case active$1:
287
+ return reactTheming.getColor('crimson', 400, theme);
288
+ case available$1:
289
+ return reactTheming.getColor('mint', 400, theme);
290
+ case away$1:
291
+ return reactTheming.getColor('orange', 400, theme);
292
+ case transfers$1:
293
+ return reactTheming.getColor('azure', 400, theme);
294
+ case offline$1:
295
+ return reactTheming.getColor('grey', 500, theme);
296
+ default:
297
+ return 'transparent';
298
+ }
299
+ }
300
+
301
+ var COMPONENT_ID$1 = 'avatars.status_indicator';
302
+ var _SIZE = _slicedToArray(SIZE, 5),
303
+ xxs = _SIZE[0],
304
+ xs = _SIZE[1],
305
+ s = _SIZE[2],
306
+ m = _SIZE[3],
307
+ l = _SIZE[4];
308
+ var _ref = ['active'].concat(_toConsumableArray(STATUS)),
309
+ active = _ref[0],
310
+ available = _ref[1],
311
+ away = _ref[2],
312
+ transfers = _ref[3],
313
+ offline = _ref[4];
314
+ var sizeStyles$1 = function sizeStyles(props) {
315
+ var isActive = props.status === 'active';
316
+ var isVisible = true;
102
317
  var height = '0';
103
- var fontSize = '0';
318
+ var padding = '0';
104
319
  var borderWidth = props.theme.shadowWidths.sm;
105
- if (props.status === 'active') {
106
- position = "".concat(props.theme.space.base * -1, "px");
107
- if (props.size === 'small') {
108
- fontSize = props.theme.fontSizes.xs;
109
- height = "".concat(props.theme.space.base * 4, "px");
110
- minWidth = fontSize;
111
- padding = "".concat(props.theme.space.base - 1, "px");
112
- content = 'attr(data-badge)';
113
- } else if (props.size === 'extrasmall') {
114
- height = "".concat(props.theme.space.base * 2, "px");
115
- minWidth = height;
116
- } else if (props.size === 'extraextrasmall') {
117
- position = polished.math("".concat(position, " + 1"));
118
- height = "".concat(props.theme.space.base + 1, "px");
119
- minWidth = height;
120
- borderWidth = polished.math("".concat(borderWidth, " - 1"));
121
- } else {
122
- fontSize = props.theme.fontSizes.xs;
123
- height = "".concat(props.theme.space.base * 5, "px");
124
- minWidth = fontSize;
125
- padding = "".concat(props.theme.space.base + 1, "px");
126
- content = 'attr(data-badge)';
127
- }
128
- } else if (props.status === 'available') {
129
- position = "".concat(props.theme.space.base * -1, "px");
130
- if (props.size === 'large') {
131
- height = "".concat(props.theme.space.base * 3.5, "px");
132
- } else if (props.size === 'small') {
133
- height = "".concat(props.theme.space.base * 2.5, "px");
134
- } else if (props.size === 'extrasmall') {
135
- height = "".concat(props.theme.space.base * 2, "px");
136
- } else if (props.size === 'extraextrasmall') {
137
- position = polished.math("".concat(position, " + 1"));
138
- height = "".concat(props.theme.space.base + 1, "px");
320
+ switch (props.size) {
321
+ case xxs:
322
+ isVisible = false;
139
323
  borderWidth = polished.math("".concat(borderWidth, " - 1"));
140
- } else {
141
- height = "".concat(props.theme.space.base * 3, "px");
142
- }
143
- minWidth = height;
144
- } else if (props.size === 'large') {
145
- position = polished.math("".concat(props.theme.shadowWidths.sm, " + 1"));
146
- } else if (props.size === 'small') {
147
- position = polished.math("".concat(props.theme.shadowWidths.sm, " - 1"));
148
- } else if (props.size === 'medium') {
149
- position = props.theme.shadowWidths.sm;
324
+ height = polished.math("".concat(props.theme.space.base, "px - ").concat(borderWidth));
325
+ break;
326
+ case xs:
327
+ isVisible = false;
328
+ height = polished.math("".concat(props.theme.space.base * 2, "px - (").concat(borderWidth, " * 2)"));
329
+ break;
330
+ case s:
331
+ height = polished.math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
332
+ padding = polished.math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
333
+ break;
334
+ case m:
335
+ case l:
336
+ height = polished.math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
337
+ padding = polished.math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
338
+ break;
339
+ }
340
+ return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
341
+ };
342
+ var colorStyles$1 = function colorStyles(props) {
343
+ var foregroundColor = props.foregroundColor || props.theme.palette.white;
344
+ var surfaceColor = props.surfaceColor || (props.status ? props.theme.colors.background : props.theme.palette.white);
345
+ var backgroundColor = props.backgroundColor || 'transparent';
346
+ var borderColor = props.borderColor || backgroundColor;
347
+ var boxShadow = props.theme.shadows.sm(surfaceColor);
348
+ if (props.size === xxs) {
349
+ boxShadow = boxShadow.replace(props.theme.shadowWidths.sm, '1px');
350
+ }
351
+ switch (props.status) {
352
+ case available:
353
+ case active:
354
+ case away:
355
+ case transfers:
356
+ backgroundColor = getStatusColor(props.status, props.theme);
357
+ borderColor = backgroundColor;
358
+ break;
359
+ case offline:
360
+ borderColor = getStatusColor(props.status, props.theme);
361
+ backgroundColor = props.theme.palette.white;
362
+ break;
363
+ }
364
+ return styled.css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
365
+ };
366
+ var StyledStatusIndicator = styled__default["default"].div.attrs({
367
+ 'data-garden-id': COMPONENT_ID$1,
368
+ 'data-garden-version': '8.53.1'
369
+ }).withConfig({
370
+ displayName: "StyledStatusIndicator",
371
+ componentId: "sc-16t9if3-0"
372
+ })(["", " ", " transition:inherit;", ";"], sizeStyles$1, colorStyles$1, function (props) {
373
+ return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
374
+ });
375
+ StyledStatusIndicator.defaultProps = {
376
+ size: 'medium',
377
+ theme: reactTheming.DEFAULT_THEME
378
+ };
379
+
380
+ var COMPONENT_ID = 'avatars.avatar';
381
+ var TRANSITION_DURATION = 0.25;
382
+ var badgeStyles = function badgeStyles(props) {
383
+ var _SIZE = _slicedToArray(SIZE, 5),
384
+ xxs = _SIZE[0],
385
+ xs = _SIZE[1],
386
+ s = _SIZE[2],
387
+ m = _SIZE[3],
388
+ l = _SIZE[4];
389
+ var position = "".concat(props.theme.space.base * -1, "px");
390
+ switch (props.size) {
391
+ case s:
392
+ case m:
393
+ position = polished.math("".concat(position, " + 2"));
394
+ break;
395
+ case xxs:
396
+ case xs:
397
+ case l:
398
+ position = polished.math("".concat(position, " + 3"));
399
+ break;
150
400
  }
151
401
  var animation = styled.keyframes(["0%{transform:scale(.1);}"]);
152
- var opacity = props.status === 'active' || props.status === 'available' ? 1 : 0;
153
- var border = "".concat(borderWidth, " ").concat(props.theme.borderStyles.solid);
154
- return styled.css(["display:inline-block;position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out,color 0s;opacity:", ";border:", ";border-radius:100px;padding:0 ", ";min-width:", ";max-width:2em;height:", ";box-sizing:content-box !important;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";content:", ";", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, opacity, border, padding, minWidth, height, height === '0' ? '1px' : height, fontSize, props.theme.fontWeights.semibold, content, props.status === 'active' && styled.css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
402
+ return styled.css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.status === 'active' && styled.css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
155
403
  };
156
404
  var colorStyles = function colorStyles(props) {
157
- var statusColor = 'transparent';
405
+ var statusColor = getStatusColor(props.status, props.theme);
158
406
  var backgroundColor = props.backgroundColor || 'transparent';
159
407
  var foregroundColor = props.foregroundColor || props.theme.palette.white;
160
408
  var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
161
- if (props.status === 'available') {
162
- statusColor = reactTheming.getColor('mint', 400, props.theme);
163
- } else if (props.status === 'active') {
164
- statusColor = reactTheming.getColor('crimson', 400, props.theme);
165
- } else if (props.status === 'away') {
166
- statusColor = reactTheming.getColor('yellow', 400, props.theme);
167
- }
168
- return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}&::after{background-color:", ";-webkit-text-fill-color:", ";}_:-ms-input-placeholder,&::after{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor, statusColor, props.theme.palette.white, props.theme.palette.white);
409
+ return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
169
410
  };
170
411
  var sizeStyles = function sizeStyles(props) {
171
412
  var boxShadow;
@@ -208,17 +449,15 @@ var sizeStyles = function sizeStyles(props) {
208
449
  };
209
450
  var StyledAvatar = styled__default["default"].figure.attrs({
210
451
  'data-garden-id': COMPONENT_ID,
211
- 'data-garden-version': '8.51.0'
452
+ 'data-garden-version': '8.53.1'
212
453
  }).withConfig({
213
454
  displayName: "StyledAvatar",
214
455
  componentId: "sc-608m04-0"
215
- })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}&::after{", ";}", ";"], TRANSITION_DURATION, function (props) {
456
+ })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, function (props) {
216
457
  return sizeStyles(props);
217
458
  }, function (props) {
218
459
  return colorStyles(props);
219
- }, TRANSITION_DURATION, function (props) {
220
- return badgeStyles(props);
221
- }, function (props) {
460
+ }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
222
461
  return reactTheming.retrieveComponentStyles(COMPONENT_ID, props);
223
462
  });
224
463
  StyledAvatar.defaultProps = {
@@ -227,7 +466,7 @@ StyledAvatar.defaultProps = {
227
466
  };
228
467
 
229
468
  var TextComponent = React.forwardRef(function (props, ref) {
230
- return React__default["default"].createElement(StyledText, _extends({
469
+ return React__default["default"].createElement(StyledText, _extends$4({
231
470
  ref: ref
232
471
  }, props));
233
472
  });
@@ -246,18 +485,33 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
246
485
  foregroundColor = _ref.foregroundColor,
247
486
  other = _objectWithoutProperties(_ref, _excluded);
248
487
  var computedStatus = badge === undefined ? status : 'active';
249
- return React__default["default"].createElement(StyledAvatar, _extends({
488
+ var ClockIcon = SvgClockStroke$1;
489
+ var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
490
+ if (['large', 'medium'].includes(size)) {
491
+ ClockIcon = SvgClockStroke;
492
+ ArrowLeftIcon = SvgArrowLeftSmStroke;
493
+ }
494
+ return React__default["default"].createElement(StyledAvatar, _extends$4({
250
495
  ref: ref,
251
496
  isSystem: isSystem,
252
497
  size: size,
253
498
  status: computedStatus,
254
- "data-badge": badge,
255
499
  surfaceColor: surfaceColor,
256
500
  backgroundColor: backgroundColor,
257
501
  foregroundColor: foregroundColor,
258
502
  "aria-atomic": "true",
259
503
  "aria-live": "polite"
260
- }, other), React.Children.only(children));
504
+ }, other), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
505
+ size: size,
506
+ status: computedStatus,
507
+ backgroundColor: backgroundColor,
508
+ foregroundColor: foregroundColor,
509
+ surfaceColor: surfaceColor
510
+ }, computedStatus === 'active' ? React__default["default"].createElement("span", null, badge) : React__default["default"].createElement(React__default["default"].Fragment, null, computedStatus === 'away' ? React__default["default"].createElement(ClockIcon, {
511
+ "data-icon-status": computedStatus
512
+ }) : null, computedStatus === 'transfers' ? React__default["default"].createElement(ArrowLeftIcon, {
513
+ "data-icon-status": computedStatus
514
+ }) : null)));
261
515
  });
262
516
  AvatarComponent.displayName = 'Avatar';
263
517
  AvatarComponent.propTypes = {
package/dist/index.esm.js CHANGED
@@ -5,14 +5,15 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
 
8
- import React, { forwardRef, Children } from 'react';
8
+ import * as React from 'react';
9
+ import React__default, { forwardRef, Children } from 'react';
9
10
  import PropTypes from 'prop-types';
10
11
  import styled, { css, keyframes } from 'styled-components';
11
- import { math } from 'polished';
12
12
  import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
13
+ import { math } from 'polished';
13
14
 
14
- function _extends() {
15
- _extends = Object.assign || function (target) {
15
+ function _extends$4() {
16
+ _extends$4 = Object.assign || function (target) {
16
17
  for (var i = 1; i < arguments.length; i++) {
17
18
  var source = arguments[i];
18
19
 
@@ -26,7 +27,7 @@ function _extends() {
26
27
  return target;
27
28
  };
28
29
 
29
- return _extends.apply(this, arguments);
30
+ return _extends$4.apply(this, arguments);
30
31
  }
31
32
 
32
33
  function _objectWithoutPropertiesLoose(source, excluded) {
@@ -65,97 +66,319 @@ function _objectWithoutProperties(source, excluded) {
65
66
  return target;
66
67
  }
67
68
 
69
+ function _slicedToArray(arr, i) {
70
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
71
+ }
72
+
73
+ function _toConsumableArray(arr) {
74
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
75
+ }
76
+
77
+ function _arrayWithoutHoles(arr) {
78
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
79
+ }
80
+
81
+ function _arrayWithHoles(arr) {
82
+ if (Array.isArray(arr)) return arr;
83
+ }
84
+
85
+ function _iterableToArray(iter) {
86
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
87
+ }
88
+
89
+ function _iterableToArrayLimit(arr, i) {
90
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
91
+
92
+ if (_i == null) return;
93
+ var _arr = [];
94
+ var _n = true;
95
+ var _d = false;
96
+
97
+ var _s, _e;
98
+
99
+ try {
100
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
101
+ _arr.push(_s.value);
102
+
103
+ if (i && _arr.length === i) break;
104
+ }
105
+ } catch (err) {
106
+ _d = true;
107
+ _e = err;
108
+ } finally {
109
+ try {
110
+ if (!_n && _i["return"] != null) _i["return"]();
111
+ } finally {
112
+ if (_d) throw _e;
113
+ }
114
+ }
115
+
116
+ return _arr;
117
+ }
118
+
119
+ function _unsupportedIterableToArray(o, minLen) {
120
+ if (!o) return;
121
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
122
+ var n = Object.prototype.toString.call(o).slice(8, -1);
123
+ if (n === "Object" && o.constructor) n = o.constructor.name;
124
+ if (n === "Map" || n === "Set") return Array.from(o);
125
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
126
+ }
127
+
128
+ function _arrayLikeToArray(arr, len) {
129
+ if (len == null || len > arr.length) len = arr.length;
130
+
131
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
132
+
133
+ return arr2;
134
+ }
135
+
136
+ function _nonIterableSpread() {
137
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
138
+ }
139
+
140
+ function _nonIterableRest() {
141
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
142
+ }
143
+
144
+ var _g$1;
145
+
146
+ function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
147
+
148
+ var SvgClockStroke$1 = function SvgClockStroke(props) {
149
+ return /*#__PURE__*/React.createElement("svg", _extends$3({
150
+ xmlns: "http://www.w3.org/2000/svg",
151
+ width: 12,
152
+ height: 12,
153
+ focusable: "false",
154
+ viewBox: "0 0 12 12",
155
+ "aria-hidden": "true"
156
+ }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
157
+ fill: "none",
158
+ stroke: "currentColor"
159
+ }, /*#__PURE__*/React.createElement("circle", {
160
+ cx: 6,
161
+ cy: 6,
162
+ r: 5.5
163
+ }), /*#__PURE__*/React.createElement("path", {
164
+ strokeLinecap: "round",
165
+ strokeLinejoin: "round",
166
+ d: "M5.5 3v3.5H8"
167
+ }))));
168
+ };
169
+
170
+ var _g;
171
+
172
+ function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
173
+
174
+ var SvgClockStroke = function SvgClockStroke(props) {
175
+ return /*#__PURE__*/React.createElement("svg", _extends$2({
176
+ xmlns: "http://www.w3.org/2000/svg",
177
+ width: 16,
178
+ height: 16,
179
+ focusable: "false",
180
+ viewBox: "0 0 16 16",
181
+ "aria-hidden": "true"
182
+ }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
183
+ fill: "none",
184
+ stroke: "currentColor"
185
+ }, /*#__PURE__*/React.createElement("circle", {
186
+ cx: 8,
187
+ cy: 8,
188
+ r: 7.5
189
+ }), /*#__PURE__*/React.createElement("path", {
190
+ strokeLinecap: "round",
191
+ strokeLinejoin: "round",
192
+ d: "M7.5 3v5.5H11"
193
+ }))));
194
+ };
195
+
196
+ var _path$1;
197
+
198
+ function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
199
+
200
+ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
201
+ return /*#__PURE__*/React.createElement("svg", _extends$1({
202
+ xmlns: "http://www.w3.org/2000/svg",
203
+ width: 12,
204
+ height: 12,
205
+ focusable: "false",
206
+ viewBox: "0 0 12 12",
207
+ "aria-hidden": "true"
208
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
209
+ fill: "currentColor",
210
+ d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
211
+ })));
212
+ };
213
+
214
+ var _path;
215
+
216
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
217
+
218
+ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
219
+ return /*#__PURE__*/React.createElement("svg", _extends({
220
+ xmlns: "http://www.w3.org/2000/svg",
221
+ width: 16,
222
+ height: 16,
223
+ focusable: "false",
224
+ viewBox: "0 0 16 16",
225
+ "aria-hidden": "true"
226
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
227
+ fill: "currentColor",
228
+ d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
229
+ })));
230
+ };
231
+
68
232
  var SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
69
- var STATUS = ['available', 'away'];
233
+ var STATUS = ['available', 'away', 'transfers', 'offline'];
70
234
 
71
- var COMPONENT_ID$1 = 'avatars.text';
235
+ var COMPONENT_ID$2 = 'avatars.text';
72
236
  var StyledText = styled.span.attrs({
73
- 'data-garden-id': COMPONENT_ID$1,
74
- 'data-garden-version': '8.51.0'
237
+ 'data-garden-id': COMPONENT_ID$2,
238
+ 'data-garden-version': '8.53.1'
75
239
  }).withConfig({
76
240
  displayName: "StyledText",
77
241
  componentId: "sc-1a6hivh-0"
78
242
  })(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], function (props) {
79
- return retrieveComponentStyles(COMPONENT_ID$1, props);
243
+ return retrieveComponentStyles(COMPONENT_ID$2, props);
80
244
  });
81
245
  StyledText.defaultProps = {
82
246
  theme: DEFAULT_THEME
83
247
  };
84
248
 
85
- var COMPONENT_ID = 'avatars.avatar';
86
- var TRANSITION_DURATION = 0.25;
87
- var badgeStyles = function badgeStyles(props) {
88
- var content = "''";
89
- var position = '0';
90
- var padding = '0';
91
- var minWidth = '0';
249
+ var _ref$1 = ['active'].concat(_toConsumableArray(STATUS)),
250
+ active$1 = _ref$1[0],
251
+ available$1 = _ref$1[1],
252
+ away$1 = _ref$1[2],
253
+ transfers$1 = _ref$1[3],
254
+ offline$1 = _ref$1[4];
255
+ function getStatusColor(status) {
256
+ var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_THEME;
257
+ switch (status) {
258
+ case active$1:
259
+ return getColor('crimson', 400, theme);
260
+ case available$1:
261
+ return getColor('mint', 400, theme);
262
+ case away$1:
263
+ return getColor('orange', 400, theme);
264
+ case transfers$1:
265
+ return getColor('azure', 400, theme);
266
+ case offline$1:
267
+ return getColor('grey', 500, theme);
268
+ default:
269
+ return 'transparent';
270
+ }
271
+ }
272
+
273
+ var COMPONENT_ID$1 = 'avatars.status_indicator';
274
+ var _SIZE = _slicedToArray(SIZE, 5),
275
+ xxs = _SIZE[0],
276
+ xs = _SIZE[1],
277
+ s = _SIZE[2],
278
+ m = _SIZE[3],
279
+ l = _SIZE[4];
280
+ var _ref = ['active'].concat(_toConsumableArray(STATUS)),
281
+ active = _ref[0],
282
+ available = _ref[1],
283
+ away = _ref[2],
284
+ transfers = _ref[3],
285
+ offline = _ref[4];
286
+ var sizeStyles$1 = function sizeStyles(props) {
287
+ var isActive = props.status === 'active';
288
+ var isVisible = true;
92
289
  var height = '0';
93
- var fontSize = '0';
290
+ var padding = '0';
94
291
  var borderWidth = props.theme.shadowWidths.sm;
95
- if (props.status === 'active') {
96
- position = "".concat(props.theme.space.base * -1, "px");
97
- if (props.size === 'small') {
98
- fontSize = props.theme.fontSizes.xs;
99
- height = "".concat(props.theme.space.base * 4, "px");
100
- minWidth = fontSize;
101
- padding = "".concat(props.theme.space.base - 1, "px");
102
- content = 'attr(data-badge)';
103
- } else if (props.size === 'extrasmall') {
104
- height = "".concat(props.theme.space.base * 2, "px");
105
- minWidth = height;
106
- } else if (props.size === 'extraextrasmall') {
107
- position = math("".concat(position, " + 1"));
108
- height = "".concat(props.theme.space.base + 1, "px");
109
- minWidth = height;
292
+ switch (props.size) {
293
+ case xxs:
294
+ isVisible = false;
110
295
  borderWidth = math("".concat(borderWidth, " - 1"));
111
- } else {
112
- fontSize = props.theme.fontSizes.xs;
113
- height = "".concat(props.theme.space.base * 5, "px");
114
- minWidth = fontSize;
115
- padding = "".concat(props.theme.space.base + 1, "px");
116
- content = 'attr(data-badge)';
117
- }
118
- } else if (props.status === 'available') {
119
- position = "".concat(props.theme.space.base * -1, "px");
120
- if (props.size === 'large') {
121
- height = "".concat(props.theme.space.base * 3.5, "px");
122
- } else if (props.size === 'small') {
123
- height = "".concat(props.theme.space.base * 2.5, "px");
124
- } else if (props.size === 'extrasmall') {
125
- height = "".concat(props.theme.space.base * 2, "px");
126
- } else if (props.size === 'extraextrasmall') {
127
- position = math("".concat(position, " + 1"));
128
- height = "".concat(props.theme.space.base + 1, "px");
129
- borderWidth = math("".concat(borderWidth, " - 1"));
130
- } else {
131
- height = "".concat(props.theme.space.base * 3, "px");
132
- }
133
- minWidth = height;
134
- } else if (props.size === 'large') {
135
- position = math("".concat(props.theme.shadowWidths.sm, " + 1"));
136
- } else if (props.size === 'small') {
137
- position = math("".concat(props.theme.shadowWidths.sm, " - 1"));
138
- } else if (props.size === 'medium') {
139
- position = props.theme.shadowWidths.sm;
296
+ height = math("".concat(props.theme.space.base, "px - ").concat(borderWidth));
297
+ break;
298
+ case xs:
299
+ isVisible = false;
300
+ height = math("".concat(props.theme.space.base * 2, "px - (").concat(borderWidth, " * 2)"));
301
+ break;
302
+ case s:
303
+ height = math("".concat(props.theme.space.base * 3, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
304
+ padding = math("".concat(props.theme.space.base + 1, "px - (").concat(borderWidth, " * 2)"));
305
+ break;
306
+ case m:
307
+ case l:
308
+ height = math("".concat(props.theme.space.base * 4, "px ").concat(isActive ? '' : "- (".concat(borderWidth, " * 2)")));
309
+ padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
310
+ break;
311
+ }
312
+ return css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
313
+ };
314
+ var colorStyles$1 = function colorStyles(props) {
315
+ var foregroundColor = props.foregroundColor || props.theme.palette.white;
316
+ var surfaceColor = props.surfaceColor || (props.status ? props.theme.colors.background : props.theme.palette.white);
317
+ var backgroundColor = props.backgroundColor || 'transparent';
318
+ var borderColor = props.borderColor || backgroundColor;
319
+ var boxShadow = props.theme.shadows.sm(surfaceColor);
320
+ if (props.size === xxs) {
321
+ boxShadow = boxShadow.replace(props.theme.shadowWidths.sm, '1px');
322
+ }
323
+ switch (props.status) {
324
+ case available:
325
+ case active:
326
+ case away:
327
+ case transfers:
328
+ backgroundColor = getStatusColor(props.status, props.theme);
329
+ borderColor = backgroundColor;
330
+ break;
331
+ case offline:
332
+ borderColor = getStatusColor(props.status, props.theme);
333
+ backgroundColor = props.theme.palette.white;
334
+ break;
335
+ }
336
+ return css(["border-color:", ";box-shadow:", ";background-color:", ";color:", ";"], borderColor, boxShadow, backgroundColor, foregroundColor);
337
+ };
338
+ var StyledStatusIndicator = styled.div.attrs({
339
+ 'data-garden-id': COMPONENT_ID$1,
340
+ 'data-garden-version': '8.53.1'
341
+ }).withConfig({
342
+ displayName: "StyledStatusIndicator",
343
+ componentId: "sc-16t9if3-0"
344
+ })(["", " ", " transition:inherit;", ";"], sizeStyles$1, colorStyles$1, function (props) {
345
+ return retrieveComponentStyles(COMPONENT_ID$1, props);
346
+ });
347
+ StyledStatusIndicator.defaultProps = {
348
+ size: 'medium',
349
+ theme: DEFAULT_THEME
350
+ };
351
+
352
+ var COMPONENT_ID = 'avatars.avatar';
353
+ var TRANSITION_DURATION = 0.25;
354
+ var badgeStyles = function badgeStyles(props) {
355
+ var _SIZE = _slicedToArray(SIZE, 5),
356
+ xxs = _SIZE[0],
357
+ xs = _SIZE[1],
358
+ s = _SIZE[2],
359
+ m = _SIZE[3],
360
+ l = _SIZE[4];
361
+ var position = "".concat(props.theme.space.base * -1, "px");
362
+ switch (props.size) {
363
+ case s:
364
+ case m:
365
+ position = math("".concat(position, " + 2"));
366
+ break;
367
+ case xxs:
368
+ case xs:
369
+ case l:
370
+ position = math("".concat(position, " + 3"));
371
+ break;
140
372
  }
141
373
  var animation = keyframes(["0%{transform:scale(.1);}"]);
142
- var opacity = props.status === 'active' || props.status === 'available' ? 1 : 0;
143
- var border = "".concat(borderWidth, " ").concat(props.theme.borderStyles.solid);
144
- return css(["display:inline-block;position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out,color 0s;opacity:", ";border:", ";border-radius:100px;padding:0 ", ";min-width:", ";max-width:2em;height:", ";box-sizing:content-box !important;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";content:", ";", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, opacity, border, padding, minWidth, height, height === '0' ? '1px' : height, fontSize, props.theme.fontWeights.semibold, content, props.status === 'active' && css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
374
+ return css(["position:absolute;", ":", ";bottom:", ";transition:all ", "s ease-in-out;", ""], props.theme.rtl ? 'left' : 'right', position, position, TRANSITION_DURATION, props.status === 'active' && css(["animation:", " ", "s ease-in-out;"], animation, TRANSITION_DURATION * 1.5));
145
375
  };
146
376
  var colorStyles = function colorStyles(props) {
147
- var statusColor = 'transparent';
377
+ var statusColor = getStatusColor(props.status, props.theme);
148
378
  var backgroundColor = props.backgroundColor || 'transparent';
149
379
  var foregroundColor = props.foregroundColor || props.theme.palette.white;
150
380
  var surfaceColor = props.status ? props.surfaceColor || props.theme.colors.background : 'transparent';
151
- if (props.status === 'available') {
152
- statusColor = getColor('mint', 400, props.theme);
153
- } else if (props.status === 'active') {
154
- statusColor = getColor('crimson', 400, props.theme);
155
- } else if (props.status === 'away') {
156
- statusColor = getColor('yellow', 400, props.theme);
157
- }
158
- return css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}&::after{background-color:", ";-webkit-text-fill-color:", ";}_:-ms-input-placeholder,&::after{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor, statusColor, props.theme.palette.white, props.theme.palette.white);
381
+ return css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
159
382
  };
160
383
  var sizeStyles = function sizeStyles(props) {
161
384
  var boxShadow;
@@ -198,17 +421,15 @@ var sizeStyles = function sizeStyles(props) {
198
421
  };
199
422
  var StyledAvatar = styled.figure.attrs({
200
423
  'data-garden-id': COMPONENT_ID,
201
- 'data-garden-version': '8.51.0'
424
+ 'data-garden-version': '8.53.1'
202
425
  }).withConfig({
203
426
  displayName: "StyledAvatar",
204
427
  componentId: "sc-608m04-0"
205
- })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}&::after{", ";}", ";"], TRANSITION_DURATION, function (props) {
428
+ })(["display:inline-flex;position:relative;align-items:center;justify-content:center;transition:box-shadow ", "s ease-in-out,color 0.1s ease-in-out;margin:0;vertical-align:middle;box-sizing:border-box;", ";", ";&::before{position:absolute;top:0;left:0;transition:box-shadow ", "s ease-in-out;content:'';}&::before,&& > img{border-radius:inherit;width:100%;height:100%;}&& > img{box-sizing:inherit;vertical-align:bottom;object-fit:cover;}&& > svg{width:1em;height:1em;}& > ", "{", ";}", ";"], TRANSITION_DURATION, function (props) {
206
429
  return sizeStyles(props);
207
430
  }, function (props) {
208
431
  return colorStyles(props);
209
- }, TRANSITION_DURATION, function (props) {
210
- return badgeStyles(props);
211
- }, function (props) {
432
+ }, TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, function (props) {
212
433
  return retrieveComponentStyles(COMPONENT_ID, props);
213
434
  });
214
435
  StyledAvatar.defaultProps = {
@@ -217,7 +438,7 @@ StyledAvatar.defaultProps = {
217
438
  };
218
439
 
219
440
  var TextComponent = forwardRef(function (props, ref) {
220
- return React.createElement(StyledText, _extends({
441
+ return React__default.createElement(StyledText, _extends$4({
221
442
  ref: ref
222
443
  }, props));
223
444
  });
@@ -236,18 +457,33 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
236
457
  foregroundColor = _ref.foregroundColor,
237
458
  other = _objectWithoutProperties(_ref, _excluded);
238
459
  var computedStatus = badge === undefined ? status : 'active';
239
- return React.createElement(StyledAvatar, _extends({
460
+ var ClockIcon = SvgClockStroke$1;
461
+ var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
462
+ if (['large', 'medium'].includes(size)) {
463
+ ClockIcon = SvgClockStroke;
464
+ ArrowLeftIcon = SvgArrowLeftSmStroke;
465
+ }
466
+ return React__default.createElement(StyledAvatar, _extends$4({
240
467
  ref: ref,
241
468
  isSystem: isSystem,
242
469
  size: size,
243
470
  status: computedStatus,
244
- "data-badge": badge,
245
471
  surfaceColor: surfaceColor,
246
472
  backgroundColor: backgroundColor,
247
473
  foregroundColor: foregroundColor,
248
474
  "aria-atomic": "true",
249
475
  "aria-live": "polite"
250
- }, other), Children.only(children));
476
+ }, other), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
477
+ size: size,
478
+ status: computedStatus,
479
+ backgroundColor: backgroundColor,
480
+ foregroundColor: foregroundColor,
481
+ surfaceColor: surfaceColor
482
+ }, computedStatus === 'active' ? React__default.createElement("span", null, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
483
+ "data-icon-status": computedStatus
484
+ }) : null, computedStatus === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
485
+ "data-icon-status": computedStatus
486
+ }) : null)));
251
487
  });
252
488
  AvatarComponent.displayName = 'Avatar';
253
489
  AvatarComponent.propTypes = {
package/dist/typings/styled/StyledStatusIndicator.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { DefaultTheme } from 'styled-components';
8
+ import { IAvatarProps } from '../types';
9
+ export interface IStatusIndicatorProps extends Omit<IAvatarProps, 'badge' | 'isSystem' | 'status'> {
10
+ readonly status?: IAvatarProps['status'] | 'active';
11
+ borderColor?: string;
12
+ }
13
+ export declare const StyledStatusIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, {
14
+ 'data-garden-id': string;
15
+ 'data-garden-version': string;
16
+ } & IStatusIndicatorProps, "data-garden-id" | "data-garden-version">;
package/dist/typings/styled/index.d.ts CHANGED
@@ -5,4 +5,5 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export * from './StyledAvatar';
8
+ export * from './StyledStatusIndicator';
8
9
  export * from './StyledText';
package/dist/typings/styled/utility.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { STATUS } from '../types';
8
+ export declare function getStatusColor(status: typeof STATUS[number] | 'active' | undefined, theme?: import("@zendeskgarden/react-theming").IGardenTheme): string;
package/dist/typings/types/index.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { HTMLAttributes } from 'react';
8
8
  export declare const SIZE: readonly ["extraextrasmall", "extrasmall", "small", "medium", "large"];
9
- export declare const STATUS: readonly ["available", "away"];
9
+ export declare const STATUS: readonly ["available", "away", "transfers", "offline"];
10
10
  export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
11
11
  /** Sets the avatar background color */
12
12
  backgroundColor?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "8.51.0",
3
+ "version": "8.53.1",
4
4
  "description": "Components relating to avatars in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,8 @@
31
31
  "styled-components": "^4.2.0 || ^5.0.0"
32
32
  },
33
33
  "devDependencies": {
34
- "@zendeskgarden/react-theming": "^8.51.0"
34
+ "@zendeskgarden/react-theming": "^8.53.1",
35
+ "@zendeskgarden/svg-icons": "^6.33.0"
35
36
  },
36
37
  "keywords": [
37
38
  "components",
@@ -43,5 +44,5 @@
43
44
  "access": "public"
44
45
  },
45
46
  "zendeskgarden:src": "src/index.ts",
46
- "gitHead": "a932647429f0a79984650d2521f357ed8320d1d0"
47
+ "gitHead": "79dee8e82b6f082e8d4a72ba95a5fb3982d63040"
47
48
  }