From 72644f6b6993f720c1eeb39188ec02575b5f8d48 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Mon, 23 Dec 2024 12:34:16 -0800 Subject: [PATCH 1/9] First batch of components updated to use the new Icon library instead of VAIcon. Had some complications and will need to do further testing to make sure everything is in working order. --- VAMobile/src/components/ActivityButton.tsx | 9 ++-- VAMobile/src/components/BaseListItem.tsx | 49 +++++++------------ .../src/components/InlineTextWithIcons.tsx | 47 +++++++++--------- .../SelectionList/SelectionList.tsx | 24 +++------ .../SelectionList/SelectionListItem.tsx | 24 +++------ VAMobile/src/components/TextLineWithIcon.tsx | 20 ++++---- VAMobile/src/utils/appointments.tsx | 15 +++--- 7 files changed, 81 insertions(+), 107 deletions(-) diff --git a/VAMobile/src/components/ActivityButton.tsx b/VAMobile/src/components/ActivityButton.tsx index f605217144a..3bb9223ab82 100644 --- a/VAMobile/src/components/ActivityButton.tsx +++ b/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 = ({ title, subText, deepLink }: A {subText} - diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx index 1d3d3d5bf61..a378bb421ea 100644 --- a/VAMobile/src/components/BaseListItem.tsx +++ b/VAMobile/src/components/BaseListItem.tsx @@ -2,7 +2,7 @@ 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 FileRequestNumberIndicator from 'screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/FileRequestNumberIndicator' import { a11yHintProp, a11yValueProp } from 'utils/accessibility' @@ -11,7 +11,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 +25,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', + RadioDisabled = 'RadioDisabled', // no equivalent?? /** Empty check box button decorator */ - CheckBoxEmpty = 'CheckBoxEmpty', + CheckBoxEmpty = 'CheckBoxOutlineBlank', /** Filled check box button decorator */ - CheckBoxFilled = 'CheckBoxFilled', + CheckBoxFilled = 'CheckBox', } -export type ListItemDecoratorProps = Partial | Partial +export type ListItemDecoratorProps = Partial | Partial /** * Props for BaseListItem @@ -104,62 +103,52 @@ export const ButtonDecorator: FC<{ case ButtonDecoratorType.Switch: return case ButtonDecoratorType.SelectedItem: - return ( - - ) + return case ButtonDecoratorType.Delete: - return + return case ButtonDecoratorType.RadioFilled: return ( - ) case ButtonDecoratorType.RadioEmpty: return ( - ) case ButtonDecoratorType.RadioDisabled: return ( - ) case ButtonDecoratorType.CheckBoxFilled: return ( - ) case ButtonDecoratorType.CheckBoxEmpty: return ( - ) diff --git a/VAMobile/src/components/InlineTextWithIcons.tsx b/VAMobile/src/components/InlineTextWithIcons.tsx index 1f4f43a97b1..b7be4729e76 100644 --- a/VAMobile/src/components/InlineTextWithIcons.tsx +++ b/VAMobile/src/components/InlineTextWithIcons.tsx @@ -1,10 +1,11 @@ import React, { FC } from 'react' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' + import { useTheme } from 'utils/hooks' import Box from './Box' import TextView from './TextView' -import VAIcon, { VAIconProps } from './VAIcon' import { InlineText } from './types' export type InlineTextWithIconsProps = { @@ -12,10 +13,10 @@ export type InlineTextWithIconsProps = { inlineIcon?: boolean /** Props for icon you want to display in this line of text */ - leftIconProps?: VAIconProps + leftIconProps?: IconProps /** Props for icon you want to display in this line of text */ - rightIconProps?: VAIconProps + rightIconProps?: IconProps } & InlineText /**Common component to show an icon with a line of text*/ @@ -27,27 +28,31 @@ export const InlineTextWithIcons: FC = ({ rightTextProps, }) => { const theme = useTheme() + const { + name: leftName = 'Close', + width: leftWidth = 24, + height: leftHeight = 24, + fill: leftFill, + testID: leftTestID, + } = leftIconProps ?? {} + + const { + name: rightName = 'Close', + width: rightWidth = 24, + height: rightHeight = 24, + fill: rightFill, + testID: rightTestID, + } = rightIconProps ?? {} + return ( {!inlineIcon && leftIconProps && ( - + )} {inlineIcon && leftIconProps ? ( - + ) : ( = ({ )} {rightIconProps && ( - + )} diff --git a/VAMobile/src/components/SelectionList/SelectionList.tsx b/VAMobile/src/components/SelectionList/SelectionList.tsx index b371b749b5f..e2e11151ce0 100644 --- a/VAMobile/src/components/SelectionList/SelectionList.tsx +++ b/VAMobile/src/components/SelectionList/SelectionList.tsx @@ -2,6 +2,7 @@ import React, { FC, useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { Pressable, PressableProps } from 'react-native' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' import { mapObject, values } from 'underscore' import { Events } from 'constants/analytics' @@ -11,7 +12,6 @@ import { useTheme } from 'utils/hooks' import Box, { BoxProps } from '../Box' import TextView from '../TextView' -import VAIcon, { VAIconProps, VA_ICON_MAP } from '../VAIcon' import SelectionListItem, { SelectionListItemObj } from './SelectionListItem' export type SelectionListProps = { @@ -82,29 +82,19 @@ const SelectionList: FC = ({ items, onSelectionChange }) => } const getSelectAllIcon = () => { - let name: keyof typeof VA_ICON_MAP - let fill = 'checkboxEnabledPrimary' - let stroke - if (numSelected === items.length) { - name = 'CheckBoxFilled' - } else if (numSelected > 0) { - name = 'CheckBoxIntermediate' - } else { - name = 'CheckBoxEmpty' - fill = 'checkboxDisabledContrast' - stroke = 'checkboxDisabled' - } + const fill = numSelected > 0 ? theme.colors.icon.checkboxEnabledPrimary : theme.colors.icon.checkboxDisabled + + const name = + numSelected === items.length ? 'CheckBox' : numSelected > 0 ? 'IndeterminateCheckBox' : 'CheckBoxOutlineBlank' - const iconProps: VAIconProps = { + const iconProps: IconProps = { name, width: 20, height: 20, - stroke, fill, - ml: 20, } - return + return } const headerWrapperProps: BoxProps = { diff --git a/VAMobile/src/components/SelectionList/SelectionListItem.tsx b/VAMobile/src/components/SelectionList/SelectionListItem.tsx index 58ae0b5a7c7..8f6e4e1ae5e 100644 --- a/VAMobile/src/components/SelectionList/SelectionListItem.tsx +++ b/VAMobile/src/components/SelectionList/SelectionListItem.tsx @@ -1,10 +1,11 @@ import React, { FC } from 'react' import { Pressable } from 'react-native' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' + import { useTheme } from 'utils/hooks' import Box, { BoxProps } from '../Box' -import VAIcon, { VAIconProps, VA_ICON_MAP } from '../VAIcon' export type SelectionListItemObj = { /** Display content for the list item */ @@ -31,29 +32,20 @@ const SelectionListItem: FC = ({ content, setSelectedFn, } const getIcon = () => { - let name: keyof typeof VA_ICON_MAP - let fill = 'checkboxEnabledPrimary' - let stroke + let fill = theme.colors.icon.checkboxEnabledPrimary - if (isSelected) { - name = 'CheckBoxFilled' - } else { - name = 'CheckBoxEmpty' - fill = 'checkboxDisabledContrast' - stroke = 'checkboxDisabled' + if (!isSelected) { + fill = theme.colors.icon.checkboxDisabled } - const iconProps: VAIconProps = { - name, + const iconProps: IconProps = { + name: isSelected ? 'CheckBox' : 'CheckBoxOutlineBlank', width: 20, height: 20, - stroke, fill, - ml: 20, - pt: 5, } - return + return } return ( diff --git a/VAMobile/src/components/TextLineWithIcon.tsx b/VAMobile/src/components/TextLineWithIcon.tsx index 788630fbaae..842020280f0 100644 --- a/VAMobile/src/components/TextLineWithIcon.tsx +++ b/VAMobile/src/components/TextLineWithIcon.tsx @@ -1,15 +1,16 @@ import React, { FC } from 'react' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' + import { useTheme } from 'utils/hooks' import Box from './Box' import TextView from './TextView' -import VAIcon, { VAIconProps } from './VAIcon' import { TextLine } from './types' export type TextLineWithIconProps = { /** Props for icon you want to display in this line of text */ - iconProps?: VAIconProps & { + iconProps?: IconProps & { /** If the icon is supposed to appear on its own line (ex: read tag) */ isOwnLine?: boolean } @@ -19,6 +20,13 @@ export type TextLineWithIconProps = { export const TextLineWithIcon: FC = ({ iconProps, text, variant, textAlign, color }) => { const themes = useTheme() const iconNotOwnRow = !(iconProps && iconProps.isOwnLine) + const { + name: iconName = 'Close', + width: iconWidth = 24, + height: iconHeight = 24, + fill: iconFill, + testID: iconTestID, + } = iconProps ?? {} return ( @@ -26,13 +34,7 @@ export const TextLineWithIcon: FC = ({ iconProps, text, v ml={iconNotOwnRow ? 0 : themes.dimensions.listItemDecoratorMarginLeft} mr={themes.dimensions.condensedMarginBetween}> {iconProps && ( - + )} {!iconProps && } diff --git a/VAMobile/src/utils/appointments.tsx b/VAMobile/src/utils/appointments.tsx index 41d12a82d5e..8f2a4e048ea 100644 --- a/VAMobile/src/utils/appointments.tsx +++ b/VAMobile/src/utils/appointments.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from 'react' +import { IconProps } from '@department-of-veterans-affairs/mobile-component-library' import { TFunction } from 'i18next' import { DateTime } from 'luxon' import _ from 'underscore' @@ -159,26 +160,28 @@ export const getAppointmentTypeIcon = ( type: AppointmentType, phoneOnly: boolean, theme: VATheme, -): VAIconProps | undefined => { +): IconProps | undefined => { const iconProps = { fill: theme.colors.icon.defaultMenuItem, height: theme.fontSizes.HelperText.fontSize, width: theme.fontSizes.HelperText.fontSize, - } as VAIconProps + } as IconProps switch (type) { case AppointmentTypeConstants.VA_VIDEO_CONNECT_ATLAS: case AppointmentTypeConstants.VA_VIDEO_CONNECT_ONSITE: - return { ...iconProps, name: 'Building' } + return { ...iconProps, name: 'LocationCity', svg: undefined } case AppointmentTypeConstants.VA_VIDEO_CONNECT_HOME: case AppointmentTypeConstants.VA_VIDEO_CONNECT_GFE: - return { ...iconProps, name: 'VideoCamera' } + return { ...iconProps, name: 'Videocam', svg: undefined } case AppointmentTypeConstants.VA: - return phoneOnly ? { ...iconProps, name: 'Phone' } : { ...iconProps, name: 'Building' } + return phoneOnly + ? { ...iconProps, name: 'Phone', svg: undefined } + : { ...iconProps, name: 'LocationCity', svg: undefined } case AppointmentTypeConstants.COMMUNITY_CARE: return undefined default: - return phoneOnly ? { ...iconProps, name: 'Phone' } : undefined + return phoneOnly ? { ...iconProps, name: 'Phone', svg: undefined } : undefined } } From ddb33ee8a441cf76b34722969831f5df069697df Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Fri, 3 Jan 2025 17:35:59 -0800 Subject: [PATCH 2/9] Updated more components to use new Icon component, namely, VASelector, PickerList, FullScreenSubtask, ViewMessageScreen and appointments. In updating I noticed that there is no equivalent for the Unread icon in the new Icon library, in the meantime I'm using placeholders to make sure tests don't break. Also, made sure unit tests got fixed and weren't breaking anymore. --- .../FormFields/Picker/PickerList.tsx | 6 ++-- .../FormFields/Picker/VAModalPicker.tsx | 5 ++- .../FormFields/RadioGroup.test.tsx | 4 +-- .../FormFields/VASelector.test.tsx | 12 +++---- .../FormWrapper/FormFields/VASelector.tsx | 34 +++++++++++-------- .../components/InlineTextWithIcons.test.tsx | 20 +++++++---- VAMobile/src/components/MessageList.test.tsx | 13 +++---- .../Templates/FullScreenSubtask.test.tsx | 2 +- .../Templates/FullScreenSubtask.tsx | 6 ++-- .../src/components/TextLineWithIcon.test.tsx | 12 +++---- .../SecureMessaging/Inbox/Inbox.test.tsx | 2 +- .../ViewMessage/ViewMessageScreen.tsx | 3 +- VAMobile/src/utils/appointments.tsx | 15 ++++---- VAMobile/src/utils/common.ts | 18 +++++----- VAMobile/src/utils/secureMessaging.tsx | 17 +++------- 15 files changed, 86 insertions(+), 83 deletions(-) diff --git a/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx b/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx index 281cb17cac5..3c768857c4c 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx +++ b/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 /** diff --git a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx b/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx index 7600143c4b8..77dd2678cfd 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx +++ b/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 = { diff --git a/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx b/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx index 8743bf4d6d9..ccd3ef83244 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/RadioGroup.test.tsx +++ b/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', () => { diff --git a/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx b/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx index 64e8a3a65f6..89f2a7e3543 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/VASelector.test.tsx +++ b/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() }) }) diff --git a/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx b/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx index b0ad1df6900..7c477a327d3 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx +++ b/VAMobile/src/components/FormWrapper/FormFields/VASelector.tsx @@ -2,12 +2,14 @@ import React, { FC } from 'react' import { useTranslation } from 'react-i18next' import { TouchableWithoutFeedback } from 'react-native' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' + import { VAIconColors, VATextColors } from 'styles/theme' import { a11yHintProp } from 'utils/accessibility' import { getTranslation } from 'utils/formattingUtils' import { useTheme } from 'utils/hooks' -import { Box, BoxProps, TextView, VAIcon, VAIconProps } from '../../index' +import { Box, BoxProps, TextView } from '../../index' import { renderInputError } from './formFieldUtils' export enum SelectorType { @@ -74,14 +76,14 @@ const VASelector: FC = ({ name: string, stroke?: keyof VAIconColors | string, fill?: keyof VAIconColors | keyof VATextColors | string, - ): VAIconProps => { + ): IconProps => { return { name, stroke, width: iconWidth, height: 22, fill, - } as VAIconProps + } as IconProps } const errorBoxProps: BoxProps = { @@ -96,32 +98,34 @@ const VASelector: FC = ({ const getCheckBoxIcon = (): React.ReactNode => { if (disabled && selectorType === SelectorType.Radio) { return ( - ) } if (!!error && selectorType === SelectorType.Checkbox) { return ( - ) } - const filledName = selectorType === SelectorType.Checkbox ? 'CheckBoxFilled' : 'RadioFilled' - const emptyName = selectorType === SelectorType.Checkbox ? 'CheckBoxEmpty' : 'RadioEmpty' + const filledName = selectorType === SelectorType.Checkbox ? 'CheckBox' : 'RadioButtonChecked' + const emptyName = selectorType === SelectorType.Checkbox ? 'CheckBoxOutlineBlank' : 'RadioButtonUnchecked' const name = selected ? filledName : emptyName - const fill = selected ? 'checkboxEnabledPrimary' : 'checkboxDisabledContrast' - const stroke = selected ? undefined : 'checkboxDisabled' + const fill = selected ? theme.colors.icon.checkboxEnabledPrimary : theme.colors.icon.checkboxDisabledContrast + const stroke = selected ? undefined : theme.colors.icon.checkboxDisabled - return + return } const hintProp = a11yHint ? a11yHintProp(a11yHint) : {} diff --git a/VAMobile/src/components/InlineTextWithIcons.test.tsx b/VAMobile/src/components/InlineTextWithIcons.test.tsx index 5aa5fdf1881..cd25cd0e0fb 100644 --- a/VAMobile/src/components/InlineTextWithIcons.test.tsx +++ b/VAMobile/src/components/InlineTextWithIcons.test.tsx @@ -1,12 +1,12 @@ import React from 'react' +import { IconProps } from '@department-of-veterans-affairs/mobile-component-library' import { screen } from '@testing-library/react-native' import { Box, InlineTextWithIconsProps } from 'components' import { context, render } from 'testUtils' import InlineTextWithIcons from './InlineTextWithIcons' -import { VAIconProps } from './VAIcon' context('InlineTextWithIcons', () => { beforeEach(() => { @@ -16,7 +16,14 @@ context('InlineTextWithIcons', () => { variant: 'MobileBodyBold', textAlign: 'left', }, - leftIconProps: { name: 'Unread', width: 16, height: 16, isOwnLine: true, testID: 'Unread' } as VAIconProps, + // Need to put updated Unread icon here + leftIconProps: { + name: 'RemoveCircle', + width: 16, + height: 16, + isOwnLine: true, + testID: 'RemoveCircle', + } as IconProps, } as InlineTextWithIconsProps const testLine2 = { leftTextProps: { @@ -33,14 +40,14 @@ context('InlineTextWithIcons', () => { textAlign: 'left', color: 'primary', }, - leftIconProps: { name: 'PaperClip', fill: 'spinner', width: 16, height: 16, testID: 'PaperClip' } as VAIconProps, + leftIconProps: { name: 'AttachFile', width: 16, height: 16, testID: 'AttachFile' } as IconProps, rightIconProps: { name: 'Chat', width: 16, height: 16, fill: 'spinner', testID: 'Chat', - } as VAIconProps, + } as IconProps, } as InlineTextWithIconsProps render( @@ -59,8 +66,9 @@ context('InlineTextWithIcons', () => { }) it('renders icons', () => { - expect(screen.getByTestId('Unread')).toBeTruthy() - expect(screen.getByTestId('PaperClip')).toBeTruthy() + // TODO: Need to find Unread equivalent using RemoveCircle as placeholder for now + expect(screen.getByTestId('RemoveCircle')).toBeTruthy() + expect(screen.getByTestId('AttachFile')).toBeTruthy() expect(screen.getByTestId('Chat')).toBeTruthy() }) }) diff --git a/VAMobile/src/components/MessageList.test.tsx b/VAMobile/src/components/MessageList.test.tsx index 4617c9fb96c..e4cac3ed07f 100644 --- a/VAMobile/src/components/MessageList.test.tsx +++ b/VAMobile/src/components/MessageList.test.tsx @@ -30,11 +30,11 @@ context('MessageList', () => { inlineTextWithIcons: [ { leftTextProps: { text: 'test2-sender' }, - leftIconProps: { name: 'Unread', width: 16, height: 16, testID: 'Unread' }, + leftIconProps: { name: 'RemoveCircle', width: 16, height: 16, testID: 'RemoveCircle' }, }, { leftTextProps: { text: 'test2-subject-line' }, - leftIconProps: { name: 'PaperClip', width: 16, height: 16, testID: 'PaperClip' }, + leftIconProps: { name: 'AttachFile', width: 16, height: 16, testID: 'AttachFile' }, }, ], isSentFolder: false, @@ -66,7 +66,7 @@ context('MessageList', () => { }) it('should generate correct testId with icon accessibility labels if no testId provided in props', () => { - expect(screen.getByTestId('Unread: test2-sender Has attachment test2-subject-line')).toBeTruthy() + expect(screen.getByTestId('test2-sender Has attachment test2-subject-line')).toBeTruthy() expect( screen.getByTestId('test3-recipient test3-sent-item-with-read-tag Recipient has read your message'), ).toBeTruthy() @@ -76,9 +76,10 @@ context('MessageList', () => { expect(screen.findByText('Read')).toBeTruthy() }) - it('should render the VAIcon components for unread item with attachment', () => { - expect(screen.getByTestId('Unread')).toBeTruthy() - expect(screen.getByTestId('PaperClip')).toBeTruthy() + it('should render the Icon components for unread item with attachment', () => { + // TODO: Need to find Unread equivalent using RemoveCircle as placeholder for now + expect(screen.getByTestId('RemoveCircle')).toBeTruthy() + expect(screen.getByTestId('AttachFile')).toBeTruthy() }) it('should render chevron icons', () => { diff --git a/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx b/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx index 076d4665877..3f5982f809e 100644 --- a/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx +++ b/VAMobile/src/components/Templates/FullScreenSubtask.test.tsx @@ -24,7 +24,7 @@ context('FullScreenSubtask', () => { title={titleText} leftButtonText={leftButtonText} rightButtonText={rightButtonText} - rightVAIconProps={rightIconProps} + rightIconProps={rightIconProps} primaryContentButtonText={primaryContentButtonText} onPrimaryContentButtonPress={onPrimaryButtonPress} secondaryContentButtonText={secondaryContentButtonText} diff --git a/VAMobile/src/components/Templates/FullScreenSubtask.tsx b/VAMobile/src/components/Templates/FullScreenSubtask.tsx index 79c8b5a8319..eb14e53dcd9 100644 --- a/VAMobile/src/components/Templates/FullScreenSubtask.tsx +++ b/VAMobile/src/components/Templates/FullScreenSubtask.tsx @@ -45,7 +45,7 @@ export type FullScreenSubtaskProps = { /** Optional TestID for right button */ rightButtonTestID?: string /** icon for title bar right button(must have right button text to display) */ - rightVAIconProps?: IconProps + rightIconProps?: IconProps // Update to rightIconProps?? /** ref for the VAScrollView component that contains the content */ scrollViewRef?: Ref /** shows the menu icon with the specified action types (won't be shown if right button text is set) */ @@ -80,7 +80,7 @@ export const FullScreenSubtask: FC = ({ onRightButtonPress, rightButtonA11yLabel, rightButtonTestID, - rightVAIconProps, + rightIconProps, scrollViewRef, menuViewActions, primaryContentButtonText, @@ -169,7 +169,7 @@ export const FullScreenSubtask: FC = ({ a11yLabel: rightButtonA11yLabel, testID: rightButtonTestID, onPress: onRightTitleButtonPress, - icon: rightVAIconProps, + icon: rightIconProps, } : undefined, menuViewActions, diff --git a/VAMobile/src/components/TextLineWithIcon.test.tsx b/VAMobile/src/components/TextLineWithIcon.test.tsx index c7f379ff44f..e17dc4d1436 100644 --- a/VAMobile/src/components/TextLineWithIcon.test.tsx +++ b/VAMobile/src/components/TextLineWithIcon.test.tsx @@ -1,22 +1,22 @@ import React from 'react' +import { IconProps } from '@department-of-veterans-affairs/mobile-component-library' import { screen } from '@testing-library/react-native' import { Box } from 'components' import { context, render } from 'testUtils' import TextLineWithIcon from './TextLineWithIcon' -import { VAIconProps } from './VAIcon' context('TextLineWithIcon', () => { beforeEach(() => { const testLine1 = { text: 'line1', - iconProps: { name: 'Trash', width: 16, height: 16, testID: 'Trash' } as VAIconProps, + iconProps: { name: 'Delete', width: 16, height: 16, testID: 'Delete' } as IconProps, } const testLine2 = { text: 'another line2', - iconProps: { name: 'Unread', width: 16, height: 16, testID: 'Unread', isOwnLine: true } as VAIconProps, + iconProps: { name: 'Close', width: 16, height: 16, testID: 'Close', isOwnLine: true } as IconProps, } const testLine3 = { text: 'line3 no iconProps' } @@ -29,9 +29,9 @@ context('TextLineWithIcon', () => { ) }) - it('renders correct VAIcons', () => { - expect(screen.getByTestId('Trash')).toBeTruthy() - expect(screen.getByTestId('Unread')).toBeTruthy() + it('renders correct Icons', () => { + expect(screen.getByTestId('Delete')).toBeTruthy() + expect(screen.getByTestId('Close')).toBeTruthy() }) it('should render text correctly and not render text for component where icon specified to be in own line', () => { diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx index 51f8c77fe84..cd9422f2ab0 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx @@ -116,7 +116,7 @@ context('Inbox', () => { describe('when a message is clicked', () => { it('should call useRouteNavigation', async () => { await waitFor(() => - fireEvent.press(screen.getByTestId('Unread: Mock Sender Invalid DateTime General: Default subject line')), + fireEvent.press(screen.getByTestId('Mock Sender Invalid DateTime General: Default subject line')), ) await waitFor(() => expect(mockNavigationSpy).toHaveBeenCalledWith('ViewMessage', { diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx index 48b252029ae..f5bb760b1ff 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx @@ -37,7 +37,6 @@ import { LoadingComponent, PickerItem, TextView, - VAIconProps, VAModalPicker, } from 'components' import { SnackbarMessages } from 'components/SnackBar' @@ -241,7 +240,7 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { height: theme.fontSizes.MobileBody.fontSize, width: theme.fontSizes.MobileBody.fontSize, name: 'Folder', - } as VAIconProps + } as IconProps if (label === FolderNameTypeConstants.inbox) { icon.fill = 'defaultMenuItem' diff --git a/VAMobile/src/utils/appointments.tsx b/VAMobile/src/utils/appointments.tsx index 8f2a4e048ea..31f53a9576a 100644 --- a/VAMobile/src/utils/appointments.tsx +++ b/VAMobile/src/utils/appointments.tsx @@ -19,7 +19,7 @@ import { AppointmentsList, AppointmentsMetaPagination, } from 'api/types' -import { Box, DefaultList, DefaultListItemObj, TextLineWithIconProps, VAIconProps } from 'components' +import { Box, DefaultList, DefaultListItemObj, TextLineWithIconProps } from 'components' import { VATheme, VATypographyThemeVariants } from 'styles/theme' import { LabelTagTypeConstants } from '../components/LabelTag' @@ -154,7 +154,7 @@ export const pendingType = (type: AppointmentType, t: TFunction, phoneOnly: bool * @param phoneOnly - boolean tells if the appointment is a phone call * @param theme - type VATheme, the theme object to set some properties * - * @returns VAIconProps or undefined + * @returns IconProps or undefined */ export const getAppointmentTypeIcon = ( type: AppointmentType, @@ -166,22 +166,21 @@ export const getAppointmentTypeIcon = ( height: theme.fontSizes.HelperText.fontSize, width: theme.fontSizes.HelperText.fontSize, } as IconProps - switch (type) { case AppointmentTypeConstants.VA_VIDEO_CONNECT_ATLAS: case AppointmentTypeConstants.VA_VIDEO_CONNECT_ONSITE: - return { ...iconProps, name: 'LocationCity', svg: undefined } + return { ...iconProps, name: 'LocationCity' } as IconProps case AppointmentTypeConstants.VA_VIDEO_CONNECT_HOME: case AppointmentTypeConstants.VA_VIDEO_CONNECT_GFE: - return { ...iconProps, name: 'Videocam', svg: undefined } + return { ...iconProps, name: 'Videocam' } as IconProps case AppointmentTypeConstants.VA: return phoneOnly - ? { ...iconProps, name: 'Phone', svg: undefined } - : { ...iconProps, name: 'LocationCity', svg: undefined } + ? ({ ...iconProps, name: 'Phone' } as IconProps) + : ({ ...iconProps, name: 'LocationCity' } as IconProps) case AppointmentTypeConstants.COMMUNITY_CARE: return undefined default: - return phoneOnly ? { ...iconProps, name: 'Phone', svg: undefined } : undefined + return phoneOnly ? ({ ...iconProps, name: 'Phone' } as IconProps) : undefined } } diff --git a/VAMobile/src/utils/common.ts b/VAMobile/src/utils/common.ts index f8f3f59edf9..26a51c94569 100644 --- a/VAMobile/src/utils/common.ts +++ b/VAMobile/src/utils/common.ts @@ -66,10 +66,11 @@ export const generateTestIDForInlineTextIconList = ( const listOfTextID: Array = [] listOfText.forEach((listOfTextItem: InlineTextWithIconsProps) => { - if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'Unread') { - listOfTextID.push(t('secureMessaging.unread.a11y')) - } - if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'PaperClip') { + // TODO: Temporarily commenting out until Unread icon is added + // if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'Unread') { + // listOfTextID.push(t('secureMessaging.unread.a11y')) + // } + if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'AttachFile') { listOfTextID.push(t('secureMessaging.attachments.hasAttachment')) } listOfTextID.push(listOfTextItem.leftTextProps.text) @@ -89,10 +90,11 @@ export const generateTestIDForTextIconList = (listOfText: Array = [] listOfText.forEach((listOfTextItem: TextLineWithIconProps) => { - if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'Unread') { - listOfTextID.push(t('secureMessaging.unread.a11y')) - } - if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'PaperClip') { + // TODO: Temporarily commenting out until Unread icon is added + // if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'Unread') { + // listOfTextID.push(t('secureMessaging.unread.a11y')) + // } + if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'AttachFile') { listOfTextID.push(t('secureMessaging.attachments.hasAttachment')) } listOfTextID.push(listOfTextItem.text) diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx index fb8248e22b2..f0ce3f26410 100644 --- a/VAMobile/src/utils/secureMessaging.tsx +++ b/VAMobile/src/utils/secureMessaging.tsx @@ -4,20 +4,13 @@ import DocumentPicker from 'react-native-document-picker' import { Asset, launchCamera, launchImageLibrary } from 'react-native-image-picker' import { ImagePickerResponse } from 'react-native-image-picker/src/types' +import { IconProps } from '@department-of-veterans-affairs/mobile-component-library' import { ActionSheetOptions } from '@expo/react-native-action-sheet' import { TFunction } from 'i18next' import _ from 'underscore' import { CategoryTypeFields, CategoryTypes, SecureMessagingFolderList, SecureMessagingMessageList } from 'api/types' -import { - Box, - InlineTextWithIconsProps, - LinkWithAnalytics, - MessageListItemObj, - PickerItem, - TextView, - VAIconProps, -} from 'components' +import { Box, InlineTextWithIconsProps, LinkWithAnalytics, MessageListItemObj, PickerItem, TextView } from 'components' import { Events } from 'constants/analytics' import { EMAIL_REGEX_EXP, MAIL_TO_REGEX_EXP, PHONE_REGEX_EXP, URL2_REGEX_EXP, URL_REGEX_EXP } from 'constants/common' import { @@ -56,14 +49,14 @@ export const getMessagesListItems = ( const isSentFolder = folderName === FolderNameTypeConstants.sent const isDraftsFolder = folderName === FolderNameTypeConstants.drafts const isOutbound = isSentFolder || isDraftsFolder - + // TODO: Need to find Unread icon using CropSquare as placeholder const unreadIconProps = readReceipt !== READ && !isOutbound - ? ({ name: 'Unread', width: 16, height: 16, fill: theme.colors.icon.unreadMessage } as VAIconProps) + ? ({ name: 'CropSquare', width: 16, height: 16, fill: theme.colors.icon.active } as IconProps) : undefined const paperClipProps = hasAttachments || attachment - ? ({ name: 'PaperClip', fill: 'spinner', width: 16, height: 16 } as VAIconProps) + ? ({ name: 'AttachFile', width: 16, height: 16, fill: theme.colors.background.bullet } as IconProps) : undefined const textLines: Array = [ From c602fc780162fdf7d272fcb86bce54e25a69e05a Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Wed, 8 Jan 2025 16:47:29 -0800 Subject: [PATCH 3/9] Updated clickForActionLink and LinkWithanalytics components to use new Icon props as well as related components called by those components. Was able to get local svg to load for the Unread icon. Updated more icons. Still have some clean up and some tests to fix, however. --- .../ClickForActionLinkDeprecated.tsx | 42 ++++++++------ .../src/components/InlineTextWithIcons.tsx | 55 ++++++++++++------- VAMobile/src/components/LinkWithAnalytics.tsx | 4 +- VAMobile/src/components/TextLineWithIcon.tsx | 27 +++++---- .../AppointmentMedicationWording.tsx | 2 +- .../ViewMessage/ViewMessageScreen.tsx | 4 +- VAMobile/src/utils/secureMessaging.tsx | 6 +- 7 files changed, 86 insertions(+), 54 deletions(-) diff --git a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx index 010e674bad9..0695735de09 100644 --- a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx +++ b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx @@ -1,19 +1,24 @@ import React, { FC } from 'react' import { AccessibilityProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native' +import { Icon } from '@department-of-veterans-affairs/mobile-component-library' +// useTheme +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: { @@ -152,31 +157,33 @@ const ClickForActionLinkDeprecated: FC = ({ 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 +208,14 @@ const ClickForActionLinkDeprecated: FC = ({ {!hideIcon && ( - + {linkType ? ( + + ) : undefined} )} diff --git a/VAMobile/src/components/InlineTextWithIcons.tsx b/VAMobile/src/components/InlineTextWithIcons.tsx index b7be4729e76..629ea1a6701 100644 --- a/VAMobile/src/components/InlineTextWithIcons.tsx +++ b/VAMobile/src/components/InlineTextWithIcons.tsx @@ -28,31 +28,42 @@ export const InlineTextWithIcons: FC = ({ rightTextProps, }) => { const theme = useTheme() - const { - name: leftName = 'Close', - width: leftWidth = 24, - height: leftHeight = 24, - fill: leftFill, - testID: leftTestID, - } = leftIconProps ?? {} - - const { - name: rightName = 'Close', - width: rightWidth = 24, - height: rightHeight = 24, - fill: rightFill, - testID: rightTestID, - } = rightIconProps ?? {} return ( {!inlineIcon && leftIconProps && ( - - + + {leftIconProps?.svg ? ( + + ) : leftIconProps?.name ? ( + + ) : null} )} {inlineIcon && leftIconProps ? ( - + leftIconProps.svg ? ( + + ) : leftIconProps.name ? ( + + ) : null ) : ( = ({ )} {rightIconProps && ( - + )} diff --git a/VAMobile/src/components/LinkWithAnalytics.tsx b/VAMobile/src/components/LinkWithAnalytics.tsx index 3a9f4e949c8..13849ff86c9 100644 --- a/VAMobile/src/components/LinkWithAnalytics.tsx +++ b/VAMobile/src/components/LinkWithAnalytics.tsx @@ -70,6 +70,8 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, . return ERROR: Type "attachment" not supported with useOldLinkComponent enabled } else if (props.type === 'call TTY') { linkType = 'callTTY' + } else if (props.type === 'custom') { + linkType = 'externalLink' } else { linkType = props.type } @@ -85,7 +87,7 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, . displayedText={props.text} linkType={LinkTypeOptionsConstants[linkType as keyof typeof LinkTypeOptionsConstants]} numberOrUrlLink={props.url || props.phoneNumber || props.TTYnumber || props.textNumber || directionsURL} - linkUrlIconType={LinkUrlIconType.Arrow} + linkUrlIconType={LinkUrlIconType.External} a11yLabel={props.a11yLabel || props.text} fireAnalytic={() => { props.analytics?.onPress?.() diff --git a/VAMobile/src/components/TextLineWithIcon.tsx b/VAMobile/src/components/TextLineWithIcon.tsx index 842020280f0..c1299ba9ee1 100644 --- a/VAMobile/src/components/TextLineWithIcon.tsx +++ b/VAMobile/src/components/TextLineWithIcon.tsx @@ -20,22 +20,29 @@ export type TextLineWithIconProps = { export const TextLineWithIcon: FC = ({ iconProps, text, variant, textAlign, color }) => { const themes = useTheme() const iconNotOwnRow = !(iconProps && iconProps.isOwnLine) - const { - name: iconName = 'Close', - width: iconWidth = 24, - height: iconHeight = 24, - fill: iconFill, - testID: iconTestID, - } = iconProps ?? {} return ( - {iconProps && ( - - )} + {iconProps?.svg ? ( + + ) : iconProps?.name ? ( + + ) : null} {!iconProps && } {iconNotOwnRow && ( diff --git a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx index 05ce83d1475..037d2106ae9 100644 --- a/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx +++ b/VAMobile/src/screens/HealthScreen/Appointments/AppointmentTypeComponents/SharedComponents/AppointmentMedicationWording.tsx @@ -35,7 +35,7 @@ const getWebViewLink = ( return ( { navigateTo('Webview', { url, diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx index f5bb760b1ff..01607306e84 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/ViewMessageScreen.tsx @@ -236,14 +236,14 @@ function ViewMessageScreen({ route, navigation }: ViewMessageScreenProps) { const label = folder.attributes.name const icon = { - fill: 'defaultMenuItem', + fill: 'base', height: theme.fontSizes.MobileBody.fontSize, width: theme.fontSizes.MobileBody.fontSize, name: 'Folder', } as IconProps if (label === FolderNameTypeConstants.inbox) { - icon.fill = 'defaultMenuItem' + icon.fill = 'base' icon.name = 'Inbox' } diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx index f0ce3f26410..8364298c42d 100644 --- a/VAMobile/src/utils/secureMessaging.tsx +++ b/VAMobile/src/utils/secureMessaging.tsx @@ -30,6 +30,7 @@ import { stringToTitleCase, } from 'utils/formattingUtils' +import Unread from '../components/VAIcon/svgs/Unread.svg' import { logAnalyticsEvent, logNonFatalErrorToFirebase } from './analytics' import { generateTestIDForInlineTextIconList, isErrorObject } from './common' import { imageDocumentResponseType, useDestructiveActionSheetProps } from './hooks' @@ -49,11 +50,8 @@ export const getMessagesListItems = ( const isSentFolder = folderName === FolderNameTypeConstants.sent const isDraftsFolder = folderName === FolderNameTypeConstants.drafts const isOutbound = isSentFolder || isDraftsFolder - // TODO: Need to find Unread icon using CropSquare as placeholder const unreadIconProps = - readReceipt !== READ && !isOutbound - ? ({ name: 'CropSquare', width: 16, height: 16, fill: theme.colors.icon.active } as IconProps) - : undefined + readReceipt !== READ && !isOutbound ? ({ svg: Unread, height: 16, width: 16 } as IconProps) : undefined const paperClipProps = hasAttachments || attachment ? ({ name: 'AttachFile', width: 16, height: 16, fill: theme.colors.background.bullet } as IconProps) From 90e9dd29ea222778e048e40e3ddd4528b852f742 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Thu, 9 Jan 2025 10:13:15 -0800 Subject: [PATCH 4/9] Fixed unit tests surrounding the Unread icon. --- VAMobile/src/components/MessageList.test.tsx | 8 ++++---- .../SecureMessaging/Inbox/Inbox.test.tsx | 2 +- VAMobile/src/utils/common.ts | 15 +++++++-------- VAMobile/src/utils/secureMessaging.tsx | 12 ++++++++++-- 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/VAMobile/src/components/MessageList.test.tsx b/VAMobile/src/components/MessageList.test.tsx index e4cac3ed07f..3cc702f9983 100644 --- a/VAMobile/src/components/MessageList.test.tsx +++ b/VAMobile/src/components/MessageList.test.tsx @@ -6,6 +6,7 @@ import { InlineTextWithIconsProps, MessageListItemObj, TextLine } from 'componen import { context, render } from 'testUtils' import MessageList from './MessageList' +import Unread from './VAIcon/svgs/Unread.svg' context('MessageList', () => { const onPressSpy = jest.fn(() => {}) @@ -30,7 +31,7 @@ context('MessageList', () => { inlineTextWithIcons: [ { leftTextProps: { text: 'test2-sender' }, - leftIconProps: { name: 'RemoveCircle', width: 16, height: 16, testID: 'RemoveCircle' }, + leftIconProps: { svg: Unread, width: 16, height: 16, testID: 'Unread' }, }, { leftTextProps: { text: 'test2-subject-line' }, @@ -66,7 +67,7 @@ context('MessageList', () => { }) it('should generate correct testId with icon accessibility labels if no testId provided in props', () => { - expect(screen.getByTestId('test2-sender Has attachment test2-subject-line')).toBeTruthy() + expect(screen.getByTestId('Unread: test2-sender Has attachment test2-subject-line')).toBeTruthy() expect( screen.getByTestId('test3-recipient test3-sent-item-with-read-tag Recipient has read your message'), ).toBeTruthy() @@ -77,8 +78,7 @@ context('MessageList', () => { }) it('should render the Icon components for unread item with attachment', () => { - // TODO: Need to find Unread equivalent using RemoveCircle as placeholder for now - expect(screen.getByTestId('RemoveCircle')).toBeTruthy() + expect(screen.getByTestId('Unread')).toBeTruthy() expect(screen.getByTestId('AttachFile')).toBeTruthy() }) diff --git a/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx b/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx index cd9422f2ab0..51f8c77fe84 100644 --- a/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx +++ b/VAMobile/src/screens/HealthScreen/SecureMessaging/Inbox/Inbox.test.tsx @@ -116,7 +116,7 @@ context('Inbox', () => { describe('when a message is clicked', () => { it('should call useRouteNavigation', async () => { await waitFor(() => - fireEvent.press(screen.getByTestId('Mock Sender Invalid DateTime General: Default subject line')), + fireEvent.press(screen.getByTestId('Unread: Mock Sender Invalid DateTime General: Default subject line')), ) await waitFor(() => expect(mockNavigationSpy).toHaveBeenCalledWith('ViewMessage', { diff --git a/VAMobile/src/utils/common.ts b/VAMobile/src/utils/common.ts index 26a51c94569..35f07678dde 100644 --- a/VAMobile/src/utils/common.ts +++ b/VAMobile/src/utils/common.ts @@ -66,10 +66,10 @@ export const generateTestIDForInlineTextIconList = ( const listOfTextID: Array = [] listOfText.forEach((listOfTextItem: InlineTextWithIconsProps) => { - // TODO: Temporarily commenting out until Unread icon is added - // if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'Unread') { - // listOfTextID.push(t('secureMessaging.unread.a11y')) - // } + // NOTE: The Unread icon is a local svg file + if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.svg) { + listOfTextID.push(t('secureMessaging.unread.a11y')) + } if (listOfTextItem.leftIconProps && listOfTextItem.leftIconProps.name === 'AttachFile') { listOfTextID.push(t('secureMessaging.attachments.hasAttachment')) } @@ -90,10 +90,9 @@ export const generateTestIDForTextIconList = (listOfText: Array = [] listOfText.forEach((listOfTextItem: TextLineWithIconProps) => { - // TODO: Temporarily commenting out until Unread icon is added - // if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'Unread') { - // listOfTextID.push(t('secureMessaging.unread.a11y')) - // } + if (listOfTextItem.iconProps && listOfTextItem.iconProps.svg) { + listOfTextID.push(t('secureMessaging.unread.a11y')) + } if (listOfTextItem.iconProps && listOfTextItem.iconProps.name === 'AttachFile') { listOfTextID.push(t('secureMessaging.attachments.hasAttachment')) } diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx index 8364298c42d..f860bde5a94 100644 --- a/VAMobile/src/utils/secureMessaging.tsx +++ b/VAMobile/src/utils/secureMessaging.tsx @@ -51,10 +51,18 @@ export const getMessagesListItems = ( const isDraftsFolder = folderName === FolderNameTypeConstants.drafts const isOutbound = isSentFolder || isDraftsFolder const unreadIconProps = - readReceipt !== READ && !isOutbound ? ({ svg: Unread, height: 16, width: 16 } as IconProps) : undefined + readReceipt !== READ && !isOutbound + ? ({ svg: Unread, height: 16, width: 16, testID: 'Unread' } as IconProps) + : undefined const paperClipProps = hasAttachments || attachment - ? ({ name: 'AttachFile', width: 16, height: 16, fill: theme.colors.background.bullet } as IconProps) + ? ({ + name: 'AttachFile', + width: 16, + height: 16, + fill: theme.colors.background.bullet, + testID: 'AttachFile', + } as IconProps) : undefined const textLines: Array = [ From 9477db00ccea4c1d99835d6111aba96c713d7857 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Thu, 9 Jan 2025 10:34:11 -0800 Subject: [PATCH 5/9] Updated even more unit tests that originally contained the Unread icon. --- VAMobile/src/components/InlineTextWithIcons.test.tsx | 9 ++++----- VAMobile/src/components/Templates/FullScreenSubtask.tsx | 2 +- VAMobile/src/components/TextLineWithIcon.test.tsx | 5 +++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/VAMobile/src/components/InlineTextWithIcons.test.tsx b/VAMobile/src/components/InlineTextWithIcons.test.tsx index cd25cd0e0fb..2e246c8cc6c 100644 --- a/VAMobile/src/components/InlineTextWithIcons.test.tsx +++ b/VAMobile/src/components/InlineTextWithIcons.test.tsx @@ -7,6 +7,7 @@ import { Box, InlineTextWithIconsProps } from 'components' import { context, render } from 'testUtils' import InlineTextWithIcons from './InlineTextWithIcons' +import Unread from './VAIcon/svgs/Unread.svg' context('InlineTextWithIcons', () => { beforeEach(() => { @@ -16,13 +17,12 @@ context('InlineTextWithIcons', () => { variant: 'MobileBodyBold', textAlign: 'left', }, - // Need to put updated Unread icon here leftIconProps: { - name: 'RemoveCircle', + svg: Unread, width: 16, height: 16, isOwnLine: true, - testID: 'RemoveCircle', + testID: 'Unread', } as IconProps, } as InlineTextWithIconsProps const testLine2 = { @@ -66,8 +66,7 @@ context('InlineTextWithIcons', () => { }) it('renders icons', () => { - // TODO: Need to find Unread equivalent using RemoveCircle as placeholder for now - expect(screen.getByTestId('RemoveCircle')).toBeTruthy() + expect(screen.getByTestId('Unread')).toBeTruthy() expect(screen.getByTestId('AttachFile')).toBeTruthy() expect(screen.getByTestId('Chat')).toBeTruthy() }) diff --git a/VAMobile/src/components/Templates/FullScreenSubtask.tsx b/VAMobile/src/components/Templates/FullScreenSubtask.tsx index eb14e53dcd9..d751d38f721 100644 --- a/VAMobile/src/components/Templates/FullScreenSubtask.tsx +++ b/VAMobile/src/components/Templates/FullScreenSubtask.tsx @@ -45,7 +45,7 @@ export type FullScreenSubtaskProps = { /** Optional TestID for right button */ rightButtonTestID?: string /** icon for title bar right button(must have right button text to display) */ - rightIconProps?: IconProps // Update to rightIconProps?? + rightIconProps?: IconProps /** ref for the VAScrollView component that contains the content */ scrollViewRef?: Ref /** shows the menu icon with the specified action types (won't be shown if right button text is set) */ diff --git a/VAMobile/src/components/TextLineWithIcon.test.tsx b/VAMobile/src/components/TextLineWithIcon.test.tsx index e17dc4d1436..d1961ec56d2 100644 --- a/VAMobile/src/components/TextLineWithIcon.test.tsx +++ b/VAMobile/src/components/TextLineWithIcon.test.tsx @@ -7,6 +7,7 @@ import { Box } from 'components' import { context, render } from 'testUtils' import TextLineWithIcon from './TextLineWithIcon' +import Unread from './VAIcon/svgs/Unread.svg' context('TextLineWithIcon', () => { beforeEach(() => { @@ -16,7 +17,7 @@ context('TextLineWithIcon', () => { } const testLine2 = { text: 'another line2', - iconProps: { name: 'Close', width: 16, height: 16, testID: 'Close', isOwnLine: true } as IconProps, + iconProps: { svg: Unread, width: 16, height: 16, testID: 'Unread', isOwnLine: true } as IconProps, } const testLine3 = { text: 'line3 no iconProps' } @@ -31,7 +32,7 @@ context('TextLineWithIcon', () => { it('renders correct Icons', () => { expect(screen.getByTestId('Delete')).toBeTruthy() - expect(screen.getByTestId('Close')).toBeTruthy() + expect(screen.getByTestId('Unread')).toBeTruthy() }) it('should render text correctly and not render text for component where icon specified to be in own line', () => { From 9be6b4356acc1fb9e6c57d6c51fc7bfce2652526 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Thu, 9 Jan 2025 15:14:42 -0800 Subject: [PATCH 6/9] Updated props and color logic for components like VASelector, VeteranStatusScreen and ClickForActionLink. I noticed some of the original color logic was causing some icons to not show on screen because the new Icon doesnt recognize the old ColorVariant colors that well, updating to accept a hex code or one of the vads colors fixed the issue but this required some small updates to props and components. --- VAMobile/src/components/BaseListItem.tsx | 20 ++++++++----------- .../ClickForActionLinkDeprecated.tsx | 11 +++++----- .../ClickToCallPhoneNumberDeprecated.tsx | 5 +++++ .../FormWrapper/FormFields/VASelector.tsx | 8 +++++++- VAMobile/src/components/TextView.tsx | 4 ++-- .../VeteranStatusScreen.tsx | 3 +++ 6 files changed, 30 insertions(+), 21 deletions(-) diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx index a378bb421ea..fd7c7f24001 100644 --- a/VAMobile/src/components/BaseListItem.tsx +++ b/VAMobile/src/components/BaseListItem.tsx @@ -3,6 +3,7 @@ import { AccessibilityProps, AccessibilityRole, AccessibilityState, Pressable, P import { HapticFeedbackTypes } from 'react-native-haptic-feedback' 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' @@ -97,6 +98,11 @@ 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) { @@ -108,21 +114,11 @@ export const ButtonDecorator: FC<{ return case ButtonDecoratorType.RadioFilled: return ( - + ) case ButtonDecoratorType.RadioEmpty: return ( - + ) case ButtonDecoratorType.RadioDisabled: return ( diff --git a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx index 0695735de09..b4416d9f21e 100644 --- a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx +++ b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx @@ -79,6 +79,9 @@ export type LinkButtonProps = AccessibilityProps & { /** color bypass */ colorOverride?: string + /** icon color bypass */ + iconColorOverride?: string + /** custom onPress */ customOnPress?: () => void @@ -105,6 +108,7 @@ const ClickForActionLinkDeprecated: FC = ({ a11yLabel, fireAnalytic, colorOverride, + iconColorOverride, customOnPress, hideIcon = false, disablePadding = false, @@ -209,12 +213,7 @@ const ClickForActionLinkDeprecated: FC = ({ {!hideIcon && ( {linkType ? ( - + ) : undefined} )} diff --git a/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx b/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx index b62c1429945..167483f342b 100644 --- a/VAMobile/src/components/ClickToCallPhoneNumberDeprecated.tsx +++ b/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 { const { t } = useTranslation(NAMESPACE.COMMON) @@ -49,6 +52,7 @@ const ClickToCallPhoneNumberDeprecated: FC = ({ } const getCheckBoxIcon = (): React.ReactNode => { + const buttonSelectedFill = + theme.mode === 'dark' ? colors.vadsColorFormsForegroundActiveOnDark : colors.vadsColorFormsForegroundActiveOnLight + const buttonUnselectedFill = + theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight + if (disabled && selectorType === SelectorType.Radio) { return ( = ({ const emptyName = selectorType === SelectorType.Checkbox ? 'CheckBoxOutlineBlank' : 'RadioButtonUnchecked' const name = selected ? filledName : emptyName - const fill = selected ? theme.colors.icon.checkboxEnabledPrimary : theme.colors.icon.checkboxDisabledContrast + const fill = selected ? buttonSelectedFill : buttonUnselectedFill const stroke = selected ? undefined : theme.colors.icon.checkboxDisabled return diff --git a/VAMobile/src/components/TextView.tsx b/VAMobile/src/components/TextView.tsx index 9d73041ab06..1c915960e5b 100644 --- a/VAMobile/src/components/TextView.tsx +++ b/VAMobile/src/components/TextView.tsx @@ -22,7 +22,7 @@ export type ColorVariant = keyof VATextColors export type TextViewProps = AccessibilityProps & BoxProps & { /** Defaults to primary text */ - color?: ColorVariant + color?: string /** Defaults to regular */ variant?: FontVariant @@ -34,7 +34,7 @@ export type TextViewProps = AccessibilityProps & textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through' /** text decoration color */ - textDecorationColor?: ColorVariant + textDecorationColor?: string /** onPress callback */ onPress?: () => void diff --git a/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx b/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx index 496e2606237..f566663e771 100644 --- a/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx +++ b/VAMobile/src/screens/HomeScreen/VeteranStatusScreen/VeteranStatusScreen.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next' import { StackScreenProps } from '@react-navigation/stack' +import { colors } from '@department-of-veterans-affairs/mobile-tokens' import { map } from 'underscore' import { useAuthorizedServices } from 'api/authorizedServices/getAuthorizedServices' @@ -173,6 +174,7 @@ function VeteranStatusScreen({ navigation }: VeteranStatusScreenProps) { phone={t('8008271000')} displayedText={displayedTextPhoneNumber(t('8008271000'))} colorOverride={'veteranStatus'} + iconColorOverride={colors.vadsColorWhite} /> {t('veteranStatus.fixAnError.3')} @@ -181,6 +183,7 @@ function VeteranStatusScreen({ navigation }: VeteranStatusScreenProps) { phone={t('8005389552')} displayedText={displayedTextPhoneNumber(t('8005389552'))} colorOverride={'veteranStatus'} + iconColorOverride={colors.vadsColorWhite} ttyBypass={true} /> From 0423f0f64fc81b9a18d203cf20476ef35e183969 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Thu, 9 Jan 2025 16:10:41 -0800 Subject: [PATCH 7/9] Updated Snackbar to use new Icon component and changed styling slightly to keep things neat. Removed unused comments around app. --- VAMobile/src/components/BaseListItem.tsx | 2 +- .../src/components/ClickForActionLinkDeprecated.tsx | 1 - VAMobile/src/components/SnackBar.tsx | 12 +++++------- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx index fd7c7f24001..8be0143b75d 100644 --- a/VAMobile/src/components/BaseListItem.tsx +++ b/VAMobile/src/components/BaseListItem.tsx @@ -30,7 +30,7 @@ export enum ButtonDecoratorType { /** Filled radio button decorator */ RadioFilled = 'RadioButtonChecked', /** Disabled radio button decorator */ - RadioDisabled = 'RadioDisabled', // no equivalent?? + RadioDisabled = 'RadioDisabled', /** Empty check box button decorator */ CheckBoxEmpty = 'CheckBoxOutlineBlank', /** Filled check box button decorator */ diff --git a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx index b4416d9f21e..d00200cc072 100644 --- a/VAMobile/src/components/ClickForActionLinkDeprecated.tsx +++ b/VAMobile/src/components/ClickForActionLinkDeprecated.tsx @@ -2,7 +2,6 @@ import React, { FC } from 'react' import { AccessibilityProps, TouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native' import { Icon } from '@department-of-veterans-affairs/mobile-component-library' -// useTheme import { IconMap } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/iconList' import { useExternalLink, useTheme } from 'utils/hooks' diff --git a/VAMobile/src/components/SnackBar.tsx b/VAMobile/src/components/SnackBar.tsx index 7bb9178fb23..1f7cf3ff2dd 100644 --- a/VAMobile/src/components/SnackBar.tsx +++ b/VAMobile/src/components/SnackBar.tsx @@ -7,6 +7,8 @@ import { ToastProps } from 'react-native-toast-notifications/lib/typescript/toas import { useFocusEffect } from '@react-navigation/native' +import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library' + import { Box, TextViewProps, VAScrollView } from 'components' import { NAMESPACE } from 'constants/namespaces' import { triggerHaptic } from 'utils/haptics' @@ -14,7 +16,6 @@ import { useAccessibilityFocus, useTheme } from 'utils/hooks' import { BoxProps } from './Box' import TextView from './TextView' -import VAIcon, { VAIconProps } from './VAIcon' export type SnackbarMessages = { successMsg: string @@ -118,18 +119,15 @@ const SnackBar: FC = (toast) => { toast.onHide() } - const snackBarIconProps: VAIconProps = { - name: isError ? 'ExclamationTriangle' : 'CircleCheckMark', + const snackBarIconProps: IconProps = { + name: isError ? 'Warning' : 'CheckCircle', fill: themeColor.icon.snackBarIcon, - fill2: 'transparent', height: 18, width: 18, } const iconWrapperBoxProps: BoxProps = { mr: 8, - alignSelf: 'flex-start', - mt: 2, } const vibrate = (): void => { @@ -148,7 +146,7 @@ const SnackBar: FC = (toast) => { - + {message} From 99424ed96974c60d7024651f5dd9a7599a836084 Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Fri, 14 Feb 2025 10:51:14 -0800 Subject: [PATCH 8/9] Updating icon sizing and color based on UX feedback --- VAMobile/src/components/BaseListItem.tsx | 2 +- VAMobile/src/components/LinkWithAnalytics.tsx | 2 +- VAMobile/src/utils/secureMessaging.tsx | 9 ++++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx index 8be0143b75d..233818df208 100644 --- a/VAMobile/src/components/BaseListItem.tsx +++ b/VAMobile/src/components/BaseListItem.tsx @@ -109,7 +109,7 @@ export const ButtonDecorator: FC<{ case ButtonDecoratorType.Switch: return case ButtonDecoratorType.SelectedItem: - return + return case ButtonDecoratorType.Delete: return case ButtonDecoratorType.RadioFilled: diff --git a/VAMobile/src/components/LinkWithAnalytics.tsx b/VAMobile/src/components/LinkWithAnalytics.tsx index 13849ff86c9..2a2ba668d45 100644 --- a/VAMobile/src/components/LinkWithAnalytics.tsx +++ b/VAMobile/src/components/LinkWithAnalytics.tsx @@ -70,7 +70,7 @@ const LinkWithAnalytics = ({ analyticsOnPress, analyticsProps, disablePadding, . return ERROR: Type "attachment" not supported with useOldLinkComponent enabled } else if (props.type === 'call TTY') { linkType = 'callTTY' - } else if (props.type === 'custom') { + } else if (props.type === 'url') { linkType = 'externalLink' } else { linkType = props.type diff --git a/VAMobile/src/utils/secureMessaging.tsx b/VAMobile/src/utils/secureMessaging.tsx index f860bde5a94..367412c46cc 100644 --- a/VAMobile/src/utils/secureMessaging.tsx +++ b/VAMobile/src/utils/secureMessaging.tsx @@ -5,6 +5,7 @@ import { Asset, launchCamera, launchImageLibrary } from 'react-native-image-pick import { ImagePickerResponse } from 'react-native-image-picker/src/types' import { IconProps } from '@department-of-veterans-affairs/mobile-component-library' +import { colors } from '@department-of-veterans-affairs/mobile-tokens' import { ActionSheetOptions } from '@expo/react-native-action-sheet' import { TFunction } from 'i18next' import _ from 'underscore' @@ -50,6 +51,8 @@ export const getMessagesListItems = ( const isSentFolder = folderName === FolderNameTypeConstants.sent const isDraftsFolder = folderName === FolderNameTypeConstants.drafts const isOutbound = isSentFolder || isDraftsFolder + const attachFileIconColor = + theme.mode === 'dark' ? colors.vadsColorFormsBorderDefaultOnDark : colors.vadsColorFormsBorderDefaultOnLight const unreadIconProps = readReceipt !== READ && !isOutbound ? ({ svg: Unread, height: 16, width: 16, testID: 'Unread' } as IconProps) @@ -58,9 +61,9 @@ export const getMessagesListItems = ( hasAttachments || attachment ? ({ name: 'AttachFile', - width: 16, - height: 16, - fill: theme.colors.background.bullet, + width: 24, + height: 24, + fill: attachFileIconColor, testID: 'AttachFile', } as IconProps) : undefined From 11306df90b6647bb07e9e08ebf6212aafe1de3bb Mon Sep 17 00:00:00 2001 From: Matthew Guest - Work Date: Mon, 17 Feb 2025 12:33:43 -0800 Subject: [PATCH 9/9] Adjusted size of AttachFile icon in secureMessaging to 21x21. Also, fixed icon alignment with text to center per UX feedback. --- VAMobile/src/components/InlineTextWithIcons.tsx | 4 ++-- VAMobile/src/utils/secureMessaging.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/VAMobile/src/components/InlineTextWithIcons.tsx b/VAMobile/src/components/InlineTextWithIcons.tsx index 629ea1a6701..b45779379da 100644 --- a/VAMobile/src/components/InlineTextWithIcons.tsx +++ b/VAMobile/src/components/InlineTextWithIcons.tsx @@ -30,9 +30,9 @@ export const InlineTextWithIcons: FC = ({ const theme = useTheme() return ( - + {!inlineIcon && leftIconProps && ( - + {leftIconProps?.svg ? (