@zohodesk/dot 1.0.0-temp-153 → 1.0.0-temp-154

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/BluePrintStatus/BluePrintStatus.js

@@ -6,6 +6,7 @@ export default class BluePrintStatus extends React.Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       title
@@ -18,10 +19,9 @@ export default class BluePrintStatus extends React.Component {
       iconClass: style.iconStyle
     }));
   }
-}
-BluePrintStatus.propTypes = propTypes;
 
-// if (__DOCS__) {
+}
+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: 5px;
-}[dir=rtl] .container {
-  padding-left: 5px;
-}
-/* .danger {
-  color: var(--dot_brightRed);
-}
-.default {
-  color: var(--dot_shuttleGrey);
-} */
-.iconStyle {
-  display: block;
-  font-size: 10px;
-}
+.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

@@ -9,6 +9,7 @@ export default class Comment extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       count,
@@ -33,11 +34,10 @@ export default class Comment extends Component {
       className: style.count
     }, count));
   }
+
 }
 Comment.defaultProps = defaultProps;
-Comment.propTypes = propTypes;
-
-// if (__DOCS__) {
+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 2px;
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_comment_hover_iconText);
-}
-.count {
-  position: absolute;
-  top: 1px;
-  font-size: 9px;
-  text-align: center;
-}
-[dir=ltr] .count {
-  left: 100%;
-}
-[dir=rtl] .count {
-  right: 100%;
-}
-.commentIcon {
-  font-size: 13px;
-}
+.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,11 +87,12 @@ class DepartmentDropDown extends Component {
       needSearchFetching: needSearchFetching
     });
   }
+
 }
+
 DepartmentDropDown.defaultProps = defaultProps;
 DepartmentDropDown.propTypes = propTypes;
-export default DepartmentDropDown;
-// if (__DOCS__) {
+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: 16px;
-  color: var(--dotColor);
-  transform: perspective(1px);
-}
-.list {
-  margin: 0 6px;
-}
-.minimalList {
-  margin: 0 6px;
-}
+.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) ;
+}

package/es/list/DotNew/DotNew.js

@@ -6,6 +6,7 @@ export default class DotNew extends Component {
   constructor(props) {
     super(props);
   }
+
   render() {
     let {
       className,
@@ -17,11 +18,10 @@ export default class DotNew extends Component {
       "data-title": dataTitle
     });
   }
+
 }
 DotNew.propTypes = propTypes;
-DotNew.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+DotNew.defaultProps = defaultProps; // if (__DOCS__) {
 //   DotNew.docs = {
 //     folderName: 'List',
 //     componentGroup: 'DotNew'

package/es/list/DotNew/DotNew.module.css

@@ -1,25 +1,25 @@
-.medium {
-  width: 6px;
-  height: 6px;
-}
-
-.small {
-  width: 5px;
-  height: 5px;
-}
-
-.container {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
-  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
-    0 0 0 0 rgba(10, 115, 235, 0.6); */
-  border-radius: 50%;
-  background-color: var(--zdt_dotnew_default_bg);
-  box-shadow: var(--zd_bs_dotnew_shadow);
-}
-
-@keyframes dotAnimation {
-  to {
-    box-shadow: 0 0 0 12px var(--zdt_dotnew_animate_box_shadow), 0 0 0 8px var(--zdt_dotnew_animate_to_box_shadow);
-  }
+.medium {
+  width: var(--zd_size6) ;
+  height: var(--zd_size6) ;
+}
+
+.small {
+  width: var(--zd_size5) ;
+  height: var(--zd_size5) ;
+}
+
+.container {
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
+  box-shadow: 0 0 0 0 var(--dot_catskillWhite),
+    0 0 0 0 rgba(10, 115, 235, 0.6); */
+  border-radius: 50%;
+  background-color: var(--zdt_dotnew_default_bg);
+  box-shadow: var(--zd_bs_dotnew_shadow);
+}
+
+@keyframes dotAnimation {
+  to {
+    box-shadow: 0 0 0 12px var(--zdt_dotnew_animate_box_shadow), 0 0 0 8px var(--zdt_dotnew_animate_to_box_shadow);
+  }
 }

package/es/list/GridStencils/GridStencils.js

@@ -24,10 +24,9 @@ export default class GridStencils extends React.Component {
       className: `${style.lineBar3} ${style.stenListBAr}`
     })) : '');
   }
-}
-GridStencils.propTypes = propTypes;
 
-// if (__DOCS__) {
+}
+GridStencils.propTypes = propTypes; // if (__DOCS__) {
 //   GridStencils.docs = {
 //     folderName: 'List',
 //     componentGroup: 'GridStencils'

package/es/list/GridStencils/GridStencils.module.css

@@ -1,147 +1,147 @@
-.stenLoading {
-  position: relative;
-  background-color: var(--zdt_gridstencils_default_bg);
-  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
-  padding: 13px 15px 11px 15px;
-  margin-bottom: 10px;
-  border-radius: var(--zd_size5);
-}
-[dir=ltr] .stenLoadbody {
-  margin: 8px 20px 8px 0;
-}
-[dir=rtl] .stenLoadbody {
-  margin: 8px 0 8px 20px;
-}
-.stenLoadbody::after {
-  content: '';
-  height: 22px;
-  width: 22px;
-  top: 15px;
-  position: absolute;
-  border-radius: 50%;
-  background-color: var(--zdt_gridstencils_after_bg);
-}
-[dir=ltr] .stenLoadbody::after {
-  right: 20px;
-}
-[dir=rtl] .stenLoadbody::after {
-  left: 20px;
-}
-.lineBar {
-  width: 90%;
-}
-.lineBar2 {
-  width: 70%;
-  margin: 22px 0;
-}
-.lineBar3 {
-  width: 50%;
-}
-.lineBar,
-.lineBar2,
-.lineBar3 {
-  height: 5px;
-}
-.lineBar, .lineBar2, .lineBar3 {
-  border-radius: var(--zd_size5);
-}
-.stenListBAr {
-  position: relative;
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-}
-[dir=ltr] .stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-}
-[dir=rtl] .stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-}
-.stenListBAr {
-  background: var(--zdt_gridstencils_listbar_bg);
-  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
-  background-repeat: no-repeat;
-}
-[dir=ltr] .stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-}
-[dir=rtl] .stenListBAr {
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-
-  100% {
-    background-position: 468px 0;
-  }
-}
-.threeLayout .stenLoadbody::before {
-  transform: scale(0.8);
-}
-[dir=ltr] .threeLayout .stenLoadbody::before {
-  left: 16px;
-}
-[dir=rtl] .threeLayout .stenLoadbody::before {
-  right: 16px;
-}
-[dir=ltr] .threeLayout .stenLoadbody {
-  margin: 8px 20px 8px 0;
-}
-[dir=rtl] .threeLayout .stenLoadbody {
-  margin: 8px 0 8px 20px;
-}
-.threeLayout .stenLoadbody::after {
-  top: 15px;
-  transform: scale(0.8);
-}
-[dir=ltr] .threeLayout .stenLoadbody::after {
-  right: 20px;
-}
-[dir=rtl] .threeLayout .stenLoadbody::after {
-  left: 20px;
-}
-[dir=ltr] .leftCont .stenLoadbody::before {
-  left: 33px;
-}
-[dir=rtl] .leftCont .stenLoadbody::before {
-  right: 33px;
-}
-[dir=ltr] .leftCont .stenLoadbody {
-  margin: 8px 20px 8px 46px;
-}
-[dir=rtl] .leftCont .stenLoadbody {
-  margin: 8px 46px 8px 20px;
-}
-[dir=ltr] .leftCont .stenLoadbody::after {
-  right: 40px;
-}
-[dir=rtl] .leftCont .stenLoadbody::after {
-  left: 40px;
-}
-.leftCont .lineBar {
-  width: 80%;
-}
-.leftCont .lineBar2 {
-  width: 60%;
-}
-.leftCont .lineBar3 {
-  width: 40%;
+.stenLoading {
+  position: relative;
+  background-color: var(--zdt_gridstencils_default_bg);
+  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
+  padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15) ;
+  margin-bottom: var(--zd_size10) ;
+  border-radius: var(--zd_size5);
+}
+[dir=ltr] .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
+}
+[dir=rtl] .stenLoadbody {
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
+}
+.stenLoadbody::after {
+  content: '';
+  height: var(--zd_size22) ;
+  width: var(--zd_size22) ;
+  top: var(--zd_size15) ;
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--zdt_gridstencils_after_bg);
+}
+[dir=ltr] .stenLoadbody::after {
+  right: var(--zd_size20) ;
+}
+[dir=rtl] .stenLoadbody::after {
+  left: var(--zd_size20) ;
+}
+.lineBar {
+  width: 90% ;
+}
+.lineBar2 {
+  width: 70% ;
+  margin: var(--zd_size22) 0 ;
+}
+.lineBar3 {
+  width: 50% ;
+}
+.lineBar,
+.lineBar2,
+.lineBar3 {
+  height: var(--zd_size5) ;
+}
+.lineBar, .lineBar2, .lineBar3 {
+  border-radius: var(--zd_size5);
+}
+.stenListBAr {
+  position: relative;
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+}
+[dir=ltr] .stenListBAr {
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+[dir=rtl] .stenListBAr {
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+.stenListBAr {
+  background: var(--zdt_gridstencils_listbar_bg);
+  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
+  background-repeat: no-repeat;
+}
+[dir=ltr] .stenListBAr {
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+[dir=rtl] .stenListBAr {
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name: placeHolderShimmer;
+  -webkit-animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+}
+.threeLayout .stenLoadbody::before {
+  transform: scale(0.8);
+}
+[dir=ltr] .threeLayout .stenLoadbody::before {
+  left: var(--zd_size16) ;
+}
+[dir=rtl] .threeLayout .stenLoadbody::before {
+  right: var(--zd_size16) ;
+}
+[dir=ltr] .threeLayout .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
+}
+[dir=rtl] .threeLayout .stenLoadbody {
+  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
+}
+.threeLayout .stenLoadbody::after {
+  top: var(--zd_size15) ;
+  transform: scale(0.8);
+}
+[dir=ltr] .threeLayout .stenLoadbody::after {
+  right: var(--zd_size20) ;
+}
+[dir=rtl] .threeLayout .stenLoadbody::after {
+  left: var(--zd_size20) ;
+}
+[dir=ltr] .leftCont .stenLoadbody::before {
+  left: var(--zd_size33) ;
+}
+[dir=rtl] .leftCont .stenLoadbody::before {
+  right: var(--zd_size33) ;
+}
+[dir=ltr] .leftCont .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46) ;
+}
+[dir=rtl] .leftCont .stenLoadbody {
+  margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20) ;
+}
+[dir=ltr] .leftCont .stenLoadbody::after {
+  right: var(--zd_size40) ;
+}
+[dir=rtl] .leftCont .stenLoadbody::after {
+  left: var(--zd_size40) ;
+}
+.leftCont .lineBar {
+  width: 80% ;
+}
+.leftCont .lineBar2 {
+  width: 60% ;
+}
+.leftCont .lineBar3 {
+  width: 40% ;
 }

package/es/list/Icons/AddNewIcon.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { AddNewIcon_propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
 import style from './Icons.module.css';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export default class AddNewIcon extends React.Component {
   render() {
     let {
@@ -11,15 +12,17 @@ export default class AddNewIcon extends React.Component {
       iconClass,
       className
     } = this.props;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("button", {
       onClick: onClick,
-      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''}`,
+      className: `${style.iconStyle} ${style.blueHover} ${className ? className : ''} ${btnStyle.buttonReset}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-title": dataTitle
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-SE-addTickets",
       iconClass: iconClass ? iconClass : ''
     }));
   }
+
 }
 AddNewIcon.propTypes = AddNewIcon_propTypes;