@zohodesk/components 1.0.0-temp-252.4 → 1.0.0-temp-256.1

package/es/Tab/Tab.js

@@ -2,13 +2,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint-disable react/forbid-component-props */
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'icon', 'iconWithText', 'iconWrapper', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border', 'tabDefault', 'defaultHover', 'defaultActive', 'defaultActive_border', 'left_borderTab', 'right_borderTab', 'top_borderTab', 'bottom_borderTab', 'alpha_inline', 'beta_inline', 'delta_inline', 'default_inline', 'alpha_block', 'beta_block', 'delta_block', 'default_block', 'icon_inline', 'icon_block', 'iconWithText_block', 'text_block'] }] */
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from "./props/defaultProps";
 import { Tab_propTypes } from "./props/propTypes";
 import { Box, Container } from "../Layout";
+import { Icon } from '@zohodesk/icons';
+import { renderNode, isRenderable } from '@zohodesk/utils';
 import { cs } from "../utils/Common";
-import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
+import { TAB_DIRECTION_MAPPING, VARIANT } from "./utils/tabConfigs";
 import styles from "./Tab.module.css";
 const tabTypes = {
   alpha: {
@@ -22,38 +24,57 @@ const tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
+  },
+  default: {
+    active: 'defaultActive',
+    tab: 'tabDefault'
   }
 };
-export default function Tab(_ref) {
+export default function Tab({
+  id,
+  style,
+  text,
+  children,
+  className,
+  dataId,
+  dataSelectorId,
+  title,
+  titlePosition,
+  activeClass,
+  href,
+  isLink,
+  isDisabled,
+  tourId,
+  onClick,
+  isActive,
+  getTabRef,
+  onSelect,
+  type,
+  isAnimate,
+  needBorder,
+  needAppearance,
+  needHover,
+  hoverOnActive,
+  align,
+  isVirtual,
+  contentAlign,
+  contentAlignBox,
+  customProps,
+  customClass,
+  variant,
+  iconName,
+  iconSize,
+  renderBefore,
+  renderAfter,
+  borderPosition
+}) {
   let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    dataSelectorId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    contentAlign,
-    contentAlignBox,
-    customProps
-  } = _ref;
+    customTextContainer = '',
+    customText = '',
+    customHover = '',
+    customIconContainer = '',
+    customIcon = ''
+  } = customClass;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();
@@ -69,10 +90,33 @@ export default function Tab(_ref) {
     tab: 'tab'
   }, [type]);
   let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
-  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
+  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`], needHover && hoverOnActive && tabTypes[type] && styles[`${type}Hover`], hoverOnActive && customHover]);
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
-  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], needHover && tabTypes[type] && styles[`${type}Hover`], customHover]);
+  const isVerticalAlign = TAB_DIRECTION_MAPPING[align] === 'column';
+  const isIconWithText = variant === VARIANT.ICON_WITH_TEXT;
+  let tabClass = cs([styles.tab, isVerticalAlign ? styles.vertical : styles.horizontal, needAppearance && styles[`${type}_${isVerticalAlign ? 'inline' : 'block'}`], isDisabled && styles.disabled, needBorder && borderPosition && !isAnimate && needAppearance && styles[`${borderPosition}_border`], isActive ? activeClasses : inActiveClasses, className]);
+
+  const _renderIcon = () => {
+    const showIcon = variant !== VARIANT.TEXT && iconName;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showIcon ? /*#__PURE__*/React.createElement(Box, {
+      className: cs([styles.iconWrapper, customIconContainer])
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      className: customIcon
+    })) : null);
+  };
+
+  const _renderLabel = () => {
+    const showText = variant !== VARIANT.ICON && text !== undefined && text !== null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showText ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      adjust: true,
+      className: cs([styles.tabText, customText])
+    }, text) : null);
+  };
+
   return /*#__PURE__*/React.createElement(Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -95,14 +139,12 @@ export default function Tab(_ref) {
   }, customProps), /*#__PURE__*/React.createElement(Container, {
     alignBox: contentAlignBox,
     align: contentAlign,
-    className: styles.textContainer
-  }, text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    adjust: true,
-    className: styles.tabText
-  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+    className: cs([styles.textContainer, customTextContainer])
+  }, isRenderable(renderBefore) ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, renderNode(renderBefore)) : null, _renderIcon(), _renderLabel(), isRenderable(renderAfter) || children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
-  }, children) : null));
+  }, isRenderable(renderAfter) ? renderNode(renderAfter) : children) : null));
 }
 Tab.defaultProps = Tab_defaultProps;
 Tab.propTypes = Tab_propTypes; // if (__DOCS__) {

package/es/Tab/Tab.module.css

@@ -11,6 +11,9 @@
   width: 100% ;
   max-width: 100% ;
 }
+.textContainer {
+  gap: var(--zd_size4) ;
+}
 .textContainer,
 .tabText {
   max-width: inherit ;
@@ -21,8 +24,17 @@
 .disabled {
   cursor: not-allowed;
 }
-.border {
-  border-bottom: 1px solid var(--zdt_tab_default_border);
+.left_border {
+  border-inline-start: 1px solid var(--zdt_tab_default_border);
+}
+.right_border {
+  border-inline-end: 1px solid var(--zdt_tab_default_border);
+}
+.top_border {
+  border-block-start: 1px solid var(--zdt_tab_default_border);
+}
+.bottom_border {
+  border-block-end: 1px solid var(--zdt_tab_default_border);
 }
 
 .alpha,
@@ -59,7 +71,6 @@
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
-  margin-inline-end: var(--zd_size40) ;
   text-transform: capitalize;
 }
 .tabBeta {
@@ -78,7 +89,6 @@
   padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;
@@ -91,3 +101,61 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
+
+.default {
+  transition: all var(--zd_transition2);
+  padding-inline: 0 ;
+  padding-block: 0 ;
+  font-size: var(--zd_font_size11) ;
+  line-height: 3;
+}
+.tabDefault {
+  composes: default;
+  color: var(--zd-text-secondary);
+}
+
+.defaultHover:hover {
+  background-color: var(--zdt_tab_default_hover_bg);
+}
+
+.defaultActive {
+  composes: default;
+  color: var(--zd-text-primary);
+}
+
+.defaultActive_border {
+  border-color: var(--zdt_tab_default_border_active);
+}
+
+/* vertical / vertical-reverse: margin-inline-end */
+.beta_inline {
+  margin-inline-end: var(--zd_size40) ;
+}
+.delta_inline {
+  margin-inline-end: var(--zd_size10) ;
+}
+.default_inline {
+  margin-inline-end: var(--zd_size34) ;
+}
+/* horizontal / horizontal-reverse: margin-block-end */
+.beta_block {
+  margin-block-end: var(--zd_size40) ;
+}
+.delta_block {
+  margin-block-end: var(--zd_size10) ;
+}
+.default_block {
+  margin-block-end: var(--zd_size6) ;
+}
+.iconWrapper {
+  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
+  flex: 0 0 var(--zd_size24) ;
+  min-width: var(--zd_size24) ;
+}
+.icon_block, .icon_inline {
+  padding: var(--zd_size10) ;
+}
+.text_block,
+.iconWithText_block {
+  padding-inline: var(--zd_size10) ;
+}

package/es/Tab/TabContent.js

@@ -5,25 +5,22 @@ import { Container } from "../Layout";
 import style from "./TabContent.module.css";
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = _ref => {
-  let {
-    children,
-    scroll,
-    dataId,
-    id,
-    dataSelectorId
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Container, {
-    className: style.container,
-    scroll: scroll,
-    dataId: `${dataId}_TabContent`,
-    isScrollAttribute: true,
-    "aria-labelledby": id,
-    tabindex: "-1",
-    role: "tabpanel",
-    dataSelectorId: dataSelectorId
-  }, children);
-};
+const TabContent = ({
+  children,
+  scroll,
+  dataId,
+  id,
+  dataSelectorId
+}) => /*#__PURE__*/React.createElement(Container, {
+  className: style.container,
+  scroll: scroll,
+  dataId: `${dataId}_TabContent`,
+  isScrollAttribute: true,
+  "aria-labelledby": id,
+  tabindex: "-1",
+  role: "tabpanel",
+  dataSelectorId: dataSelectorId
+}, children);
 
 TabContent.defaultProps = TabContent_defaultProps;
 TabContent.propTypes = TabContent_propTypes;

package/es/Tab/TabContentWrapper.js

@@ -6,28 +6,25 @@ import { TabContentWrapper_propTypes } from "./props/propTypes";
 import { Box } from "../Layout";
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = _ref => {
-  let {
-    style,
-    className,
-    children,
-    dataId,
-    selectedTab,
-    onScroll,
-    dataSelectorId,
-    tagName,
-    a11y
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    flexible: true,
-    style: style,
-    dataId: dataId,
-    className: className,
-    onScroll: onScroll,
-    dataSelectorId: dataSelectorId,
-    tagName: tagName
-  }, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
-};
+const TabContentWrapper = ({
+  style,
+  className,
+  children,
+  dataId,
+  selectedTab,
+  onScroll,
+  dataSelectorId,
+  tagName,
+  a11y
+}) => /*#__PURE__*/React.createElement(Box, _extends({
+  flexible: true,
+  style: style,
+  dataId: dataId,
+  className: className,
+  onScroll: onScroll,
+  dataSelectorId: dataSelectorId,
+  tagName: tagName
+}, a11y), React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
 TabContentWrapper.propTypes = TabContentWrapper_propTypes;

package/es/Tab/TabWrapper.js

@@ -6,22 +6,23 @@ import { TabWrapper_propTypes } from "./props/propTypes";
 import { Container } from "../Layout";
 import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";
 
-function TabWrapper(_ref) {
-  let {
-    defaultTab,
-    hookToDisableInternalState,
-    onSelect,
-    type,
-    isAnimate,
-    needTabBorder,
-    needBorder,
-    needPadding,
-    needAppearance,
-    align,
-    dataId,
-    children,
-    dataSelectorId
-  } = _ref;
+function TabWrapper({
+  defaultTab,
+  hookToDisableInternalState,
+  onSelect,
+  type,
+  isAnimate,
+  needTabBorder,
+  needBorder,
+  needPadding,
+  needAppearance,
+  align,
+  alignBorderPosition,
+  dataId,
+  children,
+  dataSelectorId,
+  borderPosition
+}) {
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {
@@ -48,7 +49,9 @@ function TabWrapper(_ref) {
       needPadding: needPadding,
       needAppearance: needAppearance,
       hookToDisableInternalState: hookToDisableInternalState,
-      align: align
+      align: align,
+      alignBorderPosition: alignBorderPosition,
+      borderPosition: borderPosition
     }));
   }));
 }