@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-257.1

package/es/Tab/Tab.js

@@ -2,16 +2,14 @@ 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', 'tabDefault', 'defaultHover', 'defaultActive', 'defaultActive_border'] }] */
+/* 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'] }] */
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from "./props/defaultProps";
 import { Tab_propTypes } from "./props/propTypes";
 import { Box, Container } from "../Layout";
 import { cs } from "../utils/Common";
-import { TAB_DIRECTION_MAPPING, VARIANT } from "./utils/tabConfigs";
+import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
 import styles from "./Tab.module.css";
-import { renderNode, isRenderable } from '@zohodesk/utils';
-import { Icon } from '@zohodesk/icons';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',
@@ -24,10 +22,6 @@ const tabTypes = {
   delta: {
     active: 'deltaActive',
     tab: 'tabDelta'
-  },
-  default: {
-    active: 'defaultActive',
-    tab: 'tabDefault'
   }
 };
 export default function Tab({
@@ -57,14 +51,7 @@ export default function Tab({
   isVirtual,
   contentAlign,
   contentAlignBox,
-  customProps,
-  variant,
-  iconPlacement,
-  iconName,
-  iconSize,
-  renderIcon,
-  renderBefore,
-  renderAfter
+  customProps
 }) {
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
@@ -83,50 +70,8 @@ export default function Tab({
   let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
   let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
   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, variant === VARIANT.ICON && styles.tabVariantIcon, variant === VARIANT.ICON_WITH_TEXT && styles.tabVariantIconWithText, className]);
-
-  const _renderIconNode = () => {
-    if (isRenderable(renderIcon)) {
-      return renderNode(renderIcon);
-    }
-
-    if (!iconName) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement(Icon, {
-      name: iconName,
-      size: iconSize
-    });
-  };
-
-  const _renderBeforeNode = () => {
-    if (!isRenderable(renderBefore)) {
-      return null;
-    }
-
-    return renderNode(renderBefore);
-  };
-
-  const _renderAfterNode = () => {
-    if (!isRenderable(renderAfter)) {
-      return null;
-    }
-
-    return renderNode(renderAfter);
-  };
-
-  const _renderLabel = () => {
-    const showIcon = variant !== VARIANT.TEXT && (isRenderable(renderIcon) || iconName);
-    const showText = variant !== VARIANT.ICON && text !== undefined && text !== null;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, showIcon ? _renderIconNode() : null, showText ? /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      adjust: true,
-      className: styles.tabText
-    }, text) : null);
-  };
-
+  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]);
   return /*#__PURE__*/React.createElement(Box, _extends({
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',
@@ -150,9 +95,13 @@ export default function Tab({
     alignBox: contentAlignBox,
     align: contentAlign,
     className: styles.textContainer
-  }, _renderBeforeNode(), _renderLabel(), children ? /*#__PURE__*/React.createElement(Box, {
+  }, text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    adjust: true,
+    className: styles.tabText
+  }, text), children ? /*#__PURE__*/React.createElement(Box, {
     shrink: true
-  }, children) : null, _renderAfterNode()));
+  }, children) : null));
 }
 Tab.defaultProps = Tab_defaultProps;
 Tab.propTypes = Tab_propTypes; // if (__DOCS__) {

package/es/Tab/Tab.module.css

@@ -11,9 +11,6 @@
   width: 100% ;
   max-width: 100% ;
 }
-.textContainer {
-  gap: var(--zd_size4) ;
-}
 .textContainer,
 .tabText {
   max-width: inherit ;
@@ -94,25 +91,3 @@
   composes: delta;
   color: var(--zdt_tab_alpha_active_text);
 }
-
-.tabDefault {
-  transition: all var(--zd_transition2);
-  padding-inline: 0 ;
-  padding-block: 0 ;
-  font-size: var(--zd_font_size11) ;
-  line-height: 3;
-  margin-inline-end: var(--zd_size34) ;
-  color: var(--zd-text-secondary);
-}
-.defaultHover:hover { color: var(--zd-text-primary); }
-.defaultActive {
-  transition: all var(--zd_transition2);
-  padding-inline: 0 ;
-  padding-block: 0 ;
-  font-size: var(--zd_font_size11) ;
-  line-height: 3;
-  margin-inline-end: var(--zd_size34) ;
-  color: var(--zd-text-primary);
-  border-bottom: 1px solid var(--zdt_tab_alpha_active_border);
-}
-.defaultActive_border { border-color: var(--zdt_tab_alpha_active_border); }

package/es/Tab/Tabs.js

@@ -4,9 +4,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* eslint css-modules/no-unused-class: [2, {
       markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','default','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','default_padding','default_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border',
-          'defaultMoreButton','defaultMoreButtonActive','defaultMenuListItem'
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
         ]
     }]
 */
@@ -19,14 +18,14 @@ import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect
 import { Box, Container } from "../Layout";
 import ResizeObserver from "../Responsive/ResizeObserver";
 import ListItem from "../ListItem/ListItem";
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
 import { Icon } from '@zohodesk/icons';
+import { cn } from "@dot-system/css-utility";
 import tabsStyle from "./Tabs.module.css";
 import Popup from "../Popup/Popup";
 import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
 import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING, VARIANT } from "./utils/tabConfigs";
+import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
 import btnstyle from "../semantic/Button/semanticButton.module.css";
 
 class Tabs extends React.Component {
@@ -474,11 +473,11 @@ class Tabs extends React.Component {
       searchErrorText
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateContainer
+      className: cn(tabsStyle.emptyStateContainer)
     }, /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     }), /*#__PURE__*/React.createElement("div", {
-      className: tabsStyle.emptyStateTitle
+      className: cn(tabsStyle.emptyStateTitle)
     }, searchErrorText));
   }
 
@@ -532,10 +531,6 @@ class Tabs extends React.Component {
       moreTabs
     });
     const hasSearch = moreTabs.length > 4;
-    const isDefaultType = type === 'default';
-    const defaultMoreClass = isDefaultType ? tabsStyle.defaultMoreButton : '';
-    const defaultMoreActiveClass = isDefaultType ? tabsStyle.defaultMoreButtonActive : '';
-    const effectiveMenuItemClass = isDefaultType ? `${tabsStyle.defaultMenuListItem}${menuItemClass ? ` ${menuItemClass}` : ''}` : menuItemClass;
     return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.map(mainTabs, child => {
       if (!child) {
         return null;
@@ -569,7 +564,7 @@ class Tabs extends React.Component {
       className: `${tabsStyle.menu} `,
       dataSelectorId: `${dataSelectorId}_moreIcon`
     }, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${btnstyle.buttonReset} ${defaultMoreClass} ${moreButtonClass} ${isPopupOpen ? `${defaultMoreActiveClass} ${moreButtonActiveClass}` : ''}`,
+      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
@@ -638,34 +633,9 @@ class Tabs extends React.Component {
         isLink,
         href,
         children,
-        dataId,
-        variant,
-        iconName,
-        iconSize
+        dataId
       } = data;
       const value = text ? text : showTitleInMoreOptions ? title : null;
-      const showIconInDropdown = variant !== VARIANT.TEXT && iconName;
-
-      if (showIconInDropdown) {
-        return /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
-          key: id,
-          value: value,
-          onClick: this.moreTabSelect,
-          id: id,
-          title: title || text,
-          isLink: isLink,
-          href: href,
-          autoHover: true,
-          iconName: iconName,
-          iconSize: iconSize,
-          customClass: {
-            customListItem: effectiveMenuItemClass
-          },
-          target: "self",
-          dataId: `${dataId}_Tab`
-        }, ListItemProps));
-      }
-
       return /*#__PURE__*/React.createElement(ListItem, _extends({
         key: id,
         value: value,
@@ -676,7 +646,7 @@ class Tabs extends React.Component {
         href: href,
         autoHover: true,
         customClass: {
-          customListItem: effectiveMenuItemClass
+          customListItem: menuItemClass
         },
         target: "self",
         dataId: `${dataId}_Tab`
@@ -730,7 +700,7 @@ class Tabs extends React.Component {
     }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
       alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: hlClass,
+      className: cn(hlClass),
       ref: this.getHighlightRef,
       "data-id": dataId,
       "data-test-id": dataId

package/es/Tab/Tabs.module.css

@@ -82,51 +82,6 @@
   border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
 }
 
-.default {
-  height: var(--zd_size35) ;
-  transition: padding var(--zd_transition3);
-  z-index: 2;
-  background-color: var(--zd-bg-secondary);
-}
-
-.default_padding {
-  padding-inline-start: var(--zd_size10) ;
-}
-
-.default_border {
-  border-bottom: 1px solid var(--zd-border-primary);
-}
-
-.defaultMoreButton {
-  max-height: var(--zd_size28) ;
-  color: var(--zd-text-secondary);
-  padding: var(--zd_size6) ;
-  border: 1px solid var(--zd-border-transparent);
-  border-radius: 4px;
-  margin-top: var(--zd_size3) ;
-  cursor: pointer;
-}
-
-.defaultMoreButton:hover {
-  border-color: var(--zdt_rippleeffect_navy_border);
-}
-
-.defaultMoreButtonActive {
-  border-color: var(--zdt_cta_secondary_light_border);
-  background: var(--zd-bg-brandLight);
-}
-
-.defaultMoreButtonActive:hover {
-  border-color: var(--zdt_cta_secondary_light_border);
-  background: var(--zd-bg-brandLight);
-}
-
-.defaultMenuListItem {
-  font-size: var(--zd_font_size11) ;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-}
-
 .delta .highlight {
   border-color: var(--zdt_tabs_delta_border);
 }
@@ -171,7 +126,7 @@
 
 .search {
   padding-block: var(--zd_size6) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .emptyStateContainer {
@@ -198,5 +153,5 @@
 
 .listWrapper {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
-}
+  padding-inline:0 ;
+}

package/es/Tab/__tests__/Tab.spec.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Tab from "../Tab";
-
-const noop = () => {};
-
 describe('Tab', () => {
   test('rendering the defult props', () => {
     const {
@@ -11,113 +8,4 @@ describe('Tab', () => {
     } = render( /*#__PURE__*/React.createElement(Tab, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  describe('variant-based label rendering', () => {
-    test('variant="text" renders text only', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t1",
-        text: "Home",
-        variant: "text",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('variant="icon" renders icon and suppresses text label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t2",
-        text: "Home",
-        variant: "icon",
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('variant="iconWithText" renders icon followed by text', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t3",
-        text: "Home",
-        variant: "iconWithText",
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderIcon overrides iconName', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t4",
-        text: "Home",
-        variant: "iconWithText",
-        renderIcon: /*#__PURE__*/React.createElement("span", null, "\u2605"),
-        iconName: "ZD-TB-menu",
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderIcon as function receives no args and renders custom node', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t5",
-        text: "Home",
-        variant: "icon",
-        renderIcon: () => /*#__PURE__*/React.createElement("span", null, "\u2605"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-  describe('renderBefore / renderAfter slots', () => {
-    test('renderBefore renders a node to the left of the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t6",
-        text: "Home",
-        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderAfter renders a node to the right of the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t7",
-        text: "Home",
-        renderAfter: /*#__PURE__*/React.createElement("span", null, "3"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderBefore and renderAfter both render around the label', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t8",
-        text: "Home",
-        renderBefore: /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        renderAfter: /*#__PURE__*/React.createElement("span", null, "\u25B6"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    test('renderBefore as function renders custom node', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(Tab, {
-        id: "t9",
-        text: "Home",
-        renderBefore: () => /*#__PURE__*/React.createElement("span", null, "\u25C0"),
-        onSelect: noop
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
 });