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

package/es/errorstate/NoRequestFound/NoRequestFound.js

@@ -75,8 +75,8 @@ export default class NoRequestFound extends React.Component {
 }
 NoRequestFound.propTypes = propTypes;
 NoRequestFound.defaultProps = defaultProps;
-if (false) {
-  NoRequestFound.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+// if (__DOCS__) {
+//   NoRequestFound.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/PermissionPlay/PermissionPlay.js

@@ -74,8 +74,8 @@ export default class PermissionPlay extends React.Component {
 }
 PermissionPlay.propTypes = propTypes;
 PermissionPlay.defaultProps = defaultProps;
-if (false) {
-  PermissionPlay.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+// if (__DOCS__) {
+//   PermissionPlay.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/PermissionPlay/PermissionPlay.module.css

@@ -1,8 +1,8 @@
 .headtingText {
   font-family: var(--zd_semibold);
   font-size: var(--zd_font_size50);
-  margin-bottom: var(--zd_size5);
   letter-spacing: var(--zd_size1);
+  margin-bottom: var(--zd_size5);
 }
 .title,
 .headtingText,
@@ -13,9 +13,9 @@
   font-size: var(--zd_font_size30);
 }
 .lastBox {
-  margin: 0 auto;
   line-height: var(--zd_size24);
   font-size: var(--zd_font_size14);
+  margin: 0 auto;
   margin-bottom: var(--zd_size20);
 }
 .lineText {

package/es/errorstate/RequestUrlNotFound/RequestUrlNotFound.js

@@ -75,8 +75,8 @@ export default class RequestUrlNotFound extends React.Component {
 }
 RequestUrlNotFound.propTypes = propTypes;
 RequestUrlNotFound.defaultProps = defaultProps;
-if (false) {
-  RequestUrlNotFound.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+// if (__DOCS__) {
+//   RequestUrlNotFound.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/UnauthorizedLogin/UnauthorizedLogin.js

@@ -75,8 +75,8 @@ export default class UnauthorizedLogin extends React.Component {
 }
 UnauthorizedLogin.propTypes = propTypes;
 UnauthorizedLogin.defaultProps = defaultProps;
-if (false) {
-  UnauthorizedLogin.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+// if (__DOCS__) {
+//   UnauthorizedLogin.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/WillBack/WillBack.js

@@ -66,8 +66,8 @@ export default class WillBack extends React.Component {
 }
 WillBack.propTypes = propTypes;
 WillBack.defaultProps = defaultProps;
-if (false) {
-  WillBack.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+// if (__DOCS__) {
+//   WillBack.docs = {
+//     componentGroup: 'errorStates'
+//   };
+// }

package/es/errorstate/WillBack/WillBack.module.css

@@ -16,9 +16,7 @@
 .header {
   min-width: var(--zd_size450);
 }
-.imageContainer,
-.tabletImageContainer,
-.mobileImageContainer {
+.imageContainer, .tabletImageContainer, .mobileImageContainer {
   margin-top: calc(var(--zd_size70) * -1);
   margin-bottom: var(--zd_size30);
 }

package/es/form/fields/CheckBoxField/CheckBoxField.js

@@ -53,6 +53,7 @@ export default class CheckBoxField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       infoText,
@@ -93,7 +94,8 @@ export default class CheckBoxField extends PureComponent {
     }, LabelProps)));
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, isDirectCol && labelElement, /*#__PURE__*/React.createElement("div", {
       className: `${isDirectCol ? style.fieldContainer : style.checkboxFieldContainer} ${isDirectCol && labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
     }, /*#__PURE__*/React.createElement(Container, {
@@ -126,9 +128,10 @@ export default class CheckBoxField extends PureComponent {
 }
 CheckBoxField.propTypes = propTypes;
 CheckBoxField.defaultProps = defaultProps;
-if (false) {
-  CheckBoxField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   CheckBoxField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/CheckBoxField/props/defaultProps.js

@@ -7,5 +7,6 @@ export const defaultProps = {
   direction: 'row',
   lineClamp: '',
   customProps: {},
+  dataSelectorId: 'checkBoxField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/CurrencyField/CurrencyField.js

@@ -85,6 +85,7 @@ export default class CurrencyField extends PureComponent {
       labelPalette,
       labelCustomClass,
       htmlId,
+      dataSelectorId,
       lockedInfoText,
       isLocked,
       needReadOnlyStyle,
@@ -112,7 +113,8 @@ export default class CurrencyField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -165,9 +167,10 @@ export default class CurrencyField extends PureComponent {
 }
 CurrencyField.propTypes = propTypes;
 CurrencyField.defaultProps = defaultProps;
-if (false) {
-  CurrencyField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   CurrencyField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/CurrencyField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   needReadOnlyStyle: true,
   customProps: {},
   formatCurrency: () => {},
+  dataSelectorId: 'currencyField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/DateField/DateField.js

@@ -86,6 +86,7 @@ export default class DateField extends PureComponent {
       title,
       popupGroup,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -114,7 +115,8 @@ export default class DateField extends PureComponent {
     let getAriaId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -174,9 +176,10 @@ export default class DateField extends PureComponent {
 }
 DateField.propTypes = propTypes;
 DateField.defaultProps = defaultProps;
-if (false) {
-  DateField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   DateField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/DateField/props/defaultProps.js

@@ -14,5 +14,6 @@ export const defaultProps = {
   i18nKeys: {},
   dataId: 'dateField',
   customProps: {},
+  dataSelectorId: 'dateField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/FieldContainer/FieldContainer.js

@@ -22,7 +22,8 @@ export default class FieldContainer extends PureComponent {
       infoText,
       dataId,
       renderProps,
-      alignContainer
+      alignContainer,
+      dataSelectorId
     } = this.props;
     let {
       ePhiTitle = '',
@@ -37,7 +38,8 @@ export default class FieldContainer extends PureComponent {
     return /*#__PURE__*/React.createElement(Container, {
       align: alignContainer,
       alignBox: "row",
-      isCover: false
+      isCover: false,
+      dataSelectorId: dataSelectorId
     }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-info",
       iconClass: style.infoIcon,
@@ -57,9 +59,10 @@ export default class FieldContainer extends PureComponent {
 }
 FieldContainer.propTypes = propTypes;
 FieldContainer.defaultProps = defaultProps;
-if (false) {
-  FieldContainer.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   FieldContainer.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/FieldContainer/props/defaultProps.js

@@ -2,5 +2,6 @@ import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
 export const defaultProps = {
   ...FieldCommonDefaultProps(),
   renderProps: {},
-  alignContainer: 'vertical'
+  alignContainer: 'vertical',
+  dataSelectorId: 'fieldContainer'
 };

package/es/form/fields/Fields.module.css

@@ -34,15 +34,19 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  padding-left: var(--zd_size6);
   composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   line-height: normal;
 }
+[dir=ltr] .checkboxText {
+  padding-left: var(--zd_size6);
+}
+[dir=rtl] .checkboxText {
+  padding-right: var(--zd_size6);
+}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled,
-.readonly {
+.disabled, .readonly {
   cursor: not-allowed;
 }
 .cbTextReadonly,
@@ -50,12 +54,18 @@
 .readonly .fieldLabel {
   --label_cursor: not-allowed;
 }
-.radio {
+[dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;
 }
-.duration {
+[dir=rtl] .radio {
+  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32);
+}
+[dir=ltr] .duration {
   margin-right: var(--zd_size15);
 }
+[dir=rtl] .duration {
+  margin-left: var(--zd_size15);
+}
 .durationWidth {
   width: var(--zd_size94);
 }
@@ -69,8 +79,8 @@
 }
 .phoneIcon {
   color: var(--zdt_fields_phoneicon_icon);
-  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   display: inline-block;
+  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10);
   cursor: pointer;
 }
 .phoneIcon:hover {
@@ -89,9 +99,14 @@
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  margin-left: var(--zd_size5);
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
 }
+[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
+  margin-right: var(--zd_size5);
+}
 /* .infoIcon {
   opacity: 0;
   visibility: hidden;
@@ -108,15 +123,25 @@
 }
 .timeFormat {
   font-size: var(--zd_font_size11);
-  margin-left: var(--zd_size4);
   color: var(--zdt_fields_lockicon_icon);
 }
+[dir=ltr] .timeFormat {
+  margin-left: var(--zd_size4);
+}
+[dir=rtl] .timeFormat {
+  margin-right: var(--zd_size4);
+}
 .newTab {
-  margin-left: var(--zd_size6);
-  cursor: pointer;
   color: var(--zdt_fields_lockicon_icon);
   font-size: 0;
   display: none;
+  cursor: pointer;
+}
+[dir=ltr] .newTab {
+  margin-left: var(--zd_size6);
+}
+[dir=rtl] .newTab {
+  margin-right: var(--zd_size6);
 }
 .newTab:hover {
   color: var(--zdt_fields_phoneicon_icon);
@@ -131,18 +156,28 @@
 }
 .labelMandatory:after {
   content: '*';
-  padding-left: var(--zd_size2);
   color: var(--zdt_fields_lockicon_hover_icon);
 }
+[dir=ltr] .labelMandatory:after {
+  padding-left: var(--zd_size2);
+}
+[dir=rtl] .labelMandatory:after {
+  padding-right: var(--zd_size2);
+}
 .ePhiTag {
   composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
+  font-size: var(--zd_font_size12);
+  height: var(--zd_size18);
+  line-height: var(--zd_size18);
   background-color: var(--zdt_fields_phitag_bg);
   border: 1px solid var(--zdt_fields_phitag_border);
-  font-size: var(--zd_font_size12);
   padding: 0 var(--zd_size5);
   border-radius: var(--zd_size3);
+}
+[dir=ltr] .ePhiTag {
   margin-left: var(--zd_size8);
-  height: var(--zd_size18);
-  line-height: var(--zd_size18);
+}
+[dir=rtl] .ePhiTag {
+  margin-right: var(--zd_size8);
 }

package/es/form/fields/MultiSelectField/MultiSelectField.js

@@ -98,6 +98,7 @@ export default class MultiSelectField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       onKeyDown,
@@ -132,7 +133,8 @@ export default class MultiSelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -199,9 +201,10 @@ export default class MultiSelectField extends PureComponent {
 }
 MultiSelectField.propTypes = propTypes;
 MultiSelectField.defaultProps = defaultProps;
-if (false) {
-  MultiSelectField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   MultiSelectField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/MultiSelectField/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   labelPalette: 'default',
   customProps: {},
   i18nKeys: {},
+  dataSelectorId: 'multiSelectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/PhoneField/PhoneField.js

@@ -77,6 +77,7 @@ export default class PhoneField extends PureComponent {
       title,
       onBlur,
       dataId,
+      dataSelectorId,
       onKeyDown,
       placeHolder,
       infoText,
@@ -119,7 +120,8 @@ export default class PhoneField extends PureComponent {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
@@ -170,9 +172,10 @@ export default class PhoneField extends PureComponent {
 }
 PhoneField.propTypes = propTypes;
 PhoneField.defaultProps = defaultProps;
-if (false) {
-  PhoneField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   PhoneField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/PhoneField/props/defaultProps.js

@@ -11,5 +11,6 @@ export const defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'phoneField'
 };

package/es/form/fields/RadioField/RadioField.js

@@ -40,6 +40,7 @@ export default class RadioField extends PureComponent {
       selectedValue,
       isActive,
       dataId,
+      dataSelectorId,
       validationRuleMessage,
       validationRulePalette,
       isReadOnly,
@@ -54,7 +55,8 @@ export default class RadioField extends PureComponent {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
       text: labelName,
       size: "medium",
@@ -103,9 +105,9 @@ export default class RadioField extends PureComponent {
 }
 RadioField.propTypes = propTypes;
 RadioField.defaultProps = defaultProps;
-if (false) {
-  RadioField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+// if (__DOCS__) {
+//   RadioField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/RadioField/props/defaultProps.js

@@ -7,5 +7,6 @@ export const defaultProps = {
   labelSize: 'medium',
   labelPalette: 'default',
   isActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'radioField'
 };

package/es/form/fields/SelectField/SelectField.js

@@ -71,6 +71,7 @@ export default class SelectField extends PureComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       fieldClass,
       validationRuleMessage,
       validationRulePalette,
@@ -106,7 +107,8 @@ export default class SelectField extends PureComponent {
     let uniqueId = htmlId ? htmlId : this.getNextId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
       infoText: infoText,
       isLocked: isLocked,
@@ -172,9 +174,10 @@ export default class SelectField extends PureComponent {
 }
 SelectField.propTypes = propTypes;
 SelectField.defaultProps = defaultProps;
-if (false) {
-  SelectField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   SelectField.docs = {
+//     componentGroup: 'Form Fields',
+//     folderName: 'General'
+//   };
+// }

package/es/form/fields/SelectField/props/defaultProps.js

@@ -13,5 +13,6 @@ export const defaultProps = {
   isDefaultSelectValue: true,
   placeHolder: '',
   customProps: {},
+  dataSelectorId: 'selectField',
   ...FieldCommonDefaultProps()
 };

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -127,7 +127,8 @@ export default class TagsMultiSelect extends React.Component {
       htmlId,
       boxSize,
       onSelectTag,
-      clickableTag
+      clickableTag,
+      dataSelectorId
     } = this.props;
     let {
       showAll
@@ -137,7 +138,8 @@ export default class TagsMultiSelect extends React.Component {
       className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
               ${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
       onClick: stopBubbling,
-      "data-id": `${dataId}_tagsContainer`
+      "data-id": `${dataId}_tagsContainer`,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "vertical",
@@ -270,8 +272,9 @@ export default class TagsMultiSelect extends React.Component {
 }
 TagsMultiSelect.propTypes = propTypes;
 TagsMultiSelect.defaultProps = defaultProps;
-if (false) {
-  TagsMultiSelect.docs = {
-    componentGroup: 'TagsMultiSelect'
-  };
-}
+
+// if (__DOCS__) {
+//   TagsMultiSelect.docs = {
+//     componentGroup: 'TagsMultiSelect'
+//   };
+// }