feat(Text): introduce dir attribute to support RTL

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `renderComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503))
+- Apply `dir=auto` attribute to string content of `Text` @kuzhelov  ([#5](https://github.com/stardust-ui/react/pull/5))
 
 ### Fixes
 - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499))

src/components/Text/Text.tsx

@@ -55,6 +55,10 @@ export interface TextProps
  * @accessibility
  * Text is how people read the content on your website.
  * Ensure that a contrast ratio of at least 4.5:1 exists between text and the background behind the text.
+ *
+ * To ensure that RTL mode will be properly handled for provided 'content' value, ensure that either:
+ * - 'content' is provided as plain string (then dir="auto" attribute will be applied automatically)
+ * - for other 'content' value types (i.e. that use elements inside) ensure that dir="auto" attribute is applied for all places in content where necessary
  */
 class Text extends UIComponent<Extendable<TextProps>, any> {
   static create: Function
@@ -85,9 +89,14 @@ class Text extends UIComponent<Extendable<TextProps>, any> {
 
   renderComponent({ ElementType, classes, rest }): React.ReactNode {
     const { children, content } = this.props
+
+    const hasChildren = childrenExist(children)
+
+    const maybeDirAuto = !hasChildren && typeof content === 'string' ? { dir: 'auto' } : null
+
     return (
-      <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : content}
+      <ElementType className={classes.root} {...maybeDirAuto} {...rest}>
+        {hasChildren ? children : content}
       </ElementType>
     )
   }