@zendeskgarden/react-avatars 8.69.1 → 8.69.3
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/index.cjs.js +8 -8
- package/dist/index.esm.js +8 -8
- package/dist/typings/elements/Avatar.d.ts +15 -15
- package/dist/typings/elements/StatusIndicator.d.ts +18 -18
- package/dist/typings/elements/components/Text.d.ts +11 -11
- package/dist/typings/index.d.ts +9 -9
- package/dist/typings/styled/StyledAvatar.d.ts +18 -18
- package/dist/typings/styled/StyledStandaloneStatus.d.ts +11 -11
- package/dist/typings/styled/StyledStandaloneStatusCaption.d.ts +11 -11
- package/dist/typings/styled/StyledStandaloneStatusIndicator.d.ts +14 -14
- package/dist/typings/styled/StyledStatusIndicator.d.ts +20 -20
- package/dist/typings/styled/StyledStatusIndicatorBase.d.ts +11 -11
- package/dist/typings/styled/StyledText.d.ts +13 -13
- package/dist/typings/styled/index.d.ts +12 -12
- package/dist/typings/styled/utility.d.ts +17 -17
- package/dist/typings/types/index.d.ts +33 -33
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -138,7 +138,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
|
|
|
138
138
|
const COMPONENT_ID$6 = 'avatars.text';
|
|
139
139
|
const StyledText = styled__default.default.span.attrs({
|
|
140
140
|
'data-garden-id': COMPONENT_ID$6,
|
|
141
|
-
'data-garden-version': '8.69.
|
|
141
|
+
'data-garden-version': '8.69.3'
|
|
142
142
|
}).withConfig({
|
|
143
143
|
displayName: "StyledText",
|
|
144
144
|
componentId: "sc-1a6hivh-0"
|
|
@@ -206,7 +206,7 @@ const colorStyles$2 = props => {
|
|
|
206
206
|
};
|
|
207
207
|
const StyledStatusIndicatorBase = styled__default.default.div.attrs({
|
|
208
208
|
'data-garden-id': COMPONENT_ID$5,
|
|
209
|
-
'data-garden-version': '8.69.
|
|
209
|
+
'data-garden-version': '8.69.3'
|
|
210
210
|
}).withConfig({
|
|
211
211
|
displayName: "StyledStatusIndicatorBase",
|
|
212
212
|
componentId: "sc-1rininy-0"
|
|
@@ -245,7 +245,7 @@ const colorStyles$1 = props => {
|
|
|
245
245
|
};
|
|
246
246
|
const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
247
247
|
'data-garden-id': COMPONENT_ID$4,
|
|
248
|
-
'data-garden-version': '8.69.
|
|
248
|
+
'data-garden-version': '8.69.3'
|
|
249
249
|
}).withConfig({
|
|
250
250
|
displayName: "StyledStatusIndicator",
|
|
251
251
|
componentId: "sc-16t9if3-0"
|
|
@@ -321,7 +321,7 @@ const sizeStyles$1 = props => {
|
|
|
321
321
|
};
|
|
322
322
|
const StyledAvatar = styled__default.default.figure.attrs({
|
|
323
323
|
'data-garden-id': COMPONENT_ID$3,
|
|
324
|
-
'data-garden-version': '8.69.
|
|
324
|
+
'data-garden-version': '8.69.3'
|
|
325
325
|
}).withConfig({
|
|
326
326
|
displayName: "StyledAvatar",
|
|
327
327
|
componentId: "sc-608m04-0"
|
|
@@ -334,7 +334,7 @@ StyledAvatar.defaultProps = {
|
|
|
334
334
|
const COMPONENT_ID$2 = 'avatars.status-indicator.status';
|
|
335
335
|
const StyledStandaloneStatus = styled__default.default.figure.attrs({
|
|
336
336
|
'data-garden-id': COMPONENT_ID$2,
|
|
337
|
-
'data-garden-version': '8.69.
|
|
337
|
+
'data-garden-version': '8.69.3'
|
|
338
338
|
}).withConfig({
|
|
339
339
|
displayName: "StyledStandaloneStatus",
|
|
340
340
|
componentId: "sc-1ow4nfj-0"
|
|
@@ -350,7 +350,7 @@ function sizeStyles(props) {
|
|
|
350
350
|
}
|
|
351
351
|
const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
|
|
352
352
|
'data-garden-id': COMPONENT_ID$1,
|
|
353
|
-
'data-garden-version': '8.69.
|
|
353
|
+
'data-garden-version': '8.69.3'
|
|
354
354
|
}).withConfig({
|
|
355
355
|
displayName: "StyledStandaloneStatusCaption",
|
|
356
356
|
componentId: "sc-aalyk1-0"
|
|
@@ -362,11 +362,11 @@ StyledStandaloneStatusCaption.defaultProps = {
|
|
|
362
362
|
const COMPONENT_ID = 'avatars.status-indicator.indicator';
|
|
363
363
|
const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
|
|
364
364
|
'data-garden-id': COMPONENT_ID,
|
|
365
|
-
'data-garden-version': '8.69.
|
|
365
|
+
'data-garden-version': '8.69.3'
|
|
366
366
|
}).withConfig({
|
|
367
367
|
displayName: "StyledStandaloneStatusIndicator",
|
|
368
368
|
componentId: "sc-1xt1heq-0"
|
|
369
|
-
})(["position:relative;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
369
|
+
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
370
370
|
StyledStandaloneStatusIndicator.defaultProps = {
|
|
371
371
|
type: 'offline',
|
|
372
372
|
theme: reactTheming.DEFAULT_THEME
|
package/dist/index.esm.js
CHANGED
|
@@ -113,7 +113,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
|
|
|
113
113
|
const COMPONENT_ID$6 = 'avatars.text';
|
|
114
114
|
const StyledText = styled.span.attrs({
|
|
115
115
|
'data-garden-id': COMPONENT_ID$6,
|
|
116
|
-
'data-garden-version': '8.69.
|
|
116
|
+
'data-garden-version': '8.69.3'
|
|
117
117
|
}).withConfig({
|
|
118
118
|
displayName: "StyledText",
|
|
119
119
|
componentId: "sc-1a6hivh-0"
|
|
@@ -181,7 +181,7 @@ const colorStyles$2 = props => {
|
|
|
181
181
|
};
|
|
182
182
|
const StyledStatusIndicatorBase = styled.div.attrs({
|
|
183
183
|
'data-garden-id': COMPONENT_ID$5,
|
|
184
|
-
'data-garden-version': '8.69.
|
|
184
|
+
'data-garden-version': '8.69.3'
|
|
185
185
|
}).withConfig({
|
|
186
186
|
displayName: "StyledStatusIndicatorBase",
|
|
187
187
|
componentId: "sc-1rininy-0"
|
|
@@ -220,7 +220,7 @@ const colorStyles$1 = props => {
|
|
|
220
220
|
};
|
|
221
221
|
const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
|
|
222
222
|
'data-garden-id': COMPONENT_ID$4,
|
|
223
|
-
'data-garden-version': '8.69.
|
|
223
|
+
'data-garden-version': '8.69.3'
|
|
224
224
|
}).withConfig({
|
|
225
225
|
displayName: "StyledStatusIndicator",
|
|
226
226
|
componentId: "sc-16t9if3-0"
|
|
@@ -296,7 +296,7 @@ const sizeStyles$1 = props => {
|
|
|
296
296
|
};
|
|
297
297
|
const StyledAvatar = styled.figure.attrs({
|
|
298
298
|
'data-garden-id': COMPONENT_ID$3,
|
|
299
|
-
'data-garden-version': '8.69.
|
|
299
|
+
'data-garden-version': '8.69.3'
|
|
300
300
|
}).withConfig({
|
|
301
301
|
displayName: "StyledAvatar",
|
|
302
302
|
componentId: "sc-608m04-0"
|
|
@@ -309,7 +309,7 @@ StyledAvatar.defaultProps = {
|
|
|
309
309
|
const COMPONENT_ID$2 = 'avatars.status-indicator.status';
|
|
310
310
|
const StyledStandaloneStatus = styled.figure.attrs({
|
|
311
311
|
'data-garden-id': COMPONENT_ID$2,
|
|
312
|
-
'data-garden-version': '8.69.
|
|
312
|
+
'data-garden-version': '8.69.3'
|
|
313
313
|
}).withConfig({
|
|
314
314
|
displayName: "StyledStandaloneStatus",
|
|
315
315
|
componentId: "sc-1ow4nfj-0"
|
|
@@ -325,7 +325,7 @@ function sizeStyles(props) {
|
|
|
325
325
|
}
|
|
326
326
|
const StyledStandaloneStatusCaption = styled.figcaption.attrs({
|
|
327
327
|
'data-garden-id': COMPONENT_ID$1,
|
|
328
|
-
'data-garden-version': '8.69.
|
|
328
|
+
'data-garden-version': '8.69.3'
|
|
329
329
|
}).withConfig({
|
|
330
330
|
displayName: "StyledStandaloneStatusCaption",
|
|
331
331
|
componentId: "sc-aalyk1-0"
|
|
@@ -337,11 +337,11 @@ StyledStandaloneStatusCaption.defaultProps = {
|
|
|
337
337
|
const COMPONENT_ID = 'avatars.status-indicator.indicator';
|
|
338
338
|
const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
|
|
339
339
|
'data-garden-id': COMPONENT_ID,
|
|
340
|
-
'data-garden-version': '8.69.
|
|
340
|
+
'data-garden-version': '8.69.3'
|
|
341
341
|
}).withConfig({
|
|
342
342
|
displayName: "StyledStandaloneStatusIndicator",
|
|
343
343
|
componentId: "sc-1xt1heq-0"
|
|
344
|
-
})(["position:relative;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
344
|
+
})(["position:relative;box-sizing:content-box;margin-top:", ";", ";"], props => `calc((${props.theme.lineHeights.md} - ${getStatusSize(props, '0')}) / 2)`, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
345
345
|
StyledStandaloneStatusIndicator.defaultProps = {
|
|
346
346
|
type: 'offline',
|
|
347
347
|
theme: DEFAULT_THEME
|
|
@@ -1,15 +1,15 @@
|
|
|
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 React from 'react';
|
|
8
|
-
import { IAvatarProps } from '../types';
|
|
9
|
-
import { Text } from './components/Text';
|
|
10
|
-
/**
|
|
11
|
-
* @extends HTMLAttributes<HTMLElement>
|
|
12
|
-
*/
|
|
13
|
-
export declare const Avatar: React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> & {
|
|
14
|
-
Text: typeof Text;
|
|
15
|
-
};
|
|
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 React from 'react';
|
|
8
|
+
import { IAvatarProps } from '../types';
|
|
9
|
+
import { Text } from './components/Text';
|
|
10
|
+
/**
|
|
11
|
+
* @extends HTMLAttributes<HTMLElement>
|
|
12
|
+
*/
|
|
13
|
+
export declare const Avatar: React.ForwardRefExoticComponent<IAvatarProps & React.RefAttributes<HTMLElement>> & {
|
|
14
|
+
Text: typeof Text;
|
|
15
|
+
};
|
|
@@ -1,18 +1,18 @@
|
|
|
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 React from 'react';
|
|
8
|
-
import { IStatusIndicatorProps } from '../types';
|
|
9
|
-
/**
|
|
10
|
-
* 1. role='status' on `div` is valid WAI-ARIA usage in this context.
|
|
11
|
-
* https://www.w3.org/TR/wai-aria-1.1/#status
|
|
12
|
-
* 2. role='img' on `svg` is valid WAI-ARIA usage in this context.
|
|
13
|
-
* https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
|
|
14
|
-
*/
|
|
15
|
-
/**
|
|
16
|
-
* @extends HTMLAttributes<HTMLElement>
|
|
17
|
-
*/
|
|
18
|
-
export declare const StatusIndicator: React.ForwardRefExoticComponent<IStatusIndicatorProps & React.RefAttributes<HTMLElement>>;
|
|
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 React from 'react';
|
|
8
|
+
import { IStatusIndicatorProps } from '../types';
|
|
9
|
+
/**
|
|
10
|
+
* 1. role='status' on `div` is valid WAI-ARIA usage in this context.
|
|
11
|
+
* https://www.w3.org/TR/wai-aria-1.1/#status
|
|
12
|
+
* 2. role='img' on `svg` is valid WAI-ARIA usage in this context.
|
|
13
|
+
* https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* @extends HTMLAttributes<HTMLElement>
|
|
17
|
+
*/
|
|
18
|
+
export declare const StatusIndicator: React.ForwardRefExoticComponent<IStatusIndicatorProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
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 React from 'react';
|
|
8
|
-
/**
|
|
9
|
-
* @extends HTMLAttributes<HTMLSpanElement>
|
|
10
|
-
*/
|
|
11
|
-
export declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
|
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 React from 'react';
|
|
8
|
+
/**
|
|
9
|
+
* @extends HTMLAttributes<HTMLSpanElement>
|
|
10
|
+
*/
|
|
11
|
+
export declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
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
|
-
export { Avatar } from './elements/Avatar';
|
|
8
|
-
export { StatusIndicator } from './elements/StatusIndicator';
|
|
9
|
-
export type { IAvatarProps, IStatusIndicatorProps } from './types';
|
|
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
|
+
export { Avatar } from './elements/Avatar';
|
|
8
|
+
export { StatusIndicator } from './elements/StatusIndicator';
|
|
9
|
+
export type { IAvatarProps, IStatusIndicatorProps } from './types';
|
|
@@ -1,18 +1,18 @@
|
|
|
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 IStyledAvatarProps extends Pick<IAvatarProps, 'backgroundColor' | 'foregroundColor' | 'surfaceColor' | 'isSystem' | 'size'> {
|
|
10
|
-
status?: IAvatarProps['status'] | 'active';
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Accepts all `<figure>` props
|
|
14
|
-
*/
|
|
15
|
-
export declare const StyledAvatar: import("styled-components").StyledComponent<"figure", DefaultTheme, {
|
|
16
|
-
'data-garden-id': string;
|
|
17
|
-
'data-garden-version': string;
|
|
18
|
-
} & IStyledAvatarProps, "data-garden-id" | "data-garden-version">;
|
|
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 IStyledAvatarProps extends Pick<IAvatarProps, 'backgroundColor' | 'foregroundColor' | 'surfaceColor' | 'isSystem' | 'size'> {
|
|
10
|
+
status?: IAvatarProps['status'] | 'active';
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Accepts all `<figure>` props
|
|
14
|
+
*/
|
|
15
|
+
export declare const StyledAvatar: import("styled-components").StyledComponent<"figure", DefaultTheme, {
|
|
16
|
+
'data-garden-id': string;
|
|
17
|
+
'data-garden-version': string;
|
|
18
|
+
} & IStyledAvatarProps, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,11 +1,11 @@
|
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
export declare const StyledStandaloneStatus: import("styled-components").StyledComponent<"figure", DefaultTheme, {
|
|
9
|
-
'data-garden-id': string;
|
|
10
|
-
'data-garden-version': string;
|
|
11
|
-
} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
export declare const StyledStandaloneStatus: import("styled-components").StyledComponent<"figure", DefaultTheme, {
|
|
9
|
+
'data-garden-id': string;
|
|
10
|
+
'data-garden-version': string;
|
|
11
|
+
} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,11 +1,11 @@
|
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
export declare const StyledStandaloneStatusCaption: import("styled-components").StyledComponent<"figcaption", DefaultTheme, {
|
|
9
|
-
'data-garden-id': string;
|
|
10
|
-
'data-garden-version': string;
|
|
11
|
-
} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
export declare const StyledStandaloneStatusCaption: import("styled-components").StyledComponent<"figcaption", DefaultTheme, {
|
|
9
|
+
'data-garden-id': string;
|
|
10
|
+
'data-garden-version': string;
|
|
11
|
+
} & ThemeProps<DefaultTheme>, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,14 +1,14 @@
|
|
|
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 { IStyledStatusIndicatorProps } from './utility';
|
|
8
|
-
export declare const StyledStandaloneStatusIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
9
|
-
'data-garden-id': string;
|
|
10
|
-
'data-garden-version': string;
|
|
11
|
-
} & IStyledStatusIndicatorProps & {
|
|
12
|
-
'data-garden-id': string;
|
|
13
|
-
'data-garden-version': string;
|
|
14
|
-
}, "data-garden-id" | "data-garden-version">;
|
|
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 { IStyledStatusIndicatorProps } from './utility';
|
|
8
|
+
export declare const StyledStandaloneStatusIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
9
|
+
'data-garden-id': string;
|
|
10
|
+
'data-garden-version': string;
|
|
11
|
+
} & IStyledStatusIndicatorProps & {
|
|
12
|
+
'data-garden-id': string;
|
|
13
|
+
'data-garden-version': string;
|
|
14
|
+
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,20 +1,20 @@
|
|
|
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
|
-
import { IStyledStatusIndicatorProps } from './utility';
|
|
10
|
-
export interface IStatusIndicatorProps extends Omit<IAvatarProps, 'badge' | 'isSystem' | 'status'> {
|
|
11
|
-
readonly type?: IStyledStatusIndicatorProps['type'];
|
|
12
|
-
borderColor?: string;
|
|
13
|
-
}
|
|
14
|
-
export declare const StyledStatusIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
15
|
-
'data-garden-id': string;
|
|
16
|
-
'data-garden-version': string;
|
|
17
|
-
} & IStyledStatusIndicatorProps & {
|
|
18
|
-
'data-garden-id': string;
|
|
19
|
-
'data-garden-version': string;
|
|
20
|
-
} & IStatusIndicatorProps, "data-garden-id" | "data-garden-version">;
|
|
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
|
+
import { IStyledStatusIndicatorProps } from './utility';
|
|
10
|
+
export interface IStatusIndicatorProps extends Omit<IAvatarProps, 'badge' | 'isSystem' | 'status'> {
|
|
11
|
+
readonly type?: IStyledStatusIndicatorProps['type'];
|
|
12
|
+
borderColor?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const StyledStatusIndicator: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
15
|
+
'data-garden-id': string;
|
|
16
|
+
'data-garden-version': string;
|
|
17
|
+
} & IStyledStatusIndicatorProps & {
|
|
18
|
+
'data-garden-id': string;
|
|
19
|
+
'data-garden-version': string;
|
|
20
|
+
} & IStatusIndicatorProps, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,11 +1,11 @@
|
|
|
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 { IStyledStatusIndicatorProps } from './utility';
|
|
8
|
-
export declare const StyledStatusIndicatorBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
9
|
-
'data-garden-id': string;
|
|
10
|
-
'data-garden-version': string;
|
|
11
|
-
} & IStyledStatusIndicatorProps, "data-garden-id" | "data-garden-version">;
|
|
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 { IStyledStatusIndicatorProps } from './utility';
|
|
8
|
+
export declare const StyledStatusIndicatorBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
9
|
+
'data-garden-id': string;
|
|
10
|
+
'data-garden-version': string;
|
|
11
|
+
} & IStyledStatusIndicatorProps, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,13 +1,13 @@
|
|
|
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
|
-
/**
|
|
8
|
-
* Accepts all `<span>` attributes
|
|
9
|
-
*/
|
|
10
|
-
export declare const StyledText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
|
|
11
|
-
'data-garden-id': string;
|
|
12
|
-
'data-garden-version': string;
|
|
13
|
-
}, "data-garden-id" | "data-garden-version">;
|
|
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
|
+
/**
|
|
8
|
+
* Accepts all `<span>` attributes
|
|
9
|
+
*/
|
|
10
|
+
export declare const StyledText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
|
|
11
|
+
'data-garden-id': string;
|
|
12
|
+
'data-garden-version': string;
|
|
13
|
+
}, "data-garden-id" | "data-garden-version">;
|
|
@@ -1,12 +1,12 @@
|
|
|
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
|
-
export * from './StyledAvatar';
|
|
8
|
-
export * from './StyledStandaloneStatus';
|
|
9
|
-
export * from './StyledStandaloneStatusCaption';
|
|
10
|
-
export * from './StyledStandaloneStatusIndicator';
|
|
11
|
-
export * from './StyledStatusIndicator';
|
|
12
|
-
export * from './StyledText';
|
|
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
|
+
export * from './StyledAvatar';
|
|
8
|
+
export * from './StyledStandaloneStatus';
|
|
9
|
+
export * from './StyledStandaloneStatusCaption';
|
|
10
|
+
export * from './StyledStandaloneStatusIndicator';
|
|
11
|
+
export * from './StyledStatusIndicator';
|
|
12
|
+
export * from './StyledText';
|
|
@@ -1,17 +1,17 @@
|
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
-
import { IAvatarProps } from '../types';
|
|
9
|
-
export declare const TRANSITION_DURATION = 0.25;
|
|
10
|
-
export interface IStyledStatusIndicatorProps extends ThemeProps<DefaultTheme> {
|
|
11
|
-
readonly size?: IAvatarProps['size'];
|
|
12
|
-
readonly type?: IAvatarProps['status'] | 'active';
|
|
13
|
-
}
|
|
14
|
-
export declare function getStatusColor(type?: IStyledStatusIndicatorProps['type'], theme?: IStyledStatusIndicatorProps['theme']): string;
|
|
15
|
-
export declare function getStatusBorderOffset(props: IStyledStatusIndicatorProps): string;
|
|
16
|
-
export declare function getStatusSize(props: IStyledStatusIndicatorProps, offset: string): string;
|
|
17
|
-
export declare function includes<T extends U, U>(array: readonly T[], element: U): element is T;
|
|
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 { ThemeProps, DefaultTheme } from 'styled-components';
|
|
8
|
+
import { IAvatarProps } from '../types';
|
|
9
|
+
export declare const TRANSITION_DURATION = 0.25;
|
|
10
|
+
export interface IStyledStatusIndicatorProps extends ThemeProps<DefaultTheme> {
|
|
11
|
+
readonly size?: IAvatarProps['size'];
|
|
12
|
+
readonly type?: IAvatarProps['status'] | 'active';
|
|
13
|
+
}
|
|
14
|
+
export declare function getStatusColor(type?: IStyledStatusIndicatorProps['type'], theme?: IStyledStatusIndicatorProps['theme']): string;
|
|
15
|
+
export declare function getStatusBorderOffset(props: IStyledStatusIndicatorProps): string;
|
|
16
|
+
export declare function getStatusSize(props: IStyledStatusIndicatorProps, offset: string): string;
|
|
17
|
+
export declare function includes<T extends U, U>(array: readonly T[], element: U): element is T;
|
|
@@ -1,33 +1,33 @@
|
|
|
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 { HTMLAttributes } from 'react';
|
|
8
|
-
export declare const SIZE: readonly ["extraextrasmall", "extrasmall", "small", "medium", "large"];
|
|
9
|
-
export declare const STATUS: readonly ["available", "away", "transfers", "offline"];
|
|
10
|
-
export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
|
|
11
|
-
/** Sets the avatar background color */
|
|
12
|
-
backgroundColor?: string;
|
|
13
|
-
/** Sets the color for child SVG or `Avatar.Text` components */
|
|
14
|
-
foregroundColor?: string;
|
|
15
|
-
/** Provides surface color for an avatar placed on a non-white background */
|
|
16
|
-
surfaceColor?: string;
|
|
17
|
-
/** Applies system styling for representing objects, brands, or products */
|
|
18
|
-
isSystem?: boolean;
|
|
19
|
-
/** Specifies the avatar size */
|
|
20
|
-
size?: (typeof SIZE)[number];
|
|
21
|
-
/** Applies status styling */
|
|
22
|
-
status?: (typeof STATUS)[number];
|
|
23
|
-
/** Specifies the status label */
|
|
24
|
-
statusLabel?: string;
|
|
25
|
-
/** Sets the badge text and applies active styling */
|
|
26
|
-
badge?: string | number;
|
|
27
|
-
}
|
|
28
|
-
export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
|
|
29
|
-
/** Applies status type for styling and default aria-label */
|
|
30
|
-
type?: (typeof STATUS)[number];
|
|
31
|
-
/** Applies compact styling */
|
|
32
|
-
isCompact?: boolean;
|
|
33
|
-
}
|
|
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 { HTMLAttributes } from 'react';
|
|
8
|
+
export declare const SIZE: readonly ["extraextrasmall", "extrasmall", "small", "medium", "large"];
|
|
9
|
+
export declare const STATUS: readonly ["available", "away", "transfers", "offline"];
|
|
10
|
+
export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
|
|
11
|
+
/** Sets the avatar background color */
|
|
12
|
+
backgroundColor?: string;
|
|
13
|
+
/** Sets the color for child SVG or `Avatar.Text` components */
|
|
14
|
+
foregroundColor?: string;
|
|
15
|
+
/** Provides surface color for an avatar placed on a non-white background */
|
|
16
|
+
surfaceColor?: string;
|
|
17
|
+
/** Applies system styling for representing objects, brands, or products */
|
|
18
|
+
isSystem?: boolean;
|
|
19
|
+
/** Specifies the avatar size */
|
|
20
|
+
size?: (typeof SIZE)[number];
|
|
21
|
+
/** Applies status styling */
|
|
22
|
+
status?: (typeof STATUS)[number];
|
|
23
|
+
/** Specifies the status label */
|
|
24
|
+
statusLabel?: string;
|
|
25
|
+
/** Sets the badge text and applies active styling */
|
|
26
|
+
badge?: string | number;
|
|
27
|
+
}
|
|
28
|
+
export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
|
|
29
|
+
/** Applies status type for styling and default aria-label */
|
|
30
|
+
type?: (typeof STATUS)[number];
|
|
31
|
+
/** Applies compact styling */
|
|
32
|
+
isCompact?: boolean;
|
|
33
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-avatars",
|
|
3
|
-
"version": "8.69.
|
|
3
|
+
"version": "8.69.3",
|
|
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,7 @@
|
|
|
31
31
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@zendeskgarden/react-theming": "^8.69.
|
|
34
|
+
"@zendeskgarden/react-theming": "^8.69.3",
|
|
35
35
|
"@zendeskgarden/svg-icons": "6.33.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": "c861fbeb70120b66b05d2ce3a26ccf3047659aa0"
|
|
48
48
|
}
|