@zohodesk/dot 1.0.0-temp.999 → 1.0.0-test.113

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

@@ -5,13 +5,19 @@
 .shadowStyle {
   position: relative;
   composes: varClass;
+}
+.tabHead, .shadowStyle {
   background: var(--zdt_subtablayout_tabhead_bg);
 }
 
-.left {
+[dir=ltr] .left {
   margin-right: var(--zd_size15);
 }
 
+[dir=rtl] .left {
+  margin-left: var(--zd_size15);
+}
+
 .plusIconLine {
   position: relative;
   z-index: 2;
@@ -20,16 +26,22 @@
 .plusIconLine::before {
   position: absolute;
   content: '';
-  left: var(--zd_size20);
-  background: var(--zdt_subtablayout_plusicon_bg);
   width: var(--zd_size1);
   height: var(--zd_size28);
   top: var(--zd_size38);
   z-index: -1;
+  background: var(--zdt_subtablayout_plusicon_bg);
 }
 
-.primary_borderStyle,
-.secondary_borderStyle {
+[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 {
@@ -37,15 +49,23 @@
 }
 
 .shadowStyle::before {
-  box-shadow: 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow);
-  border-radius: 100px/10px;
   bottom: 0;
   content: '';
-  left: var(--zd_size50);
   position: absolute;
-  right: var(--zd_size50);
   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 {
@@ -62,44 +82,50 @@
   color: var(--zdt_subtablayout_label_text);
 }
 
-.primary,
-.primary_peek,
-.secondary,
-.secondary_peek,
-.primary_detailFooter,
-.primary_peekFooter,
-.secondary_detailFooter,
-.secondary_peekFooter {
+.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);
 }
-.primary,
-.primary_peek {
+
+[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);
 }
-.secondary,
-.secondary_peek {
+[dir=rtl] .primary, [dir=rtl] .primary_peek {
+  padding-left: var(--zd_size25);
+}
+[dir=ltr] .secondary, [dir=ltr] .secondary_peek {
   padding-right: var(--zd_size115);
 }
-.primary_detailFooter,
-.primary_peekFooter {
+[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);
 }
-.secondary_detailFooter,
-.secondary_peekFooter {
+[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 {
+.tertiary, .tertiary_detailFooter {
   padding: 0 var(--zd_size65);
 }
-.tertiary_peek,
-.tertiary_peekFooter {
+.tertiary_peek, .tertiary_peekFooter {
   padding: 0 var(--zd_size42);
 }
 .cursor {

package/es/layout/SubtabLayout/props/defaultProps.js

@@ -0,0 +1,25 @@
+export const SubtabHeader_defaultProps = {
+  type: 'primary',
+  needBorder: true,
+  needShadow: true,
+  needPlusIconLine: true,
+  dataId: 'addreqNowbutton',
+  className: '',
+  leftClassName: '',
+  rightClassName: ''
+};
+export const SubtabFooter_defaultProps = {
+  className: '',
+  leftClassName: '',
+  rightClassName: '',
+  dataId: 'subtabFooter',
+  size: 'xlarge',
+  needPadding: true,
+  type: 'tertiary'
+};
+export const SubtabContent_defaultProps = {
+  scroll: 'vertical'
+};
+export const SubtabLayout_defaultProps = {
+  dataId: 'subTabLayout'
+};

package/es/layout/SubtabLayout/props/propTypes.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+export const SubtabHeader_propTypes = {
+  children: PropTypes.element,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getLeftPlaceHolder: PropTypes.oneOf([PropTypes.func, PropTypes.object]),
+  getRightPlaceHolder: PropTypes.func,
+  isPeekView: PropTypes.bool,
+  label: PropTypes.string,
+  leftClassName: PropTypes.string,
+  needBorderShadow: PropTypes.bool,
+  needPlusIconLine: PropTypes.bool,
+  onAdd: PropTypes.func,
+  rightClassName: PropTypes.string,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
+};
+export const SubtabFooter_propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  getRightFooterPlaceHolder: PropTypes.func,
+  isPeekView: PropTypes.bool,
+  leftClassName: PropTypes.string,
+  needPadding: PropTypes.bool,
+  rightClassName: PropTypes.string,
+  size: PropTypes.oneOf('medium', 'large', 'xlarge'),
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
+};
+export const SubtabContent_propTypes = {
+  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
+  className: PropTypes.element,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  scroll: PropTypes.oneOf(['vertical'])
+};
+export const SubtabLayout_propTypes = {
+  children: PropTypes.oneOf([PropTypes.element, PropTypes.array]),
+  dataId: PropTypes.string
+};

package/es/list/AvatarFlip/AvatarFlip.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import FlipCard from '../../FlipCard/FlipCard';
 import style from './AvatarFlip.module.css';
 export default class AvatarFlip extends Component {
@@ -62,41 +63,9 @@ export default class AvatarFlip extends Component {
       channelTitle: channelTitle
     });
   }
-
 }
-AvatarFlip.propTypes = {
-  action: PropTypes.string,
-  channel: PropTypes.string,
-  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  className: PropTypes.string,
-  customTextClass: PropTypes.string,
-  dataId: PropTypes.string,
-  frontClass: PropTypes.string,
-  icon: PropTypes.string,
-  iconSize: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  initial: PropTypes.string,
-  isChecked: PropTypes.bool,
-  isFilledCheckbox: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  isPortalUser: PropTypes.bool,
-  name: PropTypes.string,
-  needTitle: PropTypes.bool,
-  noNeedFlip: PropTypes.bool,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
-  size: PropTypes.string,
-  src: PropTypes.string,
-  textPalette: PropTypes.oneOf(['white', 'black']),
-  tourId: PropTypes.string
-};
-AvatarFlip.defaultProps = {
-  size: 'xmedium',
-  noNeedFlip: false,
-  iconSize: '21'
-};
-
+AvatarFlip.propTypes = propTypes;
+AvatarFlip.defaultProps = defaultProps;
 if (false) {
   AvatarFlip.docs = {
     folderName: 'List',

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

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

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

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  action: PropTypes.string,
+  channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  className: PropTypes.string,
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  frontClass: PropTypes.string,
+  icon: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  initial: PropTypes.string,
+  isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
+  isPaidUser: PropTypes.bool,
+  isPortalUser: PropTypes.bool,
+  name: PropTypes.string,
+  needTitle: PropTypes.bool,
+  noNeedFlip: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  size: PropTypes.string,
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  tourId: PropTypes.string
+};

package/es/list/BluePrintStatus/BluePrintStatus.js

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

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

@@ -1,6 +1,9 @@
 .container {
-  padding-right: var(--zd_size5);
   display: inherit;
+}[dir=ltr] .container {
+  padding-right: var(--zd_size5);
+}[dir=rtl] .container {
+  padding-left: var(--zd_size5);
 }
 /* .danger {
   color: var(--dot_brightRed);

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

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  title: PropTypes.string
+};

package/es/list/Comment/Comment.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { i18NProviderUtils } from '@zohodesk/i18n';
 import Button from '@zohodesk/components/lib/semantic/Button/Button';
@@ -8,7 +9,6 @@ export default class Comment extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       count,
@@ -22,7 +22,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,20 +33,9 @@ export default class Comment extends Component {
       className: style.count
     }, count));
   }
-
 }
-Comment.defaultProps = {
-  className: ''
-};
-Comment.propTypes = {
-  className: PropTypes.string,
-  count: PropTypes.string,
-  features: PropTypes.array,
-  iconTitle: PropTypes.string,
-  module: PropTypes.string,
-  onClick: PropTypes.func
-};
-
+Comment.defaultProps = defaultProps;
+Comment.propTypes = propTypes;
 if (false) {
   Comment.docs = {
     folderName: 'List',

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

@@ -17,8 +17,13 @@
   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/Comment/props/defaultProps.js

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  className: ''
+};

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

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  className: PropTypes.string,
+  count: PropTypes.string,
+  features: PropTypes.array,
+  iconTitle: PropTypes.string,
+  module: PropTypes.string,
+  onClick: PropTypes.func
+};

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -1,29 +1,25 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+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,
@@ -32,7 +28,6 @@ class DepartmentDropDown extends Component {
     onSearch('');
     onMoveDepartment(deptId);
   }
-
   render() {
     let {
       departmentName,
@@ -86,41 +81,10 @@ class DepartmentDropDown extends Component {
       needSearchFetching: needSearchFetching
     });
   }
-
 }
-
-DepartmentDropDown.defaultProps = {
-  isEditable: true,
-  isPopupActive: true,
-  isNextOptions: false,
-  searchStr: '',
-  i18nKeys: {}
-};
-DepartmentDropDown.propTypes = {
-  dataId: PropTypes.string,
-  departmentList: PropTypes.array,
-  departmentName: PropTypes.string,
-  getDepartment: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  isEditable: PropTypes.bool,
-  isFetching: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupActive: PropTypes.bool,
-  needSearchFetching: PropTypes.bool,
-  onMoveDepartment: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSelectLabel: PropTypes.func,
-  searchStr: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    title: PropTypes.string,
-    searchEmptyText: PropTypes.string,
-    searchErrorText: PropTypes.string,
-    placeholder: PropTypes.string
-  })
-};
+DepartmentDropDown.defaultProps = defaultProps;
+DepartmentDropDown.propTypes = propTypes;
 export default DepartmentDropDown;
-
 if (false) {
   DepartmentDropDown.docs = {
     folderName: 'List',

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

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  isEditable: true,
+  isPopupActive: true,
+  isNextOptions: false,
+  searchStr: '',
+  i18nKeys: {}
+};

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

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  departmentList: PropTypes.array,
+  departmentName: PropTypes.string,
+  getDepartment: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  isEditable: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupActive: PropTypes.bool,
+  needSearchFetching: PropTypes.bool,
+  onMoveDepartment: PropTypes.func,
+  onSearch: PropTypes.func,
+  onSearch: PropTypes.func,
+  onSelectLabel: PropTypes.func,
+  searchStr: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    title: PropTypes.string,
+    searchEmptyText: PropTypes.string,
+    searchErrorText: PropTypes.string,
+    placeholder: PropTypes.string
+  })
+};

package/es/list/Dot/Dot.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './Dot.module.css';
 export default class Dot extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       className,
@@ -15,13 +15,6 @@ export default class Dot extends Component {
       className: `${style.dot} ${style[spacingType]} ${className}`
     }, ".");
   }
-
 }
-Dot.propTypes = {
-  className: PropTypes.string,
-  spacingType: PropTypes.oneOf(['minimalList', 'list'])
-};
-Dot.defaultProps = {
-  spacingType: 'list',
-  className: ''
-};
+Dot.propTypes = propTypes;
+Dot.defaultProps = defaultProps;

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

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  spacingType: 'list',
+  className: ''
+};

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

@@ -0,0 +1,5 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  className: PropTypes.string,
+  spacingType: PropTypes.oneOf(['minimalList', 'list'])
+};

package/es/list/DotNew/DotNew.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './DotNew.module.css';
 export default class DotNew extends Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       className,
@@ -17,17 +17,9 @@ export default class DotNew extends Component {
       "data-title": dataTitle
     });
   }
-
 }
-DotNew.propTypes = {
-  className: PropTypes.string,
-  dataTitle: PropTypes.string,
-  size: PropTypes.string
-};
-DotNew.defaultProps = {
-  size: 'medium'
-};
-
+DotNew.propTypes = propTypes;
+DotNew.defaultProps = defaultProps;
 if (false) {
   DotNew.docs = {
     folderName: 'List',

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

@@ -7,13 +7,13 @@
   height: var(--zd_size5);
 }
 .container{
-  border-radius: 50%;
-  background-color: var(--zdt_dotnew_default_bg);
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  box-shadow: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
    /* 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: 0 0 15px 1px var(--zdt_dotnew_default_box_shadow);
 }
 @keyframes dotAnimation {
   to {

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

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  size: 'medium'
+};

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

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  className: PropTypes.string,
+  dataTitle: PropTypes.string,
+  size: PropTypes.string
+};

package/es/list/GridStencils/GridStencils.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { propTypes } from './props/propTypes';
 import style from './GridStencils.module.css';
 export default class GridStencils extends React.Component {
   render() {
@@ -24,15 +24,8 @@ export default class GridStencils extends React.Component {
       className: `${style.lineBar3} ${style.stenListBAr}`
     })) : '');
   }
-
 }
-GridStencils.propTypes = {
-  from: PropTypes.string,
-  isThreeLayout: PropTypes.bool,
-  lineBar: PropTypes.string,
-  styles: PropTypes.object
-};
-
+GridStencils.propTypes = propTypes;
 if (false) {
   GridStencils.docs = {
     folderName: 'List',