diff --git a/VAMobile/documentation/docs/Flagship design library/Content/content-style-guide.md b/VAMobile/documentation/docs/Flagship design library/Content/content-style-guide.md index 4b73d20c98..847c4a9961 100644 --- a/VAMobile/documentation/docs/Flagship design library/Content/content-style-guide.md +++ b/VAMobile/documentation/docs/Flagship design library/Content/content-style-guide.md @@ -4,7 +4,7 @@ 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. @@ -12,7 +12,7 @@ Since we create content for health-related features, we also follow the [VA cont ## 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: @@ -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. diff --git a/VAMobile/src/components/AttachmentLink.tsx b/VAMobile/src/components/AttachmentLink.tsx index 3f0d2e403e..03e0796416 100644 --- a/VAMobile/src/components/AttachmentLink.tsx +++ b/VAMobile/src/components/AttachmentLink.tsx @@ -1,6 +1,8 @@ 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' @@ -8,7 +10,6 @@ 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 */ @@ -57,7 +58,7 @@ const AttachmentLink: FC = ({ - + {text} diff --git a/VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx b/VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx index 8c5b11652d..97c14f3a62 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx +++ b/VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx @@ -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' @@ -45,21 +45,19 @@ const FormAttachments: FC = ({ return ( - - - - {text} - + flexDirection={'row'} + mr={theme.dimensions.gutter} + mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0} + mb={theme.dimensions.condensedMarginBetween}> + + + + {text} +