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

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,88 +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();
-    });
-  });
-  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();
-    });
-  });
 });

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

@@ -8,15 +8,4 @@ describe('Tabs', () => {
     } = render( /*#__PURE__*/React.createElement(Tabs, null));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('renders custom more-button icon via renderMoreTarget', () => {
-    const customIcon = /*#__PURE__*/React.createElement("span", {
-      "data-testid": "custom-more-icon"
-    }, "\u2022\u2022\u2022");
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Tabs, {
-      renderMoreTarget: customIcon
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -1,187 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the right of the label 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t7"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t7"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          3
-        </span>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both render around the label 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t8"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t8"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ▶
-        </span>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Tab renderBefore / renderAfter slots renderBefore as function renders custom node 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t9"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t9"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the left of the label 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t6"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t6"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span>
-          ◀
-        </span>
-      </div>
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
@@ -202,108 +20,3 @@ exports[`Tab rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`Tab variant-based label rendering variant="icon" renders icon and suppresses text label 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t2"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t2"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-menu    rtl "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Tab variant-based label rendering variant="iconWithText" renders icon followed by text 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t3"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t3"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-menu    rtl "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-      />
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Tab variant-based label rendering variant="text" renders text only 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t1"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t1"
-    data-selector-id="tab"
-    data-test-id="tabMenu_Tab"
-    role="link"
-    tabindex="0"
-  >
-    <div
-      class="textContainer flex cover rowdir both"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="tabText grow basisAuto shrinkOff"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        Home
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap

@@ -31,35 +31,3 @@ exports[`Tabs rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`Tabs renders custom more-button icon via renderMoreTarget 1`] = `
-<DocumentFragment>
-  <div
-    class="noShrink"
-    data-id="boxComponent"
-    data-selector-id="tabs"
-    data-test-id="boxComponent"
-  >
-    <div
-      class="flex fullSize column tab"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="flexible basis_zero noShrink"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <div
-          class="flex fullSize column"
-          data-id="containerComponent"
-          data-selector-id="container"
-          data-test-id="containerComponent"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/Tab/props/defaultProps.js

@@ -3,11 +3,7 @@ export const Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
-  customClass: {},
-  dataSelectorId: 'tab',
-  variant: 'text',
-  needHover: true,
-  hoverOnActive: false
+  dataSelectorId: 'tab'
 };
 export const TabContent_defaultProps = {
   dataId: 'tabContent',
@@ -19,7 +15,6 @@ export const TabContentWrapper_defaultProps = {
   a11y: {}
 };
 export const Tabs_defaultProps = {
-  alignBorderPosition: false,
   isAnimate: false,
   isResponsive: true,
   needTabBorder: false,
@@ -41,13 +36,11 @@ export const Tabs_defaultProps = {
   searchBoxSize: 'small',
   searchErrorText: 'No results',
   placeHolderText: 'Search',
-  isAbsolutePositioningNeeded: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  moreContainerClass: '',
-  renderMoreTarget: null
+  moreContainerClass: ''
 };
 export const TabWrapper_defaultProps = {
-  alignBorderPosition: false,
   hookToDisableInternalState: false,
   isAnimate: false,
   needBorder: true,

package/es/Tab/props/propTypes.js

@@ -1,11 +1,7 @@
 import PropTypes from 'prop-types';
-import { VARIANT } from "../utils/tabConfigs";
-const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
   align: PropTypes.oneOf(['vertical', 'horizontal']),
-  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-  hoverOnActive: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -18,7 +14,6 @@ export const Tab_propTypes = {
   isLink: PropTypes.bool,
   needAppearance: PropTypes.bool,
   needBorder: PropTypes.bool,
-  needHover: PropTypes.bool,
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
   style: PropTypes.object,
@@ -30,20 +25,8 @@ export const Tab_propTypes = {
   contentAlign: PropTypes.oneOf(['both', 'left', 'right', 'vertical', 'horizontal', 'top', 'bottom', 'between', 'around', 'baseline']),
   contentAlignBox: PropTypes.oneOf(['row', 'column', 'row-reverse', 'column-reverse']),
   customProps: PropTypes.object,
-  customClass: PropTypes.shape({
-    customTextContainer: PropTypes.string,
-    customText: PropTypes.string,
-    customHover: PropTypes.string,
-    customIconContainer: PropTypes.string,
-    customIcon: PropTypes.string
-  }),
   isVirtual: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  variant: PropTypes.oneOf(Object.values(VARIANT)),
-  iconName: PropTypes.string,
-  iconSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  renderBefore: renderSlotType,
-  renderAfter: renderSlotType
+  dataSelectorId: PropTypes.string
 };
 export const TabContent_propTypes = {
   children: PropTypes.node,
@@ -65,8 +48,6 @@ export const TabContentWrapper_propTypes = {
 };
 export const Tabs_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),
-  alignBorderPosition: PropTypes.bool,
-  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
   boxPosition: PropTypes.string,
   childType: PropTypes.elementType,
   children: PropTypes.array,
@@ -101,7 +82,7 @@ export const Tabs_propTypes = {
   showTitleInMoreOptions: PropTypes.bool,
   style: PropTypes.object,
   togglePopup: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
   getTargetRef: PropTypes.func,
   containerClass: PropTypes.string,
   customProps: PropTypes.shape({
@@ -119,13 +100,10 @@ export const Tabs_propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object,
-  renderMoreTarget: renderSlotType
+  targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
-  alignBorderPosition: PropTypes.bool,
-  borderPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
   children: PropTypes.node,
   dataId: PropTypes.string,
   defaultTab: PropTypes.string,
@@ -136,6 +114,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'delta', 'default']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: PropTypes.string
 };

package/es/Tab/utils/tabConfigs.js

@@ -1,8 +1,3 @@
-export const VARIANT = {
-  TEXT: 'text',
-  ICON: 'icon',
-  ICON_WITH_TEXT: 'iconWithText'
-};
 export const TAB_ALIGN_MAPPING = {
   vertical: 'column',
   horizontal: 'row',
@@ -20,10 +15,4 @@ export const TAB_POPUP_POSITION_MAPPING = {
   horizontal: 'rightTop',
   'vertical-reverse': 'topLeft',
   'horizontal-reverse': 'leftTop'
-};
-export const BORDER_POSITION_BY_ALIGN = {
-  vertical: 'bottom',
-  'vertical-reverse': 'top',
-  horizontal: 'right',
-  'horizontal-reverse': 'left'
 };