[CL-24] Add tables (#2950)

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"];
+  }
+}

libs/components/src/table/index.ts

@@ -0,0 +1 @@
+export * from "./table.module";

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",
+    ];
+  }
+}

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>

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 {}

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 {}

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({});