@zendeskgarden/react-avatars 8.54.3 → 8.55.0

package/dist/index.cjs.js

@@ -11,8 +11,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var styled = require('styled-components');
 var reactTheming = require('@zendeskgarden/react-theming');
+var styled = require('styled-components');
 var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -263,7 +263,7 @@ var STATUS = ['available', 'away', 'transfers', 'offline'];
 var COMPONENT_ID$2 = 'avatars.text';
 var StyledText = styled__default["default"].span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -337,7 +337,7 @@ var sizeStyles$1 = function sizeStyles(props) {
       padding = polished.math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
       break;
   }
-  return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
+  return styled.css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
 };
 var colorStyles$1 = function colorStyles(props) {
   var foregroundColor = props.foregroundColor || props.theme.palette.white;
@@ -365,7 +365,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledStatusIndicator = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -449,7 +449,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledAvatar = styled__default["default"].figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -483,7 +483,7 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
       surfaceColor = _ref.surfaceColor,
       backgroundColor = _ref.backgroundColor,
       foregroundColor = _ref.foregroundColor,
-      other = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded);
   var computedStatus = badge === undefined ? status : 'active';
   var ClockIcon = SvgClockStroke$1;
   var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
@@ -491,6 +491,15 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
     ClockIcon = SvgClockStroke;
     ArrowLeftIcon = SvgArrowLeftSmStroke;
   }
+  var defaultStatusLabel = React.useMemo(function () {
+    var statusMessage = computedStatus;
+    if (computedStatus === 'active') {
+      var count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
+      statusMessage = "active. ".concat(count > 0 ? "".concat(count, " notification").concat(count > 1 ? 's' : '') : 'no notifications');
+    }
+    return ['status'].concat(statusMessage || []).join(': ');
+  }, [computedStatus, badge]);
+  var statusLabel = reactTheming.useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
   return React__default["default"].createElement(StyledAvatar, _extends$4({
     ref: ref,
     isSystem: isSystem,
@@ -501,13 +510,17 @@ var AvatarComponent = React.forwardRef(function (_ref, ref) {
     foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, other), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
+  }, props), React.Children.only(children), computedStatus && React__default["default"].createElement(StyledStatusIndicator, {
     size: size,
     status: computedStatus,
     backgroundColor: backgroundColor,
     foregroundColor: foregroundColor,
-    surfaceColor: surfaceColor
-  }, computedStatus === 'active' ? React__default["default"].createElement("span", null, badge) : React__default["default"].createElement(React__default["default"].Fragment, null, computedStatus === 'away' ? React__default["default"].createElement(ClockIcon, {
+    surfaceColor: surfaceColor,
+    "aria-label": statusLabel,
+    role: "img"
+  }, computedStatus === 'active' ? React__default["default"].createElement("span", {
+    "aria-hidden": "true"
+  }, badge) : React__default["default"].createElement(React__default["default"].Fragment, null, computedStatus === 'away' ? React__default["default"].createElement(ClockIcon, {
     "data-icon-status": computedStatus
   }) : null, computedStatus === 'transfers' ? React__default["default"].createElement(ArrowLeftIcon, {
     "data-icon-status": computedStatus
@@ -521,7 +534,8 @@ AvatarComponent.propTypes = {
   isSystem: PropTypes__default["default"].bool,
   badge: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   size: PropTypes__default["default"].oneOf(SIZE),
-  status: PropTypes__default["default"].oneOf(STATUS)
+  status: PropTypes__default["default"].oneOf(STATUS),
+  statusLabel: PropTypes__default["default"].string
 };
 AvatarComponent.defaultProps = {
   size: 'medium'

package/dist/index.esm.js

@@ -6,10 +6,10 @@
  */
 
 import * as React from 'react';
-import React__default, { forwardRef, Children } from 'react';
+import React__default, { forwardRef, useMemo, Children } from 'react';
 import PropTypes from 'prop-types';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
 import styled, { css, keyframes } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 function _extends$4() {
@@ -235,7 +235,7 @@ var STATUS = ['available', 'away', 'transfers', 'offline'];
 var COMPONENT_ID$2 = 'avatars.text';
 var StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -309,7 +309,7 @@ var sizeStyles$1 = function sizeStyles(props) {
       padding = math("".concat(props.theme.space.base + 3, "px - (").concat(borderWidth, " * 2)"));
       break;
   }
-  return css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
+  return css(["border:", " ", ";border-radius:", ";min-width:", ";max-width:calc(2em + (", " * 3));height:", ";box-sizing:content-box;overflow:hidden;text-align:center;text-overflow:ellipsis;line-height:", ";white-space:nowrap;font-size:", ";font-weight:", ";& > span{display:", ";padding:0 ", ";max-width:2em;overflow:inherit;text-align:inherit;text-overflow:inherit;white-space:inherit;}& > svg{", " position:absolute;top:-", ";left:-", ";transform-origin:50% 50%;max-height:unset;&[data-icon-status='transfers']{transform:scale(", ",1);}&[data-icon-status='away'] circle{display:none;}}"], borderWidth, props.theme.borderStyles.solid, height, height, borderWidth, height, height, props.theme.fontSizes.xs, props.theme.fontWeights.semibold, isVisible ? 'inline-block' : 'none', padding, !isVisible && 'display: none;', borderWidth, borderWidth, props.theme.rtl ? -1 : 1);
 };
 var colorStyles$1 = function colorStyles(props) {
   var foregroundColor = props.foregroundColor || props.theme.palette.white;
@@ -337,7 +337,7 @@ var colorStyles$1 = function colorStyles(props) {
 };
 var StyledStatusIndicator = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -421,7 +421,7 @@ var sizeStyles = function sizeStyles(props) {
 };
 var StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.54.3'
+  'data-garden-version': '8.55.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -455,7 +455,7 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
       surfaceColor = _ref.surfaceColor,
       backgroundColor = _ref.backgroundColor,
       foregroundColor = _ref.foregroundColor,
-      other = _objectWithoutProperties(_ref, _excluded);
+      props = _objectWithoutProperties(_ref, _excluded);
   var computedStatus = badge === undefined ? status : 'active';
   var ClockIcon = SvgClockStroke$1;
   var ArrowLeftIcon = SvgArrowLeftSmStroke$1;
@@ -463,6 +463,15 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
     ClockIcon = SvgClockStroke;
     ArrowLeftIcon = SvgArrowLeftSmStroke;
   }
+  var defaultStatusLabel = useMemo(function () {
+    var statusMessage = computedStatus;
+    if (computedStatus === 'active') {
+      var count = typeof badge === 'string' ? parseInt(badge, 10) : badge;
+      statusMessage = "active. ".concat(count > 0 ? "".concat(count, " notification").concat(count > 1 ? 's' : '') : 'no notifications');
+    }
+    return ['status'].concat(statusMessage || []).join(': ');
+  }, [computedStatus, badge]);
+  var statusLabel = useText(AvatarComponent, props, 'statusLabel', defaultStatusLabel);
   return React__default.createElement(StyledAvatar, _extends$4({
     ref: ref,
     isSystem: isSystem,
@@ -473,13 +482,17 @@ var AvatarComponent = forwardRef(function (_ref, ref) {
     foregroundColor: foregroundColor,
     "aria-atomic": "true",
     "aria-live": "polite"
-  }, other), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
+  }, props), Children.only(children), computedStatus && React__default.createElement(StyledStatusIndicator, {
     size: size,
     status: computedStatus,
     backgroundColor: backgroundColor,
     foregroundColor: foregroundColor,
-    surfaceColor: surfaceColor
-  }, computedStatus === 'active' ? React__default.createElement("span", null, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
+    surfaceColor: surfaceColor,
+    "aria-label": statusLabel,
+    role: "img"
+  }, 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, {
     "data-icon-status": computedStatus
@@ -493,7 +506,8 @@ AvatarComponent.propTypes = {
   isSystem: PropTypes.bool,
   badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   size: PropTypes.oneOf(SIZE),
-  status: PropTypes.oneOf(STATUS)
+  status: PropTypes.oneOf(STATUS),
+  statusLabel: PropTypes.string
 };
 AvatarComponent.defaultProps = {
   size: 'medium'

package/dist/typings/types/index.d.ts

@@ -20,6 +20,8 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
     size?: typeof SIZE[number];
     /** Applies status styling */
     status?: typeof STATUS[number];
+    /** Specifies the status label */
+    statusLabel?: string;
     /** Sets the badge text and applies active styling */
     badge?: string | number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "8.54.3",
+  "version": "8.55.0",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.54.3",
+    "@zendeskgarden/react-theming": "^8.55.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a0cee36de7275885b23776c0cb02dedeb63613b3"
+  "gitHead": "ec2cb4f499e02faadf6a4aa6ac94eaadf1d81015"
 }