@zendeskgarden/react-avatars 8.54.3 → 8.56.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 }; }
@@ -41,7 +41,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 function _extends$4() {
-  _extends$4 = Object.assign || function (target) {
+  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -54,7 +54,6 @@ function _extends$4() {
 
     return target;
   };
-
   return _extends$4.apply(this, arguments);
 }
 
@@ -171,7 +170,7 @@ function _nonIterableRest() {
 
 var _g$1;
 
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
@@ -197,7 +196,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 
 var _g;
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
@@ -223,7 +222,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 
 var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
@@ -241,7 +240,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 
 var _path;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -263,7 +262,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.56.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -337,7 +336,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 +364,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.56.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -449,7 +448,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.56.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -483,7 +482,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 +490,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 +509,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 +533,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,14 +6,14 @@
  */
 
 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() {
-  _extends$4 = Object.assign || function (target) {
+  _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -26,7 +26,6 @@ function _extends$4() {
 
     return target;
   };
-
   return _extends$4.apply(this, arguments);
 }
 
@@ -143,7 +142,7 @@ function _nonIterableRest() {
 
 var _g$1;
 
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
@@ -169,7 +168,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 
 var _g;
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
@@ -195,7 +194,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 
 var _path$1;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
@@ -213,7 +212,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 
 var _path;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -235,7 +234,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.56.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -309,7 +308,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 +336,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.56.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -421,7 +420,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.56.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -455,7 +454,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 +462,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 +481,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 +505,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.56.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.56.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "a0cee36de7275885b23776c0cb02dedeb63613b3"
+  "gitHead": "c0e1cb7669a366ff510cc9613e2b426d48019732"
 }