npm - @zohodesk/components - Versions diffs - 1.0.0-temp-256 → 1.0.0-temp-256.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// 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>
@@ -28,9 +28,16 @@ exports[`Tab renderBefore / renderAfter slots renderAfter renders a node to the
       >
         Home
       </div>
-      <span>
-        3
-      </span>
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span>
+          3
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -56,9 +63,16 @@ exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both
       data-selector-id="container"
       data-test-id="containerComponent"
     >
-      <span>
-        ◀
-      </span>
+      <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"
@@ -67,9 +81,16 @@ exports[`Tab renderBefore / renderAfter slots renderBefore and renderAfter both
       >
         Home
       </div>
-      <span>
-        ▶
-      </span>
+      <div
+        class="shrinkOn"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span>
+          ▶
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -95,9 +116,16 @@ exports[`Tab renderBefore / renderAfter slots renderBefore as function renders c
       data-selector-id="container"
       data-test-id="containerComponent"
     >
-      <span>
-        ◀
-      </span>
+      <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"
@@ -131,9 +159,16 @@ exports[`Tab renderBefore / renderAfter slots renderBefore renders a node to the
       data-selector-id="container"
       data-test-id="containerComponent"
     >
-      <span>
-        ◀
-      </span>
+      <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"
@@ -151,7 +186,7 @@ exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
+    class="basis_auto noShrink tab horizontal"
     data-id="tabMenu_Tab"
     data-selector-id="tab"
     data-test-id="tabMenu_Tab"
@@ -159,7 +194,7 @@ exports[`Tab rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="textContainer flex cover rowdir both"
+      class="flex fullSize row alignItems_center justifyContent_center textContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -168,70 +203,6 @@ exports[`Tab rendering the defult props 1`] = `
 </DocumentFragment>
 `;
-exports[`Tab variant-based label rendering renderIcon as function receives no args and renders custom node 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t5"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t5"
-    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"
-    >
-      <span>
-        ★
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-exports[`Tab variant-based label rendering renderIcon overrides iconName 1`] = `
-<DocumentFragment>
-  <div
-    aria-controls="t4"
-    aria-label="Home"
-    aria-selected="false"
-    class="tab horizontal basisAuto shrinkOff"
-    data-id="tabMenu_Tab"
-    data-key="t4"
-    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"
-    >
-      <span>
-        ★
-      </span>
-      <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="icon" renders icon and suppresses text label 1`] = `
 <DocumentFragment>
   <div

package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap CHANGED Viewed

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 exports[`TabContent rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container flex cover coldir"
+    class="flex fullSize column container"
     data-id="tabContent_TabContent"
     data-scroll="true"
     data-selector-id="tabContent"

package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap CHANGED Viewed

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 exports[`TabContentWrapper rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff"
+    class="flexible basis_zero noShrink"
     data-id="boxComponent"
     data-selector-id="tabContentWrapper"
     data-test-id="boxComponent"

package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap CHANGED Viewed

@@ -1,46 +1,46 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover rowdir"
+    class="flex fullSize row"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        class="flex fullSize column tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover coldir"
+            class="flex fullSize column"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="menu  shrinkOff"
+              class="noShrink menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="buttonReset   flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -48,7 +48,7 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-menu    rtl "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -61,14 +61,14 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="container flex cover coldir"
+        class="flex fullSize column container"
         data-id="tabContent_TabContent"
         data-scroll="true"
         data-selector-id="tabContent"
@@ -88,44 +88,44 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
 exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover rowReverse"
+    class="flex fullSize rowReverse"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="tab alpha alpha_border alpha_padding flex cover coldir"
+        class="flex fullSize column tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover coldir"
+            class="flex fullSize column"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="menu  shrinkOff"
+              class="noShrink menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="buttonReset   flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -133,7 +133,7 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-menu    rtl "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -146,14 +146,14 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="container flex cover coldir"
+        class="flex fullSize column container"
         data-id="tabContent_TabContent"
         data-scroll="true"
         data-selector-id="tabContent"
@@ -173,44 +173,44 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
 exports[`TabWrapper rendering the align prop of - vertical 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        class="flex fullSize row tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="menu  shrinkOff"
+              class="noShrink menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="buttonReset   flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -218,7 +218,7 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-menu    rtl "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -231,14 +231,14 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="container flex cover coldir"
+        class="flex fullSize column container"
         data-id="tabContent_TabContent"
         data-scroll="true"
         data-selector-id="tabContent"
@@ -258,44 +258,44 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
 exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover colReverse"
+    class="flex fullSize columnReverse"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="tab alpha alpha_border alpha_padding flex cover rowdir"
+        class="flex fullSize row tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="menu  shrinkOff"
+              class="noShrink menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="buttonReset   flex cover coldir both"
+                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -303,7 +303,7 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-menu    rtl "
+                  class="zd_font_icons rtl basic icon-menu"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"
@@ -316,14 +316,14 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="container flex cover coldir"
+        class="flex fullSize column container"
         data-id="tabContent_TabContent"
         data-scroll="true"
         data-selector-id="tabContent"

package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap CHANGED Viewed

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 exports[`TabWrapper rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"

package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap CHANGED Viewed

@@ -1,27 +1,59 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 exports[`Tabs rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="shrinkOff"
+    class="noShrink"
     data-id="boxComponent"
     data-selector-id="tabs"
     data-test-id="boxComponent"
   >
     <div
-      class="tab flex cover coldir"
+      class="flex fullSize column tab"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="flex cover coldir"
+          class="flex fullSize column"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        />
+      </div>
+    </div>
+  </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"

package/lib/Tab/props/defaultProps.js CHANGED Viewed

@@ -9,8 +9,11 @@ var Tab_defaultProps = {
   contentAlign: 'both',
   contentAlignBox: 'row',
   customProps: {},
+  customClass: {},
   dataSelectorId: 'tab',
-  variant: 'text'
+  variant: 'text',
+  needHover: true,
+  hoverOnActive: false
 };
 exports.Tab_defaultProps = Tab_defaultProps;
 var TabContent_defaultProps = {
@@ -25,6 +28,7 @@ var TabContentWrapper_defaultProps = {
 };
 exports.TabContentWrapper_defaultProps = TabContentWrapper_defaultProps;
 var Tabs_defaultProps = {
+  alignBorderPosition: false,
   isAnimate: false,
   isResponsive: true,
   needTabBorder: false,
@@ -48,10 +52,12 @@ var Tabs_defaultProps = {
   placeHolderText: 'Search',
   isAbsolutePositioningNeeded: false,
   isRestrictScroll: false,
-  moreContainerClass: ''
+  moreContainerClass: '',
+  renderMoreTarget: null
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {
+  alignBorderPosition: false,
   hookToDisableInternalState: false,
   isAnimate: false,
   needBorder: true,