@zohodesk/dot 1.0.0-beta.239 → 1.0.0-beta.240

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.container {
-  vertical-align: middle;
-  composes: varClass;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 50%;
-  border-color: var(--border_color)
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--border_hoverColor)
-}
-.default {
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.primary {
-  --border_color: var(--zdt_avatarIcon_primary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
-}
-.secondary {
-  --border_color: var(--zdt_avatarIcon_secondary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
-}
-.success {
-  --border_color: var(--zdt_avatarIcon_success_border);
-  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
-}
-.danger {
-  --border_color: var(--zdt_avatarIcon_danger_border);
-  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
-}
-.iconColor {
-  color: var(--icon_color);
-}
-.icon_danger {
-  --icon_color: var(--zdt_avatarIcon_danger_icon);
-}
-.icon_primary {
-  --icon_color: var(--zdt_avatarIcon_primary_icon);
-}
-.icon_grey {
-  --icon_color: var(--zdt_avatarIcon_grey_icon);
-}
-.icon_success {
-  --icon_color: var(--zdt_avatarIcon_success_icon);
-}
-.icon_smoke18 {
-  --icon_color: var(--zdt_avatarIcon_smoke_icon);
-}
-.icon_dark {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-}
-
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -34,7 +34,10 @@ export default class AvatarStatus extends React.Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", _extends({
       className: `${style.container} ${className} `
-    }, AvatarStatusProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+    }, AvatarStatusProps, {
+      tabIndex: "0",
+      "aria-label": `${title}, ${name}, ${statusTitle}`
+    }), /*#__PURE__*/React.createElement(Avatar, _extends({
       src: src,
       name: name,
       palette: palette,

package/es/avatar/AvatarStatus/AvatarStatus.module.css

@@ -1,146 +1,146 @@
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-}
-.state {
-  position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
-  display: inline-block;
-}
-.circle.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.small.square.state, .xsmall.square.state {
-  border: 1px solid var(--zdt_avatarstatus_size_border);
-}
-.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
-  border: 2px solid var(--zdt_avatarstatus_size_border);
-}
-.online {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_online_bg);
-}
-
-.offline {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_offline_bg);
-}
-.idle {
-  composes: state;
-  background-color: var(--zdt_avatarstatus_idle_bg);
-}
-
-.small.state,
-.xsmall.state {
-  width: var(--zd_size7);
-  height: var(--zd_size7);
-}
-.medium.state,
-.xmedium.state {
-  width: var(--zd_size9);
-  height: var(--zd_size9);
-}
-.large.state,
-.xlarge.state {
-  width: var(--zd_size12);
-  height: var(--zd_size12);
-}
-
-.small.circle.state {
-  bottom: var(--zd_size1);
-}
-
-[dir=ltr] .small.circle.state {
-  right: calc(var(--zd_size1) * -1);
-}
-
-[dir=rtl] .small.circle.state {
-  left: calc(var(--zd_size1) * -1);
-}
-.xsmall.circle.state {
-  bottom: var(--zd_size3);
-}
-[dir=ltr] .xsmall.circle.state {
-  right: 0;
-}
-[dir=rtl] .xsmall.circle.state {
-  left: 0;
-}
-.medium.circle.state,
-.xmedium.circle.state {
-  bottom: var(--zd_size3);
-}
-[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
-  right: 0;
-}
-[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
-  left: 0;
-}
-.large.circle.state {
-  bottom: var(--zd_size7);
-}
-[dir=ltr] .large.circle.state {
-  right: var(--zd_size1);
-}
-[dir=rtl] .large.circle.state {
-  left: var(--zd_size1);
-}
-.xlarge.circle.state {
-  bottom: var(--zd_size6);
-}
-[dir=ltr] .xlarge.circle.state {
-  right: var(--zd_size8);
-}
-[dir=rtl] .xlarge.circle.state {
-  left: var(--zd_size8);
-}
-
-.small.square.state {
-  bottom: calc(var(--zd_size1) * -1);
-}
-
-[dir=ltr] .small.square.state {
-  right: calc(var(--zd_size1) * -1);
-}
-
-[dir=rtl] .small.square.state {
-  left: calc(var(--zd_size1) * -1);
-}
-.xsmall.square.state {
-  bottom: calc(var(--zd_size1) * -1);
-}
-[dir=ltr] .xsmall.square.state {
-  right: calc(var(--zd_size2) * -1);
-}
-[dir=rtl] .xsmall.square.state {
-  left: calc(var(--zd_size2) * -1);
-}
-.medium.square.state,
-.xmedium.square.state {
-  bottom: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
-  right: calc(var(--zd_size4) * -1);
-}
-[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
-  left: calc(var(--zd_size4) * -1);
-}
-.large.square.state {
-  bottom: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .large.square.state {
-  right: calc(var(--zd_size5) * -1);
-}
-[dir=rtl] .large.square.state {
-  left: calc(var(--zd_size5) * -1);
-}
-.xlarge.square.state {
-  bottom: calc(var(--zd_size3) * -1);
-}
-[dir=ltr] .xlarge.square.state {
-  right: calc(var(--zd_size5) * -1);
-}
-[dir=rtl] .xlarge.square.state {
-  left: calc(var(--zd_size5) * -1);
-}
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+}
+.state {
+  position: absolute;
+  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  display: inline-block;
+}
+.circle.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.small.square.state, .xsmall.square.state {
+  border: 1px solid var(--zdt_avatarstatus_size_border);
+}
+.medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
+  border: 2px solid var(--zdt_avatarstatus_size_border);
+}
+.online {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_online_bg);
+}
+
+.offline {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_offline_bg);
+}
+.idle {
+  composes: state;
+  background-color: var(--zdt_avatarstatus_idle_bg);
+}
+
+.small.state,
+.xsmall.state {
+  width: var(--zd_size7);
+  height: var(--zd_size7);
+}
+.medium.state,
+.xmedium.state {
+  width: var(--zd_size9);
+  height: var(--zd_size9);
+}
+.large.state,
+.xlarge.state {
+  width: var(--zd_size12);
+  height: var(--zd_size12);
+}
+
+.small.circle.state {
+  bottom: var(--zd_size1);
+}
+
+[dir=ltr] .small.circle.state {
+  right: calc(var(--zd_size1) * -1);
+}
+
+[dir=rtl] .small.circle.state {
+  left: calc(var(--zd_size1) * -1);
+}
+.xsmall.circle.state {
+  bottom: var(--zd_size3);
+}
+[dir=ltr] .xsmall.circle.state {
+  right: 0;
+}
+[dir=rtl] .xsmall.circle.state {
+  left: 0;
+}
+.medium.circle.state,
+.xmedium.circle.state {
+  bottom: var(--zd_size3);
+}
+[dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
+  right: 0;
+}
+[dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
+  left: 0;
+}
+.large.circle.state {
+  bottom: var(--zd_size7);
+}
+[dir=ltr] .large.circle.state {
+  right: var(--zd_size1);
+}
+[dir=rtl] .large.circle.state {
+  left: var(--zd_size1);
+}
+.xlarge.circle.state {
+  bottom: var(--zd_size6);
+}
+[dir=ltr] .xlarge.circle.state {
+  right: var(--zd_size8);
+}
+[dir=rtl] .xlarge.circle.state {
+  left: var(--zd_size8);
+}
+
+.small.square.state {
+  bottom: calc(var(--zd_size1) * -1);
+}
+
+[dir=ltr] .small.square.state {
+  right: calc(var(--zd_size1) * -1);
+}
+
+[dir=rtl] .small.square.state {
+  left: calc(var(--zd_size1) * -1);
+}
+.xsmall.square.state {
+  bottom: calc(var(--zd_size1) * -1);
+}
+[dir=ltr] .xsmall.square.state {
+  right: calc(var(--zd_size2) * -1);
+}
+[dir=rtl] .xsmall.square.state {
+  left: calc(var(--zd_size2) * -1);
+}
+.medium.square.state,
+.xmedium.square.state {
+  bottom: calc(var(--zd_size2) * -1);
+}
+[dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
+  right: calc(var(--zd_size4) * -1);
+}
+[dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
+  left: calc(var(--zd_size4) * -1);
+}
+.large.square.state {
+  bottom: calc(var(--zd_size2) * -1);
+}
+[dir=ltr] .large.square.state {
+  right: calc(var(--zd_size5) * -1);
+}
+[dir=rtl] .large.square.state {
+  left: calc(var(--zd_size5) * -1);
+}
+.xlarge.square.state {
+  bottom: calc(var(--zd_size3) * -1);
+}
+[dir=ltr] .xlarge.square.state {
+  right: calc(var(--zd_size5) * -1);
+}
+[dir=rtl] .xlarge.square.state {
+  left: calc(var(--zd_size5) * -1);
+}