add text directions (#16901)

* add text directions

* add text direction test

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

ui/components/component-library/index.js

@@ -18,7 +18,7 @@ export { Label } from './label';
 export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';
 export { TagUrl } from './tag-url';
-export { Text, TEXT_VARIANTS } from './text';
+export { Text, TEXT_VARIANTS, TEXT_DIRECTIONS } from './text';
 export { TextField, TEXT_FIELD_TYPES, TEXT_FIELD_SIZES } from './text-field';
 export {
   TextFieldBase,

ui/components/component-library/text/README.mdx

@@ -66,34 +66,34 @@ import { COLORS } from '../../../helpers/constants/design-system';
 <Text color={COLORS.TEXT_MUTED}>
   text-muted
 </Text>
-<Text color={COLORS.OVERLAY_INVERSE} backgroundColor:{COLORS.OVERLAY_DEFAULT}>
+<Text color={COLORS.OVERLAY_INVERSE} backgroundColor={COLORS.OVERLAY_DEFAULT}>
   overlay-inverse
 </Text>
 <Text color={COLORS.PRIMARY_DEFAULT}>
   primary-default
 </Text>
-<Text color={COLORS.PRIMARY_INVERSE} backgroundColor:{COLORS.PRIMARY_DEFAULT}>
+<Text color={COLORS.PRIMARY_INVERSE} backgroundColor={COLORS.PRIMARY_DEFAULT}>
   primary-inverse
 </Text>
 <Text color={COLORS.ERROR_DEFAULT}>
   error-default
 </Text>
-<Text color={COLORS.ERROR_INVERSE} backgroundColor:{COLORS.ERROR_DEFAULT}>
+<Text color={COLORS.ERROR_INVERSE} backgroundColor={COLORS.ERROR_DEFAULT}>
   error-inverse
 </Text>
 <Text color={COLORS.SUCCESS_DEFAULT}>
   success-default
 </Text>
-<Text color={COLORS.SUCCESS_INVERSE} backgroundColor:{COLORS.SUCCESS_DEFAULT}>
+<Text color={COLORS.SUCCESS_INVERSE} backgroundColor={COLORS.SUCCESS_DEFAULT}>
   success-inverse
 </Text>
-<Text color={COLORS.WARNING_INVERSE} backgroundColor:{COLORS.WARNING_DEFAULT}>
+<Text color={COLORS.WARNING_INVERSE} backgroundColor={COLORS.WARNING_DEFAULT}>
   warning-inverse
 </Text>
 <Text color={COLORS.INFO_DEFAULT}>
   info-default
 </Text>
-<Text color={COLORS.INFO_INVERSE} backgroundColor:{COLORS.INFO_DEFAULT}>
+<Text color={COLORS.INFO_INVERSE} backgroundColor={COLORS.INFO_DEFAULT}>
   info-inverse
 </Text>
 ```
@@ -299,6 +299,28 @@ Renders the html:
 <input placeholder="input" />
 ```
 
+### Text Direction
+
+Use the `textDirection` prop and the `TEXT_DIRECTIONS` object from `./text.constants.js` to change the text direction of `Text`
+
+<Canvas>
+  <Story id="ui-components-component-library-text-text-stories-js--text-direction" />
+</Canvas>
+
+```jsx
+import { Text, TEXT_DIRECTIONS } from '../../ui/components/component-library';
+
+<Text textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>
+  This is left to right (ltr) for English and most languages
+</Text>
+<Text textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}>
+  This is right to left (rtl) for use with other laguanges such as Arabic. This Enlgish example is incorrect usage.
+</Text>
+<Text textDirection={TEXT_DIRECTIONS.AUTO}>
+  Let the user agent decide with the auto option
+</Text>
+```
+
 ### Box Props
 
 Use any valid box props [Box](/?path=/story/ui-components-ui-box-box-stories-js--default-story) component props to the Text component.

ui/components/component-library/text/index.js

@@ -1,2 +1,2 @@
 export { Text } from './text';
-export { TEXT_VARIANTS } from './text.constants';
+export { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants';

ui/components/component-library/text/text.constants.js

@@ -13,3 +13,9 @@ export const TEXT_VARIANTS = {
   BODY_XS: TEXT.BODY_XS,
   INHERIT: TEXT.INHERIT,
 };
+
+export const TEXT_DIRECTIONS = {
+  LEFT_TO_RIGHT: 'ltr',
+  RIGHT_TO_LEFT: 'rtl',
+  AUTO: 'auto',
+};

ui/components/component-library/text/text.js

@@ -11,7 +11,7 @@ import {
   OVERFLOW_WRAP,
   TEXT_COLORS,
 } from '../../../helpers/constants/design-system';
-import { TEXT_VARIANTS } from './text.constants';
+import { TEXT_VARIANTS, TEXT_DIRECTIONS } from './text.constants';
 
 export const ValidTags = [
   'dd',
@@ -42,6 +42,7 @@ export const Text = React.forwardRef(
       fontStyle,
       textTransform,
       textAlign,
+      textDirection,
       overflowWrap,
       ellipsis,
       as,
@@ -89,6 +90,7 @@ export const Text = React.forwardRef(
         ref={ref}
         className={classnames(computedClassName)}
         as={Tag}
+        dir={textDirection}
         {...props}
       >
         {children}
@@ -139,6 +141,11 @@ Text.propTypes = {
    * ./ui/helpers/constants/design-system.js
    */
   textAlign: PropTypes.oneOf(Object.values(TEXT_ALIGN)),
+  /**
+   * Change the dir (direction) global attribute of text to support the direction a language is written
+   * Possible values: `LEFT_TO_RIGHT` (default), `RIGHT_TO_LEFT`, `AUTO` (user agent decides)
+   */
+  textDirection: PropTypes.oneOf(Object.values(TEXT_DIRECTIONS)),
   /**
    * The overflow-wrap of the Text component. Should use the OVERFLOW_WRAP object from
    * ./ui/helpers/constants/design-system.js

ui/components/component-library/text/text.stories.js

@@ -12,10 +12,12 @@ import {
   OVERFLOW_WRAP,
   TEXT_TRANSFORM,
   FRACTIONS,
+  FLEX_DIRECTION,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
 import { ValidTags, Text } from './text';
+import { TEXT_DIRECTIONS } from './text.constants';
 
 import README from './README.mdx';
 
@@ -66,6 +68,10 @@ export default {
       control: { type: 'select' },
       options: ValidTags,
     },
+    textDirection: {
+      control: { type: 'select' },
+      options: Object.values(TEXT_DIRECTIONS),
+    },
     className: {
       control: { type: 'text' },
     },
@@ -273,3 +279,23 @@ export const As = (args) => (
     })}
   </>
 );
+
+export const TextDirection = (args) => (
+  <Box
+    style={{ maxWidth: 300 }}
+    display={DISPLAY.FLEX}
+    flexDirection={FLEX_DIRECTION.COLUMN}
+    gap={4}
+  >
+    <Text {...args} textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>
+      This is left to right (ltr) for English and most languages
+    </Text>
+    <Text {...args} textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}>
+      This is right to left (rtl) for use with other laguanges such as Arabic.
+      This Enlgish example is incorrect usage.
+    </Text>
+    <Text {...args} textDirection={TEXT_DIRECTIONS.AUTO}>
+      Let the user agent decide with the auto option
+    </Text>
+  </Box>
+);

ui/components/component-library/text/text.test.js

@@ -9,7 +9,7 @@ import {
   TEXT_ALIGN,
   TEXT_TRANSFORM,
 } from '../../../helpers/constants/design-system';
-import { Text } from '.';
+import { Text, TEXT_DIRECTIONS } from '.';
 
 describe('Text', () => {
   it('should render the Text without crashing', () => {
@@ -238,4 +238,17 @@ describe('Text', () => {
     render(<Text ref={mockRef} />);
     expect(mockRef).toHaveBeenCalledTimes(1);
   });
+
+  it('should render the Text with proper direction', () => {
+    const { getByText } = render(
+      <>
+        <Text textDirection={TEXT_DIRECTIONS.AUTO}>auto</Text>
+        <Text textDirection={TEXT_DIRECTIONS.LEFT_TO_RIGHT}>ltr</Text>
+        <Text textDirection={TEXT_DIRECTIONS.RIGHT_TO_LEFT}>rtl</Text>
+      </>,
+    );
+    expect(getByText('auto')).toHaveAttribute('dir', 'auto');
+    expect(getByText('ltr')).toHaveAttribute('dir', 'ltr');
+    expect(getByText('rtl')).toHaveAttribute('dir', 'rtl');
+  });
 });