Merge pull request #487 from department-of-veterans-affairs/CU/449-Up…

…dateComponentsToUseSpacingTokens

[Code Upkeep] Update components to use spacing tokens

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

@@ -7,6 +7,7 @@ import {
   ViewStyle,
   useWindowDimensions,
 } from 'react-native'
+import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import React, { FC, useState } from 'react'
 
 import { BaseColor, useColorScheme, useTheme } from '../../utils'
@@ -88,19 +89,25 @@ export const Alert: FC<AlertProps> = ({
     setExpanded(!expanded)
   }
 
-  // TODO: Replace with sizing/dimension tokens
-  const Sizing = {
-    _8: 8,
-    _10: 10,
-    _12: 12,
-    _16: 16,
-    _20: 20,
-    _24: 24,
-    _30: 30,
-  }
   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
@@ -127,25 +134,25 @@ export const Alert: FC<AlertProps> = ({
   const contentBox: ViewStyle = {
     backgroundColor: backgroundColor,
     borderLeftColor: borderColor,
-    borderLeftWidth: Sizing._8,
-    padding: Sizing._20,
-    paddingLeft: Sizing._12, // Adds with borderLeftWidth for 20
+    borderLeftWidth: spacing.vadsSpaceXs,
+    padding: spacing.vadsSpaceLg,
+    paddingLeft: spacing.vadsSpaceSm, // Adds with borderLeftWidth to be `Lg` (20)
     width: '100%', // Ensure Alert fills horizontal space, regardless of flexing content
   }
 
   const iconViewStyle: ViewStyle = {
     flexDirection: 'row',
     // Below keeps icon aligned with first row of text, centered, and scalable
     alignSelf: 'flex-start',
-    minHeight: Sizing._30 * fontScale,
+    minHeight: headerFont.lineHeight! * fontScale,
     alignItems: 'center',
     justifyContent: 'center',
   }
 
   const iconDisplay = (
     <View style={iconViewStyle}>
       <Icon fill={contentColor} name={iconName} preventScaling />
-      <Spacer horizontal />
+      <Spacer size="xs" horizontal />
     </View>
   )
 
@@ -160,34 +167,18 @@ export const Alert: FC<AlertProps> = ({
     </View>
   )
 
-  // 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,
-  }
-
   const _header = () => {
     if (!header) return null
 
     const headerText = <Text style={headerFont}>{header}</Text>
     const a11yLabel = headerA11yLabel || header
     const hitSlop: Insets = {
-      // left border + left padding + spacer + icon width
-      left: Sizing._8 + Sizing._12 + Sizing._10 + Sizing._24,
-      top: Sizing._20,
+      // left border/padding + spacer + icon width
+      left: spacing.vadsSpaceLg + spacing.vadsSpaceXs + spacing.vadsSpaceXl,
+      top: spacing.vadsSpaceLg,
       // bottom spacing changes depending on expanded state
-      bottom: expanded ? Sizing._10 : Sizing._20,
-      right: Sizing._20,
+      bottom: expanded ? spacing.vadsSpaceSm : spacing.vadsSpaceLg,
+      right: spacing.vadsSpaceLg,
     }
 
     /**

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

@@ -5,6 +5,7 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native'
+import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import React from 'react'
 
 import { useTheme } from '../../utils'
@@ -101,7 +102,7 @@ export const Button: React.FC<ButtonProps> = ({
   }: PressableStateCallbackType): ViewStyle => ({
     width: '100%', // Ensure Button fills horizontal space, regardless of flexing content
     alignItems: 'center',
-    padding: 10,
+    padding: spacing.vadsSpaceSm,
     backgroundColor: pressed ? bgColorPressed : bgColor,
     borderRadius: 4,
     borderWidth,

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

@@ -8,6 +8,7 @@ import {
   ViewStyle,
   useWindowDimensions,
 } from 'react-native'
+import { spacing } from '@department-of-veterans-affairs/mobile-tokens'
 import React, { FC } from 'react'
 
 import { ComponentWrapper } from '../../wrapper'
@@ -144,6 +145,13 @@ export const Link: FC<LinkProps> = ({
   const fontScale = useWindowDimensions().fontScale
   const launchExternalLink = useExternalLink()
 
+  // TODO: Replace with typography tokens
+  const font = {
+    fontFamily: 'SourceSansPro-Regular',
+    fontSize: 20,
+    lineHeight: 30,
+  }
+
   let _icon: IconProps | 'no icon'
 
   /** Function to massage Partial<IconProps> data into IconProps based on variant icon defaults */
@@ -230,10 +238,10 @@ export const Link: FC<LinkProps> = ({
   }
 
   const iconViewStyle: ViewStyle = {
-    marginRight: 5, // Spacer to text
+    marginRight: spacing.vadsSpace2xs, // Spacer to text
     // Below keeps icon aligned with first row of text, centered, and scalable
     alignSelf: 'flex-start',
-    minHeight: 30 * fontScale,
+    minHeight: font.lineHeight * fontScale,
     alignItems: 'center',
     justifyContent: 'center',
   }
@@ -265,7 +273,7 @@ export const Link: FC<LinkProps> = ({
 
   const pressableProps: PressableProps = {
     onPress: _onPress,
-    hitSlop: 7,
+    hitSlop: 7, // Adds with lineHeight to achieve 44 pixel touch target
     ...a11yProps,
     style: ({ pressed }) => ({
       flexDirection: 'row',
@@ -278,10 +286,8 @@ export const Link: FC<LinkProps> = ({
   }
 
   const textStyle: TextStyle = {
+    ...font,
     color: linkColor,
-    fontFamily: 'SourceSansPro-Regular',
-    fontSize: 20,
-    lineHeight: 30,
     textDecorationColor: linkColor,
     textDecorationLine: 'underline',
     flexShrink: 1, // RN Text takes full width in row flexbox; shrink to wrap as appropriate

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

@@ -81,13 +81,13 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
       <Animated.View style={{ transform: [{ rotate }] }}>
         <Icon {...iconProps} />
       </Animated.View>
-      <Spacer />
+      <Spacer size="xs" />
       {text && (
         <Text style={textStyle} accessibilityLabel={a11yLabel}>
           {text}
         </Text>
       )}
-      {text && children ? <Spacer /> : null}
+      {text && children ? <Spacer size="xs" /> : null}
       {children}
     </View>
   )

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

@@ -1,4 +1,5 @@
 import { Pressable, Text, TextStyle, View, ViewStyle } from 'react-native'
+import { 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'
@@ -35,9 +36,11 @@ type SegmentProps = {
 
 const Segment = styled(Pressable)<SegmentProps>`
   border-radius: 8px;
-  padding-vertical: 7px;
+  padding-horizontal: ${spacing.vadsSpace2xs}px;
+  padding-vertical: ${spacing.vadsSpaceXs}px;
   width: ${(props) => props.widthPct};
-  elevation: ${(props) => (props.isSelected ? 4 : 0)};
+  elevation: ${(props) =>
+    props.isSelected ? spacing.vadsSpace2xs : spacing.vadsSpaceNone};
   background-color: ${(props) => props.backgroundColor};
 `
 /** A segmented control is used to switch between related views of information within the same context. */

packages/components/src/components/Snackbar/Snackbar.tsx

@@ -11,6 +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 { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
 
@@ -144,15 +145,6 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
     lineHeight: 22,
   }
 
-  const sizing = {
-    _4: 4,
-    _8: 8,
-    _12: 12,
-    _16: 16,
-    _20: 20,
-    _24: 24,
-  }
-
   const { isError, messageA11y, onActionPressed } = toast.data || {}
 
   const contentColor = theme.vadsColorForegroundInverse
@@ -162,13 +154,13 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
     style: {
       alignItems: 'center',
       backgroundColor: theme.vadsColorSurfaceInverse,
-      borderRadius: sizing._4,
+      borderRadius: 4,
       flexDirection: 'row',
       flexWrap: 'wrap',
-      gap: 5,
       minHeight: 44,
-      padding: sizing._12,
-      marginHorizontal: sizing._20,
+      padding: spacing.vadsSpaceSm,
+      marginHorizontal: spacing.vadsSpaceLg,
+      rowGap: spacing.vadsSpace2xs,
     },
   }
 
@@ -189,16 +181,16 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
   const iconViewStyle: ViewStyle = {
     // Below keeps icon aligned with first row of text, centered, and scalable
     alignSelf: 'flex-start',
-    minHeight: 22 * fontScale,
+    minHeight: helperText.lineHeight! * fontScale,
     alignItems: 'center',
     justifyContent: 'center',
   }
 
   const iconProps: IconProps = {
     name: isError ? 'Warning' : 'CheckCircle',
     fill: contentColor,
-    height: sizing._16,
-    width: sizing._16,
+    height: 16,
+    width: 16,
     preventScaling: true,
   }
 
@@ -217,7 +209,7 @@ export const Snackbar: FC<SnackbarProps> = (toast) => {
       flexDirection: 'row',
       flexWrap: 'wrap',
       marginLeft: 'auto', // Maintains alignment to right side
-      paddingLeft: sizing._16, // Minimum spacing to message text
+      paddingLeft: spacing.vadsSpaceMd, // Minimum spacing to message text
     },
   }