From 4fc278b956378d0cab7727456258274d4797f367 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Thu, 28 Jul 2022 12:43:00 +0200
Subject: [PATCH] [CL-24] Add tables (#2950)

---
 libs/components/src/table/cell.directive.ts   | 10 ++++
 libs/components/src/table/index.ts            |  1 +
 libs/components/src/table/row.directive.ts    | 17 ++++++
 .../components/src/table/table.component.html | 10 ++++
 libs/components/src/table/table.component.ts  |  7 +++
 libs/components/src/table/table.module.ts     | 13 +++++
 libs/components/src/table/table.stories.ts    | 53 +++++++++++++++++++
 7 files changed, 111 insertions(+)
 create mode 100644 libs/components/src/table/cell.directive.ts
 create mode 100644 libs/components/src/table/index.ts
 create mode 100644 libs/components/src/table/row.directive.ts
 create mode 100644 libs/components/src/table/table.component.html
 create mode 100644 libs/components/src/table/table.component.ts
 create mode 100644 libs/components/src/table/table.module.ts
 create mode 100644 libs/components/src/table/table.stories.ts

diff --git a/libs/components/src/table/cell.directive.ts b/libs/components/src/table/cell.directive.ts
new file mode 100644
index 0000000000..7083ed462e
--- /dev/null
+++ b/libs/components/src/table/cell.directive.ts
@@ -0,0 +1,10 @@
+import { HostBinding, Directive } from "@angular/core";
+
+@Directive({
+  selector: "th[bitCell], td[bitCell]",
+})
+export class CellDirective {
+  @HostBinding("class") get classList() {
+    return ["tw-p-3"];
+  }
+}
diff --git a/libs/components/src/table/index.ts b/libs/components/src/table/index.ts
new file mode 100644
index 0000000000..02fed986ac
--- /dev/null
+++ b/libs/components/src/table/index.ts
@@ -0,0 +1 @@
+export * from "./table.module";
diff --git a/libs/components/src/table/row.directive.ts b/libs/components/src/table/row.directive.ts
new file mode 100644
index 0000000000..ebef2f520a
--- /dev/null
+++ b/libs/components/src/table/row.directive.ts
@@ -0,0 +1,17 @@
+import { HostBinding, Directive } from "@angular/core";
+
+@Directive({
+  selector: "tr[bitRow]",
+})
+export class RowDirective {
+  @HostBinding("class") get classList() {
+    return [
+      "tw-border-0",
+      "tw-border-b",
+      "tw-border-secondary-300",
+      "tw-border-solid",
+      "hover:tw-bg-background-alt",
+      "last:tw-border-0",
+    ];
+  }
+}
diff --git a/libs/components/src/table/table.component.html b/libs/components/src/table/table.component.html
new file mode 100644
index 0000000000..e65733c492
--- /dev/null
+++ b/libs/components/src/table/table.component.html
@@ -0,0 +1,10 @@
+<table class="tw-table-auto tw-w-full tw-text-main tw-leading-normal">
+  <thead
+    class="tw-border-solid tw-border-0 tw-border-b-2 tw-border-secondary-300 tw-text-muted tw-text-bold"
+  >
+    <ng-content select="[header]"></ng-content>
+  </thead>
+  <tbody>
+    <ng-content select="[body]"></ng-content>
+  </tbody>
+</table>
diff --git a/libs/components/src/table/table.component.ts b/libs/components/src/table/table.component.ts
new file mode 100644
index 0000000000..8099c35b92
--- /dev/null
+++ b/libs/components/src/table/table.component.ts
@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-table",
+  templateUrl: "./table.component.html",
+})
+export class TableComponent {}
diff --git a/libs/components/src/table/table.module.ts b/libs/components/src/table/table.module.ts
new file mode 100644
index 0000000000..2ca88a349f
--- /dev/null
+++ b/libs/components/src/table/table.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { CellDirective } from "./cell.directive";
+import { RowDirective } from "./row.directive";
+import { TableComponent } from "./table.component";
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [TableComponent, CellDirective, RowDirective],
+  exports: [TableComponent, CellDirective, RowDirective],
+})
+export class TableModule {}
diff --git a/libs/components/src/table/table.stories.ts b/libs/components/src/table/table.stories.ts
new file mode 100644
index 0000000000..49da9cd016
--- /dev/null
+++ b/libs/components/src/table/table.stories.ts
@@ -0,0 +1,53 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { TableModule } from "./table.module";
+
+export default {
+  title: "Component Library/Table",
+  decorators: [
+    moduleMetadata({
+      imports: [TableModule],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A18371",
+    },
+  },
+} as Meta;
+
+const Template: Story = (args) => ({
+  props: args,
+  template: `
+    <bit-table>
+      <ng-container header>
+        <tr>
+          <th bitCell>Header 1</th>
+          <th bitCell>Header 2</th>
+          <th bitCell>Header 3</th>
+        </tr>
+      </ng-container>
+      <ng-container body>
+        <tr bitRow>
+          <td bitCell>Cell 1</td>
+          <td bitCell>Cell 2</td>
+          <td bitCell>Cell 3</td>
+        </tr>
+        <tr bitRow>
+          <td bitCell>Cell 4</td>
+          <td bitCell>Cell 5</td>
+          <td bitCell>Cell 6</td>
+        </tr>
+        <tr bitRow>
+          <td bitCell>Cell 7</td>
+          <td bitCell>Cell 8</td>
+          <td bitCell>Cell 9</td>
+        </tr>
+      </ng-container>
+    </bit-table>
+
+    `,
+});
+
+export const Default = Template.bind({});