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 1/3] 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>

From 21df1dbbe5c595367d40f64c9d5b2a30830dee21 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:46:14 +0530
Subject: [PATCH 2/3] table layout auto

---
 lib/components/SContent.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue
index 5459bf32..b3691665 100644
--- a/lib/components/SContent.vue
+++ b/lib/components/SContent.vue
@@ -113,9 +113,7 @@
 
 .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;

From 8ed9786791e735094edb1f3e3f555ec9afee0d14 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Mon, 2 Dec 2024 13:38:37 +0900
Subject: [PATCH 3/3] tiny adjustment

---
 docs/components/content.md  |  7 ++++---
 lib/components/SContent.vue | 29 +++++++++++++++++------------
 2 files changed, 21 insertions(+), 15 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 b3691665..dda17ea3 100644
--- a/lib/components/SContent.vue
+++ b/lib/components/SContent.vue
@@ -112,24 +112,33 @@
 }
 
 .SContent :deep(table) {
-  box-shadow: 0 0 0 1px var(--c-divider);
-  overflow: clip;
-  margin: 4px 0;
+  margin: 8px 0;
   border-style: hidden;
   border-radius: 6px;
+  text-align: left;
   font-size: 14px;
   color: var(--c-text-1);
-  text-align: left;
+  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) {
-  overflow-wrap: break-word;
-  height: 40px;
-  padding: 8px 16px;
-  background-color: var(--c-bg-elv-3);
   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) {
@@ -138,8 +147,4 @@
   color: var(--c-text-2);
   text-wrap: balance;
 }
-
-.SContent :deep(table tr:hover td) {
-  background-color: var(--c-bg-elv-4);
-}
 </style>