@zendeskgarden/react-avatars 9.6.0 → 9.7.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 (10) hide show
  1. package/dist/esm/elements/Avatar.js +6 -4
  2. package/dist/esm/styled/StyledAvatar.js +2 -2
  3. package/dist/esm/styled/StyledStandaloneStatus.js +1 -1
  4. package/dist/esm/styled/StyledStandaloneStatusCaption.js +1 -1
  5. package/dist/esm/styled/StyledStandaloneStatusIndicator.js +1 -1
  6. package/dist/esm/styled/StyledStatusIndicator.js +1 -1
  7. package/dist/esm/styled/StyledStatusIndicatorBase.js +1 -1
  8. package/dist/esm/styled/StyledText.js +1 -1
  9. package/dist/index.cjs.js +14 -12
  10. package/package.json +5 -4
package/dist/esm/elements/Avatar.js CHANGED
@@ -7,6 +7,7 @@
7
7
  import React__default, { forwardRef, useMemo, Children } from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import { useText } from '@zendeskgarden/react-theming';
10
+ import { Span } from '@zendeskgarden/react-typography';
10
11
  import SvgClockStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js';
11
12
  import SvgClockStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js';
12
13
  import SvgArrowLeftSmStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg.js';
@@ -49,7 +50,7 @@ const AvatarComponent = forwardRef((_ref, ref) => {
49
50
  return ['status'].concat(statusMessage || []).join(': ');
50
51
  }, [computedStatus, badge]);
51
52
  const shouldValidate = computedStatus !== undefined;
52
- const ariaLabel = useText(AvatarComponent, {
53
+ const label = useText(AvatarComponent, {
53
54
  statusLabel
54
55
  }, 'statusLabel', defaultStatusLabel, shouldValidate);
55
56
  return React__default.createElement(StyledAvatar, Object.assign({
@@ -66,10 +67,11 @@ const AvatarComponent = forwardRef((_ref, ref) => {
66
67
  $size: size,
67
68
  $type: computedStatus,
68
69
  $surfaceColor: surfaceColor,
69
- "aria-label": ariaLabel,
70
70
  as: "figcaption"
71
- }, computedStatus === 'active' ? React__default.createElement("span", {
72
- "aria-hidden": "true"
71
+ }, React__default.createElement(Span, {
72
+ hidden: true
73
+ }, label), computedStatus === 'active' ? React__default.createElement("span", {
74
+ "aria-hidden": true
73
75
  }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
74
76
  "data-icon-status": computedStatus
75
77
  }) : null, computedStatus === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
package/dist/esm/styled/StyledAvatar.js CHANGED
@@ -104,11 +104,11 @@ const sizeStyles = props => {
104
104
  fontSize = props.theme.fontSizes.lg;
105
105
  svgSize = `${props.theme.space.base * 4}px`;
106
106
  }
107
- return css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
107
+ return css(["border-radius:", ";width:", " !important;height:", " !important;&::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
108
108
  };
109
109
  const StyledAvatar = styled.figure.attrs({
110
110
  'data-garden-id': COMPONENT_ID,
111
- 'data-garden-version': '9.6.0'
111
+ 'data-garden-version': '9.7.1'
112
112
  }).withConfig({
113
113
  displayName: "StyledAvatar",
114
114
  componentId: "sc-608m04-0"
package/dist/esm/styled/StyledStandaloneStatus.js CHANGED
@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
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.6.0'
14
+ 'data-garden-version': '9.7.1'
15
15
  }).withConfig({
16
16
  displayName: "StyledStandaloneStatus",
17
17
  componentId: "sc-1ow4nfj-0"
package/dist/esm/styled/StyledStandaloneStatusCaption.js CHANGED
@@ -14,7 +14,7 @@ function sizeStyles(props) {
14
14
  }
15
15
  const StyledStandaloneStatusCaption = styled.figcaption.attrs({
16
16
  'data-garden-id': COMPONENT_ID,
17
- 'data-garden-version': '9.6.0'
17
+ 'data-garden-version': '9.7.1'
18
18
  }).withConfig({
19
19
  displayName: "StyledStandaloneStatusCaption",
20
20
  componentId: "sc-aalyk1-0"
package/dist/esm/styled/StyledStandaloneStatusIndicator.js CHANGED
@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
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.6.0'
15
+ 'data-garden-version': '9.7.1'
16
16
  }).withConfig({
17
17
  displayName: "StyledStandaloneStatusIndicator",
18
18
  componentId: "sc-1xt1heq-0"
package/dist/esm/styled/StyledStatusIndicator.js CHANGED
@@ -50,7 +50,7 @@ const colorStyles = _ref => {
50
50
  };
51
51
  const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
52
52
  'data-garden-id': COMPONENT_ID,
53
- 'data-garden-version': '9.6.0'
53
+ 'data-garden-version': '9.7.1'
54
54
  }).withConfig({
55
55
  displayName: "StyledStatusIndicator",
56
56
  componentId: "sc-16t9if3-0"
package/dist/esm/styled/StyledStatusIndicatorBase.js CHANGED
@@ -40,7 +40,7 @@ const colorStyles = _ref => {
40
40
  };
41
41
  const StyledStatusIndicatorBase = styled.div.attrs({
42
42
  'data-garden-id': COMPONENT_ID,
43
- 'data-garden-version': '9.6.0'
43
+ 'data-garden-version': '9.7.1'
44
44
  }).withConfig({
45
45
  displayName: "StyledStatusIndicatorBase",
46
46
  componentId: "sc-1rininy-0"
package/dist/esm/styled/StyledText.js CHANGED
@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
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.6.0'
13
+ 'data-garden-version': '9.7.1'
14
14
  }).withConfig({
15
15
  displayName: "StyledText",
16
16
  componentId: "sc-1a6hivh-0"
package/dist/index.cjs.js CHANGED
@@ -9,6 +9,7 @@
9
9
  var React = require('react');
10
10
  var PropTypes = require('prop-types');
11
11
  var reactTheming = require('@zendeskgarden/react-theming');
12
+ var reactTypography = require('@zendeskgarden/react-typography');
12
13
  var styled = require('styled-components');
13
14
  var polished = require('polished');
14
15
 
@@ -122,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
122
123
  const COMPONENT_ID$6 = 'avatars.text';
123
124
  const StyledText = styled__default.default.span.attrs({
124
125
  'data-garden-id': COMPONENT_ID$6,
125
- 'data-garden-version': '9.6.0'
126
+ 'data-garden-version': '9.7.1'
126
127
  }).withConfig({
127
128
  displayName: "StyledText",
128
129
  componentId: "sc-1a6hivh-0"
@@ -242,7 +243,7 @@ const colorStyles$2 = _ref => {
242
243
  };
243
244
  const StyledStatusIndicatorBase = styled__default.default.div.attrs({
244
245
  'data-garden-id': COMPONENT_ID$5,
245
- 'data-garden-version': '9.6.0'
246
+ 'data-garden-version': '9.7.1'
246
247
  }).withConfig({
247
248
  displayName: "StyledStatusIndicatorBase",
248
249
  componentId: "sc-1rininy-0"
@@ -291,7 +292,7 @@ const colorStyles$1 = _ref => {
291
292
  };
292
293
  const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
293
294
  'data-garden-id': COMPONENT_ID$4,
294
- 'data-garden-version': '9.6.0'
295
+ 'data-garden-version': '9.7.1'
295
296
  }).withConfig({
296
297
  displayName: "StyledStatusIndicator",
297
298
  componentId: "sc-16t9if3-0"
@@ -393,11 +394,11 @@ const sizeStyles$1 = props => {
393
394
  fontSize = props.theme.fontSizes.lg;
394
395
  svgSize = `${props.theme.space.base * 4}px`;
395
396
  }
396
- return styled.css(["border-radius:", ";width:", " !important;height:", " !important;::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
397
+ return styled.css(["border-radius:", ";width:", " !important;height:", " !important;&::before{box-shadow:", ";}& > svg{font-size:", ";}& ", "{line-height:", ";font-size:", ";}"], borderRadius, size, size, boxShadow, svgSize, StyledText, size, fontSize);
397
398
  };
398
399
  const StyledAvatar = styled__default.default.figure.attrs({
399
400
  'data-garden-id': COMPONENT_ID$3,
400
- 'data-garden-version': '9.6.0'
401
+ 'data-garden-version': '9.7.1'
401
402
  }).withConfig({
402
403
  displayName: "StyledAvatar",
403
404
  componentId: "sc-608m04-0"
@@ -410,7 +411,7 @@ StyledAvatar.defaultProps = {
410
411
  const COMPONENT_ID$2 = 'avatars.status-indicator.status';
411
412
  const StyledStandaloneStatus = styled__default.default.figure.attrs({
412
413
  'data-garden-id': COMPONENT_ID$2,
413
- 'data-garden-version': '9.6.0'
414
+ 'data-garden-version': '9.7.1'
414
415
  }).withConfig({
415
416
  displayName: "StyledStandaloneStatus",
416
417
  componentId: "sc-1ow4nfj-0"
@@ -423,7 +424,7 @@ function sizeStyles(props) {
423
424
  }
424
425
  const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
425
426
  'data-garden-id': COMPONENT_ID$1,
426
- 'data-garden-version': '9.6.0'
427
+ 'data-garden-version': '9.7.1'
427
428
  }).withConfig({
428
429
  displayName: "StyledStandaloneStatusCaption",
429
430
  componentId: "sc-aalyk1-0"
@@ -432,7 +433,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
432
433
  const COMPONENT_ID = 'avatars.status-indicator.indicator';
433
434
  const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
434
435
  'data-garden-id': COMPONENT_ID,
435
- 'data-garden-version': '9.6.0'
436
+ 'data-garden-version': '9.7.1'
436
437
  }).withConfig({
437
438
  displayName: "StyledStandaloneStatusIndicator",
438
439
  componentId: "sc-1xt1heq-0"
@@ -477,7 +478,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
477
478
  return ['status'].concat(statusMessage || []).join(': ');
478
479
  }, [computedStatus, badge]);
479
480
  const shouldValidate = computedStatus !== undefined;
480
- const ariaLabel = reactTheming.useText(AvatarComponent, {
481
+ const label = reactTheming.useText(AvatarComponent, {
481
482
  statusLabel
482
483
  }, 'statusLabel', defaultStatusLabel, shouldValidate);
483
484
  return React__namespace.default.createElement(StyledAvatar, Object.assign({
@@ -494,10 +495,11 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
494
495
  $size: size,
495
496
  $type: computedStatus,
496
497
  $surfaceColor: surfaceColor,
497
- "aria-label": ariaLabel,
498
498
  as: "figcaption"
499
- }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
500
- "aria-hidden": "true"
499
+ }, React__namespace.default.createElement(reactTypography.Span, {
500
+ hidden: true
501
+ }, label), computedStatus === 'active' ? React__namespace.default.createElement("span", {
502
+ "aria-hidden": true
501
503
  }, badge) : React__namespace.default.createElement(React__namespace.default.Fragment, null, computedStatus === 'away' ? React__namespace.default.createElement(ClockIcon, {
502
504
  "data-icon-status": computedStatus
503
505
  }) : null, computedStatus === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-avatars",
3
- "version": "9.6.0",
3
+ "version": "9.7.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>",
@@ -21,6 +21,7 @@
21
21
  "sideEffects": false,
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
+ "@zendeskgarden/react-typography": "^9.7.1",
24
25
  "polished": "^4.3.1",
25
26
  "prop-types": "^15.5.7"
26
27
  },
@@ -31,8 +32,8 @@
31
32
  "styled-components": "^5.3.1 || ^6.0.0"
32
33
  },
33
34
  "devDependencies": {
34
- "@zendeskgarden/react-dropdowns": "^9.6.0",
35
- "@zendeskgarden/react-theming": "^9.6.0",
35
+ "@zendeskgarden/react-dropdowns": "^9.7.1",
36
+ "@zendeskgarden/react-theming": "^9.7.1",
36
37
  "@zendeskgarden/svg-icons": "7.5.0"
37
38
  },
38
39
  "keywords": [
@@ -45,5 +46,5 @@
45
46
  "access": "public"
46
47
  },
47
48
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "33fcfeab6a350bd9e73c0aebbc1652be5d8043bc"
49
+ "gitHead": "df6d9dc7ac384673ecbf8fd5adb954fab8681974"
49
50
  }