From 65a0c5dff9c97ba29cb512b19ce1eec38addef2a Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Mon, 12 Feb 2024 12:01:49 +0100
Subject: [PATCH] fix: right align table elements in rtl

---
 components/table/src/table/table-cell-head.js |   4 +
 components/table/src/table/table-cell.js      |   4 +
 components/table/src/table/table.stories.js   | 128 ++++++++++++++++++
 3 files changed, 136 insertions(+)

diff --git a/components/table/src/table/table-cell-head.js b/components/table/src/table/table-cell-head.js
index 5450cbeb1a..3dd0986875 100644
--- a/components/table/src/table/table-cell-head.js
+++ b/components/table/src/table/table-cell-head.js
@@ -12,6 +12,10 @@ const tableCellHeadStyles = css`
         height: 45px;
     }
 
+    th:dir(rtl) {
+        text-align: right;
+    }
+
     .dense {
         padding: 9px 12px;
         height: 36px;
diff --git a/components/table/src/table/table-cell.js b/components/table/src/table/table-cell.js
index d54fe0867e..8de551e205 100644
--- a/components/table/src/table/table-cell.js
+++ b/components/table/src/table/table-cell.js
@@ -12,6 +12,10 @@ const tableCellStyles = css`
         height: 45px;
     }
 
+    td:dir(rtl) {
+        text-align: right;
+    }
+
     .dense {
         padding: 9px 12px;
         height: 36px;
diff --git a/components/table/src/table/table.stories.js b/components/table/src/table/table.stories.js
index f81f1039cc..ae529d91a0 100644
--- a/components/table/src/table/table.stories.js
+++ b/components/table/src/table/table.stories.js
@@ -594,3 +594,131 @@ export const CustomAlternatingBgColor = () => (
         </TableFoot>
     </Table>
 )
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Table {...args}>
+            <TableHead>
+                <TableRowHead>
+                    <TableCellHead>First name</TableCellHead>
+                    <TableCellHead>Last name</TableCellHead>
+                    <TableCellHead>Incident date</TableCellHead>
+                    <TableCellHead>Last updated</TableCellHead>
+                    <TableCellHead>Age</TableCellHead>
+                    <TableCellHead>Registering unit</TableCellHead>
+                    <TableCellHead>Assigned user</TableCellHead>
+                    <TableCellHead>Status</TableCellHead>
+                </TableRowHead>
+            </TableHead>
+            <TableBody>
+                <TableRow>
+                    <TableCell>Onyekachukwu</TableCell>
+                    <TableCell>Kariuki</TableCell>
+                    <TableCell>02/06/2007</TableCell>
+                    <TableCell>05/25/1972</TableCell>
+                    <TableCell>66</TableCell>
+                    <TableCell>Jawi</TableCell>
+                    <TableCell>Sofie Hubert</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Kwasi</TableCell>
+                    <TableCell>Okafor</TableCell>
+                    <TableCell>08/11/2010</TableCell>
+                    <TableCell>02/26/1991</TableCell>
+                    <TableCell>38</TableCell>
+                    <TableCell>Mokassie MCHP</TableCell>
+                    <TableCell>Dashonte Clarke</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Siyabonga</TableCell>
+                    <TableCell>Abiodun</TableCell>
+                    <TableCell>07/21/1981</TableCell>
+                    <TableCell>02/06/2007</TableCell>
+                    <TableCell>98</TableCell>
+                    <TableCell>Bathurst MCHP</TableCell>
+                    <TableCell>Unassigned</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Chiyembekezo</TableCell>
+                    <TableCell>Okeke</TableCell>
+                    <TableCell>01/23/1982</TableCell>
+                    <TableCell>07/15/2003</TableCell>
+                    <TableCell>2</TableCell>
+                    <TableCell>Mayolla MCHP</TableCell>
+                    <TableCell>Wan Gengxin</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Mtendere</TableCell>
+                    <TableCell>Afolayan</TableCell>
+                    <TableCell>08/12/1994</TableCell>
+                    <TableCell>05/12/1972</TableCell>
+                    <TableCell>37</TableCell>
+                    <TableCell>Gbangadu MCHP</TableCell>
+                    <TableCell>Gvozden Boskovsky</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Inyene</TableCell>
+                    <TableCell>Okonkwo</TableCell>
+                    <TableCell>04/01/1971</TableCell>
+                    <TableCell>03/16/2000</TableCell>
+                    <TableCell>70</TableCell>
+                    <TableCell>Kunike Barina</TableCell>
+                    <TableCell>Oscar de la Cavallería</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Amaka</TableCell>
+                    <TableCell>Pretorius</TableCell>
+                    <TableCell>01/25/1996</TableCell>
+                    <TableCell>09/15/1986</TableCell>
+                    <TableCell>32</TableCell>
+                    <TableCell>Bargbo</TableCell>
+                    <TableCell>Alberto Raya</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Meti</TableCell>
+                    <TableCell>Abiodun</TableCell>
+                    <TableCell>10/24/2010</TableCell>
+                    <TableCell>07/26/1989</TableCell>
+                    <TableCell>8</TableCell>
+                    <TableCell>Majihun MCHP</TableCell>
+                    <TableCell>Unassigned</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Eshe</TableCell>
+                    <TableCell>Okeke</TableCell>
+                    <TableCell>01/31/1995</TableCell>
+                    <TableCell>01/31/1995</TableCell>
+                    <TableCell>63</TableCell>
+                    <TableCell>Mambiama CHP</TableCell>
+                    <TableCell>Shadrias Pearson</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Obi</TableCell>
+                    <TableCell>Okafor</TableCell>
+                    <TableCell>06/07/1990</TableCell>
+                    <TableCell>01/03/2006</TableCell>
+                    <TableCell>28</TableCell>
+                    <TableCell>Dalakuru CHP</TableCell>
+                    <TableCell>Anatoliy Shcherbatykh</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+            </TableBody>
+            <TableFoot>
+                <TableRow>
+                    <TableCell colSpan="8">
+                        <TableFooterButton />
+                    </TableCell>
+                </TableRow>
+            </TableFoot>
+        </Table>
+    </div>
+)