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

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

package/es/Tag/Tag.js

@@ -78,9 +78,7 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y,
-      needEffect,
-      isReadOnly
+      a11y
     } = this.props;
     let {
       customTag = '',
@@ -95,7 +93,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -150,9 +148,7 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {},
-  needEffect: true,
-  isReadOnly: false
+  a11y: {}
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -183,9 +179,7 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  }),
-  needEffect: PropTypes.bool,
-  isReadOnly: PropTypes.bool
+  })
 };
 
 if (false) {

package/es/Tag/Tag.module.css

@@ -50,11 +50,8 @@
 }
 .disabled {
   pointer-events: none;
-  --tag_text_color: var(--zdt_tag_disabled_text);
-}
-.readonly,
-.disabled {
   --tag_cursor: not-allowed;
+  --tag_text_color: var(--zdt_tag_disabled_text);
 }
 .pointer {
   --tag_cursor: pointer;
@@ -161,11 +158,11 @@
 .danger {
   --tag_bg_color: var(--zdt_tag_default_danger_bg);
 }
-.effect.default:hover {
+.default:hover {
   --tag_bg_color: var(--zdt_tag_default_hover_bg);
 }
 .activedefault,
-.effect.activedefault:hover {
+.activedefault:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 .activeprimaryClose,
@@ -173,11 +170,11 @@
   --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
 }
 
-.effect.danger:hover {
+.danger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedanger,
-.effect.activedanger:hover {
+.activedanger:hover {
   --tag_bg_color: var(--zdt_tag_danger_hover_bg);
 }
 .activedangerClose,
@@ -190,7 +187,7 @@
   --tag_text_color: var(--zdt_tag_secondary_text);
 }
 .activesecondary,
-.effect.secondary:hover {
+.secondary:hover {
   --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
 }
 
@@ -199,12 +196,12 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_pure_border);
 }
-.effect.pureDotted:hover {
+.pureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_hover_bg);
   --tag_border_color: var(--zdt_tag_pure_hover_border);
 }
 .activepureDotted,
-.effect.activepureDotted:hover {
+.activepureDotted:hover {
   --tag_bg_color: var(--zdt_tag_pure_bg);
 }
 
@@ -213,10 +210,10 @@
   --tag_border_width: 1px;
   --tag_border_color: var(--zdt_tag_primary_border);
 }
-.effect.primaryDotted:hover,
+.primaryDotted:hover,
 .activeprimaryDotted,
 .primary,
-.effect.primary:hover {
+.primary:hover {
   --tag_bg_color: var(--zdt_tag_active_default_bg);
 }
 
@@ -231,7 +228,7 @@
   --tag_bg_color: var(--zdt_tag_dark_bg);
   --tag_text_color: var(--zdt_tag_dark_text);
 }
-.effect.dark:hover {
+.dark:hover {
   --tag_bg_color: var(--zdt_tag_dark_hover_bg);
   --tag_text_color: var(--zdt_tag_dark_hover_text);
 }