@zendeskgarden/react-avatars 9.7.0 → 9.7.2

package/dist/esm/elements/Avatar.js

@@ -7,6 +7,7 @@
 import React__default, { forwardRef, useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
 import { useText } from '@zendeskgarden/react-theming';
+import { Span } from '@zendeskgarden/react-typography';
 import SvgClockStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/clock-stroke.svg.js';
 import SvgClockStroke$1 from '../node_modules/@zendeskgarden/svg-icons/src/16/clock-stroke.svg.js';
 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) => {
     return ['status'].concat(statusMessage || []).join(': ');
   }, [computedStatus, badge]);
   const shouldValidate = computedStatus !== undefined;
-  const ariaLabel = useText(AvatarComponent, {
+  const label = useText(AvatarComponent, {
     statusLabel
   }, 'statusLabel', defaultStatusLabel, shouldValidate);
   return React__default.createElement(StyledAvatar, Object.assign({
@@ -66,10 +67,11 @@ const AvatarComponent = forwardRef((_ref, ref) => {
     $size: size,
     $type: computedStatus,
     $surfaceColor: surfaceColor,
-    "aria-label": ariaLabel,
     as: "figcaption"
-  }, computedStatus === 'active' ? React__default.createElement("span", {
-    "aria-hidden": "true"
+  }, React__default.createElement(Span, {
+    hidden: true
+  }, label), computedStatus === 'active' ? React__default.createElement("span", {
+    "aria-hidden": true
   }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
     "data-icon-status": computedStatus
   }) : null, computedStatus === 'transfers' ? React__default.createElement(ArrowLeftIcon, {

package/dist/esm/styled/StyledAvatar.js

@@ -104,11 +104,11 @@ const sizeStyles = props => {
     fontSize = props.theme.fontSizes.lg;
     svgSize = `${props.theme.space.base * 4}px`;
   }
-  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);
+  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);
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"

package/dist/esm/styled/StyledStandaloneStatus.js

@@ -11,7 +11,7 @@ import { TRANSITION_DURATION } from './utility.js';
 const COMPONENT_ID = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"

package/dist/esm/styled/StyledStandaloneStatusCaption.js

@@ -14,7 +14,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"

package/dist/esm/styled/StyledStandaloneStatusIndicator.js

@@ -12,7 +12,7 @@ import { StyledStatusIndicatorBase } from './StyledStatusIndicatorBase.js';
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"

package/dist/esm/styled/StyledStatusIndicator.js

@@ -50,7 +50,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"

package/dist/esm/styled/StyledStatusIndicatorBase.js

@@ -40,7 +40,7 @@ const colorStyles = _ref => {
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"

package/dist/esm/styled/StyledText.js

@@ -10,7 +10,7 @@ import { componentStyles } from '@zendeskgarden/react-theming';
 const COMPONENT_ID = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"

package/dist/index.cjs.js

@@ -9,6 +9,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var reactTheming = require('@zendeskgarden/react-theming');
+var reactTypography = require('@zendeskgarden/react-typography');
 var styled = require('styled-components');
 var polished = require('polished');
 
@@ -122,7 +123,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -242,7 +243,7 @@ const colorStyles$2 = _ref => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -291,7 +292,7 @@ const colorStyles$1 = _ref => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -393,11 +394,11 @@ const sizeStyles$1 = props => {
     fontSize = props.theme.fontSizes.lg;
     svgSize = `${props.theme.space.base * 4}px`;
   }
-  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);
+  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);
 };
 const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -410,7 +411,7 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -423,7 +424,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -432,7 +433,7 @@ const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.7.0'
+  'data-garden-version': '9.7.2'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -477,7 +478,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     return ['status'].concat(statusMessage || []).join(': ');
   }, [computedStatus, badge]);
   const shouldValidate = computedStatus !== undefined;
-  const ariaLabel = reactTheming.useText(AvatarComponent, {
+  const label = reactTheming.useText(AvatarComponent, {
     statusLabel
   }, 'statusLabel', defaultStatusLabel, shouldValidate);
   return React__namespace.default.createElement(StyledAvatar, Object.assign({
@@ -494,10 +495,11 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     $size: size,
     $type: computedStatus,
     $surfaceColor: surfaceColor,
-    "aria-label": ariaLabel,
     as: "figcaption"
-  }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
-    "aria-hidden": "true"
+  }, React__namespace.default.createElement(reactTypography.Span, {
+    hidden: true
+  }, label), computedStatus === 'active' ? React__namespace.default.createElement("span", {
+    "aria-hidden": true
   }, badge) : React__namespace.default.createElement(React__namespace.default.Fragment, null, computedStatus === 'away' ? React__namespace.default.createElement(ClockIcon, {
     "data-icon-status": computedStatus
   }) : null, computedStatus === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "9.7.0",
+  "version": "9.7.2",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -21,6 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@zendeskgarden/react-typography": "^9.7.2",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },
@@ -31,8 +32,8 @@
     "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-dropdowns": "^9.7.0",
-    "@zendeskgarden/react-theming": "^9.7.0",
+    "@zendeskgarden/react-dropdowns": "^9.7.2",
+    "@zendeskgarden/react-theming": "^9.7.2",
     "@zendeskgarden/svg-icons": "7.5.0"
   },
   "keywords": [
@@ -45,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "565d21114d465d64f323a1960d8731f3bbcdefe5"
+  "gitHead": "6cef5e656fa78619c4e42af330a53014c336a259"
 }