From eee3217665515cf49cf1859f52ac92b35bfd40e4 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 11 Dec 2024 13:31:24 -0800
Subject: [PATCH 01/24] Update button to use typography token

---
 packages/components/src/components/Button/Button.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index 5dde6aeb..e2027aa1 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -5,7 +5,7 @@ import {
   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,
@@ -117,9 +118,9 @@ export const Button: React.FC<ButtonProps> = ({
   const getTextStyle = (pressed: boolean): TextStyle => {
     // TODO: Replace with typography tokens
     const font: TextStyle = {
-      fontFamily: 'SourceSansPro-Bold',
-      fontSize: 20,
-      lineHeight: 30,
+      ...typography.vadsFontBodyLarge,
+      fontFamily: family.vadsFontFamilySansSerifBold,
+      marginBottom: 0,
     }
 
     return {

From 60d3ac932d0724e17bb3241d4df053df306d04e3 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:18:43 -0800
Subject: [PATCH 02/24] Update Alert to use typography tokens

---
 .../components/src/components/Alert/Alert.tsx | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 5e70ad4f..047dbc11 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,13 +1,13 @@
 import {
   Insets,
   Pressable,
-  Text,
+  Text as RNText,
   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'
@@ -83,6 +83,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,20 +94,10 @@ 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 = {
+    ...typography.vadsFontBodyLarge,
     color: contentColor,
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 20,
-    lineHeight: 30,
+    marginBottom: 0,
   }
 
   switch (variant) {
@@ -140,6 +132,12 @@ export const Alert: FC<AlertProps> = ({
     width: '100%', // Ensure Alert fills horizontal space, regardless of flexing content
   }
 
+  const headerFont: TextStyle = {
+    ...typography.vadsFontHeadingSmall,
+    marginBottom: 0,
+    color: contentColor,
+  }
+
   const iconViewStyle: ViewStyle = {
     flexDirection: 'row',
     // Below keeps icon aligned with first row of text, centered, and scalable
@@ -170,7 +168,7 @@ export const Alert: FC<AlertProps> = ({
   const _header = () => {
     if (!header) return null
 
-    const headerText = <Text style={headerFont}>{header}</Text>
+    const headerText = <RNText style={headerFont}>{header}</RNText>
     const a11yLabel = headerA11yLabel || header
     const hitSlop: Insets = {
       // left border/padding + spacer + icon width
@@ -253,11 +251,11 @@ export const Alert: FC<AlertProps> = ({
                   <Spacer size="lg" />
                 ) : null}
                 {description ? (
-                  <Text
+                  <RNText
                     style={descriptionFont}
                     aria-label={descriptionA11yLabel || description}>
                     {description}
-                  </Text>
+                  </RNText>
                 ) : null}
                 {description && children ? <Spacer size="lg" /> : null}
                 {children}

From e90b8062f3b66b88d5828c2eef697ef4d93993c4 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:19:03 -0800
Subject: [PATCH 03/24] Rename Text import to RNText

---
 packages/components/src/components/Button/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index e2027aa1..4c6625e9 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import {
   Pressable,
   PressableStateCallbackType,
-  Text,
+  Text as RNText,
   TextStyle,
   ViewStyle,
 } from 'react-native'
@@ -140,7 +140,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>
   )

From 2ce35bb8ac5191189871453a26ae1264e89f73a2 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:19:25 -0800
Subject: [PATCH 04/24] Update LoadingIndicator to use Text component

---
 .../LoadingIndicator/LoadingIndicator.tsx     | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
index dabf3c64..a8bdcfed 100644
--- a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
+++ b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -1,15 +1,9 @@
-import {
-  Animated,
-  Easing,
-  Text,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
+import { Animated, Easing, TextStyle, 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,14 +62,6 @@ 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 }] }}>
@@ -83,7 +69,12 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       </Animated.View>
       <Spacer size="xs" />
       {text && (
-        <Text style={textStyle} accessibilityLabel={a11yLabel}>
+        <Text
+          variant="body"
+          size="lg"
+          a11yLabel={a11yLabel}
+          bottomSpacing="none"
+          center>
           {text}
         </Text>
       )}

From dd65d97b198f6fb0422b8cd70170df62d5977375 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:19:57 -0800
Subject: [PATCH 05/24] Update Snackbar to use typography tokens

---
 .../src/components/Snackbar/Snackbar.tsx          | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx
index 6b2f54d3..b89611be 100644
--- a/packages/components/src/components/Snackbar/Snackbar.tsx
+++ b/packages/components/src/components/Snackbar/Snackbar.tsx
@@ -11,7 +11,7 @@ import {
   useWindowDimensions,
 } from 'react-native'
 import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toast'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
 
@@ -28,11 +28,12 @@ type SnackbarButtonProps = {
 
 const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
   const theme = useTheme()
+  const { family, typography } = font
 
   const helperTextBold: TextStyle = {
-    fontFamily: 'SourceSansPro-Bold',
-    fontSize: 16,
-    lineHeight: 22,
+    ...typography.vadsFontBodySmall,
+    fontFamily: family.vadsFontFamilySansSerifBold,
+    marginBottom: 0,
   }
 
   const getTextStyle = (pressed: boolean): TextStyle => {
@@ -125,6 +126,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
   const fontScale = useWindowDimensions().fontScale
   const theme = useTheme()
   const { t } = useTranslation()
+  const { typography } = font
 
   /**
    * useEffect to handle announcing the Snackbar appearing to the screen reader
@@ -140,9 +142,8 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
   }, [])
 
   const helperText: TextStyle = {
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 16,
-    lineHeight: 22,
+    ...typography.vadsFontBodySmall,
+    marginBottom: 0,
   }
 
   const { isError, messageA11y, onActionPressed } = toast.data || {}

From 2e615d006dcf09a25febf360f11c2d9f18aed416 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:21:56 -0800
Subject: [PATCH 06/24] Add bold boolean for body variant

---
 .../src/components/Text/Text.stories.tsx       |  1 +
 .../components/src/components/Text/Text.tsx    | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/Text/Text.stories.tsx b/packages/components/src/components/Text/Text.stories.tsx
index a42fe0c3..e9d49864 100644
--- a/packages/components/src/components/Text/Text.stories.tsx
+++ b/packages/components/src/components/Text/Text.stories.tsx
@@ -32,6 +32,7 @@ const meta: Meta<TextProps> = {
     /** The foollowing conditions hide the tone and size props if variant's value is 'display' */
     tone: { if: { arg: 'variant', neq: 'display' } },
     size: { if: { arg: 'variant', neq: 'display' } },
+    bold: { if: { arg: 'variant', eq: 'body' } },
   },
 }
 
diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
index a65380e6..9ab0bfff 100644
--- a/packages/components/src/components/Text/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -19,9 +19,9 @@ type BaseTones = (typeof baseToneValues)[number]
 type BodyTones = BaseTones | 'error'
 
 type BodyProps = {
-  /**
-   * Optionally set bottom spacing to none if typography style default isn't desired
-   **/
+  /** True to make body text bold */
+  bold?: boolean
+  /** Optionally set bottom spacing to none if typography style default isn't desired **/
   bottomSpacing?: 'none'
   /** Size: xs, sm, md, or lg. Defaults to 'md' for body and heading */
   size?: TextSizes
@@ -32,6 +32,7 @@ type BodyProps = {
 }
 
 type HeadingProps = {
+  bold?: never
   /**
    * Optional bottom spacing if typography style default isn't desired.
    * @see {@link SpacerSize} for possible values
@@ -46,6 +47,7 @@ type HeadingProps = {
 }
 
 type DisplayProps = {
+  bold?: never
   /**
    * Optional bottom spacing if typography style default isn't desired.
    * @see {@link SpacerSize} for possible values
@@ -59,6 +61,7 @@ type DisplayProps = {
 }
 
 export type TextProps = {
+  center?: boolean
   children: React.ReactNode
   /** AccessibilityLabel for the text */
   a11yLabel?: string
@@ -66,14 +69,16 @@ export type TextProps = {
 
 export const Text: FC<TextProps> = ({
   a11yLabel,
+  bold,
   bottomSpacing,
+  center,
   children,
   size = 'md',
   tone = 'default',
   variant = 'body',
 }) => {
   const theme = useTheme()
-  const { typography } = font
+  const { family, typography } = font
   let typographyKey, color
 
   const prefix = 'vadsFont'
@@ -115,6 +120,11 @@ export const Text: FC<TextProps> = ({
   const style: TextStyle = {
     ...typography[typographyKey as keyof typeof typography],
     color,
+    textAlign: center ? 'center' : 'auto',
+  }
+
+  if (bold && variant === 'body') {
+    style.fontFamily = family.vadsFontFamilySansSerifBold
   }
 
   /** Set bottom margin to custom bottomSpacing if provided */

From 9d5789c7f1d67fc3a82e77ac3b6776a29cbe0000 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:28:12 -0800
Subject: [PATCH 07/24] Refactor Link component to utilize typography tokens
 and streamline text styling

- Replaced hardcoded font properties with typography tokens from mobile-tokens.
- Simplified textStyle definition and ensured consistent link color handling based on variant.
- Removed redundant code related to font settings and link color assignment.
---
 .../components/src/components/Link/Link.tsx   | 43 ++++++++-----------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx
index 163b3436..7adf66d5 100644
--- a/packages/components/src/components/Link/Link.tsx
+++ b/packages/components/src/components/Link/Link.tsx
@@ -5,6 +5,7 @@ import {
   TextProps,
   TextStyle,
 } from 'react-native'
+import { font } from '@department-of-veterans-affairs/mobile-tokens'
 import { t } from 'i18next'
 import React, { FC } from 'react'
 
@@ -141,12 +142,24 @@ 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,
+    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 +226,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 +260,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}>

From e1d53362d3934bd04549015e60cc602feaf670df Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 17:40:46 -0800
Subject: [PATCH 08/24] Refactor SegmentedControl to utilize typography tokens
 for improved text styling

- Integrated typography tokens from mobile-tokens to enhance text styling consistency.
- Updated textStyle to use typography.vadsFontBodyLarge for better maintainability.
- Retained conditional fontFamily assignment for selected state while removing redundant font definitions.
---
 .../SegmentedControl/SegmentedControl.tsx           | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index 908b7e45..64d76818 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,5 +1,5 @@
 import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+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 +54,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
 }) => {
   const theme = useTheme()
   const { t } = useTranslation()
+  const { typography } = font
 
   useEffect(() => {
     onChange(selected)
@@ -90,14 +91,10 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
     })
 
     // 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: 0,
       color: theme.vadsColorForegroundDefault,
       textAlign: 'center',
     }

From 87fa4488a20aab977e902129813e0410f5c98efd Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 18:28:43 -0800
Subject: [PATCH 09/24] Refactor FormText component to utilize typography
 tokens for improved styling consistency

- Replaced hardcoded font properties with typography tokens from mobile-tokens.
- Updated text styles for Header, Hint, Error, Label, and Description components to use typography.vadsFontBodyLarge and typography.vadsFontBodySmall.
- Renamed Text import to RNText for clarity and consistency across the component.
- Removed redundant font definitions to streamline the codebase.
---
 .../src/components/shared/FormText.tsx        | 76 ++++++++-----------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx
index 75dbe933..3cd3e98f 100644
--- a/packages/components/src/components/shared/FormText.tsx
+++ b/packages/components/src/components/shared/FormText.tsx
@@ -1,4 +1,5 @@
-import { Text } from 'react-native'
+import { Text as RNText } from 'react-native'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
@@ -13,37 +14,15 @@ type FormTextProps = {
 /**
  * Fonts (TODO: replace with typography tokens)
  */
-const fontRegular = 'SourceSansPro-Regular'
-const fontBold = 'SourceSansPro-Bold'
-
-const fontHeader = {
-  fontFamily: fontRegular,
-  fontSize: 20,
-  lineHeight: 30,
-}
-
-const fontHint = {
-  fontFamily: fontRegular,
-  fontSize: 16,
-  lineHeight: 22,
-}
-
-const fontError = {
-  fontFamily: fontBold,
-  fontSize: 16,
-  lineHeight: 22,
-}
+const { family, typography } = font
+const fontRegular = family.vadsFontFamilySansSerifRegular
+const fontBold = family.vadsFontFamilySansSerifBold
 
 export const fontLabel = {
-  fontSize: 20,
-  lineHeight: 30,
+  ...typography.vadsFontBodyLarge,
+  marginBottom: 0,
 }
 
-const fontDescription = {
-  fontFamily: fontRegular,
-  fontSize: 16,
-  lineHeight: 22,
-}
 export type HeaderProps = FormTextProps & {
   /** True to display (*Required) label next to header */
   required?: boolean
@@ -59,7 +38,8 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
   if (!text) return null
 
   const textStyle = {
-    ...fontHeader,
+    ...typography.vadsFontBodyLarge,
+    marginBottom: 0,
     color: theme.vadsColorForegroundDefault,
   }
 
@@ -72,10 +52,12 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
     : getA11yLabel(text)
 
   return (
-    <Text role="heading" aria-label={ariaLabel} style={textStyle}>
+    <RNText role="heading" aria-label={ariaLabel} style={textStyle}>
       {getDisplayText(text)}
-      {required && <Text style={requiredStyle}>{` (*${t('required')})`}</Text>}
-    </Text>
+      {required && (
+        <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
+      )}
+    </RNText>
   )
 }
 
@@ -88,14 +70,15 @@ export const Hint: FC<FormTextProps> = ({ text }) => {
   if (!text) return null
 
   const textStyle = {
-    ...fontHint,
+    ...typography.vadsFontBodySmall,
+    marginBottom: 0,
     color: theme.vadsColorForegroundSubtle,
   }
 
   return (
-    <Text aria-label={getA11yLabel(text)} style={textStyle}>
+    <RNText aria-label={getA11yLabel(text)} style={textStyle}>
       {getDisplayText(text)}
-    </Text>
+    </RNText>
   )
 }
 
@@ -109,14 +92,18 @@ export const Error: FC<FormTextProps> = ({ text }) => {
   if (!text) return null
 
   const textStyle = {
-    ...fontError,
+    ...typography.vadsFontBodySmall,
+    fontFamily: fontBold,
+    marginBottom: 0,
     color: theme.vadsColorForegroundError,
   }
 
   return (
-    <Text aria-label={`${t('error')}: ${getA11yLabel(text)}`} style={textStyle}>
+    <RNText
+      aria-label={`${t('error')}: ${getA11yLabel(text)}`}
+      style={textStyle}>
       {getDisplayText(text)}
-    </Text>
+    </RNText>
   )
 }
 export type LabelProps = FormTextProps & {
@@ -146,10 +133,12 @@ export const Label: FC<LabelProps> = ({ text, error, required }) => {
   }
 
   return (
-    <Text style={textStyle}>
+    <RNText style={textStyle}>
       {getDisplayText(text)}
-      {required && <Text style={requiredStyle}>{` (*${t('required')})`}</Text>}
-    </Text>
+      {required && (
+        <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
+      )}
+    </RNText>
   )
 }
 
@@ -162,9 +151,10 @@ export const Description: FC<FormTextProps> = ({ text }) => {
   if (!text) return null
 
   const textStyle = {
-    ...fontDescription,
+    ...typography.vadsFontBodySmall,
+    marginBottom: 0,
     color: theme.vadsColorForegroundDefault,
   }
 
-  return <Text style={textStyle}>{getDisplayText(text)}</Text>
+  return <RNText style={textStyle}>{getDisplayText(text)}</RNText>
 }

From 5402a2d8e335c25238622ac502bb9773c03014c0 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 21:41:54 -0800
Subject: [PATCH 10/24] Enhance component styling and parameters

- Removed TODO comments in Button and SegmentedControl components to clean up the codebase.
- Updated Link component to set marginBottom to 0
---
 packages/components/.storybook/web/preview.tsx                 | 3 +++
 packages/components/src/components/Button/Button.tsx           | 1 -
 packages/components/src/components/Link/Link.tsx               | 1 +
 .../src/components/SegmentedControl/SegmentedControl.tsx       | 1 -
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/.storybook/web/preview.tsx b/packages/components/.storybook/web/preview.tsx
index 5fb04de7..fa4a08ae 100644
--- a/packages/components/.storybook/web/preview.tsx
+++ b/packages/components/.storybook/web/preview.tsx
@@ -5,6 +5,9 @@ import { useDarkMode } from 'storybook-dark-mode'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
+  viewport: {
+    defaultViewport: 'mobile2',
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index 4c6625e9..b3b6b9b3 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -116,7 +116,6 @@ export const Button: React.FC<ButtonProps> = ({
    * @returns TextStyle for text
    */
   const getTextStyle = (pressed: boolean): TextStyle => {
-    // TODO: Replace with typography tokens
     const font: TextStyle = {
       ...typography.vadsFontBodyLarge,
       fontFamily: family.vadsFontFamilySansSerifBold,
diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx
index 7adf66d5..e5f2efc2 100644
--- a/packages/components/src/components/Link/Link.tsx
+++ b/packages/components/src/components/Link/Link.tsx
@@ -156,6 +156,7 @@ export const Link: FC<LinkProps> = ({
 
   const textStyle: TextStyle = {
     ...typography.vadsFontBodyLarge,
+    marginBottom: 0,
     color: linkColor,
     textDecorationColor: linkColor,
     textDecorationLine: 'underline',
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index 64d76818..056ad143 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -90,7 +90,6 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
       total: labels.length,
     })
 
-    // TODO: Replace with typography tokens
     const textStyle: TextStyle = {
       ...typography.vadsFontBodyLarge,
       fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',

From 419a80bc1fc97a78ee8694694f33454efc138de2 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Thu, 12 Dec 2024 21:50:50 -0800
Subject: [PATCH 11/24] Reset default viewport

---
 packages/components/.storybook/web/preview.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/.storybook/web/preview.tsx b/packages/components/.storybook/web/preview.tsx
index fa4a08ae..5fb04de7 100644
--- a/packages/components/.storybook/web/preview.tsx
+++ b/packages/components/.storybook/web/preview.tsx
@@ -5,9 +5,6 @@ import { useDarkMode } from 'storybook-dark-mode'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
-  viewport: {
-    defaultViewport: 'mobile2',
-  },
   controls: {
     matchers: {
       color: /(background|color)$/i,

From 3b74dde773d61985c83b6167a01ad0222e78776e Mon Sep 17 00:00:00 2001
From: VA Automation Bot <va-mobileapp@adhocteam.us>
Date: Fri, 13 Dec 2024 05:58:26 +0000
Subject: [PATCH 12/24] Version bump: components-v0.28.1-alpha.2

---
 packages/components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index c99831f4..35d1bea9 100644
--- a/packages/components/package.json
+++ b/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": {

From 3d754e2304628be12adf567ab9db7a8d658ad79c Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 12:27:22 -0800
Subject: [PATCH 13/24] Replaced RNText with Text component where possible in
 FormText. General cleanup and refactoring:

- Simplified getTextStyle function in Button component for cleaner code.
- Removed unnecessary Spacer components in CheckboxGroup, RadioButton, and CheckboxRadio components to streamline layout.
- Updated LoadingIndicator to remove unused imports and improve clarity.
- Refactored FormText component to utilize typography tokens for consistent text styling across Header, Hint, Error, Label, and Description components.
- Replaced hardcoded font properties with typography tokens and integrated the Text component for improved maintainability.
---
 .../src/components/Button/Button.tsx          |  18 +--
 .../CheckboxGroup/CheckboxGroup.tsx           |   2 -
 .../LoadingIndicator/LoadingIndicator.tsx     |   2 +-
 .../components/RadioButton/RadioButton.tsx    |   6 -
 .../src/components/shared/CheckboxRadio.tsx   |  21 +--
 .../src/components/shared/FormText.tsx        | 128 +++++++++---------
 6 files changed, 73 insertions(+), 104 deletions(-)

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index b3b6b9b3..0a4c403b 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -115,18 +115,12 @@ export const Button: React.FC<ButtonProps> = ({
    * @param pressed - boolean for pressed state
    * @returns TextStyle for text
    */
-  const getTextStyle = (pressed: boolean): TextStyle => {
-    const font: TextStyle = {
-      ...typography.vadsFontBodyLarge,
-      fontFamily: family.vadsFontFamilySansSerifBold,
-      marginBottom: 0,
-    }
-
-    return {
-      ...font,
-      color: pressed ? textColorPressed : textColor,
-    }
-  }
+  const getTextStyle = (pressed: boolean): TextStyle => ({
+    ...typography.vadsFontBodyLarge,
+    fontFamily: family.vadsFontFamilySansSerifBold,
+    marginBottom: 0,
+    color: pressed ? textColorPressed : textColor,
+  })
 
   return (
     <Pressable
diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
index c5ca4a5b..e25f2c4e 100644
--- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -135,10 +135,8 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
         {header && <Spacer size="xs" />}
 
         <Hint text={hint} />
-        {hint && <Spacer size="xs" />}
 
         <Error text={error} />
-        {error && <Spacer size="xs" />}
 
         {items.map((item, index) => {
           const isObject = typeof item === 'object'
diff --git a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
index a8bdcfed..1ab6b1fa 100644
--- a/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
+++ b/packages/components/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -1,4 +1,4 @@
-import { Animated, Easing, 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'
diff --git a/packages/components/src/components/RadioButton/RadioButton.tsx b/packages/components/src/components/RadioButton/RadioButton.tsx
index 5489318f..f5eccac3 100644
--- a/packages/components/src/components/RadioButton/RadioButton.tsx
+++ b/packages/components/src/components/RadioButton/RadioButton.tsx
@@ -122,14 +122,8 @@ export const RadioButton: FC<RadioButtonProps> = ({
     <ComponentWrapper>
       <View style={containerStyle} testID={testID}>
         <Header text={header} required={required} />
-        {header && <Spacer size="xs" />}
-
         <Hint text={hint} />
-        {hint && <Spacer size="xs" />}
-
         <Error text={error} />
-        {error && <Spacer size="xs" />}
-
         {items.map((item, index) => {
           const isObject = typeof item === 'object'
           const value = isObject ? item.value || item.text : item
diff --git a/packages/components/src/components/shared/CheckboxRadio.tsx b/packages/components/src/components/shared/CheckboxRadio.tsx
index b648553f..78a2ca95 100644
--- a/packages/components/src/components/shared/CheckboxRadio.tsx
+++ b/packages/components/src/components/shared/CheckboxRadio.tsx
@@ -1,17 +1,10 @@
 import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
-import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
 import { CheckboxRadioProps } from '../../types/forms'
-import {
-  Description,
-  Error,
-  Header,
-  Hint,
-  Label,
-  fontLabel,
-} from '../shared/FormText'
+import { Description, Error, Header, Hint, Label } from '../shared/FormText'
 import { Icon, IconProps } from '../Icon/Icon'
 import { Spacer } from '../Spacer/Spacer'
 import { getA11yLabel, useTheme } from '../../utils'
@@ -38,6 +31,7 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
 }) => {
   const theme = useTheme()
   const { t } = useTranslation()
+  const { typography } = font
 
   /**
    * Container styling
@@ -99,7 +93,7 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
       checked || indeterminate
         ? theme.vadsColorFormsForegroundActive
         : theme.vadsColorFormsBorderDefault,
-    alignWithTextLineHeight: fontLabel.lineHeight,
+    alignWithTextLineHeight: typography.vadsFontBodyLarge.lineHeight,
   }
 
   /**
@@ -113,14 +107,8 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
   return (
     <View style={containerStyle} testID={testID}>
       <Header text={header} />
-      {header && <Spacer size="xs" />}
-
       <Hint text={hint} />
-      {hint && <Spacer size="xs" />}
-
       <Error text={error} />
-      {error && <Spacer size="xs" />}
-
       <Pressable
         onPress={onPress}
         style={tile ? tileStyle : pressableBaseStyle}
@@ -132,7 +120,6 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
         <Spacer size="xs" horizontal />
         <View style={{ flexShrink: 1 }}>
           <Label text={label} error={error} required={required} />
-          {description && <Spacer size="xs" />}
           <Description text={description} />
         </View>
       </Pressable>
diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx
index 3cd3e98f..3124281a 100644
--- a/packages/components/src/components/shared/FormText.tsx
+++ b/packages/components/src/components/shared/FormText.tsx
@@ -1,9 +1,11 @@
 import { Text as RNText } from 'react-native'
-import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
+import { font } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
+import { Spacer } from '../Spacer/Spacer'
 import { StringOrTextWithA11y } from '../../types/common'
+import { Text } from '../Text/Text'
 import { getA11yLabel, getDisplayText, useTheme } from '../../utils'
 
 type FormTextProps = {
@@ -12,16 +14,9 @@ type FormTextProps = {
 }
 
 /**
- * Fonts (TODO: replace with typography tokens)
+ * Fonts
  */
-const { family, typography } = font
-const fontRegular = family.vadsFontFamilySansSerifRegular
-const fontBold = family.vadsFontFamilySansSerifBold
-
-export const fontLabel = {
-  ...typography.vadsFontBodyLarge,
-  marginBottom: 0,
-}
+const { typography } = font
 
 export type HeaderProps = FormTextProps & {
   /** True to display (*Required) label next to header */
@@ -52,12 +47,15 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
     : getA11yLabel(text)
 
   return (
-    <RNText role="heading" aria-label={ariaLabel} style={textStyle}>
-      {getDisplayText(text)}
-      {required && (
-        <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
-      )}
-    </RNText>
+    <>
+      <RNText role="heading" aria-label={ariaLabel} style={textStyle}>
+        {getDisplayText(text)}
+        {required && (
+          <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
+        )}
+      </RNText>
+      <Spacer size="xs" />
+    </>
   )
 }
 
@@ -65,20 +63,20 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
  * Hint text element commonly used in form components
  */
 export const Hint: FC<FormTextProps> = ({ text }) => {
-  const theme = useTheme()
-
   if (!text) return null
 
-  const textStyle = {
-    ...typography.vadsFontBodySmall,
-    marginBottom: 0,
-    color: theme.vadsColorForegroundSubtle,
-  }
-
   return (
-    <RNText aria-label={getA11yLabel(text)} style={textStyle}>
-      {getDisplayText(text)}
-    </RNText>
+    <>
+      <Text
+        variant="body"
+        size="sm"
+        a11yLabel={getA11yLabel(text)}
+        tone="subtle"
+        bottomSpacing="none">
+        {getDisplayText(text)}
+      </Text>
+      <Spacer size="xs" />
+    </>
   )
 }
 
@@ -87,23 +85,22 @@ export const Hint: FC<FormTextProps> = ({ text }) => {
  */
 export const Error: FC<FormTextProps> = ({ text }) => {
   const { t } = useTranslation()
-  const theme = useTheme()
 
   if (!text) return null
 
-  const textStyle = {
-    ...typography.vadsFontBodySmall,
-    fontFamily: fontBold,
-    marginBottom: 0,
-    color: theme.vadsColorForegroundError,
-  }
-
   return (
-    <RNText
-      aria-label={`${t('error')}: ${getA11yLabel(text)}`}
-      style={textStyle}>
-      {getDisplayText(text)}
-    </RNText>
+    <>
+      <Text
+        variant="body"
+        bold
+        size="sm"
+        a11yLabel={`${t('error')}: ${getA11yLabel(text)}`}
+        tone="error"
+        bottomSpacing="none">
+        {getDisplayText(text)}
+      </Text>
+      <Spacer size="xs" />
+    </>
   )
 }
 export type LabelProps = FormTextProps & {
@@ -117,28 +114,28 @@ export type LabelProps = FormTextProps & {
  * Label text element commonly used in form components
  */
 export const Label: FC<LabelProps> = ({ text, error, required }) => {
-  const theme = useTheme()
   const { t } = useTranslation()
 
   if (!text) return null
 
-  const textStyle = {
-    ...fontLabel,
-    fontFamily: error ? fontBold : fontRegular,
-    color: theme.vadsColorForegroundDefault,
-  }
-
-  const requiredStyle = {
-    color: theme.vadsColorForegroundError,
-  }
-
   return (
-    <RNText style={textStyle}>
-      {getDisplayText(text)}
-      {required && (
-        <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
-      )}
-    </RNText>
+    <>
+      <Text
+        variant="body"
+        size="lg"
+        bottomSpacing="none"
+        bold={error ? true : false}>
+        {getDisplayText(text)}
+        {required && (
+          <Text
+            variant="body"
+            size="lg"
+            tone="error"
+            bottomSpacing="none"
+            bold={error ? true : false}>{` (*${t('required')})`}</Text>
+        )}
+      </Text>
+    </>
   )
 }
 
@@ -146,15 +143,14 @@ export const Label: FC<LabelProps> = ({ text, error, required }) => {
  * Description text element commonly used in form components
  */
 export const Description: FC<FormTextProps> = ({ text }) => {
-  const theme = useTheme()
-
   if (!text) return null
 
-  const textStyle = {
-    ...typography.vadsFontBodySmall,
-    marginBottom: 0,
-    color: theme.vadsColorForegroundDefault,
-  }
-
-  return <RNText style={textStyle}>{getDisplayText(text)}</RNText>
+  return (
+    <>
+      <Spacer size="xs" />
+      <Text variant="body" size="sm" bottomSpacing="none">
+        {getDisplayText(text)}
+      </Text>
+    </>
+  )
 }

From 3ebba5532cfd103645cd701cf4dbb536edefa313 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 12:36:35 -0800
Subject: [PATCH 14/24] Replace RNText in Alert with Text component

---
 .../components/src/components/Alert/Alert.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index 047dbc11..cda457c5 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,7 +1,6 @@
 import {
   Insets,
   Pressable,
-  Text as RNText,
   TextStyle,
   View,
   ViewStyle,
@@ -14,6 +13,7 @@ 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
@@ -168,7 +168,12 @@ export const Alert: FC<AlertProps> = ({
   const _header = () => {
     if (!header) return null
 
-    const headerText = <RNText style={headerFont}>{header}</RNText>
+    const headerText = (
+      <Text variant="heading" size="sm" bottomSpacing="none">
+        {header}
+      </Text>
+    )
+
     const a11yLabel = headerA11yLabel || header
     const hitSlop: Insets = {
       // left border/padding + spacer + icon width
@@ -251,11 +256,13 @@ export const Alert: FC<AlertProps> = ({
                   <Spacer size="lg" />
                 ) : null}
                 {description ? (
-                  <RNText
-                    style={descriptionFont}
-                    aria-label={descriptionA11yLabel || description}>
+                  <Text
+                    variant="body"
+                    size="lg"
+                    bottomSpacing="none"
+                    a11yLabel={descriptionA11yLabel || description}>
                     {description}
-                  </RNText>
+                  </Text>
                 ) : null}
                 {description && children ? <Spacer size="lg" /> : null}
                 {children}

From ed670bda11617f4eac0700e8b5f187d76bece80c Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 12:39:10 -0800
Subject: [PATCH 15/24] Remove unused vars

---
 .../components/src/components/Alert/Alert.tsx    | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/Alert/Alert.tsx b/packages/components/src/components/Alert/Alert.tsx
index cda457c5..d0c8305a 100644
--- a/packages/components/src/components/Alert/Alert.tsx
+++ b/packages/components/src/components/Alert/Alert.tsx
@@ -1,7 +1,6 @@
 import {
   Insets,
   Pressable,
-  TextStyle,
   View,
   ViewStyle,
   useWindowDimensions,
@@ -94,12 +93,6 @@ export const Alert: FC<AlertProps> = ({
   const contentColor = AlertContentColor()
   let backgroundColor, borderColor, iconName: IconProps['name']
 
-  const descriptionFont: TextStyle = {
-    ...typography.vadsFontBodyLarge,
-    color: contentColor,
-    marginBottom: 0,
-  }
-
   switch (variant) {
     case 'info':
       backgroundColor = theme.vadsColorFeedbackSurfaceInfo
@@ -132,17 +125,12 @@ export const Alert: FC<AlertProps> = ({
     width: '100%', // Ensure Alert fills horizontal space, regardless of flexing content
   }
 
-  const headerFont: TextStyle = {
-    ...typography.vadsFontHeadingSmall,
-    marginBottom: 0,
-    color: contentColor,
-  }
-
   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',
   }

From 9fdfbc209a4fcb4d279141531cd1023e9a299931 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 12:45:14 -0800
Subject: [PATCH 16/24] Rename Text import to RNText

---
 packages/components/src/components/Snackbar/Snackbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx
index b89611be..7afc4a8b 100644
--- a/packages/components/src/components/Snackbar/Snackbar.tsx
+++ b/packages/components/src/components/Snackbar/Snackbar.tsx
@@ -2,7 +2,7 @@ import {
   AccessibilityInfo,
   Pressable,
   PressableStateCallbackType,
-  Text,
+  Text as RNText,
   TextProps,
   TextStyle,
   View,
@@ -48,7 +48,7 @@ const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
   return (
     <Pressable hitSlop={11} onPress={onPress} role="button">
       {({ pressed }: PressableStateCallbackType) => (
-        <Text style={getTextStyle(pressed)}>{text}</Text>
+        <RNText style={getTextStyle(pressed)}>{text}</RNText>
       )}
     </Pressable>
   )
@@ -239,7 +239,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
             <Icon {...iconProps} />
           </View>
           <Spacer size="xs" horizontal />
-          <Text {...messageProps}>{toast.message}</Text>
+          <RNText {...messageProps}>{toast.message}</RNText>
         </View>
         <View {...buttonContainer}>
           {actionButton()}

From bd41f7ceec0338cac0e9d29752cc92b8af18366d Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 12:56:53 -0800
Subject: [PATCH 17/24] Revert FormText spacers

---
 .../CheckboxGroup/CheckboxGroup.tsx           |  8 ++-
 .../components/RadioButton/RadioButton.tsx    |  6 ++
 .../src/components/shared/CheckboxRadio.tsx   |  7 ++
 .../src/components/shared/FormText.tsx        | 65 ++++++++-----------
 4 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
index e25f2c4e..e89291f6 100644
--- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -131,13 +131,15 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
   return (
     <ComponentWrapper>
       <View style={containerStyle} testID={testID}>
-        <Header text={header} required={required} />
+        <Header text={header} required={required} />{' '}
         {header && <Spacer size="xs" />}
-
+        
         <Hint text={hint} />
+        {hint && <Spacer size="xs" />}
 
         <Error text={error} />
-
+        {error && <Spacer size="xs" />}
+        
         {items.map((item, index) => {
           const isObject = typeof item === 'object'
           const value = isObject ? item.value || item.text : item
diff --git a/packages/components/src/components/RadioButton/RadioButton.tsx b/packages/components/src/components/RadioButton/RadioButton.tsx
index f5eccac3..5489318f 100644
--- a/packages/components/src/components/RadioButton/RadioButton.tsx
+++ b/packages/components/src/components/RadioButton/RadioButton.tsx
@@ -122,8 +122,14 @@ export const RadioButton: FC<RadioButtonProps> = ({
     <ComponentWrapper>
       <View style={containerStyle} testID={testID}>
         <Header text={header} required={required} />
+        {header && <Spacer size="xs" />}
+
         <Hint text={hint} />
+        {hint && <Spacer size="xs" />}
+
         <Error text={error} />
+        {error && <Spacer size="xs" />}
+
         {items.map((item, index) => {
           const isObject = typeof item === 'object'
           const value = isObject ? item.value || item.text : item
diff --git a/packages/components/src/components/shared/CheckboxRadio.tsx b/packages/components/src/components/shared/CheckboxRadio.tsx
index 78a2ca95..b6fd87a1 100644
--- a/packages/components/src/components/shared/CheckboxRadio.tsx
+++ b/packages/components/src/components/shared/CheckboxRadio.tsx
@@ -107,8 +107,14 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
   return (
     <View style={containerStyle} testID={testID}>
       <Header text={header} />
+      {header && <Spacer size="xs" />}
+
       <Hint text={hint} />
+      {hint && <Spacer size="xs" />}
+
       <Error text={error} />
+      {error && <Spacer size="xs" />}
+
       <Pressable
         onPress={onPress}
         style={tile ? tileStyle : pressableBaseStyle}
@@ -120,6 +126,7 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
         <Spacer size="xs" horizontal />
         <View style={{ flexShrink: 1 }}>
           <Label text={label} error={error} required={required} />
+          {description && <Spacer size="xs" />}
           <Description text={description} />
         </View>
       </Pressable>
diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx
index 3124281a..08cd1ff4 100644
--- a/packages/components/src/components/shared/FormText.tsx
+++ b/packages/components/src/components/shared/FormText.tsx
@@ -3,7 +3,6 @@ import { font } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
-import { Spacer } from '../Spacer/Spacer'
 import { StringOrTextWithA11y } from '../../types/common'
 import { Text } from '../Text/Text'
 import { getA11yLabel, getDisplayText, useTheme } from '../../utils'
@@ -54,7 +53,6 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
           <RNText style={requiredStyle}>{` (*${t('required')})`}</RNText>
         )}
       </RNText>
-      <Spacer size="xs" />
     </>
   )
 }
@@ -75,7 +73,6 @@ export const Hint: FC<FormTextProps> = ({ text }) => {
         bottomSpacing="none">
         {getDisplayText(text)}
       </Text>
-      <Spacer size="xs" />
     </>
   )
 }
@@ -89,18 +86,15 @@ export const Error: FC<FormTextProps> = ({ text }) => {
   if (!text) return null
 
   return (
-    <>
-      <Text
-        variant="body"
-        bold
-        size="sm"
-        a11yLabel={`${t('error')}: ${getA11yLabel(text)}`}
-        tone="error"
-        bottomSpacing="none">
-        {getDisplayText(text)}
-      </Text>
-      <Spacer size="xs" />
-    </>
+    <Text
+      variant="body"
+      bold
+      size="sm"
+      a11yLabel={`${t('error')}: ${getA11yLabel(text)}`}
+      tone="error"
+      bottomSpacing="none">
+      {getDisplayText(text)}
+    </Text>
   )
 }
 export type LabelProps = FormTextProps & {
@@ -119,23 +113,21 @@ export const Label: FC<LabelProps> = ({ text, error, required }) => {
   if (!text) return null
 
   return (
-    <>
-      <Text
-        variant="body"
-        size="lg"
-        bottomSpacing="none"
-        bold={error ? true : false}>
-        {getDisplayText(text)}
-        {required && (
-          <Text
-            variant="body"
-            size="lg"
-            tone="error"
-            bottomSpacing="none"
-            bold={error ? true : false}>{` (*${t('required')})`}</Text>
-        )}
-      </Text>
-    </>
+    <Text
+      variant="body"
+      size="lg"
+      bottomSpacing="none"
+      bold={error ? true : false}>
+      {getDisplayText(text)}
+      {required && (
+        <Text
+          variant="body"
+          size="lg"
+          tone="error"
+          bottomSpacing="none"
+          bold={error ? true : false}>{` (*${t('required')})`}</Text>
+      )}
+    </Text>
   )
 }
 
@@ -146,11 +138,8 @@ export const Description: FC<FormTextProps> = ({ text }) => {
   if (!text) return null
 
   return (
-    <>
-      <Spacer size="xs" />
-      <Text variant="body" size="sm" bottomSpacing="none">
-        {getDisplayText(text)}
-      </Text>
-    </>
+    <Text variant="body" size="sm" bottomSpacing="none">
+      {getDisplayText(text)}
+    </Text>
   )
 }

From 270ab946059fa42b142f0909b097ce976199975e Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 13:46:47 -0800
Subject: [PATCH 18/24] Fix whitespace

---
 .../src/components/CheckboxGroup/CheckboxGroup.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
index e89291f6..c5ca4a5b 100644
--- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -131,15 +131,15 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = ({
   return (
     <ComponentWrapper>
       <View style={containerStyle} testID={testID}>
-        <Header text={header} required={required} />{' '}
+        <Header text={header} required={required} />
         {header && <Spacer size="xs" />}
-        
+
         <Hint text={hint} />
         {hint && <Spacer size="xs" />}
 
         <Error text={error} />
         {error && <Spacer size="xs" />}
-        
+
         {items.map((item, index) => {
           const isObject = typeof item === 'object'
           const value = isObject ? item.value || item.text : item

From 0b1e806827b1d70e5ed7c5db418c2a7fe3a5ee16 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 13:48:29 -0800
Subject: [PATCH 19/24] Add comment for center prop

---
 packages/components/src/components/Text/Text.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
index 9ab0bfff..5dc171cb 100644
--- a/packages/components/src/components/Text/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -61,6 +61,7 @@ type DisplayProps = {
 }
 
 export type TextProps = {
+  /** True to set textAlign: center */
   center?: boolean
   children: React.ReactNode
   /** AccessibilityLabel for the text */

From 55f8107ba3df893d5900179d2ebeb74aae1517b3 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Fri, 13 Dec 2024 13:50:22 -0800
Subject: [PATCH 20/24] Add comment about icon alignment

---
 packages/components/src/components/shared/CheckboxRadio.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/shared/CheckboxRadio.tsx b/packages/components/src/components/shared/CheckboxRadio.tsx
index b6fd87a1..5b2a3f6e 100644
--- a/packages/components/src/components/shared/CheckboxRadio.tsx
+++ b/packages/components/src/components/shared/CheckboxRadio.tsx
@@ -93,6 +93,7 @@ export const CheckboxRadio: FC<CheckboxRadioProps> = ({
       checked || indeterminate
         ? theme.vadsColorFormsForegroundActive
         : theme.vadsColorFormsBorderDefault,
+    // If Text variant for FormText Label changes, token referenced below must change accordingly
     alignWithTextLineHeight: typography.vadsFontBodyLarge.lineHeight,
   }
 

From 88a50b131783841354598db698171381fecf620a Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 16 Dec 2024 10:32:14 -0800
Subject: [PATCH 21/24] Update Text story argTypes comment to be more generic

---
 packages/components/src/components/Text/Text.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Text/Text.stories.tsx b/packages/components/src/components/Text/Text.stories.tsx
index 96825463..93c813ab 100644
--- a/packages/components/src/components/Text/Text.stories.tsx
+++ b/packages/components/src/components/Text/Text.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta<TextProps> = {
     }),
   },
   argTypes: {
-    /** The following condition hides the size props if variant's value is 'display' */
+    /** Conditionally show or hide props depending prop values */
     size: { if: { arg: 'variant', neq: 'display' } },
     bold: { if: { arg: 'variant', eq: 'body' } },
   },

From 6f5c016317c3acfca27d2d55cd93008d726df98e Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 16 Dec 2024 10:32:55 -0800
Subject: [PATCH 22/24] Simplify bold conditional

---
 packages/components/src/components/Text/Text.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
index 5dc171cb..7bdd0a26 100644
--- a/packages/components/src/components/Text/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -124,7 +124,7 @@ export const Text: FC<TextProps> = ({
     textAlign: center ? 'center' : 'auto',
   }
 
-  if (bold && variant === 'body') {
+  if (bold) {
     style.fontFamily = family.vadsFontFamilySansSerifBold
   }
 

From 8a377219d3b040bfe020a3b936cab168c9502c44 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 16 Dec 2024 10:33:19 -0800
Subject: [PATCH 23/24] Remove fonts section comment

---
 packages/components/src/components/shared/FormText.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx
index 08cd1ff4..a81371d4 100644
--- a/packages/components/src/components/shared/FormText.tsx
+++ b/packages/components/src/components/shared/FormText.tsx
@@ -12,9 +12,6 @@ type FormTextProps = {
   text?: StringOrTextWithA11y
 }
 
-/**
- * Fonts
- */
 const { typography } = font
 
 export type HeaderProps = FormTextProps & {

From 46322b77526ce1b7ac4ecfdcdcc1c9feac290371 Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Mon, 16 Dec 2024 10:50:05 -0800
Subject: [PATCH 24/24] Use spacing token instead of marginBottom: 0. Use
 common textProps for Label and required text

---
 .../src/components/Button/Button.tsx          |  2 +-
 .../components/src/components/Link/Link.tsx   |  4 +--
 .../SegmentedControl/SegmentedControl.tsx     | 14 ++++++---
 .../src/components/Snackbar/Snackbar.tsx      |  4 +--
 .../components/src/components/Text/Text.tsx   |  5 +++-
 .../src/components/shared/FormText.tsx        | 29 ++++++++++---------
 6 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index 0a4c403b..5e30fd3d 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -118,7 +118,7 @@ export const Button: React.FC<ButtonProps> = ({
   const getTextStyle = (pressed: boolean): TextStyle => ({
     ...typography.vadsFontBodyLarge,
     fontFamily: family.vadsFontFamilySansSerifBold,
-    marginBottom: 0,
+    marginBottom: spacing.vadsSpaceNone,
     color: pressed ? textColorPressed : textColor,
   })
 
diff --git a/packages/components/src/components/Link/Link.tsx b/packages/components/src/components/Link/Link.tsx
index e5f2efc2..93ab4432 100644
--- a/packages/components/src/components/Link/Link.tsx
+++ b/packages/components/src/components/Link/Link.tsx
@@ -5,7 +5,7 @@ import {
   TextProps,
   TextStyle,
 } from 'react-native'
-import { font } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { t } from 'i18next'
 import React, { FC } from 'react'
 
@@ -156,7 +156,7 @@ export const Link: FC<LinkProps> = ({
 
   const textStyle: TextStyle = {
     ...typography.vadsFontBodyLarge,
-    marginBottom: 0,
+    marginBottom: spacing.vadsSpaceNone,
     color: linkColor,
     textDecorationColor: linkColor,
     textDecorationLine: 'underline',
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
index 056ad143..4b6bfa4d 100644
--- a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
+++ b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,4 +1,10 @@
-import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
+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'
@@ -93,7 +99,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
     const textStyle: TextStyle = {
       ...typography.vadsFontBodyLarge,
       fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',
-      marginBottom: 0,
+      marginBottom: spacing.vadsSpaceNone,
       color: theme.vadsColorForegroundDefault,
       textAlign: 'center',
     }
@@ -112,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>
     )
   }
diff --git a/packages/components/src/components/Snackbar/Snackbar.tsx b/packages/components/src/components/Snackbar/Snackbar.tsx
index 7afc4a8b..a4690331 100644
--- a/packages/components/src/components/Snackbar/Snackbar.tsx
+++ b/packages/components/src/components/Snackbar/Snackbar.tsx
@@ -33,7 +33,7 @@ const SnackbarButton: FC<SnackbarButtonProps> = ({ text, onPress }) => {
   const helperTextBold: TextStyle = {
     ...typography.vadsFontBodySmall,
     fontFamily: family.vadsFontFamilySansSerifBold,
-    marginBottom: 0,
+    marginBottom: spacing.vadsSpaceNone,
   }
 
   const getTextStyle = (pressed: boolean): TextStyle => {
@@ -143,7 +143,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
 
   const helperText: TextStyle = {
     ...typography.vadsFontBodySmall,
-    marginBottom: 0,
+    marginBottom: spacing.vadsSpaceNone,
   }
 
   const { isError, messageA11y, onActionPressed } = toast.data || {}
diff --git a/packages/components/src/components/Text/Text.tsx b/packages/components/src/components/Text/Text.tsx
index 7bdd0a26..8845af70 100644
--- a/packages/components/src/components/Text/Text.tsx
+++ b/packages/components/src/components/Text/Text.tsx
@@ -63,7 +63,7 @@ type DisplayProps = {
 export type TextProps = {
   /** True to set textAlign: center */
   center?: boolean
-  children: React.ReactNode
+  children?: React.ReactNode
   /** AccessibilityLabel for the text */
   a11yLabel?: string
 } & (BodyProps | HeadingProps | DisplayProps)
@@ -79,6 +79,9 @@ export const Text: FC<TextProps> = ({
   variant = 'body',
 }) => {
   const theme = useTheme()
+
+  if (!children) return null
+
   const { family, typography } = font
   let typographyKey, color
 
diff --git a/packages/components/src/components/shared/FormText.tsx b/packages/components/src/components/shared/FormText.tsx
index a81371d4..c9f553bd 100644
--- a/packages/components/src/components/shared/FormText.tsx
+++ b/packages/components/src/components/shared/FormText.tsx
@@ -1,10 +1,11 @@
 import { Text as RNText } from 'react-native'
-import { font } from '@department-of-veterans-affairs/mobile-tokens'
+import { font, spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import { useTranslation } from 'react-i18next'
 import React, { FC } from 'react'
 
+import { SpacerSize } from '../Spacer/Spacer'
 import { StringOrTextWithA11y } from '../../types/common'
-import { Text } from '../Text/Text'
+import { Text, TextProps } from '../Text/Text'
 import { getA11yLabel, getDisplayText, useTheme } from '../../utils'
 
 type FormTextProps = {
@@ -30,7 +31,7 @@ export const Header: FC<HeaderProps> = ({ text, required }) => {
 
   const textStyle = {
     ...typography.vadsFontBodyLarge,
-    marginBottom: 0,
+    marginBottom: spacing.vadsSpaceNone,
     color: theme.vadsColorForegroundDefault,
   }
 
@@ -109,20 +110,20 @@ export const Label: FC<LabelProps> = ({ text, error, required }) => {
 
   if (!text) return null
 
+  const bold = error ? true : false
+
+  const textProps: TextProps = {
+    variant: 'body',
+    size: 'lg',
+    bottomSpacing: 'none',
+    bold,
+  }
+
   return (
-    <Text
-      variant="body"
-      size="lg"
-      bottomSpacing="none"
-      bold={error ? true : false}>
+    <Text {...textProps}>
       {getDisplayText(text)}
       {required && (
-        <Text
-          variant="body"
-          size="lg"
-          tone="error"
-          bottomSpacing="none"
-          bold={error ? true : false}>{` (*${t('required')})`}</Text>
+        <Text {...textProps} tone="error">{` (*${t('required')})`}</Text>
       )}
     </Text>
   )