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

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

package/es/Switch/docs/Switch__default.docs.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import Switch from '../Switch';
+export default class Switch__default 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, {
+      id: "test1",
+      name: "category"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test2",
+      name: "category",
+      checked: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test3",
+      name: "category",
+      text: "Disabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test4",
+      name: "category",
+      checked: true,
+      text: "Enabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test5",
+      name: "category",
+      size: "small",
+      text: "Disabled",
+      labelSize: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      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, {
+      id: "test7",
+      name: "category",
+      checked: true,
+      disabled: true,
+      title: "disabled"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test8",
+      name: "category",
+      disabled: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Switch, {
+      id: "test9",
+      name: "category",
+      disabled: true,
+      size: "medium",
+      text: "Disabled"
+    }))));
+  }
+
+}
+
+if (false) {
+  Switch__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Tab/Tabs.js

@@ -14,12 +14,13 @@ import PropTypes from 'prop-types';
 import { remConvert, getTotalDimension, cs, bind, throttle } from '../utils/Common';
 import { Box, Container } from '../Layout';
 import Tab from './Tab';
-import DropBox from '../DropBox/DropBox';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
 import Icon from '@zohodesk/icons/lib/Icon';
 import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 class Tabs extends React.Component {
   constructor(props) {
@@ -390,6 +391,17 @@ class Tabs extends React.Component {
     togglePopup(e, boxPosition);
   }
 
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
   renderTabs(mainTabs, moreTabs, isVirtual) {
     let {
       selectedTab,
@@ -463,51 +475,64 @@ class Tabs extends React.Component {
     }, MoreButtonProps), /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
-    })), isPopupOpen && /*#__PURE__*/React.createElement(DropBox, _extends({
-      isActive: isPopupReady,
-      isAnimate: true,
-      size: "medium",
-      customClass: {
-        customDropBoxWrap: `${moreContainerClass} ${popupClass}`
-      },
-      boxPosition: position,
-      getRef: getContainerRef,
-      isBoxPaddingNeed: true,
-      isArrow: false
-    }, DropBoxProps), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement("div", {
-      className: `${tabsStyle.menuBox} ${moreBoxClass}`,
-      onScroll: this.onScroll
-    }, React.Children.map(moreTabs, child => {
-      if (!child) {
-        return null;
-      }
-
+    })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: "Helmet"
+    }, _ref2 => {
       let {
-        text,
-        id,
-        title,
-        isLink,
-        href,
-        children,
-        dataId
-      } = child.props;
-      const value = text ? text : showTitleInMoreOptions ? title : null;
-      return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
-        key: id,
-        value: value,
-        onClick: this.moreTabSelect,
-        id: id,
-        title: title || text,
-        isLink: isLink,
-        href: href,
-        autoHover: true,
+        tabletMode
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+        isActive: isPopupReady,
+        isAnimate: true,
+        size: "medium",
         customClass: {
-          customListItem: menuItemClass
+          customDropBoxWrap: `${moreContainerClass} ${popupClass}`
         },
-        target: "self",
-        dataId: `${dataId}_Tab`
-      }, ListItemProps), !showTitleInMoreOptions ? children : null);
-    })))) : null);
+        boxPosition: position,
+        getRef: getContainerRef,
+        isBoxPaddingNeed: true,
+        isArrow: false
+      }, DropBoxProps, {
+        isResponsivePadding: true
+      }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        shrink: true,
+        scroll: "vertical",
+        className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
+        onScroll: this.onScroll
+      }, React.Children.map(moreTabs, child => {
+        if (!child) {
+          return null;
+        }
+
+        let {
+          text,
+          id,
+          title,
+          isLink,
+          href,
+          children,
+          dataId
+        } = child.props;
+        const value = text ? text : showTitleInMoreOptions ? title : null;
+        return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
+          key: id,
+          value: value,
+          onClick: this.moreTabSelect,
+          id: id,
+          title: title || text,
+          isLink: isLink,
+          href: href,
+          autoHover: true,
+          customClass: {
+            customListItem: menuItemClass
+          },
+          target: "self",
+          dataId: `${dataId}_Tab`
+        }, ListItemProps), !showTitleInMoreOptions ? children : null);
+      })));
+    })) : null);
   }
 
   render() {

package/es/Tab/Tabs.module.css

@@ -118,13 +118,14 @@
 }
 .menuBox {
   max-height: var(--zd_size220);
-  composes: oflowy from '../common/common.module.css';
 }
 
+
 [dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
 
+
 [dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
   left: calc(var(--tab_position_gap) * -1);
 }