From 80de8b668fda222094425de91186f4cfd2106da5 Mon Sep 17 00:00:00 2001
From: Igor Bari <mucsi96@gmail.com>
Date: Sun, 25 Aug 2024 13:31:22 +0200
Subject: [PATCH] add cell highlighting aligment and no wrap

---
 src/Table/Table.css        | 16 ++++++++++------
 src/Table/Table.stories.ts | 32 ++++++++++++++++----------------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/Table/Table.css b/src/Table/Table.css
index 3b771b4..646bb1a 100644
--- a/src/Table/Table.css
+++ b/src/Table/Table.css
@@ -47,18 +47,22 @@ table[bt] {
     }
   }
 
-  th[right-align],
-  td[right-align] {
+  td[bt-highlighted] {
+    color: var(--bt-strong-text-color);
+  }
+
+  th[bt-right-align],
+  td[bt-right-align] {
     text-align: right;
   }
 
-  th[center-align],
-  td[center-align] {
+  th[bt-center-align],
+  td[bt-center-align] {
     text-align: center;
   }
 
-  th[no-wrap],
-  td[no-wrap] {
+  th[bt-no-wrap],
+  td[bt-no-wrap] {
     white-space: nowrap;
   }
 }
diff --git a/src/Table/Table.stories.ts b/src/Table/Table.stories.ts
index 9fd5d1a..05698e2 100644
--- a/src/Table/Table.stories.ts
+++ b/src/Table/Table.stories.ts
@@ -20,24 +20,24 @@ export const Default: Story = {
       </thead>
       <tbody>
         <tr>
-          <td>Chris</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Chris</td>
           <td>HTML tables</td>
-          <td>22</td>
+          <td bt-center-align>22</td>
         </tr>
         <tr>
-          <td>Dennis</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Dennis</td>
           <td>Web accessibility</td>
-          <td>45</td>
+          <td bt-center-align>45</td>
         </tr>
         <tr>
-          <td>Sarah</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Sarah</td>
           <td>JavaScript frameworks</td>
-          <td>29</td>
+          <td bt-center-align>29</td>
         </tr>
         <tr>
-          <td>Karen</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Karen</td>
           <td>Web performance</td>
-          <td>36</td>
+          <td bt-center-align>36</td>
         </tr>
       </tbody>
     </table>`,
@@ -57,27 +57,27 @@ export const WithSelection: Story = {
       <tbody>
         <tr>
           <td bt-row-selector></td>
-          <td>Chris</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Chris</td>
           <td>HTML tables</td>
-          <td>22</td>
+          <td bt-center-align>22</td>
         </tr>
         <tr aria-selected="true">
           <td bt-row-selector></td>
-          <td>Dennis</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Dennis</td>
           <td>Web accessibility</td>
-          <td>45</td>
+          <td bt-center-align>45</td>
         </tr>
         <tr>
           <td bt-row-selector></td>
-          <td>Sarah</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Sarah</td>
           <td>JavaScript frameworks</td>
-          <td>29</td>
+          <td bt-center-align>29</td>
         </tr>
         <tr>
           <td bt-row-selector></td>
-          <td>Karen</td>
+          <td bt-no-wrap bt-right-align bt-highlighted>Karen</td>
           <td>Web performance</td>
-          <td>36</td>
+          <td bt-center-align>36</td>
         </tr>
       </tbody>
     </table>`,