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

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

@@ -1,192 +1,10 @@
 // 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
     aria-selected="false"
-    class="basis_auto noShrink tab horizontal"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
     data-id="tabMenu_Tab"
     data-selector-id="tab"
     data-test-id="tabMenu_Tab"
@@ -194,7 +12,7 @@ exports[`Tab rendering the defult props 1`] = `
     tabindex="0"
   >
     <div
-      class="flex fullSize row alignItems_center justifyContent_center textContainer"
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center d-justify-center textContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
@@ -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__/TabContent.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TabContent rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column container"
+    class="d-flex d-h-full d-w-full d-flex-col container"
     data-id="tabContent_TabContent"
     data-scroll="true"
     data-selector-id="tabContent"

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

@@ -3,7 +3,7 @@
 exports[`TabContentWrapper rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flexible basis_zero noShrink"
+    class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
     data-id="boxComponent"
     data-selector-id="tabContentWrapper"
     data-test-id="boxComponent"

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

@@ -3,44 +3,44 @@
 exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize row"
+    class="d-flex d-h-full d-w-full d-flex-row"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize column tab alpha alpha_border alpha_padding"
+        class="d-flex d-h-full d-w-full d-flex-col tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize column"
+            class="d-flex d-h-full d-w-full d-flex-col"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink menu"
+              class="d-flex-shrink-0 menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
+                class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -61,14 +61,14 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="flex fullSize column container"
+        class="d-flex d-h-full d-w-full d-flex-col 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 fullSize rowReverse"
+    class="d-flex d-h-full d-w-full d-flex-row-reverse"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize column tab alpha alpha_border alpha_padding"
+        class="d-flex d-h-full d-w-full d-flex-col tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize column"
+            class="d-flex d-h-full d-w-full d-flex-col"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink menu"
+              class="d-flex-shrink-0 menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
+                class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -146,14 +146,14 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="flex fullSize column container"
+        class="d-flex d-h-full d-w-full d-flex-col 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 fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize row tab alpha alpha_border alpha_padding"
+        class="d-flex d-h-full d-w-full d-flex-row tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink menu"
+              class="d-flex-shrink-0 menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
+                class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -231,14 +231,14 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="flex fullSize column container"
+        class="d-flex d-h-full d-w-full d-flex-col 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 fullSize columnReverse"
+    class="d-flex d-h-full d-w-full d-flex-col-reverse"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"
   >
     <div
-      class="noShrink"
+      class="d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabs"
       data-test-id="boxComponent"
     >
       <div
-        class="flex fullSize row tab alpha alpha_border alpha_padding"
+        class="d-flex d-h-full d-w-full d-flex-row tab alpha alpha_border alpha_padding"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex fullSize row"
+            class="d-flex d-h-full d-w-full d-flex-row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="noShrink menu"
+              class="d-flex-shrink-0 menu"
               data-id="boxComponent"
               data-selector-id="tabs_moreIcon"
               data-test-id="boxComponent"
             >
               <button
                 aria-label="MoreTabs"
-                class="flex fullSize column alignItems_center justifyContent_center buttonReset"
+                class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
                 data-id="moreTabs"
                 data-selector-id="container"
                 data-test-id="moreTabs"
@@ -316,14 +316,14 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
       </div>
     </div>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="tabContentWrapper"
       data-test-id="boxComponent"
     >
       <div
         aria-labelledby="page1"
-        class="flex fullSize column container"
+        class="d-flex d-h-full d-w-full d-flex-col container"
         data-id="tabContent_TabContent"
         data-scroll="true"
         data-selector-id="tabContent"

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

@@ -3,7 +3,7 @@
 exports[`TabWrapper rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex fullSize column"
+    class="d-flex d-h-full d-w-full d-flex-col"
     data-id="containerComponent"
     data-selector-id="tabWrapper"
     data-test-id="containerComponent"

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

@@ -3,57 +3,25 @@
 exports[`Tabs rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="noShrink"
+    class="d-flex-shrink-0"
     data-id="boxComponent"
     data-selector-id="tabs"
     data-test-id="boxComponent"
   >
     <div
-      class="flex fullSize column tab"
+      class="d-flex d-h-full d-w-full d-flex-col tab"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="flexible basis_zero noShrink"
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
         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>
-`;
-
-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"
+          class="d-flex d-h-full d-w-full d-flex-col"
           data-id="containerComponent"
           data-selector-id="container"
           data-test-id="containerComponent"