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

package/es/Select/docs/SelectWithIcon__default.docs.js

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import SelectWithIcon from '../SelectWithIcon';
+export default class SelectWithIcon__default extends Component {
+  constructor(props) {
+    super(props);
+    this.options = [{
+      value: 'Bar',
+      id: 'bar',
+      iconName: 'ZD-RP-clrBar',
+      iconSize: '13'
+    }, {
+      value: 'Stacked Bar',
+      id: 'stackedBar',
+      iconName: 'ZD-RP-clrStackedBar',
+      iconSize: '13'
+    }, {
+      value: 'Percentage Bar',
+      id: 'percentageBar',
+      iconName: 'ZD-RP-clrPercentageBar',
+      iconSize: '13'
+    }, {
+      value: 'Pie',
+      id: 'pie',
+      iconName: 'ZD-RP-clrPie',
+      iconSize: '13'
+    }, {
+      value: 'Funnel',
+      id: 'funnel',
+      iconName: 'ZD-RP-clrFunnel',
+      iconSize: '13'
+    }, {
+      value: 'Line',
+      id: 'line',
+      iconName: 'ZD-RP-clrLine',
+      iconSize: '13'
+    }, {
+      value: 'Multiple Line',
+      id: 'multipleLine',
+      iconName: 'ZD-RP-clrMultiline',
+      iconSize: '13'
+    }, {
+      value: 'Table',
+      id: 'table',
+      iconName: 'ZD-RP-clrTableReport',
+      iconSize: '13'
+    }];
+    this.state = {
+      selectedValue: this.options[0].value,
+      selectedId: this.options[0].id,
+      selectedIcon: this.options[0].iconName,
+      selectedIconSize: this.options[0].iconSize
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(selectedId, selectedValue, index, e) {
+    this.setState({
+      selectedValue,
+      selectedId,
+      selectedIcon: this.options[index].iconName,
+      selectedIconSize: this.options[index].iconSize
+    });
+  }
+
+  render() {
+    let {
+      selectedValue,
+      selectedId,
+      selectedIconSize,
+      selectedIcon
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      isDisabled: true,
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px',
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: this.options,
+      needSearch: true,
+      searchPlaceHolder: "Search",
+      searchEmptyMessage: 'No matches found',
+      selectedValue: selectedValue,
+      onChange: this.handleChange,
+      placeHolder: "Placeholder",
+      selectedId: selectedId,
+      needTick: true,
+      textBoxVariant: "primary",
+      isReadOnly: true,
+      iconSize: selectedIconSize,
+      iconName: selectedIcon
+    })));
+  }
+
+}
+
+if (false) {
+  SelectWithIcon__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/Select/docs/Select__default.docs.js

@@ -0,0 +1,288 @@
+import React from 'react';
+import Select from '../Select';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '../../Layout';
+let option = [{
+  text: 'Apple',
+  id: 0
+}, {
+  text: 'Banana',
+  id: '1'
+}, {
+  text: 'Blackberries',
+  id: '2'
+}, {
+  text: 'Custard-Apple',
+  id: '3'
+}, {
+  text: 'Guava',
+  id: '4'
+}, {
+  text: 'Grapes',
+  id: '5'
+}, {
+  text: 'Jackfruit',
+  id: '6'
+}, {
+  text: 'Jujube Fruit',
+  id: '7'
+}, {
+  text: 'Lemon',
+  id: '8'
+}, {
+  text: 'Papaya',
+  id: '9'
+}, {
+  text: 'Pineapple',
+  id: '10'
+}];
+let customOption = [{
+  text: 'Apple',
+  id: 0,
+  listItemProps: {
+    style: {
+      'color': 'red'
+    }
+  }
+}, {
+  text: 'Banana',
+  id: '1',
+  listItemProps: {
+    style: {
+      'color': 'orange'
+    }
+  }
+}, {
+  text: 'Blackberries',
+  id: '2',
+  listItemProps: {
+    style: {
+      'color': 'blue'
+    }
+  }
+}, {
+  text: 'Guava',
+  id: '3'
+}, {
+  text: 'Grapes',
+  id: '4'
+}, {
+  text: 'Jackfruit',
+  id: '5'
+}];
+export default class Select__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.customChildren = this.customChildren.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  customChildren() {
+    let serach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return /*#__PURE__*/React.createElement("div", null, serach.searchString, "Custom Children");
+  }
+
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Props"), /*#__PURE__*/React.createElement(Select, {
+      options: customOption,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      },
+      customProps: {
+        listItemProps: {
+          style: {
+            'color': 'green'
+          }
+        },
+        TextBoxProps: {
+          style: {
+            'color': 'brown'
+          }
+        },
+        DropdownSearchTextBoxProps: {
+          style: {
+            'color': 'purple'
+          }
+        }
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isDisabled",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isReadOnly: true
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Children"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getChildren: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Footer"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getFooter: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Empty"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      getCustomEmptyState: this.customChildren
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "isParentBased"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isParentBased: false
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, "isParentBased"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "isReadOnly",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      isParentBased: false,
+      isReadOnly: true
+    }))), /*#__PURE__*/React.createElement("div", null, "TextBoxIcon Children"), /*#__PURE__*/React.createElement(Select, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      searchBoxPlaceHolder: "Search",
+      isDefaultSelectValue: false,
+      i18nKeys: {
+        loadingText: 'Loading',
+        emptyText: 'emptyText',
+        noMoreText: 'noMoreText',
+        searchEmptyText: 'searchEmptyText',
+        TextBoxIcon_i18n: {
+          clearText: 'Clear Data'
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    })))));
+  }
+
+}
+
+if (false) {
+  Select__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/Stencils/docs/Stencils__custom.docs.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Stencils from '../Stencils';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Stencils__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      customClass: style.squareStencil,
+      size: "small"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      customClass: style.squareStencil,
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      customClass: style.customStencil,
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      customClass: style.customStencil,
+      size: "default"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      customClass: style.customStencil,
+      shape: "circle",
+      size: "small"
+    }))));
+  }
+
+}
+
+if (false) {
+  Stencils__custom.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/Stencils/docs/Stencils__default.docs.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Stencils from '../Stencils';
+import style from '../../common/docStyle.module.css';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Stencils__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      size: "small"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      size: "large"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      size: "default"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      shape: "circle",
+      size: "small"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      shape: "circle",
+      size: "medium"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: style.m10
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Stencils, {
+      shape: "circle",
+      size: "large"
+    }))));
+  }
+
+}
+
+if (false) {
+  Stencils__default.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/Switch/docs/Switch__custom.docs.js

@@ -0,0 +1,153 @@
+import React from 'react';
+import Switch from '../Switch';
+import styles from '../../common/docStyle.module.css';
+export default class Switch__custom extends React.Component {
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase',
+      borderBottom: '1px solid #e3e6eb'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px 0'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test1",
+      name: "category"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test2",
+      name: "category",
+      checked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test3",
+      name: "category",
+      text: "Disabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test4",
+      name: "category",
+      checked: true,
+      text: "Enabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test5",
+      name: "category",
+      size: "small",
+      text: "Disabled",
+      labelSize: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "text6",
+      name: "category",
+      size: "small",
+      checked: true,
+      text: "Enabled",
+      labelSize: "small"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px 0'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test7",
+      name: "category",
+      checked: true,
+      disabled: true,
+      title: "disabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test8",
+      name: "category",
+      disabled: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      customClass: {
+        customSwitchWrap: styles.customSwitchWrap,
+        customSwitch: styles.customSwitch,
+        customLabel: styles.customLbl
+      },
+      id: "test9",
+      name: "category",
+      disabled: true,
+      size: "medium",
+      text: "Disabled"
+    }))));
+  }
+
+}
+
+if (false) {
+  Switch__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}