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

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/Tab.js

@@ -22,32 +22,33 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-export default function Tab({
-  id,
-  style,
-  text,
-  children,
-  className,
-  dataId,
-  title,
-  titlePosition,
-  activeClass,
-  href,
-  isLink,
-  isDisabled,
-  tourId,
-  onClick,
-  isActive,
-  getTabRef,
-  onSelect,
-  type,
-  isAnimate,
-  needBorder,
-  needAppearance,
-  align,
-  isVirtual,
-  customProps
-}) {
+export default function Tab(_ref) {
+  let {
+    id,
+    style,
+    text,
+    children,
+    className,
+    dataId,
+    title,
+    titlePosition,
+    activeClass,
+    href,
+    isLink,
+    isDisabled,
+    tourId,
+    onClick,
+    isActive,
+    getTabRef,
+    onSelect,
+    type,
+    isAnimate,
+    needBorder,
+    needAppearance,
+    align,
+    isVirtual,
+    customProps
+  } = _ref;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();

package/es/Tab/TabContent.js

@@ -4,20 +4,23 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = ({
-  children,
-  scroll,
-  dataId,
-  id
-}) => /*#__PURE__*/React.createElement(Container, {
-  className: style.container,
-  scroll: scroll,
-  dataId: `${dataId}_TabContent`,
-  isScrollAttribute: true,
-  "aria-labelledby": id,
-  tabindex: "0",
-  role: "tabpanel"
-}, children);
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "0",
+    role: "tabpanel"
+  }, children);
+};
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,20 +3,23 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = ({
-  style,
-  className,
-  children,
-  dataId,
-  selectedTab,
-  onScroll
-}) => /*#__PURE__*/React.createElement(Box, {
-  flexible: true,
-  style: style,
-  dataId: dataId,
-  className: className,
-  onScroll: onScroll
-}, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
 
 TabContentWrapper.defaultProps = {
   children: []

package/es/Tab/TabWrapper.js

@@ -4,20 +4,21 @@ import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 
-function TabWrapper({
-  defaultTab,
-  hookToDisableInternalState,
-  onSelect,
-  type,
-  isAnimate,
-  needTabBorder,
-  needBorder,
-  needPadding,
-  needAppearance,
-  align,
-  dataId,
-  children
-}) {
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children
+  } = _ref;
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {

package/es/Tab/Tabs.js

@@ -95,7 +95,8 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim(totalDimension = 0) {
+  setMaxDim() {
+    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(
@@ -265,14 +266,13 @@ class Tabs extends React.Component {
     let {
       children,
       maxTabsCount,
-      minTabsCount,
-      isResponsive
+      minTabsCount
     } = this.props;
     let mainTabs = [],
         moreTabs = [],
         otherTabs = [];
 
-    if (totalDimension && isResponsive) {
+    if (totalDimension) {
       let {
         childType,
         selectedTab
@@ -318,17 +318,6 @@ class Tabs extends React.Component {
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }
-    } else if (!isResponsive) {
-      let {
-        childType
-      } = this.props;
-      React.Children.forEach(children, child => {
-        if (child && child.type === childType && child.props.id) {
-          mainTabs.push(child);
-        } else {
-          otherTabs.push(child);
-        }
-      });
     } else {
       moreTabs = children;
     }