feat(Text): add dir prop (#2219)

* feat(Text): add `dir` prop

* fix: update snapshots

* fix: use correct type

Author: Tom Lienard

packages/ui/src/components/Text/__stories__/Dir.stories.tsx

@@ -0,0 +1,40 @@
+import type { ComponentStory } from '@storybook/react'
+import { Text } from '../index'
+
+export const Dir: ComponentStory<typeof Text> = () => (
+  <>
+    <strong>ltr</strong>
+    <div style={{ marginBottom: 16, marginTop: 8, width: 500 }}>
+      <Text as="div" variant="body" oneLine dir="ltr">
+        This text is quite long. Lorem ipsum dolor sit amet, consectetur
+        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </Text>
+    </div>
+    <strong>rtl</strong>
+    <div style={{ marginBottom: 16, marginTop: 8, width: 500 }}>
+      <Text as="div" variant="body" oneLine dir="rtl">
+        This text is quite long. Lorem ipsum dolor sit amet, consectetur
+        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </Text>
+    </div>
+    <strong>auto</strong>
+    <div style={{ marginBottom: 16, marginTop: 8, width: 500 }}>
+      <Text as="div" variant="body" oneLine dir="auto">
+        This text is quite long. Lorem ipsum dolor sit amet, consectetur
+        adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </Text>
+    </div>
+  </>
+)
+
+Dir.parameters = {
+  docs: {
+    description: {
+      story:
+        '`dir` prop will change the direction of the `...` when using `oneLine`',
+    },
+  },
+}

packages/ui/src/components/Text/__stories__/index.stories.tsx

@@ -23,3 +23,4 @@ export { Disabled } from './Disabled.stories'
 export { Italic } from './Italic.stories'
 export { Underline } from './Underline.stories'
 export { OneLine } from './OneLine.stories'
+export { Dir } from './Dir.stories'

packages/ui/src/components/Text/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text renders correctly with dir 1`] = `
+<DocumentFragment>
+  .cache-gbpmfn-StyledText {
+  color: #4a4f62;
+  font-size: 16px;
+  font-family: Asap;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+<div
+    style="margin-bottom: 16px; margin-top: 8px; width: 500px;"
+  >
+    <div
+      class="cache-gbpmfn-StyledText e1tg3t120"
+      dir="rtl"
+    >
+      This text is quite long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Text renders correctly with tooltip 1`] = `
 <DocumentFragment>
   .cache-gbpmfn-StyledText {

packages/ui/src/components/Text/__tests__/index.test.tsx

@@ -21,6 +21,17 @@ describe('Text', () => {
       </div>,
     ))
 
+  test(`renders correctly with dir`, () =>
+    shouldMatchEmotionSnapshot(
+      <div style={{ marginBottom: 16, marginTop: 8, width: 500 }}>
+        <Text as="div" variant="body" oneLine dir="rtl">
+          This text is quite long. Lorem ipsum dolor sit amet, consectetur
+          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </Text>
+      </div>,
+    ))
+
   test(`with multiple nested chidldren renders correctly`, () =>
     shouldMatchEmotionSnapshot(
       <Text as="div" variant="body">

packages/ui/src/components/Text/index.tsx

@@ -87,6 +87,7 @@ type TextProps = {
   italic?: boolean
   underline?: boolean
   id?: string
+  dir?: 'ltr' | 'rtl' | 'auto'
 }
 
 const StyledText = styled('div', {
@@ -123,6 +124,7 @@ export const Text = ({
   italic = false,
   underline = false,
   id,
+  dir,
 }: TextProps) => {
   const [isTruncated, setIsTruncated] = useState(false)
   const elementRef = useRef(null)
@@ -150,6 +152,7 @@ export const Text = ({
         italic={italic}
         underline={underline}
         id={id}
+        dir={dir}
       >
         {children}
       </StyledText>