@zohodesk/dot 1.0.0-test.239 → 1.1.0

package/es/layout/SubtabLayout/SubtabLayout.module.css

@@ -1,146 +1,165 @@
-.varClass {
-  --borderColor: var(--zdt_subtablayout_border);
-}
-.tabHead,
-.shadowStyle {
-  position: relative;
-  composes: varClass;
-}
-.tabHead, .shadowStyle {
-  background: var(--zdt_subtablayout_tabhead_bg);
-}
-
-[dir=ltr] .left {
-  margin-right: var(--zd_size15);
-}
-
-[dir=rtl] .left {
-  margin-left: var(--zd_size15);
-}
-
-.plusIconLine {
-  position: relative;
-  z-index: 2;
-}
-
-.plusIconLine::before {
-  position: absolute;
-  content: '';
-  width: var(--zd_size1);
-  height: var(--zd_size28);
-  top: var(--zd_size38);
-  z-index: -1;
-  background: var(--zdt_subtablayout_plusicon_bg);
-}
-
-[dir=ltr] .plusIconLine::before {
-  left: var(--zd_size20);
-}
-
-[dir=rtl] .plusIconLine::before {
-  right: var(--zd_size20);
-}
-
-.primary_borderStyle, .secondary_borderStyle {
-  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
-}
-.tertiary_borderStyle {
-  border-bottom: 1px solid var(--borderColor);
-}
-
-.shadowStyle::before {
-  bottom: 0;
-  content: '';
-  position: absolute;
-  top: var(--zd_size20);
-  z-index: -1;
-  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
-  border-radius: 100px/10px;
-}
-
-[dir=ltr] .shadowStyle::before {
-  left: var(--zd_size50);
-  right: var(--zd_size50);
-}
-
-[dir=rtl] .shadowStyle::before {
-  right: var(--zd_size50);
-  left: var(--zd_size50);
-}
-
-.aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.title {
-  color: var(--zdt_subtablayout_title_text);
-  font-size: var(--zd_font_size15);
-}
-
-.label {
-  font-size: var(--zd_font_size12);
-  color: var(--zdt_subtablayout_label_text);
-}
-
-.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
-  padding-top: var(--zd_size27);
-  padding-bottom: var(--zd_size26);
-}
-
-[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-left: var(--zd_size25);
-}
-
-[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-right: var(--zd_size25);
-}
-[dir=ltr] .primary, [dir=ltr] .primary_peek {
-  padding-right: var(--zd_size25);
-}
-[dir=rtl] .primary, [dir=rtl] .primary_peek {
-  padding-left: var(--zd_size25);
-}
-[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
-  padding-right: var(--zd_size115);
-}
-[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
-  padding-left: var(--zd_size115);
-}
-[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
-  padding-right: var(--zd_size25);
-}
-[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
-  padding-left: var(--zd_size25);
-}
-[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
-  padding-right: var(--zd_size115);
-}
-[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
-  padding-left: var(--zd_size115);
-}
-.tertiary,
-.tertiary_peek {
-  height: var(--zd_size50);
-}
-.tertiary, .tertiary_detailFooter {
-  padding: 0 var(--zd_size65);
-}
-.tertiary_peek, .tertiary_peekFooter {
-  padding: 0 var(--zd_size42);
-}
-.cursor {
-  cursor: pointer;
-}
-.footer {
-  composes: varClass;
-  border-top: 1px solid var(--borderColor);
-}
-.medium {
-  height: var(--zd_size40);
-}
-.large {
-  height: var(--zd_size45);
-}
-.xlarge {
-  height: var(--zd_size50);
-}
+.varClass {
+  --borderColor: var(--zdt_subtablayout_border);
+}
+
+.tabHead,
+.shadowStyle {
+  position: relative;
+  composes: varClass;
+}
+
+.tabHead, .shadowStyle {
+  background: var(--zdt_subtablayout_tabhead_bg);
+}
+
+[dir=ltr] .left {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .left {
+  margin-left: var(--zd_size15) ;
+}
+
+.plusIconLine {
+  position: relative;
+  z-index: 2;
+}
+
+.plusIconLine::before {
+  position: absolute;
+  content: '';
+  width: var(--zd_size1) ;
+  height: var(--zd_size28) ;
+  top: var(--zd_size38) ;
+  z-index: -1;
+  background: var(--zdt_subtablayout_plusicon_bg);
+}
+
+[dir=ltr] .plusIconLine::before {
+  left: var(--zd_size20) ;
+}
+
+[dir=rtl] .plusIconLine::before {
+  right: var(--zd_size20) ;
+}
+
+.primary_borderStyle, .secondary_borderStyle {
+  border-bottom: 1px solid var(--zdt_subtablayout_primary_border);
+}
+
+.tertiary_borderStyle {
+  border-bottom: 1px solid var(--borderColor);
+}
+
+.shadowStyle::before {
+  bottom: 0 ;
+  content: '';
+  position: absolute;
+  top: var(--zd_size20) ;
+  z-index: -1;
+  box-shadow: var(--zd_bs_subtablayout_shadow);
+  border-radius: 100px/10px;
+}
+
+[dir=ltr] .shadowStyle::before {
+  left: var(--zd_size50) ;
+  right: var(--zd_size50) ;
+}
+
+[dir=rtl] .shadowStyle::before {
+  right: var(--zd_size50) ;
+  left: var(--zd_size50) ;
+}
+
+.aside {
+  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.title {
+  color: var(--zdt_subtablayout_title_text);
+  font-size: var(--zd_font_size15) ;
+}
+
+.label {
+  font-size: var(--zd_font_size12) ;
+  color: var(--zdt_subtablayout_label_text);
+}
+
+.primary, .primary_peek, .secondary, .secondary_peek, .primary_detailFooter, .primary_peekFooter, .secondary_detailFooter, .secondary_peekFooter {
+  padding-top: var(--zd_size27) ;
+  padding-bottom: var(--zd_size26) ;
+}
+
+[dir=ltr] .primary, [dir=ltr] .primary_peek, [dir=ltr] .secondary, [dir=ltr] .secondary_peek, [dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter, [dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary, [dir=rtl] .primary_peek, [dir=rtl] .secondary, [dir=rtl] .secondary_peek, [dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter, [dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=ltr] .primary, [dir=ltr] .primary_peek {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary, [dir=rtl] .primary_peek {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
+  padding-right: var(--zd_size115) ;
+}
+
+[dir=rtl] .secondary, [dir=rtl] .secondary_peek {
+  padding-left: var(--zd_size115) ;
+}
+
+[dir=ltr] .primary_detailFooter, [dir=ltr] .primary_peekFooter {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=rtl] .primary_detailFooter, [dir=rtl] .primary_peekFooter {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=ltr] .secondary_detailFooter, [dir=ltr] .secondary_peekFooter {
+  padding-right: var(--zd_size115) ;
+}
+
+[dir=rtl] .secondary_detailFooter, [dir=rtl] .secondary_peekFooter {
+  padding-left: var(--zd_size115) ;
+}
+
+.tertiary,
+.tertiary_peek {
+  height: var(--zd_size50) ;
+}
+
+.tertiary, .tertiary_detailFooter {
+  padding: 0 var(--zd_size65) ;
+}
+
+.tertiary_peek, .tertiary_peekFooter {
+  padding: 0 var(--zd_size42) ;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.footer {
+  composes: varClass;
+  border-top: 1px solid var(--borderColor);
+}
+
+.medium {
+  height: var(--zd_size40) ;
+}
+
+.large {
+  height: var(--zd_size45) ;
+}
+
+.xlarge {
+  height: var(--zd_size50) ;
+}

package/es/list/AvatarFlip/AvatarFlip.js

@@ -30,7 +30,8 @@ export default class AvatarFlip extends Component {
       tourId,
       iconSize,
       isFilledCheckbox,
-      channelTitle
+      channelTitle,
+      customProps
     } = this.props;
     return /*#__PURE__*/React.createElement(FlipCard, {
       id: id,
@@ -60,15 +61,16 @@ export default class AvatarFlip extends Component {
       needTitle: needTitle,
       tourId: tourId,
       isFilledCheckbox: isFilledCheckbox,
-      channelTitle: channelTitle
+      channelTitle: channelTitle,
+      customProps: customProps
     });
   }
+
 }
 AvatarFlip.propTypes = propTypes;
-AvatarFlip.defaultProps = defaultProps;
-if (false) {
-  AvatarFlip.docs = {
-    folderName: 'List',
-    componentGroup: 'AvatarFlip'
-  };
-}
+AvatarFlip.defaultProps = defaultProps; // if (__DOCS__) {
+//   AvatarFlip.docs = {
+//     folderName: 'List',
+//     componentGroup: 'AvatarFlip'
+//   };
+// }

package/es/list/AvatarFlip/AvatarFlip.module.css

@@ -1,3 +1,3 @@
-.iconStyle {
-  color: var(--zdt_avatarflip_default_text);
-}
+.iconStyle {
+  color: var(--zdt_avatarflip_default_text);
+}

package/es/list/AvatarFlip/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const defaultProps = {
   size: 'xmedium',
   noNeedFlip: false,
-  iconSize: '21'
+  iconSize: '21',
+  customProps: {}
 };

package/es/list/AvatarFlip/props/propTypes.js

@@ -24,5 +24,6 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
-  tourId: PropTypes.string
+  tourId: PropTypes.string,
+  customProps: PropTypes.object
 };

package/es/list/BluePrintStatus/BluePrintStatus.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { propTypes } from './props/propTypes';
 import style from './BluePrintStatus.module.css';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 export default class BluePrintStatus extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       title
@@ -18,10 +19,10 @@ export default class BluePrintStatus extends React.Component {
       iconClass: style.iconStyle
     }));
   }
+
 }
-BluePrintStatus.propTypes = propTypes;
-if (false) {
-  BluePrintStatus.docs = {
-    componentGroup: 'Atom'
-  };
-}
+BluePrintStatus.propTypes = propTypes; // if (__DOCS__) {
+//   BluePrintStatus.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/list/BluePrintStatus/BluePrintStatus.module.css

@@ -1,17 +1,17 @@
-.container {
-  display: inherit;
-}[dir=ltr] .container {
-  padding-right: var(--zd_size5);
-}[dir=rtl] .container {
-  padding-left: var(--zd_size5);
-}
-/* .danger {
-  color: var(--dot_brightRed);
-}
-.default {
-  color: var(--dot_shuttleGrey);
-} */
-.iconStyle {
-  display: block;
-  font-size: var(--zd_font_size10);
-}
+.container {
+  display: inherit;
+}[dir=ltr] .container {
+  padding-right: var(--zd_size5) ;
+}[dir=rtl] .container {
+  padding-left: var(--zd_size5) ;
+}
+/* .danger {
+  color: var(--dot_brightRed);
+}
+.default {
+  color: var(--dot_shuttleGrey);
+} */
+.iconStyle {
+  display: block;
+  font-size: var(--zd_font_size10) ;
+}

package/es/list/Comment/Comment.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { i18NProviderUtils } from '@zohodesk/i18n';
 import Button from '@zohodesk/components/lib/semantic/Button/Button';
 import style from './Comment.module.css';
@@ -9,6 +9,7 @@ export default class Comment extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       count,
@@ -22,7 +23,10 @@ export default class Comment extends Component {
       customClass: `${style.container} ${className} `,
       onClick: onClick,
       dataId: "commentLstContainer",
-      title: commentTitle
+      title: commentTitle,
+      a11y: {
+        ariaLabel: commentTitle
+      }
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-commentLine",
       iconClass: style.commentIcon
@@ -30,12 +34,12 @@ export default class Comment extends Component {
       className: style.count
     }, count));
   }
+
 }
 Comment.defaultProps = defaultProps;
-Comment.propTypes = propTypes;
-if (false) {
-  Comment.docs = {
-    folderName: 'List',
-    componentGroup: 'Comment'
-  };
-}
+Comment.propTypes = propTypes; // if (__DOCS__) {
+//   Comment.docs = {
+//     folderName: 'List',
+//     componentGroup: 'Comment'
+//   };
+// }

package/es/list/Comment/Comment.module.css

@@ -1,29 +1,29 @@
-.varClass {
-  --icon_color: var(--zdt_comment_iconText);
-}
-.container {
-  composes: varClass;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  position: relative;
-  color: var(--icon_color);
-  padding: 0 var(--zd_size2);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: var(--zd_size1);
-  font-size: var(--zd_font_size9);
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100%;
-}
-[dir=rtl] .count {
-  right: 100%;
-}
-.commentIcon {
-  font-size: var(--zd_font_size13);
-}
+.varClass {
+  --icon_color: var(--zdt_comment_iconText);
+}
+.container {
+  composes: varClass;
+  composes: inlineBlockMiddle from '../listCommon.module.css';
+  position: relative;
+  color: var(--icon_color);
+  padding: 0 var(--zd_size2) ;
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_comment_hover_iconText);
+}
+.count {
+  position: absolute;
+  top: var(--zd_size1) ;
+  font-size: var(--zd_font_size9) ;
+  text-align: center;
+}
+[dir=ltr] .count {
+  left: 100% ;
+}
+[dir=rtl] .count {
+  right: 100% ;
+}
+.commentIcon {
+  font-size: var(--zd_font_size13) ;
+}

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -4,22 +4,27 @@ import { propTypes } from './props/propTypes';
 import ToggleDropDown from '../../dropdown/ToggleDropDown/ToggleDropDown';
 import { DepartmentText } from '../SecondaryText';
 import style from './DepartmentDropDown.module.css';
+
 class DepartmentDropDown extends Component {
   constructor(props) {
     super(props);
     this.onClick = this.onClick.bind(this);
     this.onMoveDepartment = this.onMoveDepartment.bind(this);
   }
+
   onClick(e) {
     let {
       getDepartment,
       onSearch
     } = this.props;
+
     if (getDepartment) {
       getDepartment(e);
     }
+
     onSearch('');
   }
+
   onMoveDepartment(deptId) {
     let {
       onSearch,
@@ -28,6 +33,7 @@ class DepartmentDropDown extends Component {
     onSearch('');
     onMoveDepartment(deptId);
   }
+
   render() {
     let {
       departmentName,
@@ -81,13 +87,14 @@ class DepartmentDropDown extends Component {
       needSearchFetching: needSearchFetching
     });
   }
+
 }
+
 DepartmentDropDown.defaultProps = defaultProps;
 DepartmentDropDown.propTypes = propTypes;
-export default DepartmentDropDown;
-if (false) {
-  DepartmentDropDown.docs = {
-    folderName: 'List',
-    componentGroup: 'DepartmentDropDown'
-  };
-}
+export default DepartmentDropDown; // if (__DOCS__) {
+//   DepartmentDropDown.docs = {
+//     folderName: 'List',
+//     componentGroup: 'DepartmentDropDown'
+//   };
+// }

package/es/list/DepartmentDropDown/DepartmentDropDown.module.css

@@ -1,9 +1,9 @@
-.departmentBox {
-  max-width: 100%;
-}
-.departmentBox :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_text);
-}
-.departmentBox:hover :global .toggleDropIcon {
-  color: var(--zdt_departmentdropdown_default_hover_text);
-}
+.departmentBox {
+  max-width: 100% ;
+}
+.departmentBox :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_text);
+}
+.departmentBox:hover :global .toggleDropIcon {
+  color: var(--zdt_departmentdropdown_default_hover_text);
+}

package/es/list/Dot/Dot.js

@@ -6,6 +6,7 @@ export default class Dot extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       className,
@@ -15,6 +16,7 @@ export default class Dot extends Component {
       className: `${style.dot} ${style[spacingType]} ${className}`
     }, ".");
   }
+
 }
 Dot.propTypes = propTypes;
 Dot.defaultProps = defaultProps;

package/es/list/Dot/Dot.module.css

@@ -1,15 +1,15 @@
-.varClass {
-  --dotColor: var(--zdt_dot_text)
-}
-.dot {
-  composes: varClass;
-  font-size: var(--zd_font_size16);
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 var(--zd_size6);
-}
-.minimalList {
-  margin: 0 var(--zd_size6);
-}
+.varClass {
+  --dotColor: var(--zdt_dot_text)
+}
+.dot {
+  composes: varClass;
+  font-size: var(--zd_font_size16) ;
+  color: var(--dotColor);
+  transform: perspective(1px);
+}
+.list {
+  margin: 0 var(--zd_size6) ;
+}
+.minimalList {
+  margin: 0 var(--zd_size6) ;
+}