From 23c2c861348f4099fd58a19cd158500132fe995b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:11:33 +0530
Subject: [PATCH] feat(content): support html tables in SContent (#565)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>
---
 docs/components/content.md                    |  7 ++--
 lib/components/SContent.vue                   | 37 +++++++++++++++++++
 .../SContent.01_Playground.story.vue          | 27 ++++++++++++++
 3 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/docs/components/content.md b/docs/components/content.md
index e4b8cb9a..9cc05b54 100644
--- a/docs/components/content.md
+++ b/docs/components/content.md
@@ -48,14 +48,15 @@ Place HTML elements inside `<SContent>` component and it will apply basic styles
 
 The supported elements are:
 
-- `<h1>` <Badge text="3.11.0" />
-- `<h2>` <Badge text="3.11.0" />
+- `<h1>`
+- `<h2>`
+- `<h3>`
 - `<p>`
 - `<strong>`
 - `<a>`
 - `<ul>`
 - `<ol>`
-- `<li>`
+- `<table>`
 
 ### Use CSS class to style the headings
 
diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
index 7737e9da..dda17ea3 100644
--- a/lib/components/SContent.vue
+++ b/lib/components/SContent.vue
@@ -110,4 +110,41 @@
   font-feature-settings: "tnum";
   content: counter(s-medium-counter)". ";
 }
+
+.SContent :deep(table) {
+  margin: 8px 0;
+  border-style: hidden;
+  border-radius: 6px;
+  text-align: left;
+  font-size: 14px;
+  color: var(--c-text-1);
+  overflow: clip;
+  box-shadow: 0 0 0 1px var(--c-divider);
+}
+
+.SContent :deep(table tr:hover td) {
+  background-color: var(--c-bg-elv-4);
+}
+
+.SContent :deep(table thead > tr > th) {
+  vertical-align: middle;
+}
+
+.SContent :deep(table th),
+.SContent :deep(table td) {
+  border: 1px solid var(--c-gutter);
+  padding: 8px 16px;
+  height: 40px;
+  vertical-align: top;
+  text-wrap: pretty;
+  background-color: var(--c-bg-elv-3);
+  overflow-wrap: break-word;
+}
+
+.SContent :deep(table th) {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--c-text-2);
+  text-wrap: balance;
+}
 </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>