From 5f6761f8b6154dc9d9b44b226d3562f4035cf536 Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Tue, 13 Feb 2024 10:50:12 +0100
Subject: [PATCH] fix: rtl cleanup (#1450)

---
 collections/forms/i18n/en.pot                 |   4 +-
 components/node/src/toggle.js                 |  35 ++--
 components/switch/src/switch/switch-icons.js  |   9 ++
 .../switch/src/switch/switch.stories.js       |  25 ++-
 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 +++++++++++++++
 components/transfer/src/icons.js              | 152 ++++++++++--------
 8 files changed, 265 insertions(+), 96 deletions(-)

diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
index fbbe186a81..b5e4f3ae1d 100644
--- a/collections/forms/i18n/en.pot
+++ b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-05-05T12:46:11.864Z\n"
-"PO-Revision-Date: 2023-05-05T12:46:11.864Z\n"
+"POT-Creation-Date: 2024-02-12T09:23:49.018Z\n"
+"PO-Revision-Date: 2024-02-12T09:23:49.018Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"
diff --git a/components/node/src/toggle.js b/components/node/src/toggle.js
index 0f2fbd0e45..1937586128 100644
--- a/components/node/src/toggle.js
+++ b/components/node/src/toggle.js
@@ -4,18 +4,20 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ArrowDown = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
-        <style jsx>{`
-            svg {
-                fill: inherit;
-                height: 24px;
-                width: 24px;
-                vertical-align: middle;
-                pointer-events: none;
-            }
-        `}</style>
-    </svg>
+    <div className="nodeArrow">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 24px;
+                    width: 24px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    </div>
 )
 
 export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
@@ -55,20 +57,21 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
                     z-index: 2;
                     fill: ${colors.grey900};
                 }
-                div :global(svg) {
+                div :global(.nodeArrow) {
                     vertical-align: top;
                     transform: rotate(-90deg);
                     transition: transform 0.1s ease-out;
                 }
-                div :global(svg:dir(rtl)) {
+                div :global(.nodeArrow:dir(rtl)) {
                     transform: rotate(90deg);
                 }
-                .open :global(svg) {
+                .open :global(.nodeArrow) {
                     transform: rotate(0);
                 }
-                .open :global(svg:dir(rtl)) {
+                .open :global(.nodeArrow:dir(rtl)) {
                     transform: rotate(0);
                 }
+
                 div:hover {
                     cursor: pointer;
                     border-radius: 3px;
diff --git a/components/switch/src/switch/switch-icons.js b/components/switch/src/switch/switch-icons.js
index cb2b9e8fcd..9f7a74c744 100644
--- a/components/switch/src/switch/switch-icons.js
+++ b/components/switch/src/switch/switch-icons.js
@@ -15,6 +15,10 @@ const styles = css`
         transform: scale(-1, 1);
     }
 
+    svg[dir='rtl'] {
+        transform: scale(-1, 1);
+    }
+
     svg.dense {
         height: 14px;
         width: 27px;
@@ -35,6 +39,10 @@ const styles = css`
         display: none;
     }
 
+    svg[dir='rtl'] .checkmark {
+        display: none;
+    }
+
     svg.checked .handle-unchecked,
     svg:not(.checked) .handle-checked {
         fill: none;
@@ -93,6 +101,7 @@ export function SwitchRegular({ className }) {
             viewBox="0 0 42 22"
             xmlns="http://www.w3.org/2000/svg"
             className={className}
+            dir={document.documentElement?.dir ?? 'ltr'}
         >
             <path
                 d="M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z"
diff --git a/components/switch/src/switch/switch.stories.js b/components/switch/src/switch/switch.stories.js
index f7e442bca1..d005ad39a6 100644
--- a/components/switch/src/switch/switch.stories.js
+++ b/components/switch/src/switch/switch.stories.js
@@ -1,5 +1,5 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Switch } from './index.js'
 
 const subtitle = 'An input control that allows an on and an off state'
@@ -139,10 +139,19 @@ export const ImageLabelDense = Template.bind({})
 ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
 ImageLabelDense.storyName = 'Image label - Dense'
 
-export const RTL = (args) => (
-    <div dir="rtl">
-        <Template {...args} />
-        <Template checked={true} value="checked" />
-        <Template error={true} checked={true} value="error" />
-    </div>
-)
+export const RTL = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+
+    return (
+        <div dir="rtl">
+            <Template {...args} />
+            <Template checked={true} value="checked" />
+            <Template error={true} checked={true} value="error" />
+        </div>
+    )
+}
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>
+)
diff --git a/components/transfer/src/icons.js b/components/transfer/src/icons.js
index 3b41cd605a..b39d47ff7f 100644
--- a/components/transfer/src/icons.js
+++ b/components/transfer/src/icons.js
@@ -7,34 +7,37 @@ const centerButtonStyles = css`
     svg {
         min-width: 20px;
     }
-    svg:dir(rtl) {
+    div.centerButton:dir(rtl) {
         transform: rotate(180deg) translateX(4px);
     }
 `
 
 export const IconAddAll = ({ dataTest, disabled }) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        fill={disabled ? theme.disabled : '#404B5A'}
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
-            />
-        </g>
-
+    <>
+        <div className="centerButton">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+                fill={disabled ? theme.disabled : '#404B5A'}
+            >
+                <g fillRule="evenodd">
+                    <polygon
+                        fillRule="nonzero"
+                        points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
+                    />
+
+                    <polygon
+                        fillRule="nonzero"
+                        points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
+                    />
+                </g>
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconAddAll.propTypes = {
@@ -43,18 +46,21 @@ IconAddAll.propTypes = {
 }
 
 export const IconAddIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+            >
+                <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconAddIndividual.propTypes = {
@@ -63,30 +69,33 @@ IconAddIndividual.propTypes = {
 }
 
 export const IconRemoveAll = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
-                transform="matrix(-1 0 0 1 20 0)"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
-                transform="matrix(-1 0 0 1 7.06 0)"
-            />
-        </g>
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                width="16px"
+                height="16px"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <g fillRule="evenodd">
+                    <polygon
+                        fillRule="nonzero"
+                        points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
+                        transform="matrix(-1 0 0 1 20 0)"
+                    />
+
+                    <polygon
+                        fillRule="nonzero"
+                        points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
+                        transform="matrix(-1 0 0 1 7.06 0)"
+                    />
+                </g>
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconRemoveAll.propTypes = {
@@ -95,21 +104,24 @@ IconRemoveAll.propTypes = {
 }
 
 export const IconRemoveIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon
-            points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
-            transform="matrix(-1 0 0 1 16 0)"
-        />
-
+    <>
+        <div className="centerButton">
+            <svg
+                fill={disabled ? theme.disabled : '#404B5A'}
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                data-test={dataTest}
+            >
+                <polygon
+                    points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
+                    transform="matrix(-1 0 0 1 16 0)"
+                />
+            </svg>
+        </div>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </>
 )
 
 IconRemoveIndividual.propTypes = {