@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-254

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

@@ -1,105 +0,0 @@
-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

@@ -1,253 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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;
-}