From 3d96a33aaa585d625f7e72a0398adb661c50dcfb Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 18 Nov 2024 16:05:53 +0530
Subject: [PATCH] feat(content): support simple tables in SContent

---
 lib/components/SContent.vue                   | 34 +++++++++++++++++++
 .../SContent.01_Playground.story.vue          | 27 +++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
index 7737e9da..5459bf32 100644
--- a/lib/components/SContent.vue
+++ b/lib/components/SContent.vue
@@ -110,4 +110,38 @@
   font-feature-settings: "tnum";
   content: counter(s-medium-counter)". ";
 }
+
+.SContent :deep(table) {
+  box-shadow: 0 0 0 1px var(--c-divider);
+  table-layout: fixed;
+  overflow: clip;
+  width: 100%;
+  margin: 4px 0;
+  border-style: hidden;
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--c-text-1);
+  text-align: left;
+}
+
+.SContent :deep(table th),
+.SContent :deep(table td) {
+  overflow-wrap: break-word;
+  height: 40px;
+  padding: 8px 16px;
+  background-color: var(--c-bg-elv-3);
+  border: 1px solid var(--c-gutter);
+  text-wrap: pretty;
+}
+
+.SContent :deep(table th) {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-2);
+  text-wrap: balance;
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
 </style>
diff --git a/stories/components/SContent.01_Playground.story.vue b/stories/components/SContent.01_Playground.story.vue
index 2ec44f28..65a8eb8f 100644
--- a/stories/components/SContent.01_Playground.story.vue
+++ b/stories/components/SContent.01_Playground.story.vue
@@ -41,6 +41,33 @@ const docs = '/components/content'
             <li>Sed ut perspiciatis unde omnis iste natus error.</li>
             <li>Lorem ipsum dolor sit amet.</li>
           </ol>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Header 1</th>
+                <th>Header 2</th>
+                <th>Header 3</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+                <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</td>
+              </tr>
+              <tr>
+                <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</td>
+                <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</td>
+                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+              </tr>
+              <tr>
+                <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+                <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</td>
+                <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</td>
+              </tr>
+            </tbody>
+          </table>
         </SContent>
       </div>
     </Board>