feat(text): add more text transforms

Author: minheq

src/components/Typography/Paragraph.tsx

@@ -23,7 +23,7 @@ export interface ParagraphProps extends TextProps {
   color?: TextColor;
   size?: ParagraphSize;
   theme: Theme;
-  textAlign?: TextAlign;
+  align?: TextAlign;
   fontFamily?: FontFamily;
 
   getStyles?: ReplaceReturnType<
@@ -38,7 +38,7 @@ const ParagraphBase = (props: ParagraphProps) => {
     color = 'default',
     fontFamily = 'text',
     size = 'medium',
-    textAlign,
+    align,
     theme,
     getStyles,
     ...textProps
@@ -53,7 +53,7 @@ const ParagraphBase = (props: ParagraphProps) => {
     <Text
       // @ts-ignore
       accessibilityLabel="p"
-      style={[{ textAlign }, paragraphStyle]}
+      style={[{ textAlign: align }, paragraphStyle]}
       {...textProps}
     >
       {children}

src/components/Typography/Text.styles.ts

@@ -7,21 +7,14 @@ import {
   TextColors,
   Theme,
 } from '../../theme/ThemeInterface';
+import { TextAlign, TextTransform } from './types';
 
 export interface TextSizes {
   small: TextStyle;
   medium: TextStyle;
   large: TextStyle;
 }
 
-export interface ColorVariations {
-  lightest: string;
-  light: string;
-  base: string;
-  dark: string;
-  darkest: string;
-}
-
 export type TextSize = keyof TextSizes;
 
 export interface TextVariables {
@@ -33,10 +26,6 @@ export interface TextVariables {
 export const getTextVariables = (theme: Theme): TextVariables => {
   return {
     size: {
-      /**
-       * It's useful to have xlarge because `Link` uses the `Text` component.
-       * A `Link` could be used as xlarge in the context of a breadcrumb.
-       */
       large: {
         fontSize: theme.textSizes.large,
         fontWeight: '400',
@@ -66,9 +55,12 @@ export const getTextVariables = (theme: Theme): TextVariables => {
 };
 
 export interface TextStylesProps {
-  bold: boolean;
+  isBold: boolean;
+  isItalic: boolean;
   size: TextSize;
   color: TextColor;
+  align: TextAlign;
+  transform?: TextTransform;
   fontFamily: FontFamily;
   isInline: boolean;
 }
@@ -90,7 +82,7 @@ export const getTextColor = (textColors: TextColors) => (
 ) => textColors[textColor];
 
 export const getTextStyles: GetTextStyles = (
-  { size, color, fontFamily, isInline, bold },
+  { size, color, fontFamily, isInline, isBold, isItalic, align, transform },
   theme,
 ) => {
   const textVariables = getTextVariables(theme);
@@ -99,16 +91,23 @@ export const getTextStyles: GetTextStyles = (
     textStyle: {
       color: getTextColor(textVariables.color)(color),
       fontFamily: getFontFamily(textVariables.fontFamily)(fontFamily),
+      textAlign: align,
       ...(isInline
         ? {
             alignSelf: 'flex-start',
             flexDirection: 'row',
           }
         : {}),
       ...textVariables.size[size],
-      ...(bold && {
+      ...(isBold && {
         fontWeight: '600',
       }),
+      ...(isItalic && {
+        fontStyle: 'italic',
+      }),
+      ...(transform && {
+        textTransform: transform,
+      }),
     },
   };
 };

src/components/Typography/Text.tsx

@@ -11,15 +11,17 @@ import {
 import withTheme from '../../theme/withTheme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { GetTextStyles, getTextStyles, TextStyles } from './Text.styles';
-import { TextAlign } from './types';
+import { TextAlign, TextTransform } from './types';
 
 export interface TextStyleProps {
   isInline?: boolean;
   size?: TextSize;
   color?: TextColor;
-  textAlign?: TextAlign;
+  align?: TextAlign;
+  transform?: TextTransform;
   fontFamily?: FontFamily;
-  bold?: boolean;
+  isBold?: boolean;
+  isItalic?: boolean;
 }
 
 // @ts-ignore: need to override for web purposes
@@ -37,21 +39,23 @@ const TextBase = (props: TextProps) => {
     color = 'default',
     fontFamily = 'text',
     size = 'medium',
-    textAlign,
+    align = 'left',
     isInline = false,
     theme,
     getStyles,
-    bold = false,
+    isBold = false,
+    isItalic = false,
+    transform,
     ...textProps
   } = props;
 
   const { textStyle } = mergeStyles(getTextStyles, getStyles)(
-    { size, color, fontFamily, isInline, bold },
+    { size, color, fontFamily, isInline, isBold, isItalic, align, transform },
     theme,
   );
 
   return (
-    <RNText style={[{ textAlign }, textStyle]} {...textProps}>
+    <RNText style={textStyle} {...textProps}>
       {children}
     </RNText>
   );

src/components/Typography/Typography.mdx

@@ -84,7 +84,17 @@ import { Box } from '../Layout';
 
 <Playground>
   <Box flexDirection="column">
-    <Text bold>A red flair silhouetted.</Text>
+    <Text isBold>A red flair silhouetted.</Text>
+    <Text isItalic>A red flair silhouetted.</Text>
+    <Text isItalic isBold>
+      A red flair silhouetted.
+    </Text>
+    <Text align="left">A red flair silhouetted.</Text>
+    <Text align="center">A red flair silhouetted.</Text>
+    <Text align="right">A red flair silhouetted.</Text>
+    <Text transform="uppercase">A red flair silhouetted.</Text>
+    <Text transform="lowercase">A red flair silhouetted.</Text>
+    <Text transform="capitalize">A red flair silhouetted.</Text>
   </Box>
 </Playground>
 

src/components/Typography/types.ts

@@ -1 +1,7 @@
 export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+export type TextTransform =
+  | 'none'
+  | 'capitalize'
+  | 'uppercase'
+  | 'lowercase'
+  | undefined;