@zendeskgarden/react-avatars 9.0.0-next.1 → 9.0.0-next.11
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.
- package/dist/esm/elements/Avatar.js +93 -0
- package/dist/esm/elements/StatusIndicator.js +67 -0
- package/dist/esm/elements/components/Text.js +21 -0
- package/dist/esm/index.js +8 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js +33 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/arrow-left-sm-stroke.svg.js +25 -0
- package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js +33 -0
- package/dist/esm/styled/StyledAvatar.js +91 -0
- package/dist/esm/styled/StyledStandaloneStatus.js +23 -0
- package/dist/esm/styled/StyledStandaloneStatusCaption.js +26 -0
- package/dist/esm/styled/StyledStandaloneStatusIndicator.js +25 -0
- package/dist/esm/styled/StyledStatusIndicator.js +53 -0
- package/dist/esm/styled/StyledStatusIndicatorBase.js +39 -0
- package/dist/esm/styled/StyledText.js +22 -0
- package/dist/esm/styled/utility.js +52 -0
- package/dist/esm/types/index.js +10 -0
- package/dist/index.cjs.js +22 -38
- package/package.json +6 -6
- package/dist/index.esm.js +0 -471
|
@@ -0,0 +1,10 @@
|
|
|
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
|
+
const SIZE = ['extraextrasmall', 'extrasmall', 'small', 'medium', 'large'];
|
|
8
|
+
const STATUS = ['available', 'away', 'transfers', 'offline'];
|
|
9
|
+
|
|
10
|
+
export { SIZE, STATUS };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
+
*/
|
|
8
7
|
'use strict';
|
|
9
8
|
|
|
10
9
|
var React = require('react');
|
|
@@ -37,21 +36,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
37
36
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
38
37
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
39
38
|
|
|
40
|
-
function _extends$4() {
|
|
41
|
-
_extends$4 = Object.assign ? Object.assign.bind() : function (target) {
|
|
42
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
43
|
-
var source = arguments[i];
|
|
44
|
-
for (var key in source) {
|
|
45
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
46
|
-
target[key] = source[key];
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return target;
|
|
51
|
-
};
|
|
52
|
-
return _extends$4.apply(this, arguments);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
39
|
var _g$1;
|
|
56
40
|
function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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); }
|
|
57
41
|
var SvgClockStroke$1 = function SvgClockStroke(props) {
|
|
@@ -138,7 +122,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
|
|
|
138
122
|
const COMPONENT_ID$6 = 'avatars.text';
|
|
139
123
|
const StyledText = styled__default.default.span.attrs({
|
|
140
124
|
'data-garden-id': COMPONENT_ID$6,
|
|
141
|
-
'data-garden-version': '9.0.0-next.
|
|
125
|
+
'data-garden-version': '9.0.0-next.11'
|
|
142
126
|
}).withConfig({
|
|
143
127
|
displayName: "StyledText",
|
|
144
128
|
componentId: "sc-1a6hivh-0"
|
|
@@ -152,15 +136,15 @@ const TRANSITION_DURATION = 0.25;
|
|
|
152
136
|
function getStatusColor(type, theme) {
|
|
153
137
|
switch (type) {
|
|
154
138
|
case 'active':
|
|
155
|
-
return reactTheming.
|
|
139
|
+
return reactTheming.getColorV8('crimson', 400, theme);
|
|
156
140
|
case 'available':
|
|
157
|
-
return reactTheming.
|
|
141
|
+
return reactTheming.getColorV8('mint', 400, theme);
|
|
158
142
|
case 'away':
|
|
159
|
-
return reactTheming.
|
|
143
|
+
return reactTheming.getColorV8('orange', 400, theme);
|
|
160
144
|
case 'transfers':
|
|
161
|
-
return reactTheming.
|
|
145
|
+
return reactTheming.getColorV8('azure', 400, theme);
|
|
162
146
|
case 'offline':
|
|
163
|
-
return reactTheming.
|
|
147
|
+
return reactTheming.getColorV8('grey', 500, theme);
|
|
164
148
|
default:
|
|
165
149
|
return 'transparent';
|
|
166
150
|
}
|
|
@@ -206,7 +190,7 @@ const colorStyles$2 = props => {
|
|
|
206
190
|
};
|
|
207
191
|
const StyledStatusIndicatorBase = styled__default.default.div.attrs({
|
|
208
192
|
'data-garden-id': COMPONENT_ID$5,
|
|
209
|
-
'data-garden-version': '9.0.0-next.
|
|
193
|
+
'data-garden-version': '9.0.0-next.11'
|
|
210
194
|
}).withConfig({
|
|
211
195
|
displayName: "StyledStatusIndicatorBase",
|
|
212
196
|
componentId: "sc-1rininy-0"
|
|
@@ -237,7 +221,7 @@ const colorStyles$1 = props => {
|
|
|
237
221
|
borderColor,
|
|
238
222
|
surfaceColor
|
|
239
223
|
} = props;
|
|
240
|
-
let boxShadow = theme.shadows.sm(surfaceColor || (type ?
|
|
224
|
+
let boxShadow = theme.shadows.sm(surfaceColor || (type ? reactTheming.getColorV8('background', 600 , theme) : theme.palette.white));
|
|
241
225
|
if (size === xxs) {
|
|
242
226
|
boxShadow = boxShadow.replace(theme.shadowWidths.sm, '1px');
|
|
243
227
|
}
|
|
@@ -245,7 +229,7 @@ const colorStyles$1 = props => {
|
|
|
245
229
|
};
|
|
246
230
|
const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
247
231
|
'data-garden-id': COMPONENT_ID$4,
|
|
248
|
-
'data-garden-version': '9.0.0-next.
|
|
232
|
+
'data-garden-version': '9.0.0-next.11'
|
|
249
233
|
}).withConfig({
|
|
250
234
|
displayName: "StyledStatusIndicator",
|
|
251
235
|
componentId: "sc-16t9if3-0"
|
|
@@ -277,7 +261,7 @@ const colorStyles = props => {
|
|
|
277
261
|
const statusColor = getStatusColor(props.status, props.theme);
|
|
278
262
|
const backgroundColor = props.backgroundColor || 'transparent';
|
|
279
263
|
const foregroundColor = props.foregroundColor || props.theme.palette.white;
|
|
280
|
-
const surfaceColor = props.status ? props.surfaceColor || props.theme
|
|
264
|
+
const surfaceColor = props.status ? props.surfaceColor || reactTheming.getColorV8('background', 600 , props.theme) : 'transparent';
|
|
281
265
|
return styled.css(["box-shadow:", ";background-color:", ";color:", ";& > svg,& ", "{color:", ";}"], props.theme.shadows.sm(statusColor), backgroundColor, surfaceColor, StyledText, foregroundColor);
|
|
282
266
|
};
|
|
283
267
|
const sizeStyles$1 = props => {
|
|
@@ -321,7 +305,7 @@ const sizeStyles$1 = props => {
|
|
|
321
305
|
};
|
|
322
306
|
const StyledAvatar = styled__default.default.figure.attrs({
|
|
323
307
|
'data-garden-id': COMPONENT_ID$3,
|
|
324
|
-
'data-garden-version': '9.0.0-next.
|
|
308
|
+
'data-garden-version': '9.0.0-next.11'
|
|
325
309
|
}).withConfig({
|
|
326
310
|
displayName: "StyledAvatar",
|
|
327
311
|
componentId: "sc-608m04-0"
|
|
@@ -334,7 +318,7 @@ StyledAvatar.defaultProps = {
|
|
|
334
318
|
const COMPONENT_ID$2 = 'avatars.status-indicator.status';
|
|
335
319
|
const StyledStandaloneStatus = styled__default.default.figure.attrs({
|
|
336
320
|
'data-garden-id': COMPONENT_ID$2,
|
|
337
|
-
'data-garden-version': '9.0.0-next.
|
|
321
|
+
'data-garden-version': '9.0.0-next.11'
|
|
338
322
|
}).withConfig({
|
|
339
323
|
displayName: "StyledStandaloneStatus",
|
|
340
324
|
componentId: "sc-1ow4nfj-0"
|
|
@@ -350,7 +334,7 @@ function sizeStyles(props) {
|
|
|
350
334
|
}
|
|
351
335
|
const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
|
|
352
336
|
'data-garden-id': COMPONENT_ID$1,
|
|
353
|
-
'data-garden-version': '9.0.0-next.
|
|
337
|
+
'data-garden-version': '9.0.0-next.11'
|
|
354
338
|
}).withConfig({
|
|
355
339
|
displayName: "StyledStandaloneStatusCaption",
|
|
356
340
|
componentId: "sc-aalyk1-0"
|
|
@@ -362,7 +346,7 @@ StyledStandaloneStatusCaption.defaultProps = {
|
|
|
362
346
|
const COMPONENT_ID = 'avatars.status-indicator.indicator';
|
|
363
347
|
const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
364
348
|
'data-garden-id': COMPONENT_ID,
|
|
365
|
-
'data-garden-version': '9.0.0-next.
|
|
349
|
+
'data-garden-version': '9.0.0-next.11'
|
|
366
350
|
}).withConfig({
|
|
367
351
|
displayName: "StyledStandaloneStatusIndicator",
|
|
368
352
|
componentId: "sc-1xt1heq-0"
|
|
@@ -372,7 +356,7 @@ StyledStandaloneStatusIndicator.defaultProps = {
|
|
|
372
356
|
theme: reactTheming.DEFAULT_THEME
|
|
373
357
|
};
|
|
374
358
|
|
|
375
|
-
const TextComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledText,
|
|
359
|
+
const TextComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledText, Object.assign({
|
|
376
360
|
ref: ref
|
|
377
361
|
}, props)));
|
|
378
362
|
TextComponent.displayName = 'Avatar.Text';
|
|
@@ -407,7 +391,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
|
|
|
407
391
|
}, [computedStatus, badge]);
|
|
408
392
|
const shouldValidate = computedStatus !== undefined;
|
|
409
393
|
const statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel, shouldValidate);
|
|
410
|
-
return React__namespace.default.createElement(StyledAvatar,
|
|
394
|
+
return React__namespace.default.createElement(StyledAvatar, Object.assign({
|
|
411
395
|
ref: ref,
|
|
412
396
|
isSystem: isSystem,
|
|
413
397
|
size: size,
|
|
@@ -467,7 +451,7 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
|
|
|
467
451
|
'aria-label': label
|
|
468
452
|
}, 'aria-label', defaultLabel);
|
|
469
453
|
return (
|
|
470
|
-
React__namespace.default.createElement(StyledStandaloneStatus,
|
|
454
|
+
React__namespace.default.createElement(StyledStandaloneStatus, Object.assign({
|
|
471
455
|
role: "status",
|
|
472
456
|
ref: ref
|
|
473
457
|
}, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-avatars",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.11",
|
|
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>",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/zendeskgarden/react-components/issues"
|
|
11
11
|
},
|
|
12
12
|
"main": "dist/index.cjs.js",
|
|
13
|
-
"module": "dist/index.
|
|
13
|
+
"module": "dist/esm/index.js",
|
|
14
14
|
"files": [
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"prop-types": "^15.5.7"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@zendeskgarden/react-theming": "
|
|
28
|
+
"@zendeskgarden/react-theming": ">=9.0.0-next",
|
|
29
29
|
"react": ">=16.8.0",
|
|
30
30
|
"react-dom": ">=16.8.0",
|
|
31
|
-
"styled-components": "^5.1
|
|
31
|
+
"styled-components": "^5.3.1"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
34
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.11",
|
|
35
35
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
36
36
|
},
|
|
37
37
|
"keywords": [
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
46
|
"zendeskgarden:src": "src/index.ts",
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "0de1cc664807bd993ccd3beeb78e8fd1f3828320"
|
|
48
48
|
}
|