From 5442757dc695c1e5b3dfeeb21366ddbcaa616c92 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Wed, 22 Jun 2022 10:03:54 -0500
Subject: [PATCH 01/10] [CL-17] Tabs - Routing

---
 libs/components/src/index.ts                  |  1 +
 .../active-dummy.component.ts                 |  9 +++
 .../disabled-dummy.component.ts               |  9 +++
 .../dummy-components/dummy.component.html     |  3 +
 .../item-2-dummy.component.ts                 |  9 +++
 .../item-3-dummy.component.ts                 |  9 +++
 libs/components/src/tabs/index.ts             |  3 +
 .../src/tabs/tab-group.component.html         |  6 ++
 .../src/tabs/tab-group.component.ts           |  7 +++
 .../src/tabs/tab-item.component.html          | 27 +++++++++
 .../components/src/tabs/tab-item.component.ts | 58 +++++++++++++++++++
 libs/components/src/tabs/tabs.module.ts       | 13 +++++
 libs/components/src/tabs/tabs.stories.ts      | 57 ++++++++++++++++++
 libs/components/tailwind.config.base.js       |  2 +
 14 files changed, 213 insertions(+)
 create mode 100644 libs/components/src/tabs/dummy-components/active-dummy.component.ts
 create mode 100644 libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
 create mode 100644 libs/components/src/tabs/dummy-components/dummy.component.html
 create mode 100644 libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
 create mode 100644 libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
 create mode 100644 libs/components/src/tabs/index.ts
 create mode 100644 libs/components/src/tabs/tab-group.component.html
 create mode 100644 libs/components/src/tabs/tab-group.component.ts
 create mode 100644 libs/components/src/tabs/tab-item.component.html
 create mode 100644 libs/components/src/tabs/tab-item.component.ts
 create mode 100644 libs/components/src/tabs/tabs.module.ts
 create mode 100644 libs/components/src/tabs/tabs.stories.ts

diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index a83b56135534..e61a9279deef 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -5,3 +5,4 @@ export * from "./callout";
 export * from "./form-field";
 export * from "./menu";
 export * from "./utils/i18n-mock.service";
+export * from "./tabs";
diff --git a/libs/components/src/tabs/dummy-components/active-dummy.component.ts b/libs/components/src/tabs/dummy-components/active-dummy.component.ts
new file mode 100644
index 000000000000..2c901f965145
--- /dev/null
+++ b/libs/components/src/tabs/dummy-components/active-dummy.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-active-dummy",
+  templateUrl: "./dummy.component.html",
+})
+export class ActiveDummyComponent {
+  title = "Active is Selected";
+}
diff --git a/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts b/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
new file mode 100644
index 000000000000..aae26979bbe6
--- /dev/null
+++ b/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-disabled-dummy",
+  templateUrl: "./dummy.component.html",
+})
+export class DisabledDummyComponent {
+  title = "Disabled is Selected";
+}
diff --git a/libs/components/src/tabs/dummy-components/dummy.component.html b/libs/components/src/tabs/dummy-components/dummy.component.html
new file mode 100644
index 000000000000..c85dfd79f250
--- /dev/null
+++ b/libs/components/src/tabs/dummy-components/dummy.component.html
@@ -0,0 +1,3 @@
+<div class="tw-bg-transparent tw-text-semibold tw-text-center !tw-text-main tw-py-10">
+  {{ title }}
+</div>
diff --git a/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
new file mode 100644
index 000000000000..277ae48ea580
--- /dev/null
+++ b/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-item-2-dummy",
+  templateUrl: "./dummy.component.html",
+})
+export class ItemTwoDummyComponent {
+  title = "Item 2 is Selected";
+}
diff --git a/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
new file mode 100644
index 000000000000..f19bb0018912
--- /dev/null
+++ b/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-item-3-dummy",
+  templateUrl: "./dummy.component.html",
+})
+export class ItemThreeDummyComponent {
+  title = "Item 3 is Selected";
+}
diff --git a/libs/components/src/tabs/index.ts b/libs/components/src/tabs/index.ts
new file mode 100644
index 000000000000..9b45ff1d43b5
--- /dev/null
+++ b/libs/components/src/tabs/index.ts
@@ -0,0 +1,3 @@
+export * from "./tabs.module";
+export * from "./tab-group.component";
+export * from "./tab-item.component";
diff --git a/libs/components/src/tabs/tab-group.component.html b/libs/components/src/tabs/tab-group.component.html
new file mode 100644
index 000000000000..aa29a2f58af7
--- /dev/null
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -0,0 +1,6 @@
+<div
+  role="tablist"
+  class="tw-flex tw-flex-wrap tw-pl-0 tw-my-0 tw-leading-5 tw-text-left tw-box-border"
+>
+  <ng-content></ng-content>
+</div>
diff --git a/libs/components/src/tabs/tab-group.component.ts b/libs/components/src/tabs/tab-group.component.ts
new file mode 100644
index 000000000000..856ab1f1e225
--- /dev/null
+++ b/libs/components/src/tabs/tab-group.component.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-group",
+  templateUrl: "./tab-group.component.html",
+})
+export class TabGroupComponent {}
diff --git a/libs/components/src/tabs/tab-item.component.html b/libs/components/src/tabs/tab-item.component.html
new file mode 100644
index 000000000000..e4f8c9bd58ee
--- /dev/null
+++ b/libs/components/src/tabs/tab-item.component.html
@@ -0,0 +1,27 @@
+<ng-template #linkRef>
+  <a
+    role="tab"
+    [class]="baseClassList"
+    [routerLink]="route"
+    [routerLinkActive]="activeClassList"
+    #rla="routerLinkActive"
+    [attr.aria-selected]="rla.isActive"
+  >
+    <ng-container [ngTemplateOutlet]="contentRef"></ng-container>
+  </a>
+</ng-template>
+<ng-template #btnRef>
+  <button
+    type="button"
+    role="tab"
+    [class]="baseClassList"
+    [disabled]="disabled"
+    [attr.aria-disabled]="disabled"
+  >
+    <ng-container [ngTemplateOutlet]="contentRef"></ng-container>
+  </button>
+</ng-template>
+<ng-template #contentRef>
+  <ng-content></ng-content>
+</ng-template>
+<ng-container [ngTemplateOutlet]="disabled ? btnRef : linkRef"></ng-container>
diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
new file mode 100644
index 000000000000..d042db5695b7
--- /dev/null
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -0,0 +1,58 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "bit-tab-item",
+  templateUrl: "./tab-item.component.html",
+})
+export class TabItemComponent {
+  @Input() route: string; // ['/route']
+  @Input() disabled = false;
+
+  get baseClassList(): string {
+    return [
+      "tw-block",
+      "tw-py-2",
+      "tw-px-4",
+      "tw-leading-5",
+      "tw-text-left",
+      "tw-font-semibold",
+      "tw-bg-transparent",
+      "tw-transition",
+      "tw-rounded-t",
+      "tw-border-0",
+      "tw-border-t-4",
+      "tw-border-t-transparent",
+      "tw-border-b",
+      "tw-border-b-secondary-300",
+      "tw-border-solid",
+      "tw-cursor-pointer",
+      "tw-box-border",
+      "tw-text-main",
+      "hover:tw-underline",
+      "focus:tw-underline",
+      "focus:tw-outline-none",
+      "focus:tw-ring-2",
+      "focus:tw-ring-primary-700",
+      "disabled:tw-bg-secondary-100",
+      "disabled:tw-text-muted",
+      "disabled:tw-no-underline",
+      "disabled:tw-border-t-transparent",
+      "disabled:tw-cursor-not-allowed",
+    ].join(" ");
+  }
+
+  get activeClassList(): string {
+    return [
+      "tw-border-x",
+      "tw-border-x-secondary-300",
+      "tw-border-t-primary-500",
+      "tw-border-b-transparent",
+      "tw-text-primary-500",
+      "hover:tw-border-t-primary-700",
+      "hover:tw-text-primary-700",
+      "focus:tw-border-t-primary-700",
+      "focus:tw-text-primary-700",
+      "focus:tw-underline",
+    ].join(" ");
+  }
+}
diff --git a/libs/components/src/tabs/tabs.module.ts b/libs/components/src/tabs/tabs.module.ts
new file mode 100644
index 000000000000..016bde504a55
--- /dev/null
+++ b/libs/components/src/tabs/tabs.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+
+import { TabGroupComponent } from "./tab-group.component";
+import { TabItemComponent } from "./tab-item.component";
+
+@NgModule({
+  imports: [CommonModule, RouterModule],
+  exports: [TabGroupComponent, TabItemComponent],
+  declarations: [TabGroupComponent, TabItemComponent],
+})
+export class TabsModule {}
diff --git a/libs/components/src/tabs/tabs.stories.ts b/libs/components/src/tabs/tabs.stories.ts
new file mode 100644
index 000000000000..e6821022800c
--- /dev/null
+++ b/libs/components/src/tabs/tabs.stories.ts
@@ -0,0 +1,57 @@
+import { CommonModule } from "@angular/common";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { ActiveDummyComponent } from "./dummy-components/active-dummy.component";
+import { DisabledDummyComponent } from "./dummy-components/disabled-dummy.component";
+import { ItemTwoDummyComponent } from "./dummy-components/item-2-dummy.component";
+import { ItemThreeDummyComponent } from "./dummy-components/item-3-dummy.component";
+import { TabGroupComponent } from "./tab-group.component";
+import { TabItemComponent } from "./tab-item.component";
+
+export default {
+  title: "Component Library/Tabs",
+  component: TabGroupComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [
+        TabGroupComponent,
+        TabItemComponent,
+        ActiveDummyComponent,
+        ItemTwoDummyComponent,
+        ItemThreeDummyComponent,
+        DisabledDummyComponent,
+      ],
+      imports: [
+        CommonModule,
+        RouterTestingModule.withRoutes([
+          { path: "active", component: ActiveDummyComponent },
+          { path: "item-2", component: ItemTwoDummyComponent },
+          { path: "item-3", component: ItemThreeDummyComponent },
+          { path: "disabled", component: DisabledDummyComponent },
+        ]),
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/branch/f32LSg3jaegICkMu7rPARm/Web-Vault-Components-(Bootstrap)?node-id=1881%3A18454",
+    },
+  },
+} as Meta;
+
+const TabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent) => ({
+  props: args,
+  template: `
+    <bit-tab-group>
+      <bit-tab-item [route]="['active']">Active</bit-tab-item>
+      <bit-tab-item [route]="['item-2']">Item 2</bit-tab-item>
+      <bit-tab-item [route]="['item-3']">Item 3</bit-tab-item>
+      <bit-tab-item [route]="['disabled']" [disabled]="true">Disabled</bit-tab-item>
+    </bit-tab-group>
+    <router-outlet></router-outlet>
+  `,
+});
+
+export const TabGroup = TabGroupTemplate.bind({});
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index fd0caec74908..31ff19cb5019 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -60,6 +60,8 @@ module.exports = {
       info: "var(--color-info-500)",
       primary: {
         300: "var(--color-primary-300)",
+        500: "var(--color-primary-500)",
+        700: "var(--color-primary-700)",
       },
     },
     ringOffsetColor: ({ theme }) => ({

From a4385ba2e7616eff2d600248350328eb66ed309f Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Wed, 22 Jun 2022 10:45:11 -0500
Subject: [PATCH 02/10] Updated titles

---
 .../src/tabs/dummy-components/active-dummy.component.ts         | 2 +-
 .../src/tabs/dummy-components/disabled-dummy.component.ts       | 2 +-
 .../src/tabs/dummy-components/item-2-dummy.component.ts         | 2 +-
 .../src/tabs/dummy-components/item-3-dummy.component.ts         | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/tabs/dummy-components/active-dummy.component.ts b/libs/components/src/tabs/dummy-components/active-dummy.component.ts
index 2c901f965145..d9ddc6066786 100644
--- a/libs/components/src/tabs/dummy-components/active-dummy.component.ts
+++ b/libs/components/src/tabs/dummy-components/active-dummy.component.ts
@@ -5,5 +5,5 @@ import { Component } from "@angular/core";
   templateUrl: "./dummy.component.html",
 })
 export class ActiveDummyComponent {
-  title = "Active is Selected";
+  title = "Router - Active selected";
 }
diff --git a/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts b/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
index aae26979bbe6..bab128d26767 100644
--- a/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
+++ b/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
@@ -5,5 +5,5 @@ import { Component } from "@angular/core";
   templateUrl: "./dummy.component.html",
 })
 export class DisabledDummyComponent {
-  title = "Disabled is Selected";
+  title = "Router - Disabled selected";
 }
diff --git a/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
index 277ae48ea580..29bf4ccb9597 100644
--- a/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
+++ b/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
@@ -5,5 +5,5 @@ import { Component } from "@angular/core";
   templateUrl: "./dummy.component.html",
 })
 export class ItemTwoDummyComponent {
-  title = "Item 2 is Selected";
+  title = "Router - Item 2 selected";
 }
diff --git a/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
index f19bb0018912..d1e335a88496 100644
--- a/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
+++ b/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
@@ -5,5 +5,5 @@ import { Component } from "@angular/core";
   templateUrl: "./dummy.component.html",
 })
 export class ItemThreeDummyComponent {
-  title = "Item 3 is Selected";
+  title = "Router - Item 3 selected";
 }

From b6a593fb5d4e71aa4a1f55842a9f917815359fd7 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Sat, 2 Jul 2022 10:07:53 -0500
Subject: [PATCH 03/10] Revision changes

---
 .../active-dummy.component.ts                 |  9 -----
 .../disabled-dummy.component.ts               |  9 -----
 .../dummy-components/dummy.component.html     |  3 --
 .../item-2-dummy.component.ts                 |  9 -----
 .../item-3-dummy.component.ts                 |  9 -----
 .../src/tabs/tab-item.component.html          | 19 +++++-----
 .../components/src/tabs/tab-item.component.ts | 12 ++++---
 libs/components/src/tabs/tabs.stories.ts      | 36 +++++++++++++++----
 8 files changed, 46 insertions(+), 60 deletions(-)
 delete mode 100644 libs/components/src/tabs/dummy-components/active-dummy.component.ts
 delete mode 100644 libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
 delete mode 100644 libs/components/src/tabs/dummy-components/dummy.component.html
 delete mode 100644 libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
 delete mode 100644 libs/components/src/tabs/dummy-components/item-3-dummy.component.ts

diff --git a/libs/components/src/tabs/dummy-components/active-dummy.component.ts b/libs/components/src/tabs/dummy-components/active-dummy.component.ts
deleted file mode 100644
index d9ddc6066786..000000000000
--- a/libs/components/src/tabs/dummy-components/active-dummy.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "bit-tab-active-dummy",
-  templateUrl: "./dummy.component.html",
-})
-export class ActiveDummyComponent {
-  title = "Router - Active selected";
-}
diff --git a/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts b/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
deleted file mode 100644
index bab128d26767..000000000000
--- a/libs/components/src/tabs/dummy-components/disabled-dummy.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "bit-tab-disabled-dummy",
-  templateUrl: "./dummy.component.html",
-})
-export class DisabledDummyComponent {
-  title = "Router - Disabled selected";
-}
diff --git a/libs/components/src/tabs/dummy-components/dummy.component.html b/libs/components/src/tabs/dummy-components/dummy.component.html
deleted file mode 100644
index c85dfd79f250..000000000000
--- a/libs/components/src/tabs/dummy-components/dummy.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="tw-bg-transparent tw-text-semibold tw-text-center !tw-text-main tw-py-10">
-  {{ title }}
-</div>
diff --git a/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
deleted file mode 100644
index 29bf4ccb9597..000000000000
--- a/libs/components/src/tabs/dummy-components/item-2-dummy.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "bit-tab-item-2-dummy",
-  templateUrl: "./dummy.component.html",
-})
-export class ItemTwoDummyComponent {
-  title = "Router - Item 2 selected";
-}
diff --git a/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts b/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
deleted file mode 100644
index d1e335a88496..000000000000
--- a/libs/components/src/tabs/dummy-components/item-3-dummy.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  selector: "bit-tab-item-3-dummy",
-  templateUrl: "./dummy.component.html",
-})
-export class ItemThreeDummyComponent {
-  title = "Router - Item 3 selected";
-}
diff --git a/libs/components/src/tabs/tab-item.component.html b/libs/components/src/tabs/tab-item.component.html
index e4f8c9bd58ee..951cfb3be189 100644
--- a/libs/components/src/tabs/tab-item.component.html
+++ b/libs/components/src/tabs/tab-item.component.html
@@ -1,5 +1,6 @@
-<ng-template #linkRef>
+<ng-container [ngSwitch]="disabled">
   <a
+    *ngSwitchCase="false"
     role="tab"
     [class]="baseClassList"
     [routerLink]="route"
@@ -7,21 +8,19 @@
     #rla="routerLinkActive"
     [attr.aria-selected]="rla.isActive"
   >
-    <ng-container [ngTemplateOutlet]="contentRef"></ng-container>
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
   </a>
-</ng-template>
-<ng-template #btnRef>
   <button
+    *ngSwitchCase="true"
     type="button"
     role="tab"
     [class]="baseClassList"
-    [disabled]="disabled"
-    [attr.aria-disabled]="disabled"
+    disabled
+    aria-disabled="true"
   >
-    <ng-container [ngTemplateOutlet]="contentRef"></ng-container>
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
   </button>
-</ng-template>
-<ng-template #contentRef>
+</ng-container>
+<ng-template #content>
   <ng-content></ng-content>
 </ng-template>
-<ng-container [ngTemplateOutlet]="disabled ? btnRef : linkRef"></ng-container>
diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index d042db5695b7..22ad0fe6e116 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -5,8 +5,11 @@ import { Component, Input } from "@angular/core";
   templateUrl: "./tab-item.component.html",
 })
 export class TabItemComponent {
-  @Input() route: string; // ['/route']
-  @Input() disabled = false;
+  @Input()
+  route: string; // ['/route']
+
+  @Input()
+  disabled = false;
 
   get baseClassList(): string {
     return [
@@ -29,7 +32,7 @@ export class TabItemComponent {
       "tw-box-border",
       "tw-text-main",
       "hover:tw-underline",
-      "focus:tw-underline",
+      "hover:tw-text-main",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",
@@ -49,10 +52,9 @@ export class TabItemComponent {
       "tw-border-b-transparent",
       "tw-text-primary-500",
       "hover:tw-border-t-primary-700",
-      "hover:tw-text-primary-700",
+      "hover:!tw-text-primary-700",
       "focus:tw-border-t-primary-700",
       "focus:tw-text-primary-700",
-      "focus:tw-underline",
     ].join(" ");
   }
 }
diff --git a/libs/components/src/tabs/tabs.stories.ts b/libs/components/src/tabs/tabs.stories.ts
index e6821022800c..c1e72497b6e6 100644
--- a/libs/components/src/tabs/tabs.stories.ts
+++ b/libs/components/src/tabs/tabs.stories.ts
@@ -1,14 +1,35 @@
 import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
-import { ActiveDummyComponent } from "./dummy-components/active-dummy.component";
-import { DisabledDummyComponent } from "./dummy-components/disabled-dummy.component";
-import { ItemTwoDummyComponent } from "./dummy-components/item-2-dummy.component";
-import { ItemThreeDummyComponent } from "./dummy-components/item-3-dummy.component";
 import { TabGroupComponent } from "./tab-group.component";
 import { TabItemComponent } from "./tab-item.component";
 
+@Component({
+  selector: "bit-tab-active-dummy",
+  template: "Router - Active selected",
+})
+class ActiveDummyComponent {}
+
+@Component({
+  selector: "bit-tab-item-2-dummy",
+  template: "Router - Item 2 selected",
+})
+class ItemTwoDummyComponent {}
+
+@Component({
+  selector: "bit-tab-item-3-dummy",
+  template: "Router - Item 3 selected",
+})
+class ItemThreeDummyComponent {}
+
+@Component({
+  selector: "bit-tab-disabled-dummy",
+  template: "Router - Disabled selected",
+})
+class DisabledDummyComponent {}
+
 export default {
   title: "Component Library/Tabs",
   component: TabGroupComponent,
@@ -25,6 +46,7 @@ export default {
       imports: [
         CommonModule,
         RouterTestingModule.withRoutes([
+          { path: "", redirectTo: "active", pathMatch: "full" },
           { path: "active", component: ActiveDummyComponent },
           { path: "item-2", component: ItemTwoDummyComponent },
           { path: "item-3", component: ItemThreeDummyComponent },
@@ -36,7 +58,7 @@ export default {
   parameters: {
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/branch/f32LSg3jaegICkMu7rPARm/Web-Vault-Components-(Bootstrap)?node-id=1881%3A18454",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17922",
     },
   },
 } as Meta;
@@ -50,7 +72,9 @@ const TabGroupTemplate: Story<TabGroupComponent> = (args: TabGroupComponent) =>
       <bit-tab-item [route]="['item-3']">Item 3</bit-tab-item>
       <bit-tab-item [route]="['disabled']" [disabled]="true">Disabled</bit-tab-item>
     </bit-tab-group>
-    <router-outlet></router-outlet>
+    <div class="tw-bg-transparent tw-text-semibold tw-text-center !tw-text-main tw-py-10">
+      <router-outlet></router-outlet>
+    </div>
   `,
 });
 

From 33c3dbe7028399a36bfe405735bcce2ca650e962 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Mon, 4 Jul 2022 09:19:43 -0500
Subject: [PATCH 04/10] Replaced testing module to achieve active default state

---
 libs/components/src/tabs/tabs.stories.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/libs/components/src/tabs/tabs.stories.ts b/libs/components/src/tabs/tabs.stories.ts
index c1e72497b6e6..15ee57fa7d58 100644
--- a/libs/components/src/tabs/tabs.stories.ts
+++ b/libs/components/src/tabs/tabs.stories.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
-import { RouterTestingModule } from "@angular/router/testing";
+import { RouterModule } from "@angular/router";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
 import { TabGroupComponent } from "./tab-group.component";
@@ -45,13 +45,16 @@ export default {
       ],
       imports: [
         CommonModule,
-        RouterTestingModule.withRoutes([
-          { path: "", redirectTo: "active", pathMatch: "full" },
-          { path: "active", component: ActiveDummyComponent },
-          { path: "item-2", component: ItemTwoDummyComponent },
-          { path: "item-3", component: ItemThreeDummyComponent },
-          { path: "disabled", component: DisabledDummyComponent },
-        ]),
+        RouterModule.forRoot(
+          [
+            { path: "", redirectTo: "active", pathMatch: "full" },
+            { path: "active", component: ActiveDummyComponent },
+            { path: "item-2", component: ItemTwoDummyComponent },
+            { path: "item-3", component: ItemThreeDummyComponent },
+            { path: "disabled", component: DisabledDummyComponent },
+          ],
+          { useHash: true }
+        ),
       ],
     }),
   ],

From 8b6c35e5a333350cf9b8a74e7a5764b0e7e2709c Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Tue, 5 Jul 2022 12:18:39 -0500
Subject: [PATCH 05/10] Z-index for tab vs disabled

---
 libs/components/src/tabs/tab-item.component.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index 22ad0fe6e116..2ca8c236b3c8 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -14,6 +14,8 @@ export class TabItemComponent {
   get baseClassList(): string {
     return [
       "tw-block",
+      "tw-relative",
+      this.disabled ? "tw-z-0" : "tw-z-20",
       "tw-py-2",
       "tw-px-4",
       "tw-leading-5",

From 6b0eae68bb3dbe45e5723cb1c0a3727a7b10341c Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Wed, 6 Jul 2022 09:08:56 -0500
Subject: [PATCH 06/10] Revision changes

---
 libs/components/src/tabs/tab-item.component.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index 2ca8c236b3c8..e11adbe37b74 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -5,17 +5,14 @@ import { Component, Input } from "@angular/core";
   templateUrl: "./tab-item.component.html",
 })
 export class TabItemComponent {
-  @Input()
-  route: string; // ['/route']
+  @Input() route: string; // ['/route']
+  @Input() disabled = false;
 
-  @Input()
-  disabled = false;
-
-  get baseClassList(): string {
+  get baseClassList(): string[] {
     return [
       "tw-block",
       "tw-relative",
-      this.disabled ? "tw-z-0" : "tw-z-20",
+      this.disabled ? "tw-z-0" : "tw-z-10",
       "tw-py-2",
       "tw-px-4",
       "tw-leading-5",
@@ -41,9 +38,8 @@ export class TabItemComponent {
       "disabled:tw-bg-secondary-100",
       "disabled:tw-text-muted",
       "disabled:tw-no-underline",
-      "disabled:tw-border-t-transparent",
       "disabled:tw-cursor-not-allowed",
-    ].join(" ");
+    ];
   }
 
   get activeClassList(): string {

From 0f860c147033f5bf48eb871dab0b33deae07e7d9 Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Wed, 6 Jul 2022 09:11:19 -0500
Subject: [PATCH 07/10] Updated z index on focus

---
 libs/components/src/tabs/tab-item.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index e11adbe37b74..d2379ae32137 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -12,7 +12,6 @@ export class TabItemComponent {
     return [
       "tw-block",
       "tw-relative",
-      this.disabled ? "tw-z-0" : "tw-z-10",
       "tw-py-2",
       "tw-px-4",
       "tw-leading-5",
@@ -32,6 +31,7 @@ export class TabItemComponent {
       "tw-text-main",
       "hover:tw-underline",
       "hover:tw-text-main",
+      "focus:tw-z-10",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",

From 0678c0d16de733841c4358d0bc8c5b4c05f0c0df Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Tue, 12 Jul 2022 12:24:16 -0500
Subject: [PATCH 08/10] Fixed background color of selected tab

---
 libs/components/src/tabs/tab-item.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index d2379ae32137..749775e91bf9 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -48,6 +48,7 @@ export class TabItemComponent {
       "tw-border-x-secondary-300",
       "tw-border-t-primary-500",
       "tw-border-b-transparent",
+      "tw-bg-background",
       "tw-text-primary-500",
       "hover:tw-border-t-primary-700",
       "hover:!tw-text-primary-700",

From b4a2383d96946fb684e5ae0b1b443e4cd8dac83a Mon Sep 17 00:00:00 2001
From: Vincent Salucci <vincesalucci21@gmail.com>
Date: Fri, 15 Jul 2022 11:16:59 -0500
Subject: [PATCH 09/10] Force text colors in-case bootstrap tries to override

---
 libs/components/src/tabs/tab-group.component.html |  5 +----
 libs/components/src/tabs/tab-item.component.ts    | 10 +++++-----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/tabs/tab-group.component.html b/libs/components/src/tabs/tab-group.component.html
index aa29a2f58af7..0f1374aac586 100644
--- a/libs/components/src/tabs/tab-group.component.html
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -1,6 +1,3 @@
-<div
-  role="tablist"
-  class="tw-flex tw-flex-wrap tw-pl-0 tw-my-0 tw-leading-5 tw-text-left tw-box-border"
->
+<div role="tablist" class="tw-inline-flex tw-flex-wrap tw-leading-5">
   <ng-content></ng-content>
 </div>
diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index 749775e91bf9..f481a7f63d9a 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -28,15 +28,15 @@ export class TabItemComponent {
       "tw-border-solid",
       "tw-cursor-pointer",
       "tw-box-border",
-      "tw-text-main",
+      "!tw-text-main",
       "hover:tw-underline",
-      "hover:tw-text-main",
+      "hover:!tw-text-main",
       "focus:tw-z-10",
       "focus:tw-outline-none",
       "focus:tw-ring-2",
       "focus:tw-ring-primary-700",
       "disabled:tw-bg-secondary-100",
-      "disabled:tw-text-muted",
+      "disabled:!tw-text-muted",
       "disabled:tw-no-underline",
       "disabled:tw-cursor-not-allowed",
     ];
@@ -49,11 +49,11 @@ export class TabItemComponent {
       "tw-border-t-primary-500",
       "tw-border-b-transparent",
       "tw-bg-background",
-      "tw-text-primary-500",
+      "!tw-text-primary-500",
       "hover:tw-border-t-primary-700",
       "hover:!tw-text-primary-700",
       "focus:tw-border-t-primary-700",
-      "focus:tw-text-primary-700",
+      "focus:!tw-text-primary-700",
     ].join(" ");
   }
 }

From 26f919940565e01eff949ef7bfcf4cab789c71a7 Mon Sep 17 00:00:00 2001
From: Hinton <hinton@users.noreply.github.com>
Date: Mon, 18 Jul 2022 08:44:25 +0200
Subject: [PATCH 10/10] Remove unecessary css rules, fix tabs moving when
 active

---
 libs/components/src/tabs/tab-group.component.html |  5 ++++-
 libs/components/src/tabs/tab-item.component.ts    | 15 +++++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/tabs/tab-group.component.html b/libs/components/src/tabs/tab-group.component.html
index 0f1374aac586..ad681b168f01 100644
--- a/libs/components/src/tabs/tab-group.component.html
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -1,3 +1,6 @@
-<div role="tablist" class="tw-inline-flex tw-flex-wrap tw-leading-5">
+<div
+  role="tablist"
+  class="tw-inline-flex tw-flex-wrap tw-leading-5 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
+>
   <ng-content></ng-content>
 </div>
diff --git a/libs/components/src/tabs/tab-item.component.ts b/libs/components/src/tabs/tab-item.component.ts
index f481a7f63d9a..cda332e26d52 100644
--- a/libs/components/src/tabs/tab-item.component.ts
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -14,20 +14,14 @@ export class TabItemComponent {
       "tw-relative",
       "tw-py-2",
       "tw-px-4",
-      "tw-leading-5",
-      "tw-text-left",
       "tw-font-semibold",
-      "tw-bg-transparent",
       "tw-transition",
       "tw-rounded-t",
       "tw-border-0",
+      "tw-border-x",
       "tw-border-t-4",
-      "tw-border-t-transparent",
-      "tw-border-b",
-      "tw-border-b-secondary-300",
+      "tw-border-transparent",
       "tw-border-solid",
-      "tw-cursor-pointer",
-      "tw-box-border",
       "!tw-text-main",
       "hover:tw-underline",
       "hover:!tw-text-main",
@@ -44,10 +38,11 @@ export class TabItemComponent {
 
   get activeClassList(): string {
     return [
-      "tw-border-x",
+      "tw--mb-px",
       "tw-border-x-secondary-300",
       "tw-border-t-primary-500",
-      "tw-border-b-transparent",
+      "tw-border-b",
+      "tw-border-b-background",
       "tw-bg-background",
       "!tw-text-primary-500",
       "hover:tw-border-t-primary-700",