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

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/docs/Tab__default.docs.js

@@ -0,0 +1,258 @@
+import React from 'react';
+import { TabWrapper, Tabs, Tab, TabContentWrapper, TabContent } from '../';
+import { Container, Box } from '../../Layout';
+import tStyle from './tabdocs.module.css';
+export default class Tab__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tab: 'home'
+    };
+  }
+
+  tabs(selected) {
+    this.setState({
+      tab: selected
+    });
+  }
+
+  componentDidMount() {
+    let tabs = document.getElementById('tabs');
+    let input = document.getElementById('input');
+    input.value = tabs.style.height.replace('px', '');
+    input.addEventListener('change', () => {
+      let tabs = document.getElementById('tabs');
+      let input = document.getElementById('input');
+      tabs.style.height = `${input.value}px`;
+    });
+  }
+
+  render() {
+    let {
+      tab
+    } = this.state;
+    let style = {
+      border: '1px solid #f0f0f0',
+      height: '200px',
+      padding: '10px'
+    };
+    return /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      wrap: "wrap",
+      alignContent: "start"
+    }, /*#__PURE__*/React.createElement(Box, {
+      style: style,
+      column: "6"
+    }, /*#__PURE__*/React.createElement(TabWrapper, {
+      defaultTab: tab,
+      type: "alpha",
+      onSelect: this.tabs.bind(this)
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      customProps: {
+        DropBoxProps: {
+          needResponsive: false
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Tab, {
+      id: "home",
+      text: "home",
+      isDisabled: true,
+      title: "Title"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "contact",
+      text: "contact"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile",
+      text: "profile",
+      customProps: {
+        'data-custom': 'custom'
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Custom")), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+      id: "home"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Home")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "contact"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Contact")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Profile"))))))), /*#__PURE__*/React.createElement(Box, {
+      style: style,
+      column: "6"
+    }, /*#__PURE__*/React.createElement(TabWrapper, {
+      defaultTab: tab,
+      type: "beta",
+      onSelect: this.tabs.bind(this)
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      showTitleInMoreOptions: true
+    }, /*#__PURE__*/React.createElement(Tab, {
+      id: "home",
+      text: "home"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "contact2",
+      title: "alternate"
+    }, "children"), /*#__PURE__*/React.createElement(Tab, {
+      id: "contact",
+      text: "contact"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile",
+      text: "profile"
+    })), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+      id: "home"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Home")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "contact2"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Contact")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "contact"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Contact")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Profile"))))))), /*#__PURE__*/React.createElement(Box, {
+      style: style,
+      column: "6"
+    }, /*#__PURE__*/React.createElement(TabWrapper, {
+      defaultTab: tab,
+      type: "delta",
+      needTabBorder: true,
+      isAnimate: true,
+      onSelect: this.tabs.bind(this)
+    }, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
+      id: "home",
+      text: "home"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "contact",
+      text: "contact"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile",
+      text: "profile"
+    })), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+      id: "home"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Home")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "contact"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Contact")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Profile"))))))), /*#__PURE__*/React.createElement(Box, {
+      style: style,
+      column: "6",
+      id: "tabs"
+    }, /*#__PURE__*/React.createElement(TabWrapper, {
+      defaultTab: tab,
+      type: "delta",
+      needTabBorder: true,
+      isAnimate: true,
+      align: "horizontal",
+      onSelect: this.tabs.bind(this),
+      needAppearance: false
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      className: tStyle.tab,
+      itemClass: tStyle.item,
+      itemActiveClass: tStyle.itemActive,
+      moreButtonClass: tStyle.more,
+      moreContainerClass: tStyle.drop,
+      menuItemClass: tStyle.itemmenu
+    }, /*#__PURE__*/React.createElement(Tab, {
+      id: "home",
+      text: "home"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "contact",
+      text: "contact"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile",
+      text: "profile"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile2",
+      text: "profile2"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile3",
+      text: "profile3"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile4",
+      text: "profile4"
+    }), /*#__PURE__*/React.createElement(Tab, {
+      id: "profile5",
+      text: "profile5"
+    })), /*#__PURE__*/React.createElement(TabContentWrapper, null, /*#__PURE__*/React.createElement(TabContent, {
+      id: "home"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Home")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "contact"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Contact")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile"
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "Profile")))), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile2"
+    }), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile3"
+    }), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile4"
+    }), /*#__PURE__*/React.createElement(TabContent, {
+      id: "profile5"
+    })))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: '20px'
+      }
+    }, "Resize Check for Vertical Tab"), /*#__PURE__*/React.createElement("input", {
+      type: "number",
+      step: "20",
+      id: "input"
+    })));
+  }
+
+}
+
+if (false) {
+  Tab__default.docs = {
+    componentGroup: 'Tab',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}

package/es/Tab/docs/tabdocs.module.css

@@ -0,0 +1,29 @@
+.tab {
+  width: 100px;
+  background-color: black;
+}
+.item {
+  color: #fff;
+  font-size: 12px;
+  padding: 10px;
+}
+
+.itemActive {
+  background-color: red;
+}
+
+.more {
+  color: #fff;
+}
+
+.drop {
+  bottom: -18px;
+}
+
+.itemmenu {
+  outline: 2px solid #000;
+}
+
+.itemBlue {
+  background-color: blue;
+}