From 6ac88d74e9a0608b7c07236ea0b44e09f203f3c4 Mon Sep 17 00:00:00 2001
From: Shaik Ahmad Nawaz <96189881+shaikahmadnawaz@users.noreply.github.com>
Date: Wed, 25 Oct 2023 05:24:57 +0530
Subject: [PATCH] Added Table Styling Based on Figma Design for Node.js Website
 (#6034)

* Added table styling based on Figma design for both light and dark modes

* added border radius to the table

* indented styles, changed to text-sm, added th & td properties to common selectors

* added HeadlessTable to table story

* simplified  nested tr, td
---
 components/__design__/table.stories.tsx | 58 +++++++++++++++++++++++++
 styles/new/base.css                     | 38 ++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 components/__design__/table.stories.tsx

diff --git a/components/__design__/table.stories.tsx b/components/__design__/table.stories.tsx
new file mode 100644
index 0000000000000..fc8e24a6e4d1e
--- /dev/null
+++ b/components/__design__/table.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+export const Table: StoryObj = {
+  render: () => (
+    <table>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+};
+
+export const HeadlessTable: StoryObj = {
+  render: () => (
+    <table>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </table>
+  ),
+};
+
+export default { title: 'Design System' } as MetaObj;
diff --git a/styles/new/base.css b/styles/new/base.css
index 89c5546e99cd0..77b226a748aec 100644
--- a/styles/new/base.css
+++ b/styles/new/base.css
@@ -41,3 +41,41 @@ ol {
     text-neutral-900
     dark:text-white;
 }
+
+table {
+  @apply w-full 
+    border-separate 
+    border-spacing-0 
+    rounded
+    border
+    border-neutral-200 
+    text-left
+    text-sm 
+    dark:border-neutral-800;
+
+  th,
+  td {
+    @apply border 
+      border-r-0 
+      border-t-0 
+      border-neutral-200
+      px-4
+      py-2 
+      text-neutral-900 
+      dark:border-neutral-800 
+      dark:text-white;
+  }
+
+  th {
+    @apply font-semibold;
+  }
+
+  tr:last-child td {
+    @apply border-b-0;
+  }
+
+  td:first-child,
+  th:first-child {
+    @apply border-l-0;
+  }
+}