From 5ef3aac5e2d8e565e7639d70e0cbd4994debc5db Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Mon, 18 Jul 2022 09:17:31 -0500
Subject: [PATCH] [CL-17] Tabs - Router (#2952)

* [CL-17] Tabs - Routing

* Updated titles

* Revision changes

* Replaced testing module to achieve active default state

* Z-index for tab vs disabled

* Revision changes

* Updated z index on focus

* Fixed background color of selected tab

* Force text colors in-case bootstrap tries to override

* Remove unecessary css rules, fix tabs moving when active

Co-authored-by: Hinton <hinton@users.noreply.github.com>
---
 libs/components/src/index.ts                  |  1 +
 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          | 26 ++++++
 .../components/src/tabs/tab-item.component.ts | 54 ++++++++++++
 libs/components/src/tabs/tabs.module.ts       | 13 +++
 libs/components/src/tabs/tabs.stories.ts      | 84 +++++++++++++++++++
 libs/components/tailwind.config.base.js       |  2 +
 9 files changed, 196 insertions(+)
 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 a6c9e54c57..5ccceae874 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -6,4 +6,5 @@ export * from "./callout";
 export * from "./form-field";
 export * from "./menu";
 export * from "./utils/i18n-mock.service";
+export * from "./tabs";
 export * from "./submit-button";
diff --git a/libs/components/src/tabs/index.ts b/libs/components/src/tabs/index.ts
new file mode 100644
index 0000000000..9b45ff1d43
--- /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 0000000000..ad681b168f
--- /dev/null
+++ b/libs/components/src/tabs/tab-group.component.html
@@ -0,0 +1,6 @@
+<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-group.component.ts b/libs/components/src/tabs/tab-group.component.ts
new file mode 100644
index 0000000000..856ab1f1e2
--- /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 0000000000..951cfb3be1
--- /dev/null
+++ b/libs/components/src/tabs/tab-item.component.html
@@ -0,0 +1,26 @@
+<ng-container [ngSwitch]="disabled">
+  <a
+    *ngSwitchCase="false"
+    role="tab"
+    [class]="baseClassList"
+    [routerLink]="route"
+    [routerLinkActive]="activeClassList"
+    #rla="routerLinkActive"
+    [attr.aria-selected]="rla.isActive"
+  >
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
+  </a>
+  <button
+    *ngSwitchCase="true"
+    type="button"
+    role="tab"
+    [class]="baseClassList"
+    disabled
+    aria-disabled="true"
+  >
+    <ng-container [ngTemplateOutlet]="content"></ng-container>
+  </button>
+</ng-container>
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
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 0000000000..cda332e26d
--- /dev/null
+++ b/libs/components/src/tabs/tab-item.component.ts
@@ -0,0 +1,54 @@
+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-relative",
+      "tw-py-2",
+      "tw-px-4",
+      "tw-font-semibold",
+      "tw-transition",
+      "tw-rounded-t",
+      "tw-border-0",
+      "tw-border-x",
+      "tw-border-t-4",
+      "tw-border-transparent",
+      "tw-border-solid",
+      "!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",
+      "disabled:tw-bg-secondary-100",
+      "disabled:!tw-text-muted",
+      "disabled:tw-no-underline",
+      "disabled:tw-cursor-not-allowed",
+    ];
+  }
+
+  get activeClassList(): string {
+    return [
+      "tw--mb-px",
+      "tw-border-x-secondary-300",
+      "tw-border-t-primary-500",
+      "tw-border-b",
+      "tw-border-b-background",
+      "tw-bg-background",
+      "!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",
+    ].join(" ");
+  }
+}
diff --git a/libs/components/src/tabs/tabs.module.ts b/libs/components/src/tabs/tabs.module.ts
new file mode 100644
index 0000000000..016bde504a
--- /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 0000000000..15ee57fa7d
--- /dev/null
+++ b/libs/components/src/tabs/tabs.stories.ts
@@ -0,0 +1,84 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+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,
+  decorators: [
+    moduleMetadata({
+      declarations: [
+        TabGroupComponent,
+        TabItemComponent,
+        ActiveDummyComponent,
+        ItemTwoDummyComponent,
+        ItemThreeDummyComponent,
+        DisabledDummyComponent,
+      ],
+      imports: [
+        CommonModule,
+        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 }
+        ),
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17922",
+    },
+  },
+} 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>
+    <div class="tw-bg-transparent tw-text-semibold tw-text-center !tw-text-main tw-py-10">
+      <router-outlet></router-outlet>
+    </div>
+  `,
+});
+
+export const TabGroup = TabGroupTemplate.bind({});
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index fd0caec749..31ff19cb50 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 }) => ({