Task/86 - Incorporate Icon Component in Flagship App

VAMobile/src/components/ActivityButton.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react'
 import { Linking, Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
 import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
-import { Box, TextView, VAIcon } from 'components'
+import { Box, TextView } from 'components'
 import { useTheme } from 'utils/hooks'
 import { WaygateToggleType, waygateNativeAlert } from 'utils/waygateConfig'
 
@@ -75,13 +76,11 @@ const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: A
             <Box flex={1}>
               <TextView variant={'ActivityButtonSubtext'}>{subText}</TextView>
             </Box>
-            <VAIcon
+            <Icon
               width={24}
               height={24}
-              name="RightArrowInCircle"
+              name={'ArrowCircleRight'}
               fill={theme.colors.icon.activityButton}
-              fill2={'transparent'}
-              ml={theme.dimensions.listItemDecoratorMarginLeft}
               preventScaling={true}
             />
           </Box>

VAMobile/src/components/BaseListItem.tsx

@@ -2,7 +2,8 @@ import React, { FC, ReactElement, useState } from 'react'
 import { AccessibilityProps, AccessibilityRole, AccessibilityState, Pressable, PressableProps } from 'react-native'
 import { HapticFeedbackTypes } from 'react-native-haptic-feedback'
 
-import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
 import FileRequestNumberIndicator from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestNumberIndicator'
 import { a11yHintProp, a11yValueProp } from 'utils/accessibility'
@@ -11,7 +12,6 @@ import { useTheme } from 'utils/hooks'
 
 import Box, { BackgroundVariant, BoxProps } from './Box'
 import SwitchComponent, { SwitchProps } from './Switch'
-import VAIcon, { VAIconProps } from './VAIcon'
 
 /** Decorator type for the button, defaults to Navigation (right arrow) */
 export enum ButtonDecoratorType {
@@ -26,18 +26,18 @@ export enum ButtonDecoratorType {
   /** Trash can decorator */
   Delete = 'Delete',
   /** Empty radio button decorator */
-  RadioEmpty = 'RadioEmpty',
+  RadioEmpty = 'RadioButtonUnchecked',
   /** Filled radio button decorator */
-  RadioFilled = 'RadioFilled',
+  RadioFilled = 'RadioButtonChecked',
   /** Disabled radio button decorator */
   RadioDisabled = 'RadioDisabled',
   /** Empty check box button decorator */
-  CheckBoxEmpty = 'CheckBoxEmpty',
+  CheckBoxEmpty = 'CheckBoxOutlineBlank',
   /** Filled check box button decorator */
-  CheckBoxFilled = 'CheckBoxFilled',
+  CheckBoxFilled = 'CheckBox',
 }
 
-export type ListItemDecoratorProps = Partial<VAIconProps> | Partial<SwitchProps>
+export type ListItemDecoratorProps = Partial<IconProps> | Partial<SwitchProps>
 
 /**
  * Props for BaseListItem
@@ -98,68 +98,53 @@ export const ButtonDecorator: FC<{
   const radioBtnWidth = 22
   const radioBtnHeight = 22
 
+  const buttonSelectedFill =
+    theme.mode === 'dark' ? colors.vadsColorFormsForegroundActiveOnDark : colors.vadsColorFormsForegroundActiveOnLight
+  const buttonUnselectedFill =
+    theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight
+
   const switchOnPress = onPress ? onPress : () => {}
 
   switch (decorator) {
     case ButtonDecoratorType.Switch:
       return <SwitchComponent onPress={switchOnPress} {...decoratorProps} />
     case ButtonDecoratorType.SelectedItem:
-      return (
-        <VAIcon name={'CheckMark'} height={13} width={16} fill={theme.colors.icon.pickerIcon} {...decoratorProps} />
-      )
+      return <Icon name={'Check'} height={13} width={16} fill={theme.colors.icon.pickerIcon} />
     case ButtonDecoratorType.Delete:
-      return <VAIcon name={'Trash'} height={16} width={14} fill={theme.colors.icon.error} {...decoratorProps} />
+      return <Icon name={'Delete'} height={16} width={14} fill={theme.colors.icon.error} />
     case ButtonDecoratorType.RadioFilled:
       return (
-        <VAIcon
-          name={'RadioFilled'}
-          height={radioBtnHeight}
-          width={radioBtnWidth}
-          fill={theme.colors.icon.checkboxEnabledPrimary}
-          {...decoratorProps}
-        />
+        <Icon name={'RadioButtonChecked'} height={radioBtnHeight} width={radioBtnWidth} fill={buttonSelectedFill} />
       )
     case ButtonDecoratorType.RadioEmpty:
       return (
-        <VAIcon
-          name={'RadioEmpty'}
-          height={radioBtnHeight}
-          width={radioBtnWidth}
-          fill={theme.colors.icon.checkboxDisabledContrast}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
-        />
+        <Icon name={'RadioButtonUnchecked'} height={radioBtnHeight} width={radioBtnWidth} fill={buttonUnselectedFill} />
       )
     case ButtonDecoratorType.RadioDisabled:
       return (
-        <VAIcon
-          name={'RadioEmpty'}
+        <Icon
+          name={'RadioButtonUnchecked'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.radioDisabled}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
         />
       )
     case ButtonDecoratorType.CheckBoxFilled:
       return (
-        <VAIcon
-          name={'CheckBoxFilled'}
+        <Icon
+          name={'CheckBox'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.checkboxEnabledPrimary}
-          {...decoratorProps}
         />
       )
     case ButtonDecoratorType.CheckBoxEmpty:
       return (
-        <VAIcon
-          name={'CheckBoxEmpty'}
+        <Icon
+          name={'CheckBoxOutlineBlank'}
           height={radioBtnHeight}
           width={radioBtnWidth}
           fill={theme.colors.icon.checkboxDisabledContrast}
-          stroke={theme.colors.icon.checkboxDisabled}
-          {...decoratorProps}
         />
       )
 

VAMobile/src/components/ClickForActionLinkDeprecated.tsx

@@ -1,19 +1,23 @@
 import React, { FC } from 'react'
 import { AccessibilityProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { IconMap } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/iconList'
+
 import { useExternalLink, useTheme } from 'utils/hooks'
 import { addToCalendar, checkCalendarPermission, requestCalendarPermission } from 'utils/rnCalendar'
 
 import Box from './Box'
 import TextView, { ColorVariant, TextViewProps } from './TextView'
-import VAIcon, { VA_ICON_MAP } from './VAIcon'
 
 /** Icon type for links, defaults to Chat */
 export enum LinkUrlIconType {
   /** Signifies icon with chat bubbles */
   Chat = 'Chat',
   /** Signifies icon with right pointing arrow */
-  Arrow = 'Arrow',
+  Arrow = 'ArrowCircleRight',
+  /** Signifies icon with external links */
+  External = 'Launch',
 }
 
 export const LinkTypeOptionsConstants: {
@@ -74,6 +78,9 @@ export type LinkButtonProps = AccessibilityProps & {
   /** color bypass */
   colorOverride?: string
 
+  /** icon color bypass */
+  iconColorOverride?: string
+
   /** custom onPress */
   customOnPress?: () => void
 
@@ -100,6 +107,7 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
   a11yLabel,
   fireAnalytic,
   colorOverride,
+  iconColorOverride,
   customOnPress,
   hideIcon = false,
   disablePadding = false,
@@ -152,31 +160,33 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
     launchExternalLink(openUrlText)
   }
 
-  const getUrlIcon = (): keyof typeof VA_ICON_MAP => {
+  const getUrlIcon = (): keyof typeof IconMap => {
     switch (linkUrlIconType) {
       case LinkUrlIconType.Arrow:
-        return 'RightArrowInCircle'
+        return 'ArrowCircleRight'
+      case LinkUrlIconType.External:
+        return 'Launch'
       default:
         return 'Chat'
     }
   }
 
-  const getIconName = (): keyof typeof VA_ICON_MAP => {
+  const getIconName = (): keyof typeof IconMap => {
     switch (linkType) {
       case 'call':
-        return 'CirclePhone'
+        return 'Phone'
       case 'callTTY':
-        return 'PhoneTTY'
+        return 'TTY'
       case 'text':
-        return 'Text'
+        return 'PhoneIphone'
       case 'url':
         return getUrlIcon()
       case 'calendar':
-        return 'Calendar'
+        return 'CalendarToday'
       case 'directions':
         return 'Directions'
       case 'externalLink':
-        return 'CircleExternalLink'
+        return 'Launch'
     }
   }
 
@@ -201,13 +211,9 @@ const ClickForActionLinkDeprecated: FC<LinkButtonProps> = ({
       <Box flexDirection={'row'} alignItems={'center'} py={py} pr={pr}>
         {!hideIcon && (
           <Box pr={3}>
-            <VAIcon
-              name={getIconName()}
-              fill={colorOverride ? (colorOverride as ColorVariant) : 'link'}
-              fill2={colorOverride ? 'transparent' : ''}
-              width={25}
-              height={25}
-            />
+            {linkType ? (
+              <Icon name={getIconName()} fill={iconColorOverride ?? theme.colors.icon.link} width={25} height={25} />
+            ) : undefined}
           </Box>
         )}
         <Box flexShrink={1}>

VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx

@@ -19,6 +19,8 @@ type ClickToCallPhoneNumberDeprecatedProps = {
   ttyBypass?: boolean
   /** color bypass */
   colorOverride?: string
+  /** icon color bypass */
+  iconColorOverride?: string
   /** optional function to fire analytic events when the link is clicked */
   fireAnalytic?: () => void
 }
@@ -33,6 +35,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
   a11yLabel,
   ttyBypass,
   colorOverride,
+  iconColorOverride,
   fireAnalytic,
 }) => {
   const { t } = useTranslation(NAMESPACE.COMMON)
@@ -49,6 +52,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
     numberOrUrlLink: getNumbersFromString(phoneNumber),
     a11yLabel: a11yLabel || getNumberAccessibilityLabelFromString(phoneNumber),
     colorOverride: colorOverride,
+    iconColorOverride: iconColorOverride,
   }
 
   const ttyProps: LinkButtonProps = {
@@ -57,6 +61,7 @@ const ClickToCallPhoneNumberDeprecated: FC<ClickToCallPhoneNumberDeprecatedProps
     numberOrUrlLink: t('contactVA.tty.number'),
     a11yLabel: t('contactVA.tty.number.a11yLabel'),
     colorOverride: colorOverride,
+    iconColorOverride: iconColorOverride,
   }
 
   return (

VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { ButtonDecoratorType, List, ListItemObj, VAIconProps } from 'components'
+import { IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
+import { ButtonDecoratorType, List, ListItemObj } from 'components'
 import { TextLineWithIconProps } from 'components/TextLineWithIcon'
 import { TextLines } from 'components/TextLines'
 import { TextLine } from 'components/types'
@@ -16,7 +18,7 @@ export type PickerListItemObj = {
   /** whether this item is the selected value **/
   isSelected: boolean
   /** icon to show */
-  icon?: VAIconProps
+  icon?: IconProps
 } & Partial<ListItemObj>
 
 /**

VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx

@@ -11,10 +11,9 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
 
 import { Box, BoxProps, TextView, TextViewProps, VAScrollView } from 'components'
-import { VAIconProps } from 'components/VAIcon'
 import { Events } from 'constants/analytics'
 import { a11yHintProp, a11yValueProp } from 'utils/accessibility'
 import { logAnalyticsEvent } from 'utils/analytics'
@@ -40,7 +39,7 @@ export type PickerItem = {
   /** value is the unique value of the item, used to update and keep track of the current label displayed */
   value: string
   /** icon to show */
-  icon?: VAIconProps
+  icon?: IconProps
 }
 
 export type VAModalPickerProps = {

VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx

@@ -37,8 +37,8 @@ context('RadioGroup', () => {
 
   it('initializes correctly', () => {
     expect(screen.getAllByRole('radio').length).toEqual(mockOptions.length)
-    expect(screen.getAllByLabelText('RadioEmpty').length).toEqual(mockOptions.length - 1)
-    expect(screen.getAllByLabelText('RadioFilled').length).toEqual(1)
+    expect(screen.getAllByTestId('RadioButtonUnchecked').length).toEqual(mockOptions.length - 1)
+    expect(screen.getAllByTestId('RadioButtonChecked').length).toEqual(1)
   })
 
   it('calls setSelected on press', () => {

VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx

@@ -58,8 +58,7 @@ context('VASelector', () => {
   describe('when selected is true', () => {
     it('should display the filled checkbox and update accessibility state', () => {
       initializeTestInstance(true)
-      expect(screen.getByTestId('CheckBoxFilled')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxFilled')).toBeTruthy()
+      expect(screen.getByTestId('CheckBox')).toBeTruthy()
       expect(
         screen.getByAccessibilityState({
           checked: true,
@@ -70,8 +69,7 @@ context('VASelector', () => {
 
   describe('when selected is false', () => {
     it('should display the empty checkbox', () => {
-      expect(screen.getByTestId('CheckBoxEmpty')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxEmpty')).toBeTruthy()
+      expect(screen.getByTestId('CheckBoxOutlineBlank')).toBeTruthy()
       expect(
         screen.getByAccessibilityState({
           checked: false,
@@ -93,15 +91,13 @@ context('VASelector', () => {
     it('should display the RadioEmpty', () => {
       initializeTestInstance(false, true, '', SelectorType.Radio)
       expect(screen.getByTestId('RadioEmpty')).toBeTruthy()
-      expect(screen.getByLabelText('RadioEmpty')).toBeTruthy()
     })
   })
 
   describe('when there is an error and the selector type is checkbox', () => {
-    it('should display the CheckBoxError and the error message', () => {
+    it('should display the Error and the error message', () => {
       initializeTestInstance(false, false, 'ERROR MESSAGE')
-      expect(screen.getByTestId('CheckBoxError')).toBeTruthy()
-      expect(screen.getByLabelText('CheckBoxError')).toBeTruthy()
+      expect(screen.getByTestId('Error')).toBeTruthy()
       expect(screen.getByText('ERROR MESSAGE')).toBeTruthy()
     })
   })