@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-239

package/es/TextBox/docs/TextBox__custom.docs.js

@@ -0,0 +1,43 @@
+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__custom 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",
+      customClass: style.customTextBox
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "readOnly",
+      isReadOnly: true,
+      needEffect: false,
+      value: "Readonly",
+      customClass: style.txtBoxReadOnly
+    }), /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: 150,
+      placeHolder: "disabled",
+      isDisabled: true,
+      needEffect: false,
+      value: "Disabled",
+      customClass: style.customTextBox
+    }))));
+  }
+
+}
+
+if (false) {
+  TextBox__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

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/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/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: ' '
+  };
+}