@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-48

package/es/TextBox/docs/TextBox__default.docs.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      maxLength: 150,
+      placeHolder: "Input"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "readOnly",
+      isReadOnly: true,
+      needEffect: false,
+      value: "Readonly"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "disabled",
+      isDisabled: true,
+      needEffect: false,
+      value: "Disabled"
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBox__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__size.docs.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__size extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "small",
+      id: "small",
+      maxLength: "150",
+      placeHolder: "small",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "medium",
+      id: "medium",
+      maxLength: "150",
+      placeHolder: "medium",
+      size: "medium"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "xmedium",
+      id: "xmedium",
+      maxLength: "150",
+      placeHolder: "xmedium",
+      size: "xmedium"
+    })));
+  }
+
+}
+
+if (false) {
+  TextBox__size.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBox/docs/TextBox__variant.docs.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import TextBox from '../TextBox';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBox__variant extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Secondary",
+      variant: "default"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Primary",
+      variant: "primary"
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Secondary",
+      variant: "secondary"
+    })));
+  }
+
+}
+
+if (false) {
+  TextBox__variant.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBoxIcon/TextBoxIcon.js

@@ -100,7 +100,7 @@ export default class TextBoxIcon extends React.Component {
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       isCover: false,
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : style.readonly : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? needEffect ? style.effect : '' : style.effect} ${isActive || isFocus ? style.effectFocused : ''} ${customTBoxWrap} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -12,11 +12,8 @@
   composes: varClass;
   position: relative;
 }
-.disabled,.readonly {
-  --textboxicon_icon_cursor: not-allowed;
-}
-.disabled, .readonly {
-  cursor: not-allowed;
+.disabled {
+  composes: disabled from '../common/common.module.css';
 }
 .icon {
   composes: offSelection from '../common/common.module.css';

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBoxIcon from '../TextBoxIcon';
 import renderer from 'react-test-renderer'; // children: PropTypes.node,

package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import TextBoxIcon from '../TextBoxIcon';
+import Icon from '@zohodesk/icons/lib/Icon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class TextBoxIcon__custom extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "10"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.customTboxwrap,
+        customTBoxIcon: style.customTboxicon,
+        customTBoxLine: style.tBoxLine
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent",
+      value: "Search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.tBoxIconDisable,
+        customTBoxLine: style.tBoxLineDisable
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isDisabled",
+      value: "isDisabled",
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      customClass: {
+        customTextBox: style.customTbox,
+        customTBoxWrap: style.tBoxIconRead,
+        customTBoxLine: style.tBoxLineDisable
+      },
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isReadOnly",
+      value: "isReadOnly",
+      isReadOnly: true,
+      needEffect: true
+    })))));
+  }
+
+}
+
+if (false) {
+  TextBoxIcon__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import TextBoxIcon from '../TextBoxIcon';
+import style from '../../common/docStyle.module.css';
+import Icon from '@zohodesk/icons/lib/Icon';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class TextBoxIcon__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      className: `${style.w350} ${style.docspan}`
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down",
+      size: "10"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Agent",
+      value: "Search"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-search",
+      size: "13"
+    })), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isDisabled",
+      value: "isDisabled",
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement(TextBoxIcon, {
+      name: "input",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "isReadOnly",
+      value: "isReadOnly",
+      isReadOnly: true,
+      needEffect: true
+    })))));
+  }
+
+}
+
+if (false) {
+  TextBoxIcon__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Textarea from '../Textarea';
 import renderer from 'react-test-renderer';

package/es/Textarea/docs/Textarea__animated.docs.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__animated extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      animated: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      animated: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__animated.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__custom.docs.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import styles from '../../common/docStyle.module.css';
+export default class Textarea__custom extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {}
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Readonly",
+      isReadOnly: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.disabledTarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Disabled",
+      isDisabled: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      customClass: styles.customTextarea,
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      autoFocus: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__default.docs.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__default extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '350px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {}
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Readonly",
+      isReadOnly: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      text: "Disabled",
+      isDisabled: true,
+      needEffect: false
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      placeHolder: "TextArea",
+      id: "textarea",
+      maxLength: "100",
+      onChange: () => {},
+      size: "large",
+      autoFocus: true
+    }))));
+  }
+
+}
+
+if (false) {
+  Textarea__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Textarea/docs/Textarea__disabled.docs.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Textarea from '../Textarea';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Textarea__disabled extends Component {
+  render() {
+    let style = {
+      marginBottom: '20px',
+      width: '350px'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Textarea, {
+      value: "TextArea component description",
+      id: "textarea",
+      maxLength: 100,
+      onChange: () => {},
+      isDisabled: true
+    })));
+  }
+
+}
+
+if (false) {
+  Textarea__disabled.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Tooltip/Tooltip.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace";
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Tooltip.module.css';