@zendeskgarden/react-avatars 9.4.0 → 9.5.0
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/styled/StyledAvatar.js +3 -3
- package/dist/esm/styled/StyledStandaloneStatus.js +3 -3
- package/dist/esm/styled/StyledStandaloneStatusCaption.js +3 -3
- package/dist/esm/styled/StyledStandaloneStatusIndicator.js +3 -3
- package/dist/esm/styled/StyledStatusIndicator.js +3 -3
- package/dist/esm/styled/StyledStatusIndicatorBase.js +3 -3
- package/dist/esm/styled/StyledText.js +3 -3
- package/dist/index.cjs.js +14 -14
- package/package.json +5 -5
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { keyframes, css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { math } from 'polished';
|
|
10
10
|
import { SIZE } from '../types/index.js';
|
|
11
11
|
import { StyledText } from './StyledText.js';
|
|
@@ -108,11 +108,11 @@ const sizeStyles = props => {
|
|
|
108
108
|
};
|
|
109
109
|
const StyledAvatar = styled.figure.attrs({
|
|
110
110
|
'data-garden-id': COMPONENT_ID,
|
|
111
|
-
'data-garden-version': '9.
|
|
111
|
+
'data-garden-version': '9.5.0'
|
|
112
112
|
}).withConfig({
|
|
113
113
|
displayName: "StyledAvatar",
|
|
114
114
|
componentId: "sc-608m04-0"
|
|
115
|
-
})(["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, props => sizeStyles(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles,
|
|
115
|
+
})(["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, props => sizeStyles(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, componentStyles);
|
|
116
116
|
StyledAvatar.defaultProps = {
|
|
117
117
|
$size: 'medium',
|
|
118
118
|
theme: DEFAULT_THEME
|
|
@@ -5,16 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { TRANSITION_DURATION } from './utility.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'avatars.status-indicator.status';
|
|
12
12
|
const StyledStandaloneStatus = styled.figure.attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.
|
|
14
|
+
'data-garden-version': '9.5.0'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledStandaloneStatus",
|
|
17
17
|
componentId: "sc-1ow4nfj-0"
|
|
18
|
-
})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION,
|
|
18
|
+
})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, componentStyles);
|
|
19
19
|
|
|
20
20
|
export { StyledStandaloneStatus };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'avatars.status-indicator.caption';
|
|
11
11
|
function sizeStyles(props) {
|
|
@@ -14,10 +14,10 @@ function sizeStyles(props) {
|
|
|
14
14
|
}
|
|
15
15
|
const StyledStandaloneStatusCaption = styled.figcaption.attrs({
|
|
16
16
|
'data-garden-id': COMPONENT_ID,
|
|
17
|
-
'data-garden-version': '9.
|
|
17
|
+
'data-garden-version': '9.5.0'
|
|
18
18
|
}).withConfig({
|
|
19
19
|
displayName: "StyledStandaloneStatusCaption",
|
|
20
20
|
componentId: "sc-aalyk1-0"
|
|
21
|
-
})(["", " ", ";"], sizeStyles,
|
|
21
|
+
})(["", " ", ";"], sizeStyles, componentStyles);
|
|
22
22
|
|
|
23
23
|
export { StyledStandaloneStatusCaption };
|
|
@@ -5,18 +5,18 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getStatusSize } from './utility.js';
|
|
10
10
|
import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'avatars.status-indicator.indicator';
|
|
13
13
|
const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.
|
|
15
|
+
'data-garden-version': '9.5.0'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledStandaloneStatusIndicator",
|
|
18
18
|
componentId: "sc-1xt1heq-0"
|
|
19
|
-
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`,
|
|
19
|
+
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, componentStyles);
|
|
20
20
|
StyledStandaloneStatusIndicator.defaultProps = {
|
|
21
21
|
$type: 'offline',
|
|
22
22
|
theme: DEFAULT_THEME
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { math } from 'polished';
|
|
10
10
|
import { SIZE } from '../types/index.js';
|
|
11
11
|
import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
|
|
@@ -50,11 +50,11 @@ const colorStyles = _ref => {
|
|
|
50
50
|
};
|
|
51
51
|
const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID,
|
|
53
|
-
'data-garden-version': '9.
|
|
53
|
+
'data-garden-version': '9.5.0'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledStatusIndicator",
|
|
56
56
|
componentId: "sc-16t9if3-0"
|
|
57
|
-
})(["", " ", " ", ";"], sizeStyles, colorStyles,
|
|
57
|
+
})(["", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
|
|
58
58
|
StyledStatusIndicator.defaultProps = {
|
|
59
59
|
$size: 'medium',
|
|
60
60
|
theme: DEFAULT_THEME
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { keyframes, css } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getStatusBorderOffset, getStatusSize, TRANSITION_DURATION, getStatusColor } from './utility.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'avatars.status-indicator.base';
|
|
@@ -40,11 +40,11 @@ const colorStyles = _ref => {
|
|
|
40
40
|
};
|
|
41
41
|
const StyledStatusIndicatorBase = styled.div.attrs({
|
|
42
42
|
'data-garden-id': COMPONENT_ID,
|
|
43
|
-
'data-garden-version': '9.
|
|
43
|
+
'data-garden-version': '9.5.0'
|
|
44
44
|
}).withConfig({
|
|
45
45
|
displayName: "StyledStatusIndicatorBase",
|
|
46
46
|
componentId: "sc-1rininy-0"
|
|
47
|
-
})(["transition:inherit;", " ", " ", ";"], sizeStyles, colorStyles,
|
|
47
|
+
})(["transition:inherit;", " ", " ", ";"], sizeStyles, colorStyles, componentStyles);
|
|
48
48
|
StyledStatusIndicatorBase.defaultProps = {
|
|
49
49
|
theme: DEFAULT_THEME,
|
|
50
50
|
$size: 'small'
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'avatars.text';
|
|
11
11
|
const StyledText = styled.span.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.0'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledText",
|
|
16
16
|
componentId: "sc-1a6hivh-0"
|
|
17
|
-
})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"],
|
|
17
|
+
})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledText };
|
package/dist/index.cjs.js
CHANGED
|
@@ -122,11 +122,11 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
|
|
|
122
122
|
const COMPONENT_ID$6 = 'avatars.text';
|
|
123
123
|
const StyledText = styled__default.default.span.attrs({
|
|
124
124
|
'data-garden-id': COMPONENT_ID$6,
|
|
125
|
-
'data-garden-version': '9.
|
|
125
|
+
'data-garden-version': '9.5.0'
|
|
126
126
|
}).withConfig({
|
|
127
127
|
displayName: "StyledText",
|
|
128
128
|
componentId: "sc-1a6hivh-0"
|
|
129
|
-
})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"],
|
|
129
|
+
})(["overflow:hidden;text-align:center;white-space:nowrap;", ";"], reactTheming.componentStyles);
|
|
130
130
|
|
|
131
131
|
const [xxs$1, xs$1, s$1, m$1, l$1] = SIZE;
|
|
132
132
|
const TRANSITION_DURATION = 0.25;
|
|
@@ -242,11 +242,11 @@ const colorStyles$2 = _ref => {
|
|
|
242
242
|
};
|
|
243
243
|
const StyledStatusIndicatorBase = styled__default.default.div.attrs({
|
|
244
244
|
'data-garden-id': COMPONENT_ID$5,
|
|
245
|
-
'data-garden-version': '9.
|
|
245
|
+
'data-garden-version': '9.5.0'
|
|
246
246
|
}).withConfig({
|
|
247
247
|
displayName: "StyledStatusIndicatorBase",
|
|
248
248
|
componentId: "sc-1rininy-0"
|
|
249
|
-
})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2,
|
|
249
|
+
})(["transition:inherit;", " ", " ", ";"], sizeStyles$3, colorStyles$2, reactTheming.componentStyles);
|
|
250
250
|
StyledStatusIndicatorBase.defaultProps = {
|
|
251
251
|
theme: reactTheming.DEFAULT_THEME,
|
|
252
252
|
$size: 'small'
|
|
@@ -291,11 +291,11 @@ const colorStyles$1 = _ref => {
|
|
|
291
291
|
};
|
|
292
292
|
const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
293
293
|
'data-garden-id': COMPONENT_ID$4,
|
|
294
|
-
'data-garden-version': '9.
|
|
294
|
+
'data-garden-version': '9.5.0'
|
|
295
295
|
}).withConfig({
|
|
296
296
|
displayName: "StyledStatusIndicator",
|
|
297
297
|
componentId: "sc-16t9if3-0"
|
|
298
|
-
})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1,
|
|
298
|
+
})(["", " ", " ", ";"], sizeStyles$2, colorStyles$1, reactTheming.componentStyles);
|
|
299
299
|
StyledStatusIndicator.defaultProps = {
|
|
300
300
|
$size: 'medium',
|
|
301
301
|
theme: reactTheming.DEFAULT_THEME
|
|
@@ -397,11 +397,11 @@ const sizeStyles$1 = props => {
|
|
|
397
397
|
};
|
|
398
398
|
const StyledAvatar = styled__default.default.figure.attrs({
|
|
399
399
|
'data-garden-id': COMPONENT_ID$3,
|
|
400
|
-
'data-garden-version': '9.
|
|
400
|
+
'data-garden-version': '9.5.0'
|
|
401
401
|
}).withConfig({
|
|
402
402
|
displayName: "StyledAvatar",
|
|
403
403
|
componentId: "sc-608m04-0"
|
|
404
|
-
})(["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, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles,
|
|
404
|
+
})(["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, props => sizeStyles$1(props), props => colorStyles(props), TRANSITION_DURATION, StyledStatusIndicator, badgeStyles, reactTheming.componentStyles);
|
|
405
405
|
StyledAvatar.defaultProps = {
|
|
406
406
|
$size: 'medium',
|
|
407
407
|
theme: reactTheming.DEFAULT_THEME
|
|
@@ -410,11 +410,11 @@ StyledAvatar.defaultProps = {
|
|
|
410
410
|
const COMPONENT_ID$2 = 'avatars.status-indicator.status';
|
|
411
411
|
const StyledStandaloneStatus = styled__default.default.figure.attrs({
|
|
412
412
|
'data-garden-id': COMPONENT_ID$2,
|
|
413
|
-
'data-garden-version': '9.
|
|
413
|
+
'data-garden-version': '9.5.0'
|
|
414
414
|
}).withConfig({
|
|
415
415
|
displayName: "StyledStandaloneStatus",
|
|
416
416
|
componentId: "sc-1ow4nfj-0"
|
|
417
|
-
})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION,
|
|
417
|
+
})(["display:inline-flex;flex-flow:row nowrap;transition:all ", "s ease-in-out;margin:0;box-sizing:content-box;", ";"], TRANSITION_DURATION, reactTheming.componentStyles);
|
|
418
418
|
|
|
419
419
|
const COMPONENT_ID$1 = 'avatars.status-indicator.caption';
|
|
420
420
|
function sizeStyles(props) {
|
|
@@ -423,20 +423,20 @@ function sizeStyles(props) {
|
|
|
423
423
|
}
|
|
424
424
|
const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
|
|
425
425
|
'data-garden-id': COMPONENT_ID$1,
|
|
426
|
-
'data-garden-version': '9.
|
|
426
|
+
'data-garden-version': '9.5.0'
|
|
427
427
|
}).withConfig({
|
|
428
428
|
displayName: "StyledStandaloneStatusCaption",
|
|
429
429
|
componentId: "sc-aalyk1-0"
|
|
430
|
-
})(["", " ", ";"], sizeStyles,
|
|
430
|
+
})(["", " ", ";"], sizeStyles, reactTheming.componentStyles);
|
|
431
431
|
|
|
432
432
|
const COMPONENT_ID = 'avatars.status-indicator.indicator';
|
|
433
433
|
const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
434
434
|
'data-garden-id': COMPONENT_ID,
|
|
435
|
-
'data-garden-version': '9.
|
|
435
|
+
'data-garden-version': '9.5.0'
|
|
436
436
|
}).withConfig({
|
|
437
437
|
displayName: "StyledStandaloneStatusIndicator",
|
|
438
438
|
componentId: "sc-1xt1heq-0"
|
|
439
|
-
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`,
|
|
439
|
+
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, reactTheming.componentStyles);
|
|
440
440
|
StyledStandaloneStatusIndicator.defaultProps = {
|
|
441
441
|
$type: 'offline',
|
|
442
442
|
theme: reactTheming.DEFAULT_THEME
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-avatars",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
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,9 +31,9 @@
|
|
|
31
31
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@zendeskgarden/react-dropdowns": "^9.
|
|
35
|
-
"@zendeskgarden/react-theming": "^9.
|
|
36
|
-
"@zendeskgarden/svg-icons": "7.
|
|
34
|
+
"@zendeskgarden/react-dropdowns": "^9.5.0",
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.5.0",
|
|
36
|
+
"@zendeskgarden/svg-icons": "7.5.0"
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
39
39
|
"components",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "43546784a9aa985332ddcc6dd09209a11e2c03ff"
|
|
49
49
|
}
|