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

package/es/DropBox/docs/DropBox__custom.docs.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import DropBox from '../DropBox';
+import styles from '../../common/docStyle.module.css';
+export default class DropBox__custom extends Component {
+  render() {
+    let style = {
+      height: '80px',
+      width: '100px',
+      position: 'relative',
+      display: 'inline-block',
+      background: '#e6e5e5',
+      fontSize: '14px'
+    },
+        boxstyle = {
+      height: '100px',
+      textAlign: 'center',
+      fontSize: 'var(--zd_size20)'
+    },
+        containerStyle = {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      width: 'calc(33.3333333% - 300px)',
+      marginBottom: '150px',
+      marginLeft: '275px'
+    },
+        dropBoxStyle = {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      justifyContent: 'right'
+    };
+    let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        dropBoxStyle
+      }
+    }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
+      style: containerStyle,
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(DropBox, {
+      size: size,
+      isActive: true,
+      isModel: false,
+      customClass: {
+        customDropBox: styles.customDropbox,
+        customDropBoxWrap: styles.dropboxSize,
+        customMobileDropBox: styles.mobDropbox,
+        customMobileDropBoxWrap: styles.mobBg
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxstyle
+    }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
+  }
+
+}
+
+if (false) {
+  DropBox__custom.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/DropBox/docs/DropBox__customOrder.docs.js

@@ -0,0 +1,92 @@
+import React, { Component, Fragment } from 'react';
+import Popup from '../../Popup/Popup';
+import DropBox from '../DropBox';
+
+class DropBox__customOrderComp extends Component {
+  constructor(props) {
+    super(props);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+
+  togglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup && togglePopup(e, 'bottomLeftToRight');
+  }
+
+  render() {
+    let layoutStyle = {
+      padding: 20
+    };
+    let containerStyle = {
+      position: 'relative',
+      display: 'inline-block'
+    };
+    let targetStyle = {
+      height: '40px',
+      width: '40px',
+      borderRadius: '50%',
+      position: 'relative',
+      background: '#e6e5e5',
+      cursor: 'pointer'
+    };
+    let boxStyle = {
+      height: '300px'
+    };
+    let {
+      isPopupOpen,
+      isPopupReady,
+      position,
+      removeClose,
+      getContainerRef,
+      getTargetRef,
+      isAbsolutePositioningNeeded,
+      targetOffset,
+      positionsOffset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: layoutStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: targetStyle,
+      onClick: this.togglePopup,
+      ref: getTargetRef
+    }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      size: "large",
+      isActive: isPopupReady,
+      boxPosition: position,
+      onClick: removeClose,
+      getRef: getContainerRef,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      animationStyle: "bounce",
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    })) : null)), /*#__PURE__*/React.createElement("div", {
+      "data-portal": "portal1"
+    }));
+  }
+
+}
+
+DropBox__customOrderComp.displayName = 'DropBox__customOrder';
+let DropBox__customOrder = Popup(DropBox__customOrderComp);
+DropBox__customOrder.defaultProps = {
+  isAbsolutePositioningNeeded: false,
+  customOrder: ['bottomCenter', 'bottomLeftToRight', 'bottomRightToLeft', 'topLeftToRight', 'topRightToLeft', 'rightCenter', 'rightBottomToTop', 'leftTopToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop']
+};
+
+if (false) {
+  DropBox__customOrder.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}
+
+export default DropBox__customOrder;

package/es/DropBox/docs/DropBox__fixedPosition.docs.js

@@ -0,0 +1,91 @@
+import React, { Component, Fragment } from 'react';
+import Popup from '../../Popup/Popup';
+import DropBox from '../DropBox';
+
+class DropBox__fixedPositionComp extends Component {
+  constructor(props) {
+    super(props);
+    this.togglePopup = this.togglePopup.bind(this);
+  }
+
+  togglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup && togglePopup(e);
+  }
+
+  render() {
+    let layoutStyle = {
+      padding: 20
+    };
+    let containerStyle = {
+      position: 'relative',
+      display: 'inline-block'
+    };
+    let targetStyle = {
+      height: '40px',
+      width: '40px',
+      borderRadius: '50%',
+      position: 'relative',
+      background: '#e6e5e5',
+      cursor: 'pointer'
+    };
+    let boxStyle = {
+      height: '300px'
+    };
+    let {
+      isPopupOpen,
+      isPopupReady,
+      position,
+      removeClose,
+      getContainerRef,
+      getTargetRef,
+      isAbsolutePositioningNeeded,
+      targetOffset,
+      positionsOffset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: layoutStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: containerStyle
+    }, /*#__PURE__*/React.createElement("div", {
+      style: targetStyle,
+      onClick: this.togglePopup,
+      ref: getTargetRef
+    }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+      size: "large",
+      isActive: isPopupReady,
+      boxPosition: position,
+      onClick: removeClose,
+      getRef: getContainerRef,
+      isArrow: false,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      animationStyle: "bounce",
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset
+    }, /*#__PURE__*/React.createElement("div", {
+      style: boxStyle
+    })) : null)), /*#__PURE__*/React.createElement("div", {
+      "data-portal": "portal1"
+    }));
+  }
+
+}
+
+DropBox__fixedPositionComp.displayName = 'DropBox__fixedPosition';
+let DropBox__fixedPosition = Popup(DropBox__fixedPositionComp);
+DropBox__fixedPosition.defaultProps = {
+  isAbsolutePositioningNeeded: false
+};
+
+if (false) {
+  DropBox__fixedPosition.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}
+
+export default DropBox__fixedPosition;

package/es/DropBox/docs/DropBox__position.docs.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import DropBox from '../DropBox';
+export default class DropBox__position extends Component {
+  render() {
+    let style = {
+      height: '80px',
+      width: '100px',
+      position: 'relative',
+      display: 'inline-block',
+      background: '#e6e5e5',
+      fontSize: '14px'
+    },
+        boxstyle = {
+      height: '100px',
+      listStyleType: 'none',
+      padding: '5px 10px',
+      margin: 0
+    },
+        direction = {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+        position = {
+      display: 'flex',
+      justifyContent: 'space-around',
+      height: '300px',
+      alignItems: 'center'
+    },
+        containerStyle = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+        title = {
+      fontSize: '25px',
+      color: 'rgba(0, 0, 0, 0.7)',
+      textAlign: 'center',
+      padding: '0 15px',
+      margin: '15px 0'
+    };
+    let directions = [{
+      direction: 'Bottom',
+      position: ['bottomLeft', 'bottomCenter', 'bottomRight']
+    }, {
+      direction: 'Top',
+      position: ['topLeft', 'topCenter', 'topRight']
+    }, {
+      direction: 'Left',
+      position: ['leftTop', 'leftCenter', 'leftBottom']
+    }, {
+      direction: 'Right',
+      position: ['rightTop', 'rightCenter', 'rightBottom']
+    }];
+    return /*#__PURE__*/React.createElement("div", null, directions.map((item, i) => /*#__PURE__*/React.createElement("div", {
+      style: direction,
+      key: `direction${i}-${item.direction}`
+    }, /*#__PURE__*/React.createElement("div", {
+      style: title
+    }, item.direction), /*#__PURE__*/React.createElement("div", {
+      style: position
+    }, item.position.map((boxPos, j) => {
+      return /*#__PURE__*/React.createElement("div", {
+        style: containerStyle,
+        key: `position${j}-${boxPos}`
+      }, /*#__PURE__*/React.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React.createElement(DropBox, {
+        size: "xsmall",
+        isAnimate: true,
+        boxPosition: boxPos,
+        isActive: true
+      }, /*#__PURE__*/React.createElement("ul", {
+        style: boxstyle
+      }, /*#__PURE__*/React.createElement("li", null, "boxPosition - ", boxPos)))));
+    })))));
+  }
+
+}
+
+if (false) {
+  DropBox__position.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/DropBox/docs/DropBox__size.docs.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import DropBox from '../DropBox';
+export default class DropBox__size extends Component {
+  render() {
+    let style = {
+      height: '80px',
+      width: '100px',
+      position: 'relative',
+      display: 'inline-block',
+      background: '#e6e5e5',
+      fontSize: '14px'
+    },
+        boxstyle = {
+      height: '100px',
+      textAlign: 'center',
+      fontSize: 'var(--zd_size20)',
+      listStyleType: 'none',
+      padding: 0,
+      margin: 0
+    },
+        containerStyle = {
+      display: 'inline-block',
+      verticalAlign: 'top',
+      width: 'calc(33.3333333% - 300px)',
+      marginBottom: '150px',
+      marginLeft: '275px'
+    },
+        dropBoxStyle = {
+      display: 'flex',
+      flexWrap: 'wrap',
+      flexDirection: 'row',
+      justifyContent: 'right'
+    };
+    let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'default'];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        dropBoxStyle
+      }
+    }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
+      style: containerStyle,
+      key: i
+    }, /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement(DropBox, {
+      size: size,
+      isActive: true
+    }, /*#__PURE__*/React.createElement("ul", {
+      style: boxstyle
+    }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
+  }
+
+}
+
+if (false) {
+  DropBox__size.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/DropDown/docs/DropDownHeading__custom.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DropDownHeading from '../DropDownHeading';
+import styles from '../../common/docStyle.module.css';
+export default class DropDownHeading__custom extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownHeading, {
+      customClass: styles.dropdownheading,
+      text: "DropDownHeading"
+    }), /*#__PURE__*/React.createElement(DropDownHeading, {
+      customClass: styles.dropdownheading,
+      palette: "dark",
+      text: "DropDownHeading"
+    }));
+  }
+
+}
+
+if (false) {
+  DropDownHeading__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/DropDown/docs/DropDownHeading__default.docs.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import DropDownHeading from '../DropDownHeading';
+export default class DropDownHeading__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading"
+    }), /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading1"
+    }, /*#__PURE__*/React.createElement("span", null, "Test")), /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: "DropDownHeading2"
+    }));
+  }
+
+}
+
+if (false) {
+  DropDownHeading__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/es/Label/__tests__/Label.spec.js

@@ -1,5 +1,3 @@
-import "core-js/modules/web.url.to-json";
-
 /* eslint-disable no-undef */
 import React from 'react';
 import Label from '../Label';

package/es/Label/docs/Label__clipped.docs.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import Label from '../Label';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Label__clipped extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        width: '200px'
+      }
+    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
+      id: "label8",
+      size: "medium",
+      clipped: true
+    })));
+  }
+
+}
+
+if (false) {
+  Label__clipped.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Label/docs/Label__custom.docs.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import Label from '../Label';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import style from '../../common/docStyle.module.css';
+export default class Label__custom extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
+      customClass: style.customLbl,
+      text: "Label",
+      id: "label4",
+      size: "medium",
+      palette: "default"
+    }), /*#__PURE__*/React.createElement(Label, {
+      customClass: style.customLbl,
+      text: "Label",
+      id: "label5",
+      size: "medium",
+      palette: "primary"
+    })));
+  }
+
+}
+
+if (false) {
+  Label__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Label/docs/Label__palette.docs.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import Label from '../Label';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Label__palette extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label4",
+      size: "medium",
+      palette: "default"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label5",
+      size: "medium",
+      palette: "primary"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label6",
+      size: "medium",
+      palette: "secondary"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label7",
+      size: "medium",
+      palette: "danger"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label7",
+      size: "medium",
+      palette: "mandatory"
+    })));
+  }
+
+}
+
+if (false) {
+  Label__palette.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Label/docs/Label__size.docs.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import Label from '../Label';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Label__size extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label1",
+      size: "small"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label2",
+      size: "medium"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Label",
+      id: "label3",
+      size: "large"
+    })));
+  }
+
+}
+
+if (false) {
+  Label__size.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Label/docs/Label__type.docs.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Label from '../Label';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class Label__type extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(Label, {
+      text: "Lorem Ipsum is simply dummy text ",
+      id: "label10",
+      size: "small",
+      type: "title"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Lorem Ipsum is simply dummy text ",
+      id: "label11",
+      size: "medium",
+      type: "subtitle"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Lorem Ipsum is simply dummy text ",
+      id: "label12",
+      size: "medium",
+      type: "subtitle"
+    }), /*#__PURE__*/React.createElement(Label, {
+      text: "Lorem Ipsum is simply dummy text ",
+      id: "label12",
+      size: "medium",
+      type: "title"
+    })));
+  }
+
+}
+
+if (false) {
+  Label__type.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}