[EC 456] Component Library Content Switching Tabs (#3452)

* [EC-456] Rename bitTabItem -> bitTab

* [EC-456] Use templateRefs or text for tab label content

* [EC-456] Add bit-tab-nav-bar component

* [EC-456] Finish content tab switching and nav tabs

* [EC-456] Undo accidental eslintrc.json change

* [EC-456] Fix directive/component selector naming convention

* [EC-456] Cleanup unnecessary InjectionTokens and simplify template label property

* [EC-456] Cleanup one more unnecessary InjectionToken

* [EC-456] Cleanup tab styles to better match Figma. Add internal tab header component for styling header background according to Figma.

* [EC-456] Add sub-folders for nav, content, and shared tab components/directives

* [EC-456] Code/style cleanup

* [EC-456] Remove underscore from protected members

* [EC-456] Cleanup tab stories and forgotten any type.

* [EC-456] Fix dark theme story tab content text color

* [EC-456] Add missing padding to tab header

* [EC-456] Add tab content padding to align with tab headers

* [EC-456] Move bottom tab border to header to span entire content area

* [EC-456] Force text-main tab label color

* [EC-456] Undo text-main change

libs/components/src/tabs/shared/tab-header.component.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+
+/**
+ * Component used for styling the tab header/background for both content and navigation tabs
+ */
+@Component({
+  selector: "bit-tab-header",
+  host: {
+    class:
+      "tw-h-16 tw-pl-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
+  },
+  template: `<ng-content></ng-content>`,
+})
+export class TabHeaderComponent {}

libs/components/src/tabs/shared/tab-list-container.directive.ts

@@ -0,0 +1,12 @@
+import { Directive } from "@angular/core";
+
+/**
+ * Directive used for styling the container for bit tab labels
+ */
+@Directive({
+  selector: "[bitTabListContainer]",
+  host: {
+    class: "tw-inline-flex tw-flex-wrap tw-leading-5",
+  },
+})
+export class TabListContainerDirective {}

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -0,0 +1,85 @@
+import { FocusableOption } from "@angular/cdk/a11y";
+import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
+
+/**
+ * Directive used for styling tab header items for both nav links (anchor tags)
+ * and content tabs (button tags)
+ */
+@Directive({ selector: "[bitTabListItem]" })
+export class TabListItemDirective implements FocusableOption {
+  @Input() active: boolean;
+  @Input() disabled: boolean;
+
+  @HostBinding("attr.disabled")
+  get disabledAttr() {
+    return this.disabled || null; // native disabled attr must be null when false
+  }
+
+  constructor(private elementRef: ElementRef) {}
+
+  focus() {
+    this.elementRef.nativeElement.focus();
+  }
+
+  click() {
+    this.elementRef.nativeElement.click();
+  }
+
+  @HostBinding("class")
+  get classList(): string[] {
+    return this.baseClassList
+      .concat(this.active ? this.activeClassList : [])
+      .concat(this.disabled ? this.disabledClassList : []);
+  }
+
+  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-bg-transparent",
+      "tw-text-main",
+      "hover:tw-underline",
+      "hover:tw-text-main",
+      "focus-visible:tw-z-10",
+      "focus-visible:tw-outline-none",
+      "focus-visible:tw-ring-2",
+      "focus-visible:tw-ring-primary-700",
+    ];
+  }
+
+  get disabledClassList(): string[] {
+    return [
+      "!tw-bg-secondary-100",
+      "!tw-text-muted",
+      "hover:!tw-text-muted",
+      "!tw-no-underline",
+      "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-visible:tw-border-t-primary-700",
+      "focus-visible:!tw-text-primary-700",
+    ];
+  }
+}