[Component Library] Text/Button Links (#3126)

* Initial commit

* Updated stories / Fixed issues with dark theme constrast color

* Force colors so bootstrap doesn't override

* Fixed text colors / Added initial tests

* Added jest debugging ability to components package

* Removed spec file

* Fixed anchor layout

* revert base font-size

* [CL-28] fixed indentation, used focus-visible, adjusted disabled colors

* [CL-28] Reduced ring thickness to better match figma

* [CL-28] Updated story link

* [CL-44] [CL-28] Updated tabs disabled color / Converted to rgb format with helper

libs/components/src/link/index.ts

@@ -0,0 +1,2 @@
+export * from "./link.directive";
+export * from "./link.module";

libs/components/src/link/link.directive.ts

@@ -0,0 +1,54 @@
+import { Input, HostBinding, Directive } from "@angular/core";
+
+export type LinkType = "primary" | "secondary" | "contrast";
+
+const linkStyles: Record<LinkType, string[]> = {
+  primary: [
+    "!tw-text-primary-500",
+    "hover:!tw-text-primary-500",
+    "focus-visible:tw-ring-primary-700",
+    "disabled:!tw-text-primary-500/60",
+  ],
+  secondary: [
+    "!tw-text-main",
+    "hover:!tw-text-main",
+    "focus-visible:tw-ring-primary-700",
+    "disabled:!tw-text-muted/60",
+  ],
+  contrast: [
+    "!tw-text-contrast",
+    "hover:!tw-text-contrast",
+    "focus-visible:tw-ring-text-contrast",
+    "disabled:!tw-text-contrast/60",
+  ],
+};
+
+@Directive({
+  selector: "button[bitLink], a[bitLink]",
+})
+export class LinkDirective {
+  @HostBinding("class") get classList() {
+    return [
+      "tw-font-semibold",
+      "tw-py-0.5",
+      "tw-px-0",
+      "tw-bg-transparent",
+      "tw-border-0",
+      "tw-border-none",
+      "tw-rounded",
+      "tw-transition",
+      "hover:tw-underline",
+      "hover:tw-decoration-1",
+      "focus-visible:tw-outline-none",
+      "focus-visible:tw-underline",
+      "focus-visible:tw-decoration-1",
+      "focus-visible:tw-ring-2",
+      "focus-visible:tw-z-10",
+      "disabled:tw-no-underline",
+      "disabled:tw-cursor-not-allowed",
+    ].concat(linkStyles[this.linkType] ?? []);
+  }
+
+  @Input()
+  linkType: LinkType = "primary";
+}

libs/components/src/link/link.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { LinkDirective } from "./link.directive";
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [LinkDirective],
+  declarations: [LinkDirective],
+})
+export class LinkModule {}

libs/components/src/link/link.stories.ts

@@ -0,0 +1,93 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { LinkDirective } from "./link.directive";
+
+export default {
+  title: "Component Library/Link",
+  component: LinkDirective,
+  argTypes: {
+    linkType: {
+      options: ["primary", "secondary", "contrast"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A17419",
+    },
+  },
+} as Meta;
+
+const ButtonTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
+  props: args,
+  template: `
+  <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
+    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">Button</button>
+    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
+      <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+      Add Icon Button
+    </button>
+    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
+      Chevron Icon Button
+      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+    </button>
+    <button bitLink [linkType]="linkType" class="tw-text-sm tw-block">Small Button</button>
+  </div>
+  `,
+});
+
+const AnchorTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
+  props: args,
+  template: `
+  <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
+    <div class="tw-block tw-p-2">
+      <a bitLink [linkType]="linkType" href="#">Anchor</a>
+    </div>
+    <div class="tw-block tw-p-2">
+      <a bitLink [linkType]="linkType" href="#">
+        <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+        Add Icon Anchor
+      </a>
+    </div>
+    <div class="tw-block tw-p-2">
+      <a bitLink [linkType]="linkType" href="#">
+        Chevron Icon Anchor
+        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+      </a>
+    </div>
+    <div class="tw-block tw-p-2">
+      <a bitLink [linkType]="linkType" class="tw-text-sm" href="#">Small Anchor</a>
+    </div>
+  </div>
+  `,
+});
+
+export const Buttons = ButtonTemplate.bind({});
+Buttons.args = {
+  linkType: "primary",
+};
+
+export const Anchors = AnchorTemplate.bind({});
+Anchors.args = {
+  linkType: "primary",
+};
+
+const DisabledTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
+    <button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
+    <div class="tw-bg-primary-500 tw-p-2 tw-inline-block">
+      <button bitLink disabled linkType="contrast" class="tw-mr-2">Contrast</button>
+    </div>
+  `,
+});
+
+export const Disabled = DisabledTemplate.bind({});
+Disabled.parameters = {
+  controls: {
+    exclude: ["linkType"],
+    hideNoControlsWarning: true,
+  },
+};