From 523d3c65400341ba2dd6b612d2b2d17ed595d9c7 Mon Sep 17 00:00:00 2001
From: "fateme.fazli" <fateme.fazli@baninab.com>
Date: Sat, 31 Aug 2019 16:04:43 +0430
Subject: [PATCH] feat(rtl): added rtl compatibility to ResponseList component

---
 src/common-elements/shelfs.tsx              | 5 +++--
 src/common-elements/tabs.ts                 | 1 +
 src/components/JsonViewer/style.ts          | 2 +-
 src/components/Responses/styled.elements.ts | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/common-elements/shelfs.tsx b/src/common-elements/shelfs.tsx
index 649bc904..582fefd1 100644
--- a/src/common-elements/shelfs.tsx
+++ b/src/common-elements/shelfs.tsx
@@ -37,9 +37,10 @@ export const ShelfIcon = styled(IntShelfIcon)`
   height: ${props => props.size || '18px'};
   width: ${props => props.size || '18px'};
   vertical-align: middle;
-  float: ${props => props.float || ''};
+  float: ${props => (props.theme.typography.direction === 'rtl') ? 'right' : props.float || '' };
   transition: transform 0.2s ease-out;
-  transform: rotateZ(${props => directionMap[props.direction || 'down']});
+  transform: rotateZ(${props => (props.theme.typography.direction === 'rtl') ?
+  (directionMap[ props.direction === 'right' ? 'left' : 'down' || 'down']) : (directionMap[props.direction || 'down'])});
 
   polygon {
     fill: ${props =>
diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts
index b1ad066a..b2d2e8c2 100644
--- a/src/common-elements/tabs.ts
+++ b/src/common-elements/tabs.ts
@@ -67,6 +67,7 @@ export const Tabs = styled(ReactTabs)`
 
     & > div > pre {
       padding: 0;
+      direction: ltr;
     }
   }
 `;
diff --git a/src/components/JsonViewer/style.ts b/src/components/JsonViewer/style.ts
index 14ef6492..75f349ec 100644
--- a/src/components/JsonViewer/style.ts
+++ b/src/components/JsonViewer/style.ts
@@ -7,7 +7,7 @@ export const jsonStyles = css`
 
   font-family: ${props => props.theme.typography.code.fontFamily};
   font-size: ${props => props.theme.typography.code.fontSize};
-
+  direction: ltr;
   white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
   contain: content;
   overflow-x: auto;
diff --git a/src/components/Responses/styled.elements.ts b/src/components/Responses/styled.elements.ts
index bb0735da..5d2f0ab9 100644
--- a/src/components/Responses/styled.elements.ts
+++ b/src/components/Responses/styled.elements.ts
@@ -11,7 +11,7 @@ export const StyledResponseTitle = styled(ResponseTitle)`
   line-height: 1.5em;
   background-color: #f2f2f2;
   cursor: pointer;
-
+  text-align:${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
   color: ${props => props.theme.colors.responses[props.type].color};
   background-color: ${props => props.theme.colors.responses[props.type].backgroundColor};
 
@@ -35,7 +35,7 @@ export const ResponseDetailsWrap = styled.div`
 `;
 
 export const HeadersCaption = styled(UnderlinedHeader.withComponent('caption'))`
-  text-align: left;
+  text-align: ${({ theme }) => (theme.typography.direction === 'rtl') ? 'right' : 'left'};
   margin-top: 1em;
   caption-side: top;
 `;