fix(Breadcrumbs): render in RTL (#1836)

kiwicom · May 14, 2020 · a427b70 · a427b70
1 parent 8775caa
commit a427b70
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/Breadcrumbs/Breadcrumbs.stories.js b/src/Breadcrumbs/Breadcrumbs.stories.js
@@ -3,9 +3,10 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import { select, text } from "@storybook/addon-knobs";
+import { select, text, boolean } from "@storybook/addon-knobs";
 
 import SPACINGS_AFTER from "../common/getSpacingToken/consts";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import Breadcrumbs, { BreadcrumbsItem } from "./index";
 
@@ -34,8 +35,9 @@ storiesOf("Breadcrumbs", module)
     () => {
       const spaceAfter = select("spaceAfter", [null, ...Object.values(SPACINGS_AFTER)]);
       const href = text("href", "https://kiwi.com");
+      const withGoBack = boolean("onGoBack", true);
       return (
-        <Breadcrumbs onGoBack={action("onGoBack")} spaceAfter={spaceAfter}>
+        <Breadcrumbs onGoBack={withGoBack ? action("onGoBack") : undefined} spaceAfter={spaceAfter}>
           <BreadcrumbsItem id="rocket" href={href} onClick={action("clicked")}>
             Kiwi.com
           </BreadcrumbsItem>
@@ -57,4 +59,28 @@ storiesOf("Breadcrumbs", module)
     {
       info: "Some description about this type of component. ",
     },
-  );
+  )
+  .add("RTL", () => {
+    const href = text("href", "https://kiwi.com");
+    return (
+      <RenderInRtl>
+        <Breadcrumbs onGoBack={action("onGoBack")}>
+          <BreadcrumbsItem id="rocket" href={href} onClick={action("clicked")}>
+            Kiwi.com
+          </BreadcrumbsItem>
+          <BreadcrumbsItem id="rocket2" href={href} onClick={action("clicked")}>
+            1. Level
+          </BreadcrumbsItem>
+          <BreadcrumbsItem id="rocket3" href={href} onClick={action("clicked")}>
+            2. Level
+          </BreadcrumbsItem>
+          <BreadcrumbsItem id="rocket4" href={href} onClick={action("clicked")}>
+            3. Level
+          </BreadcrumbsItem>
+          <BreadcrumbsItem id="rocket5" href={href} onClick={action("clicked")}>
+            4. Level
+          </BreadcrumbsItem>
+        </Breadcrumbs>
+      </RenderInRtl>
+    );
+  });
diff --git a/src/Breadcrumbs/BreadcrumbsItem/index.js b/src/Breadcrumbs/BreadcrumbsItem/index.js
@@ -86,7 +86,9 @@ const BreadcrumbsItem = ({
         <span itemProp="name">{children}</span>
       </StyledBreadcrumbsItemAnchor>
       <meta itemProp="position" content={contentKey} />
-      {!active && <StyledBreadcrumbsItemIcon ariaHidden size="small" color="tertiary" />}
+      {!active && (
+        <StyledBreadcrumbsItemIcon ariaHidden reverseOnRtl size="small" color="tertiary" />
+      )}
     </StyledBreadcrumbsItem>
   );
 };

diff --git a/src/Breadcrumbs/index.js b/src/Breadcrumbs/index.js
@@ -7,6 +7,7 @@ import Button from "../Button";
 import ChevronLeft from "../icons/ChevronLeft";
 import getSpacingToken from "../common/getSpacingToken";
 import useTranslate from "../hooks/useTranslate";
+import { right } from "../utils/rtl";
 
 import type { Props } from "./index";
 
@@ -29,7 +30,7 @@ const StyledBreadcrumbsList = styled.ol`
 `;
 
 const StyledBackButtonWrapper = styled.span`
-  margin-right: ${({ theme }) => theme.orbit.spaceSmall};
+  margin-${right}: ${({ theme }) => theme.orbit.spaceSmall};
 `;
 
 StyledBackButtonWrapper.defaultProps = {
@@ -41,7 +42,7 @@ const GoBackButton = ({ onClick }) => {
   return (
     <StyledBackButtonWrapper>
       <Button
-        iconLeft={<ChevronLeft />}
+        iconLeft={<ChevronLeft reverseOnRtl />}
         circled
         type="secondary"
         size="small"