@zohodesk/components 1.0.0-temp-67 → 1.0.0-temp-350

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

@@ -1,96 +1,78 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: var(--zd_size5);
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer-ltr {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: var(--zd_size5);
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: var(--zd_size5);
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  animation-name: placeHolderShimmer;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+  background-size: 800px 1px;
+}
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: var(--zd_size5);
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

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

@@ -1,49 +1,49 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stencils component should the palette is primary 1`] = `
-<div
-  className="rectangular medium primary"
-/>
-`;
-
-exports[`Stencils component should the palette is secondary 1`] = `
-<div
-  className="rectangular medium secondary"
-/>
-`;
-
-exports[`Stencils component should the shape is circle 1`] = `
-<div
-  className="circle cdefault default"
-/>
-`;
-
-exports[`Stencils component should the shape is rect 1`] = `
-<div
-  className="rectangular default default"
-/>
-`;
-
-exports[`Stencils component should the size is default 1`] = `
-<div
-  className="rectangular default default"
-/>
-`;
-
-exports[`Stencils component should the size is large 1`] = `
-<div
-  className="rectangular large default"
-/>
-`;
-
-exports[`Stencils component should the size is medium 1`] = `
-<div
-  className="rectangular small default"
-/>
-`;
-
-exports[`Stencils component should the size is small 1`] = `
-<div
-  className="rectangular small default"
-/>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stencils component should the palette is primary 1`] = `
+<div
+  className="rectangular medium primary"
+/>
+`;
+
+exports[`Stencils component should the palette is secondary 1`] = `
+<div
+  className="rectangular medium secondary"
+/>
+`;
+
+exports[`Stencils component should the shape is circle 1`] = `
+<div
+  className="circle cdefault default"
+/>
+`;
+
+exports[`Stencils component should the shape is rect 1`] = `
+<div
+  className="rectangular default default"
+/>
+`;
+
+exports[`Stencils component should the size is default 1`] = `
+<div
+  className="rectangular default default"
+/>
+`;
+
+exports[`Stencils component should the size is large 1`] = `
+<div
+  className="rectangular large default"
+/>
+`;
+
+exports[`Stencils component should the size is medium 1`] = `
+<div
+  className="rectangular small default"
+/>
+`;
+
+exports[`Stencils component should the size is small 1`] = `
+<div
+  className="rectangular small default"
+/>
+`;

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