@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-253

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

@@ -1,134 +0,0 @@
-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

@@ -1,283 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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: ' '
-  };
-}