@zohodesk/dot 1.0.0-beta.244 → 1.0.0-beta.245

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

@@ -11,24 +11,28 @@
 .circle.state {
   border: 1px solid var(--zdt_avatarstatus_size_border);
 }
-.small.square.state, .xsmall.square.state {
+.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 {
+.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);
+  composes: state;
 }
 
 .offline {
-  composes: state;
   background-color: var(--zdt_avatarstatus_offline_bg);
+  composes: state;
 }
 .idle {
-  composes: state;
   background-color: var(--zdt_avatarstatus_idle_bg);
+  composes: state;
 }
 
 .small.state,
@@ -49,98 +53,44 @@
 
 .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);
-}

package/es/avatar/AvatarStatus/docs/AvatarStatus__size.docs.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarStatus from '../AvatarStatus';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarStatus__size extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let sizes = ['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge'];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, sizes.map(size => /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`,
+      key: size
+    }, /*#__PURE__*/React.createElement(AvatarStatus, {
+      name: "Bharathikannan",
+      size: size
+    })))), /*#__PURE__*/React.createElement("div", null, sizes.map(size => /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`,
+      key: size
+    }, /*#__PURE__*/React.createElement(AvatarStatus, {
+      name: "Bharathikannan",
+      size: size,
+      shape: "square"
+    })))));
+  }
+}
+if (false) {
+  AvatarStatus__size.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/es/avatar/AvatarStatus/docs/AvatarStatus__state.docs.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarStatus from '../AvatarStatus';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarStatus__state extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let states = ['online', 'offline', 'idle'];
+    return /*#__PURE__*/React.createElement("div", null, states.map(state => /*#__PURE__*/React.createElement("span", {
+      className: `${style.docspan} ${style.vtop}`,
+      key: state
+    }, /*#__PURE__*/React.createElement(AvatarStatus, {
+      name: "Bharathikannan",
+      size: "xmedium",
+      state: state
+    }))));
+    /*return (
+      <div>
+          <span className={style.docspan + ' ' + style.vtop}>
+            <AvatarStatus
+            name="Bharathikannan"
+              size="xmedium" palette="primary" state='online'
+            />
+          </span>
+           <span className={style.docspan + ' ' + style.vtop}>
+            <AvatarStatus
+              name="Bharathikannan"
+              size="xmedium" palette="secondary" state='offline'
+            />
+          </span>
+           <span className={style.docspan + ' ' + style.vtop}>
+            <AvatarStatus
+            name="Bharathikannan"
+              size="xmedium" palette="primary" filled state='idle'
+            />
+          </span>
+          </div>
+    );*/
+  }
+}
+
+if (false) {
+  AvatarStatus__state.docs = {
+    componentGroup: 'Avatar Group',
+    description: ' '
+  };
+}

package/es/avatar/AvatarThread/AvatarThread.module.css

@@ -27,26 +27,14 @@
 
 .thread_xsmall_pos {
   top: calc(var(--zd_size5) * -1);
-}
-
-[dir=ltr] .thread_xsmall_pos {
   right: calc(var(--zd_size5) * -1);
 }
-
-[dir=rtl] .thread_xsmall_pos {
-  left: calc(var(--zd_size5) * -1);
-}
 .thread_small_pos {
   top: calc(var(--zd_size3) * -1);
+  right: calc(var(--zd_size6) * -1);
   height: var(--zd_size12);
   width: var(--zd_size12);
 }
-[dir=ltr] .thread_small_pos {
-  right: calc(var(--zd_size6) * -1);
-}
-[dir=rtl] .thread_small_pos {
-  left: calc(var(--zd_size6) * -1);
-}
 
 .thread_small_pos i {
   font-size: var(--zd_font_size8);
@@ -54,72 +42,36 @@
 
 .thread_medium_pos {
   top: calc(var(--zd_size4) * -1);
-}
-
-[dir=ltr] .thread_medium_pos {
   right: calc(var(--zd_size5) * -1);
 }
 
-[dir=rtl] .thread_medium_pos {
-  left: calc(var(--zd_size5) * -1);
-}
-
 .thread_xmedium_pos {
   top: calc(var(--zd_size4) * -1);
-}
-
-[dir=ltr] .thread_xmedium_pos {
   right: calc(var(--zd_size3) * -1);
 }
 
-[dir=rtl] .thread_xmedium_pos {
-  left: calc(var(--zd_size3) * -1);
-}
-
 .thread_large_pos {
   top: 0;
+  right: 0;
   height: var(--zd_size16);
   width: var(--zd_size16);
 }
 
-[dir=ltr] .thread_large_pos {
-  right: 0;
-}
-
-[dir=rtl] .thread_large_pos {
-  left: 0;
-}
-
 .thread_xlarge_pos {
   top: var(--zd_size2);
+  right: var(--zd_size4);
   height: var(--zd_size18);
   width: var(--zd_size18);
 }
 
-[dir=ltr] .thread_xlarge_pos {
-  right: var(--zd_size4);
-}
-
-[dir=rtl] .thread_xlarge_pos {
-  left: var(--zd_size4);
-}
-
 .icon {
   position: absolute;
   line-height: 0;
-  top: 50%;
-}
-
-[dir=ltr] .icon {
   left: 50%;
+  top: 50%;
   transform: translate(-50%, -50%);
 }
 
-[dir=rtl] .icon {
-  right: 50%;
-  transform: translate(50%, -50%);
-}
-
 .border_primary {
   border: 1px solid var(--zdt_avatarthread_primary_border);
 }
@@ -142,8 +94,8 @@
 }
 
 .hover .thread {
-  z-index: 1;
   cursor: pointer;
+  z-index: 1;
 }
 
 .hover:hover .thread {

package/es/avatar/AvatarThread/docs/AvatarThread__default.docs.js

@@ -0,0 +1,163 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AvatarThread from '../AvatarThread';
+import style from '@zohodesk/components/lib/common/docStyle.module.css';
+export default class AvatarThread__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    let margin = {
+      margin: '10px'
+    };
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+      style: margin
+    }, "Show Icon On Hover"), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-minus",
+      iconSize: "8",
+      iconColor: "primary",
+      borderPalette: "primary",
+      showOnHover: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+      style: margin
+    }, "BorderPalatte"), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-TK-in",
+      iconSize: "14",
+      iconColor: "primary",
+      borderPalette: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-TK-in",
+      iconSize: "14",
+      iconColor: "success",
+      borderPalette: "success"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-TK-in",
+      iconSize: "14",
+      iconColor: "danger",
+      borderPalette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-TK-in",
+      iconSize: "14",
+      iconColor: "default",
+      borderPalette: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-TK-in",
+      iconSize: "14",
+      iconColor: "orange",
+      borderPalette: "orange"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+      style: margin
+    }, "Icon Color"), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-chFacebook",
+      iconSize: "10",
+      iconColor: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-chFacebook",
+      iconSize: "10",
+      iconColor: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-chFacebook",
+      iconSize: "10",
+      iconColor: "orange"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+      style: margin
+    }, "Size"), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "small",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "xsmall",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "medium",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "xmedium",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "large",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: margin
+    }, /*#__PURE__*/React.createElement(AvatarThread, {
+      src: "https://contacts.zoho.com/file?ID=8237519&exp=6000&t=user&fs=thumb",
+      name: "Bharathikannan",
+      size: "xlarge",
+      iconName: "ZD-chFacebook",
+      iconSize: "10"
+    })))));
+  }
+}
+if (false) {
+  AvatarThread__default.docs = {
+    componentGroup: 'Avatar Group'
+  };
+}

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -17,155 +17,84 @@
 }
 .paid {
   composes: middle from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .paid {
   left: 50%;
 }
-[dir=rtl] .paid {
-  right: 50%;
-}
 .paid {
   top: calc(var(--zd_size2) * -1);
 }
-.portal, .lock {
+.portal,
+.lock {
   background-color: var(--zdt_avataruser_default_bg);
   border-radius: 50%;
 }
 .delete {
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: all var(--zd_transition3);
   composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zdt_avataruser_delete_text);
   cursor: pointer;
   border-radius: 50%;
   background-color: var(--zdt_avataruser_delete_bg);
-}
-[dir=ltr] .delete {
-  left: 0;
-}
-[dir=rtl] .delete {
-  right: 0;
+  color: var(--zdt_avataruser_delete_text);
 }
 .container:hover .delete {
   opacity: 1;
 }
 .small .portal {
   top: 0;
-}
-[dir=ltr] .small .portal {
   right: calc(var(--zd_size4) * -1);
 }
-[dir=rtl] .small .portal {
-  left: calc(var(--zd_size4) * -1);
-}
 .xsmall .portal {
   top: var(--zd_size1);
-}
-[dir=ltr] .xsmall .portal {
   right: calc(var(--zd_size2) * -1);
 }
-[dir=rtl] .xsmall .portal {
-  left: calc(var(--zd_size2) * -1);
-}
 .medium .portal {
   top: var(--zd_size1);
-}
-[dir=ltr] .medium .portal {
   right: calc(var(--zd_size1) * -1);
 }
-[dir=rtl] .medium .portal {
-  left: calc(var(--zd_size1) * -1);
-}
 .xmedium .portal {
   top: var(--zd_size3);
-}
-[dir=ltr] .xmedium .portal {
   right: 0;
 }
-[dir=rtl] .xmedium .portal {
-  left: 0;
-}
 .large .portal {
   top: var(--zd_size8);
-}
-[dir=ltr] .large .portal {
   right: var(--zd_size1);
 }
-[dir=rtl] .large .portal {
-  left: var(--zd_size1);
-}
 .xlarge .portal {
   top: var(--zd_size15);
-}
-[dir=ltr] .xlarge .portal {
   right: var(--zd_size2);
 }
-[dir=rtl] .xlarge .portal {
-  left: var(--zd_size2);
-}
 
 .small .lock {
   top: 0;
-  font-size: var(--zd_font_size11);
-}
-
-[dir=ltr] .small .lock {
   right: calc(var(--zd_size5) * -1);
-}
-
-[dir=rtl] .small .lock {
-  left: calc(var(--zd_size5) * -1);
+  font-size: var(--zd_font_size11);
 }
 .xsmall .lock {
   top: var(--zd_size1);
-  font-size: var(--zd_font_size12);
-}
-[dir=ltr] .xsmall .lock {
   right: calc(var(--zd_size4) * -1);
-}
-[dir=rtl] .xsmall .lock {
-  left: calc(var(--zd_size4) * -1);
+  font-size: var(--zd_font_size12);
 }
 .medium .lock {
   top: var(--zd_size2);
-  font-size: var(--zd_font_size13);
-}
-[dir=ltr] .medium .lock {
   right: calc(var(--zd_size5) * -1);
-}
-[dir=rtl] .medium .lock {
-  left: calc(var(--zd_size5) * -1);
+  font-size: var(--zd_font_size13);
 }
 .xmedium .lock {
   top: var(--zd_size4);
-  font-size: var(--zd_font_size14);
-}
-[dir=ltr] .xmedium .lock {
   right: calc(var(--zd_size6) * -1);
-}
-[dir=rtl] .xmedium .lock {
-  left: calc(var(--zd_size6) * -1);
+  font-size: var(--zd_font_size14);
 }
 .large .lock {
   top: var(--zd_size6);
-  font-size: var(--zd_font_size18);
-}
-[dir=ltr] .large .lock {
   right: calc(var(--zd_size6) * -1);
-}
-[dir=rtl] .large .lock {
-  left: calc(var(--zd_size6) * -1);
+  font-size: var(--zd_font_size18);
 }
 .xlarge .lock {
   top: var(--zd_size12);
-  font-size: var(--zd_font_size22);
-}
-[dir=ltr] .xlarge .lock {
   right: calc(var(--zd_size8) * -1);
-}
-[dir=rtl] .xlarge .lock {
-  left: calc(var(--zd_size8) * -1);
+  font-size: var(--zd_font_size22);
 }