Merge pull request #612 from department-of-veterans-affairs/feature/5…

…42-narin-update-components-to-use-text-tokens-or-component

[Feature] Update components to use typography tokens or Text component

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.28.1-alpha.1",
+  "version": "0.28.1-alpha.2",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

packages/components/src/components/Alert/Alert.tsx

@@ -1,19 +1,18 @@
 import {
   Insets,
   Pressable,
-  Text,
-  TextStyle,
   View,
   ViewStyle,
   useWindowDimensions,
 } from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import React, { FC, useState } from 'react'
 
 import { BaseColor, useColorScheme, useTheme } from '../../utils'
 import { Button, ButtonProps, ButtonVariants } from '../Button/Button'
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
+import { Text } from '../Text/Text'
 
 /** Convenience function to set children content color correctly with light/dark mode */
 export const AlertContentColor = BaseColor
@@ -83,6 +82,8 @@ export const Alert: FC<AlertProps> = ({
     expandable ? initializeExpanded : true,
   )
 
+  const { typography } = font
+
   const toggleExpand = () => {
     if (expanded && analytics?.onCollapse) analytics.onCollapse()
     if (!expanded && analytics?.onExpand) analytics.onExpand()
@@ -92,22 +93,6 @@ export const Alert: FC<AlertProps> = ({
   const contentColor = AlertContentColor()
   let backgroundColor, borderColor, iconName: IconProps['name']
 
-  // TODO: Replace with typography tokens
-  const headerFont: TextStyle = {
-    color: contentColor,
-    fontFamily: 'SourceSansPro-Bold',
-    fontSize: 20,
-    lineHeight: 30,
-  }
-
-  // TODO: Replace with typography tokens
-  const descriptionFont: TextStyle = {
-    color: contentColor,
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 20,
-    lineHeight: 30,
-  }
-
   switch (variant) {
     case 'info':
       backgroundColor = theme.vadsColorFeedbackSurfaceInfo
@@ -143,8 +128,9 @@ export const Alert: FC<AlertProps> = ({
   const iconViewStyle: ViewStyle = {
     flexDirection: 'row',
     // Below keeps icon aligned with first row of text, centered, and scalable
+    // If Text variant for header changes, token referenced in minHeight must change accordingly
     alignSelf: 'flex-start',
-    minHeight: headerFont.lineHeight! * fontScale,
+    minHeight: typography.vadsFontHeadingSmall.lineHeight! * fontScale,
     alignItems: 'center',
     justifyContent: 'center',
   }
@@ -170,7 +156,12 @@ export const Alert: FC<AlertProps> = ({
   const _header = () => {
     if (!header) return null
 
-    const headerText = <Text style={headerFont}>{header}</Text>
+    const headerText = (
+      <Text variant="heading" size="sm" bottomSpacing="none">
+        {header}
+      </Text>
+    )
+
     const a11yLabel = headerA11yLabel || header
     const hitSlop: Insets = {
       // left border/padding + spacer + icon width
@@ -254,8 +245,10 @@ export const Alert: FC<AlertProps> = ({
                 ) : null}
                 {description ? (
                   <Text
-                    style={descriptionFont}
-                    aria-label={descriptionA11yLabel || description}>
+                    variant="body"
+                    size="lg"
+                    bottomSpacing="none"
+                    a11yLabel={descriptionA11yLabel || description}>
                     {description}
                   </Text>
                 ) : null}

packages/components/src/components/Button/Button.tsx

@@ -1,11 +1,11 @@
 import {
   Pressable,
   PressableStateCallbackType,
-  Text,
+  Text as RNText,
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import React from 'react'
 
 import { useTheme } from '../../utils'
@@ -45,6 +45,7 @@ export const Button: React.FC<ButtonProps> = ({
   testOnlyPressed,
 }) => {
   const theme = useTheme()
+  const { typography, family } = font
 
   let bgColor: string,
     bgColorPressed: string,
@@ -114,19 +115,12 @@ export const Button: React.FC<ButtonProps> = ({
    * @param pressed - boolean for pressed state
    * @returns TextStyle for text
    */
-  const getTextStyle = (pressed: boolean): TextStyle => {
-    // TODO: Replace with typography tokens
-    const font: TextStyle = {
-      fontFamily: 'SourceSansPro-Bold',
-      fontSize: 20,
-      lineHeight: 30,
-    }
-
-    return {
-      ...font,
-      color: pressed ? textColorPressed : textColor,
-    }
-  }
+  const getTextStyle = (pressed: boolean): TextStyle => ({
+    ...typography.vadsFontBodyLarge,
+    fontFamily: family.vadsFontFamilySansSerifBold,
+    marginBottom: spacing.vadsSpaceNone,
+    color: pressed ? textColorPressed : textColor,
+  })
 
   return (
     <Pressable
@@ -139,7 +133,7 @@ export const Button: React.FC<ButtonProps> = ({
       testID={testID || label}
       testOnly_pressed={testOnlyPressed}>
       {({ pressed }: PressableStateCallbackType) => (
-        <Text style={getTextStyle(pressed)}>{label}</Text>
+        <RNText style={getTextStyle(pressed)}>{label}</RNText>
       )}
     </Pressable>
   )

packages/components/src/components/Link/Link.tsx

@@ -5,6 +5,7 @@ import {
   TextProps,
   TextStyle,
 } from 'react-native'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { t } from 'i18next'
 import React, { FC } from 'react'
 
@@ -141,12 +142,25 @@ export const Link: FC<LinkProps> = ({
 }) => {
   const theme = useTheme()
   const launchExternalLink = useExternalLink()
+  const { typography } = font
 
-  // TODO: Replace with typography tokens
-  const font = {
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 20,
-    lineHeight: 30,
+  let linkColor: string
+
+  switch (variant) {
+    case 'base':
+      linkColor = theme.vadsColorForegroundDefault
+      break
+    default:
+      linkColor = theme.vadsColorActionForegroundDefault
+  }
+
+  const textStyle: TextStyle = {
+    ...typography.vadsFontBodyLarge,
+    marginBottom: spacing.vadsSpaceNone,
+    color: linkColor,
+    textDecorationColor: linkColor,
+    textDecorationLine: 'underline',
+    flexShrink: 1, // RN Text takes full width in row flexbox; shrink to wrap as appropriate
   }
 
   let _icon: IconProps
@@ -213,17 +227,7 @@ export const Link: FC<LinkProps> = ({
       break
   }
 
-  _icon.alignWithTextLineHeight = font.lineHeight
-
-  let linkColor: string
-
-  switch (variant) {
-    case 'base':
-      linkColor = theme.vadsColorForegroundDefault
-      break
-    default:
-      linkColor = theme.vadsColorActionForegroundDefault
-  }
+  _icon.alignWithTextLineHeight = textStyle.lineHeight
 
   let ariaValue
   if (typeof a11yValue === 'string') {
@@ -257,14 +261,6 @@ export const Link: FC<LinkProps> = ({
     testOnly_pressed: testOnlyPressed,
   }
 
-  const textStyle: TextStyle = {
-    ...font,
-    color: linkColor,
-    textDecorationColor: linkColor,
-    textDecorationLine: 'underline',
-    flexShrink: 1, // RN Text takes full width in row flexbox; shrink to wrap as appropriate
-  }
-
   return (
     <ComponentWrapper>
       <Pressable {...pressableProps} testID={testID}>

packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -1,15 +1,9 @@
-import {
-  Animated,
-  Easing,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
+import { Animated, Easing, View, ViewStyle } from 'react-native'
 import React, { useEffect } from 'react'
 
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
+import { Text } from '../Text/Text'
 import { useTheme } from '../../utils'
 
 export type LoadingIndicatorProps = {
@@ -68,22 +62,19 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     fill: theme.vadsColorActionForegroundDefault,
   }
 
-  const textStyle: TextStyle = {
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 20,
-    lineHeight: 30,
-    textAlign: 'center',
-    color: theme.vadsColorForegroundDefault,
-  }
-
   return (
     <View style={containerStyle}>
       <Animated.View style={{ transform: [{ rotate }] }}>
         <Icon {...iconProps} />
       </Animated.View>
       <Spacer size="xs" />
       {text && (
-        <Text style={textStyle} accessibilityLabel={a11yLabel}>
+        <Text
+          variant="body"
+          size="lg"
+          a11yLabel={a11yLabel}
+          bottomSpacing="none"
+          center>
           {text}
         </Text>
       )}

packages/components/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,5 +1,11 @@
-import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import {
+  Pressable,
+  Text as RNText,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
 import styled from 'styled-components/native'
@@ -54,6 +60,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
 }) => {
   const theme = useTheme()
   const { t } = useTranslation()
+  const { typography } = font
 
   useEffect(() => {
     onChange(selected)
@@ -89,15 +96,10 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
       total: labels.length,
     })
 
-    // TODO: Replace with typography tokens
-    const font: TextStyle = {
-      fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',
-      fontSize: 20,
-      lineHeight: 30,
-    }
-
     const textStyle: TextStyle = {
-      ...font,
+      ...typography.vadsFontBodyLarge,
+      fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',
+      marginBottom: spacing.vadsSpaceNone,
       color: theme.vadsColorForegroundDefault,
       textAlign: 'center',
     }
@@ -116,9 +118,9 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         accessibilityState={{ selected: isSelected }}
         style={PressableOpacityStyle()}
         testID={testIDs?.[index]}>
-        <Text allowFontScaling={false} style={textStyle}>
+        <RNText allowFontScaling={false} style={textStyle}>
           {label}
-        </Text>
+        </RNText>
       </Segment>
     )
   }