@zohodesk/components 1.6.32 → 1.6.34

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

@@ -1,5 +1,1054 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`Tab Render with activeClass without isActive 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with align as vertical 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab vertical"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with children as element 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    >
+      <div
+        class="d-min-w-0 d-flex-shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span>
+          Tab child
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with children as string 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    >
+      <div
+        class="d-min-w-0 d-flex-shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Tab child
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with className 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal custom-tab"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as around 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-around textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as baseline 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-items-baseline textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as between 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-between textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as bottom 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-items-end textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as horizontal 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-center textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as left 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-start textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as right 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-justify-end textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as top 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-items-start textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlign as vertical 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row d-items-center textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlignBox as column 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlignBox as column-reverse 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-col-reverse d-items-center d-justify-center textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with contentAlignBox as row-reverse 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      class="d-flex d-h-full d-w-full d-flex-row-reverse d-items-center d-justify-center textContainer"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with customProps 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-custom-attr="true"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with dataId and dataSelectorId 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tab-dataId_Tab"
+    data-selector-id="tab-dataSelectorId"
+    data-test-id="tab-dataId_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with href without isLink 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with id 1`] = `
+<DocumentFragment>
+  <div
+    aria-controls="tab1"
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-key="tab1"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive and activeClass 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal custom-active-tab"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance and needBorder 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal border"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance and type as alpha 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal alphaActive"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance and type as beta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal betaActive"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance and type as delta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal deltaActive"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance, needBorder and type as alpha 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal border alphaActive alphaActive_border"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance, needBorder and type as beta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal border betaActive betaActive_border"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance, needBorder and type as delta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal border deltaActive deltaActive_border"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isActive, needAppearance, needBorder, isAnimate and type as alpha 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="true"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal alphaActive"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isDisabled 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal disabled"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isLink and href 1`] = `
+<DocumentFragment>
+  <a
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    href="/tab"
+    role="link"
+  >
+    <div
+      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"
+    />
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with isLink without href 1`] = `
+<DocumentFragment>
+  <a
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+  >
+    <div
+      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"
+    />
+  </a>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with needAppearance 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal tab"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with needAppearance and needBorder 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal border tab"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with needAppearance and type as alpha 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal tabAlpha alphaHover"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with needAppearance and type as beta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal tabBeta betaHover"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with needAppearance and type as delta 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal tabDelta deltaHover"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with style 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    style="width: 100px;"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with text 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Tab text"
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-auto d-flex-shrink-0 tabText"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Tab text
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with text and children 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="Tab text"
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    >
+      <div
+        class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-auto d-flex-shrink-0 tabText"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        Tab text
+      </div>
+      <div
+        class="d-min-w-0 d-flex-shrink"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <span>
+          Tab child
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with title and titlePosition as bottom 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    data-title="Tab title"
+    data-title-position="bottom"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with title and titlePosition as left 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    data-title="Tab title"
+    data-title-position="left"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with title and titlePosition as right 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    data-title="Tab title"
+    data-title-position="right"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with title and titlePosition as top 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    data-title="Tab title"
+    data-title-position="top"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tab Render with tourId 1`] = `
+<DocumentFragment>
+  <div
+    aria-selected="false"
+    class="d-basis-auto d-flex-shrink-0 tab horizontal"
+    data-id="tabMenu_Tab"
+    data-selector-id="tab"
+    data-test-id="tabMenu_Tab"
+    data-tour="tab-tour"
+    role="link"
+    tabindex="0"
+  >
+    <div
+      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"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Tab rendering the defult props 1`] = `
 <DocumentFragment>
   <div