Merge pull request #8 from asantarissy/rtl-support

asantarissy · web-flow · commit dcf844292592 · 2019-02-17T14:14:33.000+02:00
RTL Support
diff --git a/src/components/ButtonLink/ButtonLink.js b/src/components/ButtonLink/ButtonLink.js
@@ -39,7 +39,9 @@ const ButtonLink = ({children, type, ...rest}) => {
   return (
     <Link {...rest} css={[style, typeStyle]}>
       {children}
-      {type === 'secondary' && <ArrowSvg cssProps={{marginLeft: 10}} />}
+      {type === 'secondary' && (
+        <ArrowSvg cssProps={{marginRight: 10, transform: 'rotate(180deg)'}} />
+      )}
     </Link>
   );
 };
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
@@ -71,6 +71,7 @@ class CodeEditor extends Component {
     return (
       <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
         <div
+          dir="ltr"
           css={{
             [media.greaterThan('medium')]: {
               display: 'flex',
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
@@ -47,7 +47,7 @@ class CodeExample extends Component {
 
               '& p': {
                 marginTop: 15,
-                marginRight: 40,
+                marginLeft: 40,
                 lineHeight: 1.7,
 
                 [media.greaterThan('xlarge')]: {
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -39,7 +39,8 @@ class Template extends Component<Props> {
           display: 'flex',
           flexDirection: 'column',
           minHeight: 'calc(100vh - 40px)',
-        }}>
+        }}
+        dir="rtl">
         <Header location={location} />
         <Flex
           direction="column"
diff --git a/src/components/LayoutFooter/ExternalFooterLink.js b/src/components/LayoutFooter/ExternalFooterLink.js
@@ -34,7 +34,7 @@ const ExternalFooterLink = ({children, href, target, rel}: Props) => (
       cssProps={{
         verticalAlign: -2,
         display: 'inline-block',
-        marginLeft: 5,
+        marginRight: 5,
         color: colors.subtle,
       }}
     />
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
@@ -18,6 +18,7 @@ import ossLogoPng from 'images/oss_logo.png';
 
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
+    dir="rtl"
     css={{
       backgroundColor: colors.darker,
       color: colors.white,
@@ -36,14 +37,14 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           flexWrap: 'wrap',
 
           [media.between('small', 'medium')]: {
-            paddingRight: layoutHasSidebar ? 240 : null,
+            paddingLeft: layoutHasSidebar ? 240 : null,
           },
 
           [media.between('large', 'largerSidebar')]: {
-            paddingRight: layoutHasSidebar ? 280 : null,
+            paddingLeft: layoutHasSidebar ? 280 : null,
           },
           [media.between('largerSidebar', 'sidebarFixed', true)]: {
-            paddingRight: layoutHasSidebar ? 380 : null,
+            paddingLeft: layoutHasSidebar ? 380 : null,
           },
         }}>
         <div
@@ -56,7 +57,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
             [media.greaterThan('xlarge')]: {
               width: 'calc(100% / 3 * 2)',
-              paddingLeft: 40,
+              paddingRight: 40,
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
@@ -143,9 +144,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           </FooterNav>
         </div>
         <section
+          dir="ltr"
           css={{
             paddingTop: 40,
             display: 'block !important', // Override 'Installation' <style> specifics
+            paddingLeft: 40,
 
             [media.greaterThan('xlarge')]: {
               width: 'calc(100% / 3)',
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
@@ -49,7 +49,7 @@ class DocSearch extends Component<{}, State> {
             justifyContent: 'flex-end',
           },
           [media.lessThan('large')]: {
-            marginRight: 10,
+            marginLeft: 10,
           },
           [media.between('small', 'medium')]: {
             width: 'calc(100% / 3)',
@@ -62,6 +62,7 @@ class DocSearch extends Component<{}, State> {
           },
         }}>
         <input
+          dir="rtl"
           css={{
             appearance: 'none',
             background: 'transparent',
@@ -71,12 +72,12 @@ class DocSearch extends Component<{}, State> {
             fontWeight: 300,
             fontFamily: 'inherit',
             position: 'relative',
-            padding: '5px 5px 5px 29px',
+            padding: '5px 29px 5px 5px',
             backgroundImage: 'url(/search.svg)',
             backgroundSize: '16px 16px',
             backgroundRepeat: 'no-repeat',
             backgroundPositionY: 'center',
-            backgroundPositionX: '5px',
+            backgroundPositionX: '98%',
 
             ':focus': {
               outline: 0,
@@ -93,10 +94,10 @@ class DocSearch extends Component<{}, State> {
             [media.lessThan('small')]: {
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
-              paddingLeft: '16px',
+              paddingRight: '16px',
 
               ':focus': {
-                paddingLeft: '29px',
+                paddingRight: '29px',
                 width: '8rem',
                 outline: 'none',
               },
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
@@ -18,6 +18,7 @@ import logoSvg from 'icons/logo.svg';
 
 const Header = ({location}: {location: Location}) => (
   <header
+    dir="rtl"
     css={{
       backgroundColor: colors.darker,
       color: colors.white,
@@ -62,7 +63,6 @@ const Header = ({location}: {location: Location}) => (
             },
           }}
           to="/">
-          <img src={logoSvg} alt="" height="20" />
           <span
             css={{
               color: 'inherit',
@@ -88,6 +88,7 @@ const Header = ({location}: {location: Location}) => (
             }}>
             React
           </span>
+          <img src={logoSvg} alt="" height="20" />
         </Link>
 
         <nav
@@ -146,9 +147,10 @@ const Header = ({location}: {location: Location}) => (
               width: 'calc(100% / 6)',
             },
           }}>
-          <Link
+          <a
             css={{
               padding: '5px 10px',
+              marginRight: 10,
               whiteSpace: 'nowrap',
               ...fonts.small,
 
@@ -162,13 +164,21 @@ const Header = ({location}: {location: Location}) => (
                 borderRadius: 15,
               },
             }}
-            to="/versions">
-            v{version}
-          </Link>
-          <a
+            href="https://github.com/facebook/react/"
+            target="_blank"
+            rel="noopener">
+            GitHub
+            <ExternalLinkSvg
+              cssProps={{
+                marginLeft: 5,
+                verticalAlign: -2,
+                color: colors.subtle,
+              }}
+            />
+          </a>
+          <Link
             css={{
               padding: '5px 10px',
-              marginLeft: 10,
               whiteSpace: 'nowrap',
               ...fonts.small,
 
@@ -182,18 +192,9 @@ const Header = ({location}: {location: Location}) => (
                 borderRadius: 15,
               },
             }}
-            href="https://github.com/facebook/react/"
-            target="_blank"
-            rel="noopener">
-            GitHub
-            <ExternalLinkSvg
-              cssProps={{
-                marginLeft: 5,
-                verticalAlign: -2,
-                color: colors.subtle,
-              }}
-            />
-          </a>
+            to="/versions">
+            v{version}
+          </Link>
         </div>
       </div>
     </Container>
diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -76,8 +76,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             [media.lessThan('small')]: smallScreenSidebarStyles,
 
             [media.greaterThan('medium')]: {
-              marginRight: -999,
-              paddingRight: 999,
+              marginLeft: -999,
+              paddingLeft: 999,
               backgroundColor: '#f7f7f7',
             },
 
@@ -93,8 +93,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               height: 'calc(100vh - 60px)',
               overflowY: 'auto',
               WebkitOverflowScrolling: 'touch',
-              marginRight: -999,
-              paddingRight: 999,
+              marginLeft: -999,
+              paddingLeft: 999,
               backgroundColor: '#f7f7f7',
               opacity: '1 !important',
             },
@@ -108,7 +108,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             },
 
             [media.greaterThan('sidebarFixed')]: {
-              borderLeft: '1px solid #ececec',
+              borderRight: '1px solid #ececec',
             },
           }}>
           <div
@@ -146,7 +146,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             display: 'none', // gets overriden at small screen sizes
             cursor: 'pointer',
             position: 'fixed',
-            right: 20,
+            left: 20,
             zIndex: 3,
             borderRadius: '50%',
             border: '1px solid rgba(255, 255, 255, 0.1)',
@@ -184,14 +184,14 @@ class StickyResponsiveSidebar extends Component<Props, State> {
                 <ChevronSvg
                   size={15}
                   cssProps={{
-                    transform: `translate(2px, ${iconOffset}px) rotate(180deg)`,
+                    transform: `translate(-2px, ${iconOffset}px) rotate(180deg)`,
                     transition: 'transform 0.2s ease',
                   }}
                 />
                 <ChevronSvg
                   size={15}
                   cssProps={{
-                    transform: `translate(2px, ${0 - iconOffset}px)`,
+                    transform: `translate(-2px, ${0 - iconOffset}px)`,
                     transition: 'transform 0.2s ease',
                   }}
                 />
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -54,7 +54,7 @@ class Home extends Component {
           title="React &ndash; A JavaScript library for building user interfaces"
           ogUrl={createOgUrl('index.html')}
         />
-        <div css={{width: '100%'}}>
+        <div dir="rtl" css={{width: '100%'}}>
           <header
             css={{
               backgroundColor: colors.dark,
@@ -198,23 +198,23 @@ class Home extends Component {
                         display: 'flex',
                         flexDirection: 'column',
                         flex: '0 1 33%',
-                        marginLeft: 40,
+                        marginRight: 40,
 
                         '&:first-of-type': {
-                          marginLeft: 0,
+                          marginRight: 0,
 
                           [media.lessThan('medium')]: {
-                            marginLeft: 10,
+                            marginRight: 10,
                           },
                         },
 
                         [media.lessThan('medium')]: {
                           display: 'inline-block',
                           verticalAlign: 'top',
-                          marginLeft: 0,
+                          marginRight: 0,
                           whiteSpace: 'normal',
                           width: '75%',
-                          marginRight: 20,
+                          marginLeft: 20,
                           paddingBottom: 40,
 
                           '&:first-of-type': {
@@ -327,17 +327,17 @@ const CtaItem = ({children, primary = false}) => (
       },
 
       [media.greaterThan('xlarge')]: {
-        paddingLeft: 40,
+        paddingRight: 40,
       },
 
       '&:first-child': {
-        textAlign: 'right',
-        paddingRight: 15,
+        textAlign: 'left',
+        paddingLeft: 15,
       },
 
       '&:nth-child(2)': {
         [media.greaterThan('small')]: {
-          paddingLeft: 15,
+          paddingRight: 15,
         },
       },
     }}>
diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js
@@ -26,15 +26,15 @@ const NavigationFooter = ({next, prev, location}) => {
           halign="space-between"
           css={{
             [media.between('small', 'medium')]: {
-              paddingRight: 240,
+              paddingLeft: 240,
             },
 
             [media.between('large', 'largerSidebar')]: {
-              paddingRight: 280,
+              paddingLeft: 280,
             },
 
             [media.between('largerSidebar', 'sidebarFixed', true)]: {
-              paddingRight: 380,
+              paddingLeft: 380,
             },
           }}>
           <Flex basis="50%" type="li">
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
@@ -46,7 +46,6 @@ class Section extends React.Component {
                 },
               },
             }}>
-            {section.title}
             <ChevronSvg
               cssProps={{
                 marginLeft: 7,
@@ -58,6 +57,7 @@ class Section extends React.Component {
                 },
               }}
             />
+            {section.title}
           </MetaTitle>
         </button>
         <ul
@@ -92,7 +92,7 @@ class Section extends React.Component {
               })}
 
               {item.subitems && (
-                <ul css={{marginLeft: 20}}>
+                <ul css={{marginRight: 20}}>
                   {item.subitems.map(subitem => (
                     <li key={subitem.id}>
                       {createLink({
diff --git a/src/templates/components/Sidebar/Sidebar.js b/src/templates/components/Sidebar/Sidebar.js
@@ -38,11 +38,11 @@ class Sidebar extends Component {
         halign="stretch"
         css={{
           width: '100%',
-          paddingLeft: 20,
+          paddingRight: 20,
           position: 'relative',
 
           [media.greaterThan('largerSidebar')]: {
-            paddingLeft: 40,
+            paddingRight: 40,
           },
 
           [media.lessThan('small')]: {
diff --git a/src/theme.js b/src/theme.js
diff --git a/src/utils/createLink.js b/src/utils/createLink.js
