diff --git a/VAMobile/documentation/design/Components/Selection and input/RadioButton.md b/VAMobile/documentation/design/Components/Selection and input/RadioButton.md new file mode 100644 index 00000000000..a916c93d948 --- /dev/null +++ b/VAMobile/documentation/design/Components/Selection and input/RadioButton.md @@ -0,0 +1,37 @@ +--- +title: Radio button +--- + +Radio buttons allow users to select exactly one choice from a group. + +## Examples + +### Default +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/radio-button--default) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=6703-12221&t=Dj0bTSPSPnEJEFCa-4) + + +### Tile +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/radio-button--tile) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=6703-12221&t=Dj0bTSPSPnEJEFCa-4) + + +### Error +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/radio-button--error) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=6703-12221&t=Dj0bTSPSPnEJEFCa-4) + + +## Usage +[Refer to the VA Design System for usage guidance](https://design.va.gov/components/form/radio-button) + +## Code usage +[Open Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/radio-button--docs) + +## Content considerations +* Refer to the [VA Design System for content considerations](https://design.va.gov/components/form/radio-button#content-considerations) + +## Accessibility considerations +* Refer to the [VA Design System for accessibility considerations](https://design.va.gov/components/form/radio-button#accessibility-considerations) +* Screenreaders should announce the name, role, and state of each radio button. + +## Related +* [Radio button - VA Design System](https://design.va.gov/components/form/radio-button) +* [Radio buttons - USWDS](https://designsystem.digital.gov/components/radio-buttons/) +* [Radio button - Material Design](https://m3.material.io/components/radio-button/overview) \ No newline at end of file diff --git a/VAMobile/documentation/design/intro.md b/VAMobile/documentation/design/intro.md index b4a34b40c8f..9ba259aec87 100644 --- a/VAMobile/documentation/design/intro.md +++ b/VAMobile/documentation/design/intro.md @@ -34,6 +34,7 @@ A system to help you write, design, and build digital services on the VA Mobile ### Selection and input - [Checkbox](/va-mobile-app/design/Components/Selection%20and%20input/Checkbox) +- [Radio button](/va-mobile-app/design/Components/Selection%20and%20input/RadioButton) ### Typography - [Text](/va-mobile-app/design/Components/Typography/Text) diff --git a/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/RadioButton.md b/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/RadioButton.md index e8bcbdd9cc0..2449adc1a5a 100644 --- a/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/RadioButton.md +++ b/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/RadioButton.md @@ -2,31 +2,4 @@ title: Radio button --- -Radio buttons allow users to select exactly one choice from a group. - -## Examples - -### Master component - - -### Examples - - -## Usage - -[Refer to the VA Design System for usage guidance](https://design.va.gov/components/form/radio-button) - -## Content considerations -* Refer to the [VA Design System for content considerations](https://design.va.gov/components/form/radio-button/#content-considerations) - -## Accessibility considerations -* Refer to the [VA Design System for accessibility considerations](https://design.va.gov/components/form/radio-button/#accessibility-considerations) -* Screenreaders should announce the name, role, and state of each checkbox. - -## Code usage -Link to Storybook coming soon - -## Related -* [Radio button - VA Design System](https://design.va.gov/components/form/radio-button) -* [Radio buttons - USWDS](https://designsystem.digital.gov/components/radio-buttons/) -* [Radio button - Material Design](https://m3.material.io/components/radio-button/overview) \ No newline at end of file +See documentation in [Design System](/va-mobile-app/design/Components/Selection%20and%20input/RadioButton). \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_category_.json b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_category_.json deleted file mode 100644 index a5092ce2692..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_category_.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "label": "Icons", - "position": 3 -} - diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_iconPathSection.mdx b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_iconPathSection.mdx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/checkboxIcons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/checkboxIcons.md deleted file mode 100644 index d25ce6cd4d8..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/checkboxIcons.md +++ /dev/null @@ -1,18 +0,0 @@ -import { ReactComponent as CheckBoxEmpty} from '@componentsDocs/VAIcon/svgs/checkbox/CheckBoxEmpty.svg'; -import { ReactComponent as CheckBoxError} from '@componentsDocs/VAIcon/svgs/checkbox/CheckBoxError.svg'; -import { ReactComponent as CheckBoxFilled} from '@componentsDocs/VAIcon/svgs/checkbox/CheckBoxFilled.svg'; -import { ReactComponent as CheckBoxIntermediate} from '@componentsDocs/VAIcon/svgs/checkbox/CheckBoxIntermediate.svg'; -import IconsPathSection from '@site/src/components/IconsPathSection' - -# Checkbox - -:::info - -::: - -Name | Icon | File Name -:---: | :---: | :---: -Checkbox Empty | | CheckBoxEmpty.svg -Checkbox Error | | CheckBoxError.svg -Checkbox Filled | | CheckBoxFilled.svg -Checkbox Intermediate | | CheckBoxIntermediate.svg diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/commonIcons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/commonIcons.md deleted file mode 100644 index afa6f5a49c3..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/commonIcons.md +++ /dev/null @@ -1,48 +0,0 @@ -import { ReactComponent as Add} from '@componentsDocs/VAIcon/svgs/Add.svg'; -import { ReactComponent as Building} from '@componentsDocs/VAIcon/svgs/Building.svg'; -import { ReactComponent as CheckMark} from '@componentsDocs/VAIcon/svgs/CheckMark.svg'; -import { ReactComponent as CircleCheckMark} from '@componentsDocs/VAIcon/svgs/CircleCheckMark.svg'; -import { ReactComponent as Compose} from '@componentsDocs/VAIcon/svgs/Compose.svg'; -import { ReactComponent as ExclamationTriangle} from '@componentsDocs/VAIcon/svgs/ExclamationTriangle.svg'; -import { ReactComponent as ExternalLink} from '@componentsDocs/VAIcon/svgs/ExternalLink.svg'; -import { ReactComponent as Folder} from '@componentsDocs/VAIcon/svgs/Folder.svg'; -import { ReactComponent as Inbox} from '@componentsDocs/VAIcon/svgs/Inbox.svg'; -import { ReactComponent as Info} from '@componentsDocs/VAIcon/svgs/Info.svg'; -import { ReactComponent as Minus} from '@componentsDocs/VAIcon/svgs/Minus.svg'; -import { ReactComponent as PaperClip} from '@componentsDocs/VAIcon/svgs/PaperClip.svg'; -import { ReactComponent as Phone} from '@componentsDocs/VAIcon/svgs/Phone.svg'; -import { ReactComponent as QuestionMark} from '@componentsDocs/VAIcon/svgs/QuestionMark.svg'; -import { ReactComponent as Remove} from '@componentsDocs/VAIcon/svgs/Remove.svg'; -import { ReactComponent as Reply} from '@componentsDocs/VAIcon/svgs/Reply.svg'; -import { ReactComponent as Trash} from '@componentsDocs/VAIcon/svgs/Trash.svg'; -import { ReactComponent as Unread} from '@componentsDocs/VAIcon/svgs/Unread.svg'; -import { ReactComponent as VideoCamera} from '@componentsDocs/VAIcon/svgs/VideoCamera.svg'; -import IconsPathSection from '@site/src/components/IconsPathSection' - -# Common - -:::info - -::: - -Name | Icon | File Location -:---: | :---: | :---: -Add | | Add.svg -Building | | Building.svg -Check Mark | | CheckMark.svg -Check Mark in Circle | | CircleCheckMark.svg -Compose | | Compose.svg -Exclamation Triangle | | ExclamationTriangle.svg -External Link | | ExternalLink.svg -Folder | | Folder.svg -Inbox | | Inbox.svg -Info | | Info.svg -Minus | | Minus.svg -Paper Clip | | PaperClip.svg -Phone | | Phone.svg -Question Mark | | QuestionMark.svg -Remove | | Remove.svg -Reply | | Reply.svg -Trash | | Trash.svg -Unread | | Unread.svg -Video Camera | | VideoCamera.svg \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/index.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/index.md deleted file mode 100644 index 61943e252b1..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Icons ---- - -Icons are used sparingly throughout the VA mobile app as a way to enhance user understanding and wayfinding. - - - -* [Icons in Figma](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=4156%3A7676&t=LWuS4oyNuplsuZBa-1) \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/linksIcons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/linksIcons.md deleted file mode 100644 index df891a21a5a..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/linksIcons.md +++ /dev/null @@ -1,27 +0,0 @@ -import { ReactComponent as Calendar} from '@componentsDocs/VAIcon/svgs/links/Calendar.svg'; -import { ReactComponent as Chat} from '@componentsDocs/VAIcon/svgs/links/Chat.svg'; -import { ReactComponent as CircleExternalLink} from '@componentsDocs/VAIcon/svgs/links/CircleExternalLink.svg'; -import { ReactComponent as CirclePhone} from '@componentsDocs/VAIcon/svgs/links/CirclePhone.svg'; -import { ReactComponent as Directions} from '@componentsDocs/VAIcon/svgs/links/Directions.svg'; -import { ReactComponent as PhoneTTY} from '@componentsDocs/VAIcon/svgs/links/PhoneTTY.svg'; -import { ReactComponent as RightArrowBlueCircle} from '@componentsDocs/VAIcon/svgs/links/right-arrow-blue-circle.svg'; -import { ReactComponent as Text} from '@componentsDocs/VAIcon/svgs/links/Text.svg'; -import IconsPathSection from '@site/src/components/IconsPathSection' - -# Links - -:::info - -::: - - -Name | Icon | File Name -:---: | :---: | :---: -Calendar | | Calendar.svg -Chat | | Chat.svg -Directions | | Directions.svg -External Link in Circle | | CircleExternalLink.svg -Phone in Circle | | CirclePhone.svg -Phone TTY | | PhoneTTY.svg -Right Arrow Blue Circle | | right-arrow-blue-circle.svg -Text | | Text.svg diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/radioBtnIcons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/radioBtnIcons.md deleted file mode 100644 index 2945864240d..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/radioBtnIcons.md +++ /dev/null @@ -1,15 +0,0 @@ -import { ReactComponent as RadioEmpty} from '@componentsDocs/VAIcon/svgs/radio/RadioEmpty.svg'; -import { ReactComponent as RadioFilled} from '@componentsDocs/VAIcon/svgs/radio/RadioFilled.svg'; -import IconsPathSection from '@site/src/components/IconsPathSection' - - -# Radio Button - -:::info - -::: - -Name | Icon | File Name -:---: | :---: | :---: -Radio Empty/Disabled | | RadioEmpty.svg -Radio Filled | | RadioFilled.svg diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/webviewIcons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/webviewIcons.md deleted file mode 100644 index b4a17ae0c8e..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons/webviewIcons.md +++ /dev/null @@ -1,16 +0,0 @@ -import { ReactComponent as ExternalLink} from '@componentsDocs/VAIcon/svgs/ExternalLink.svg'; -import { ReactComponent as Lock} from '@componentsDocs/VAIcon/svgs/Lock.svg'; -import { ReactComponent as Redo} from '@componentsDocs/VAIcon/svgs/Redo.svg'; -import IconsPathSection from '@site/src/components/IconsPathSection' - -# Webview - -:::info - -::: - -Name | Icon | File Name -:---: | :---: | :---: -External Link | | ExternalLink.svg -Lock | | Lock.svg -Redo | | Redo.svg diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/color-palette.md b/VAMobile/documentation/docs/Flagship design library/Foundation/color-palette.md deleted file mode 100644 index 2432de774a3..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/color-palette.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Color palette -sidebar_position: 2 ---- - -The VA mobile app has two color themes: Light and Dark. [The VA mobile app themes](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/VA-Mobile-Design-Tokens?node-id=151%3A76) use colors from the [VA style guide](https://design.va.gov/foundation/color-palette), and only deviate if necessary for accessibility purposes. - - - -**Themes** -- [Light theme in Figma](https://www.figma.com/file/yXL0MkEKyAPGXPZqRH0VFZ/VA-Mobile-light-theme?node-id=183%3A441) -- [Dark theme in Figma](https://www.figma.com/file/gOhb2kZvoQiXiGigqWZhnx/VA-Mobile-dark-theme?node-id=183%3A441) - -## Front-end -Colors in code can be found under `src/styles/themes/VAColors.ts`. Any new colors should be added `src/styles/themes/VAColors.ts` and then used in `src/styles/themes/standardTheme.ts` or `src/styles/themescolorSchemes.ts` - -Some text, components(ex. snackbar), or icons use different colors than the default color set for each font. You can find the general guidelines for what colors to use for most text, components, and icons in the [VA Mobile app Design Library](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/VAMobile-DesignLibrary1.0-%F0%9F%93%90?node-id=501%3A40&t=P62TR9FmT9E6a4O2-1). \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/color.md b/VAMobile/documentation/docs/Flagship design library/Foundation/color.md new file mode 100644 index 00000000000..c8e31eab793 --- /dev/null +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/color.md @@ -0,0 +1,6 @@ +--- +title: Color +sidebar_position: 2 +--- + +See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Color). \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/icons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/icons.md new file mode 100644 index 00000000000..673709ccdac --- /dev/null +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/icons.md @@ -0,0 +1,6 @@ +--- +title: Icons +sidebar_position: 5 +--- + +See documentation in [Design System](/va-mobile-app/design/Foundation/Icons). \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md b/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md deleted file mode 100644 index c45ed11022f..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Layout -sidebar_position: 4 ---- - - - -* [Grid in Figma](https://www.figma.com/file/QVLPB3eOunmKrgQOuOt0SU/%F0%9F%93%90-DesignLibrary2.0---VAMobile?type=design&node-id=3859%3A7737&t=EuJmlpcIxjibtKua-1) \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/spacing.md b/VAMobile/documentation/docs/Flagship design library/Foundation/spacing.md new file mode 100644 index 00000000000..8a53ad7844b --- /dev/null +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/spacing.md @@ -0,0 +1,6 @@ +--- +title: Spacing +sidebar_position: 4 +--- + +See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Spacing). \ No newline at end of file diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/typography.md b/VAMobile/documentation/docs/Flagship design library/Foundation/typography.md index 2451440b90e..102a8092899 100644 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/typography.md +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/typography.md @@ -1,70 +1,6 @@ --- title: Typography -sidebar_position: 5 +sidebar_position: 3 --- -Typography generally follows [VA.gov’s guidance](https://design.va.gov/foundation/typography) with some adjustments. - -* The mobile app doesn’t use CSS pixel measurements to define font sizes. Instead, we use points (PT) on iOS and density-independent pixels (DP) on Android. This allows our fonts to scale appropriately for all screen densities across devices. Below are resources that describe this in more detail: - * [Guidance from W3C](https://w3c.github.io/wcag2ict/#guidance-when-applying-css-pixel-to-non-web-documents-and-software) - * [Fonts in mobile apps for developers](https://www.skoumal.com/en/fonts-in-mobile-apps-for-developers/) - * [Mobile design 101: pixels, points and resolutions](https://medium.com/@fluidui/mobile-design-101-pixels-points-and-resolutions-f60413035243) -* With native and OS specific components, we utilize OS defined typography. - - - - - -## Front-end -To support the common usage of colors for each font style, defaults colors have been set for each type of font under `src/styles/themes/standardTheme.ts`(See `buildTypography` function). Colors for each font style are based on the [Design Tokens - Design Library](https://www.figma.com/file/bGO6g5cCvWycrNjoK66PXc/%F0%9F%93%90-DesignTokens1.0---Library---VAMobile?node-id=115%3A157&t=RpifEcByzqSp4on7-1) file. \ No newline at end of file +See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Typography). \ No newline at end of file