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

package/es/Select/docs/SelectWithAvatar__default.docs.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import SelectWithAvatar from '../SelectWithAvatar';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+let option = [{
+  text: 'Option 1',
+  id: '1'
+}, {
+  text: 'Option 2',
+  id: '2'
+}, {
+  text: 'Option 3',
+  id: '3'
+}, {
+  text: 'Option 4',
+  id: '4'
+}, {
+  text: 'Option 5',
+  id: '5'
+}, {
+  text: 'Option 6',
+  id: '6'
+}, {
+  text: 'Option 7',
+  id: '7'
+}, {
+  text: 'Option 8',
+  id: '8'
+}, {
+  text: 'Option 9',
+  id: '9'
+}, {
+  text: 'Option 10',
+  id: '10'
+}];
+export default class SelectWithAvatar__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    let {
+      value
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '360px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      onRemove: () => {
+        this.handleChange('');
+      }
+    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      isReadOnly: true
+    }), /*#__PURE__*/React.createElement(SelectWithAvatar, {
+      options: option,
+      onChange: this.handleChange,
+      selectedValue: value,
+      needSearch: true,
+      emptyMessage: "No matches found",
+      placeHolder: "PlaceHolder",
+      isDefaultSelectValue: false,
+      isDisabled: true
+    })));
+  }
+
+}
+
+if (false) {
+  SelectWithAvatar__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

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/Stencils.module.css

@@ -14,18 +14,28 @@
   background-size: 800px 1px;
 }
 [dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
+  animation-duration: var(--zd_transition10);
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-ltr ;
   animation-timing-function: linear;
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name:  placeHolderShimmer-ltr ;
+  -webkit-animation-timing-function: linear;
 }
 [dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-duration: var(--zd_transition10);
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
+  animation-name:  placeHolderShimmer-rtl ;
   animation-timing-function: linear;
+  -webkit-animation-duration: var(--zd_transition10);
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-name:  placeHolderShimmer-rtl ;
+  -webkit-animation-timing-function: linear;
 }
 @keyframes placeHolderShimmer-ltr {
   0% {

package/es/Stencils/__tests__/Stencils.spec.js

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

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
+  };
+}