Skip to content

Commit

Permalink
Merge branch 'develop' into chore/9630-UseDesignSystemSnackbarComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
oddballdave authored Dec 12, 2024
2 parents d1626ec + 608bef9 commit 63b4ec8
Show file tree
Hide file tree
Showing 9 changed files with 57 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ sidebar_position: 1
---

## Voice and tone
We follow the [VA design system content principles](https://design.va.gov/content-style-guide/content-principles). In following these principles, we create consistent, clear, and customer-centered content that is based on Veteran feedback.
We follow the [VA design system content principles](https://design.va.gov/content-style-guide/content-principles). In following these principles, we create consistent, clear, and user-centered content that is based on Veteran feedback.

In addition, we follow [VA plain language standards](https://design.va.gov/content-style-guide/plain-language/) to help Veterans and their families find and understand the information they need.

Since we create content for health-related features, we also follow the [VA content guidelines for health content](https://design.va.gov/content-style-guide/health-content).

## Accessible and inclusive language
We write for all Veterans and those who care for them. Therefore, we use people-first language that is inclusive of the wide range of abilities and experiences of our users.
We avoid words that are insensitive to the disabilities faced by our users. For example, we don’t use “view” or “see,” since a number of our users are blind or low-vision. We also avoid idioms, such as “at your fingertips” or “give an arm or a leg.” Not only are idioms often insensitive to Veterans’ experience but also idioms don’t follow plain language standards.
We avoid words that are insensitive to the disabilities faced by our users. For example, we don’t use “see” since a number of our users are blind or low-vision. We also avoid idioms, such as “at your fingertips” or “give an arm or a leg.” Not only are idioms often insensitive to Veterans’ experience, but also idioms don’t follow plain language standards.

Resources to consider:

Expand All @@ -26,25 +26,22 @@ We follow [VA.gov content style guide rules](https://design.va.gov/content-style

### Capitalization

- Screen names are title case. With the new navigation design, we will [change to sentence case for screen titles](https://github.com/department-of-veterans-affairs/va-mobile-app/issues/2575).
- All other headings in the app are sentence case.
- Buttons
- For native actions, we use title case for iOS and all caps for Android.
- For interface buttons, we use sentence case.

- For native actions, we use title case for iOS and all caps for Android.
- For interface buttons, we use sentence case.

### Times and time zones

- We currently use `AM` and `PM` (both letters capitalized and no punctuation) since this is default formatting in React Native.
- Due to default formatting in React Native, when times/time zones aren't hardcoded, our formatting differs from VA.gov. For example, React Native formats as `AM` and `PM` (both letters capitalized and no punctuation) and `EST` (three-letter format).
- When times and timezones are hardcoded, we follow the VA.gov content style guide.

## Word choice, spelling, and naming conventions
### Content briefs
We use [content briefs](https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/content/content-briefs) to ensure consistent word choice and usage with other VA teams. VA Sitewide Content and IA team creates content briefs, sometimes in collaboration with the VA Mobile App content designer.
We use [content briefs](https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/content/content-briefs) to ensure consistent word choice and usage with other VA teams. VA.gov's content team creates content briefs, sometimes in collaboration with the VA Mobile App content designer.
### [Word List](https://design.va.gov/content-style-guide/word-list)
We use standard American English spelling in Merriam-Webster Dictionary. The words on the VA.gov word list are exceptions or need clarification.
### [Naming conventions](https://design.va.gov/content-style-guide/naming-and-labels)
We follow VA.gov content style guide’s [rules for naming and labels](https://design.va.gov/content-style-guide/naming-and-labels) for tools, products, benefits, offices, and programs.
In most cases, VA.gov will have already established a name for a tool, benefit, etc. For cases in which we would like to suggest a different name or need help with naming an app-specific feature, we work closely with VA Sitewide Content team to ensure alignment.
We follow VA.gov content style guide’s [rules for naming and labels](https://design.va.gov/content-style-guide/naming-and-labels) for tools, products, benefits, offices, and programs.
In most cases, VA.gov will have already established a name for a tool, benefit, etc. For cases in which we'd like to suggest a different name or need help with naming an app-specific feature, we work closely with VA.gov's content team to ensure alignment.

## Error messages
VA.gov’s design system includes a section on [how to help users recover from errors](https://design.va.gov/patterns/help-users-to/recover-from-errors). It details the structure, style, and tone for error and informational messages.
Expand Down
5 changes: 3 additions & 2 deletions VAMobile/src/components/AttachmentLink.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import React, { FC } from 'react'
import { AccessibilityProps, Pressable, PressableProps } from 'react-native'

import { Icon } from '@department-of-veterans-affairs/mobile-component-library'

import { a11yHintProp } from 'utils/accessibility'
import { useTheme } from 'utils/hooks'
import { featureEnabled } from 'utils/remoteConfig'

import Box from './Box'
import LinkWithAnalytics from './LinkWithAnalytics'
import TextView from './TextView'
import VAIcon from './VAIcon'

export type AttachmentLinkProps = {
/** Name of link/attachment */
Expand Down Expand Up @@ -57,7 +58,7 @@ const AttachmentLink: FC<AttachmentLinkProps> = ({
<Pressable {...a11yProps} {...pressableProps}>
<Box flexDirection={'row'} mr={theme.dimensions.gutter}>
<Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
<VAIcon name="PaperClip" width={16} height={16} fill={'link'} />
<Icon name="AttachFile" width={20} height={20} fill={theme.colors.icon.link} />
</Box>
<TextView mr={theme.dimensions.textIconMargin} variant={'MobileBodyLink'}>
{text}
Expand Down
30 changes: 14 additions & 16 deletions VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import React, { FC, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import { ImagePickerResponse } from 'react-native-image-picker/src/types'

import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
import { Button, ButtonVariants, Icon } from '@department-of-veterans-affairs/mobile-component-library'
import _ from 'underscore'

import { Box, TextView, VAIcon } from 'components/index'
import { Box, TextView } from 'components/index'
import { NAMESPACE } from 'constants/namespaces'
import { DocumentPickerResponse } from 'screens/BenefitsScreen/BenefitsStackScreens'
import { getFileDisplay } from 'utils/common'
Expand Down Expand Up @@ -45,21 +45,19 @@ const FormAttachments: FC<FormAttachmentsProps> = ({
return (
<Box key={index}>
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
alignItems="center"
flexWrap="wrap"
mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0}>
<Box display="flex" flexDirection="row" alignItems="center" flexWrap="wrap" justifyContent="space-between">
<VAIcon name="PaperClip" width={16} height={16} fill="spinner" />
<TextView
variant="MobileBodyBold"
ml={theme.dimensions.textIconMargin}
accessibilityLabel={fileSizeA11y ? [fileName, fileSizeA11y].join(' ').trim() : undefined}>
{text}
</TextView>
flexDirection={'row'}
mr={theme.dimensions.gutter}
mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0}
mb={theme.dimensions.condensedMarginBetween}>
<Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
<Icon name="AttachFile" width={20} height={20} fill={theme.colors.icon.spinner} />
</Box>
<TextView
variant="MobileBodyBold"
ml={theme.dimensions.textIconMargin}
accessibilityLabel={fileSizeA11y ? [fileName, fileSizeA11y].join(' ').trim() : undefined}>
{text}
</TextView>
</Box>
<Button
onPress={() => removeOnPress?.(attachment)}
Expand Down
17 changes: 9 additions & 8 deletions VAMobile/src/components/LabelTag.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React, { FC } from 'react'
import { AccessibilityRole, Pressable, PressableProps, useWindowDimensions } 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 TextView from './TextView'
import VAIcon, { VAIconProps } from './VAIcon'

export const LabelTagTypeConstants: {
tagBlue: LabelTagTypes
Expand Down Expand Up @@ -104,20 +105,20 @@ const LabelTag: FC<LabelTagProps> = ({ text, labelType, onPress, a11yHint, a11yL
}
}

const infoIconProps: VAIconProps = {
const infoIconProps: IconProps = {
name: 'Info',
fill: 'tagInfoIcon',
fill2: 'transparent',
height: adjustSize ? 10 : 16,
width: adjustSize ? 10 : 16,
mr: adjustSize ? 5 : 10,
fill: theme.colors.icon.tagInfoIcon,
height: adjustSize ? 13 : 20,
width: adjustSize ? 13 : 20,
}

return (
<Pressable {...pressableProps}>
<Box {...wrapperProps}>
{textView}
<VAIcon {...infoIconProps} />
<Box mr={adjustSize ? 5 : 10}>
<Icon {...infoIconProps} />
</Box>
</Box>
</Pressable>
)
Expand Down
23 changes: 11 additions & 12 deletions VAMobile/src/components/LargeNavButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import ContentLoader, { Rect } from 'react-content-loader/native'
import { useTranslation } from 'react-i18next'
import { 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 { NAMESPACE } from 'constants/namespaces'
import { a11yHintProp } from 'utils/accessibility'
import { useTheme } from 'utils/hooks'
Expand Down Expand Up @@ -100,17 +101,15 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
<></>
)}
</Box>
<VAIcon
flexDirection="row"
alignItems="flex-end"
width={24}
height={24}
name="RightArrowInCircle"
fill={theme.colors.icon.largeNavButton}
fill2={'transparent'}
ml={theme.dimensions.listItemDecoratorMarginLeft}
preventScaling={true}
/>
<Box flexDirection="row" alignItems="flex-end">
<Icon
width={30}
height={30}
name="ArrowCircleRight"
fill={theme.colors.icon.largeNavButton}
preventScaling={true}
/>
</Box>
</Box>
</Pressable>
)
Expand Down
12 changes: 6 additions & 6 deletions VAMobile/src/components/PhotoPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import { Image, Pressable, PressableProps } from 'react-native'
import { Asset } from 'react-native-image-picker/src/types'

import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
import styled from 'styled-components'

import { NAMESPACE } from 'constants/namespaces'
Expand All @@ -12,7 +13,6 @@ import { themeFn } from 'utils/theme'

import Box, { BoxProps } from './Box'
import TextView, { TextViewProps } from './TextView'
import { VAIcon } from './index'

type PhotoPreviewProps = {
/** width of the photo */
Expand Down Expand Up @@ -119,21 +119,21 @@ const PhotoPreview: FC<PhotoPreviewProps> = ({ width, height, image, onDeleteCal
{selected && <Box {...blueOpacity} />}
<Box pt={photoPreviewIconPadding} pr={photoPreviewIconPadding} position="absolute" alignSelf="flex-end">
{selected && (
<VAIcon
name={'Minus'}
<Icon
name={'RemoveCircle'}
width={photoPreviewIconSize}
height={photoPreviewIconSize}
maxWidth={photoPreviewMaxIconSize}
fill={themeColor.icon.photoAdd}
/>
)}
{!selected && (
<VAIcon
name={'Remove'}
<Icon
name={'Cancel'}
width={photoPreviewIconSize}
height={photoPreviewIconSize}
maxWidth={photoPreviewMaxIconSize}
fill={themeColor.icon.deleteFill}
fill={themeColor.icon.error}
/>
)}
</Box>
Expand Down
4 changes: 2 additions & 2 deletions VAMobile/src/components/TextLineWithIcon.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ context('TextLineWithIcon', () => {
beforeEach(() => {
const testLine1 = {
text: 'line1',
iconProps: { name: 'PaperClip', width: 16, height: 16, testID: 'PaperClip' } as VAIconProps,
iconProps: { name: 'Trash', width: 16, height: 16, testID: 'Trash' } as VAIconProps,
}
const testLine2 = {
text: 'another line2',
Expand All @@ -30,7 +30,7 @@ context('TextLineWithIcon', () => {
})

it('renders correct VAIcons', () => {
expect(screen.getByTestId('PaperClip')).toBeTruthy()
expect(screen.getByTestId('Trash')).toBeTruthy()
expect(screen.getByTestId('Unread')).toBeTruthy()
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { View, ViewStyle } from 'react-native'

import { useIsFocused } from '@react-navigation/native'

import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
import { useIsScreenReaderEnabled } from '@department-of-veterans-affairs/mobile-component-library'

import { useDownloadFileAttachment, useMessage } from 'api/secureMessaging'
Expand All @@ -17,7 +18,6 @@ import {
LabelTagTypeConstants,
LoadingComponent,
TextView,
VAIcon,
} from 'components'
import { NAMESPACE } from 'constants/namespaces'
import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common'
Expand Down Expand Up @@ -166,7 +166,7 @@ function CollapsibleMessage({ message, isInitialMessage, collapsibleMessageRef }
<Box flexDirection={'row'} mr={theme.dimensions.textIconMargin}>
{attachmentBoolean && (
<Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
<VAIcon name={'PaperClip'} fill={'spinner'} width={16} height={16} />
<Icon name={'AttachFile'} fill={theme.colors.icon.spinner} width={20} height={20} />
</Box>
)}
{sentDate && sentDate.length > 1 ? (
Expand Down
2 changes: 1 addition & 1 deletion VAMobile/src/styles/themes/standardTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ let theme: VATheme = {
...colorScheme,
},
dimensions: {
attachmentIconTopMargin: 8,
attachmentIconTopMargin: 6,
borderWidth: 1,
focusedInputBorderWidth: 2,
buttonBorderWidth: 2,
Expand Down

0 comments on commit 63b4ec8

Please sign in to comment.