From 7975e916c9850695edbbef9aa4cd3ebf7486bbf6 Mon Sep 17 00:00:00 2001 From: Jessica Woodin <82840483+jessicawoodin@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:44:41 +0000 Subject: [PATCH 1/3] Clean up old foundation pages --- .../Foundation/Icons.md | 6 ++ .../Foundation/Icons/_category_.json | 5 -- .../Foundation/Icons/_iconPathSection.mdx | 0 .../Foundation/Icons/checkboxIcons.md | 18 ----- .../Foundation/Icons/commonIcons.md | 48 ------------- .../Foundation/Icons/index.md | 9 --- .../Foundation/Icons/linksIcons.md | 27 -------- .../Foundation/Icons/radioBtnIcons.md | 15 ---- .../Foundation/Icons/webviewIcons.md | 16 ----- .../Foundation/color-palette.md | 17 ----- .../Foundation/colors.md | 6 ++ .../Foundation/layout.md | 2 + .../Foundation/typography.md | 68 +------------------ 13 files changed, 16 insertions(+), 221 deletions(-) create mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_category_.json delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/_iconPathSection.mdx delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/checkboxIcons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/commonIcons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/index.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/linksIcons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/radioBtnIcons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/Icons/webviewIcons.md delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/color-palette.md create mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/colors.md 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/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/colors.md b/VAMobile/documentation/docs/Flagship design library/Foundation/colors.md new file mode 100644 index 00000000000..b1ab0e5a201 --- /dev/null +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/colors.md @@ -0,0 +1,6 @@ +--- +title: Colors +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/layout.md b/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md index c45ed11022f..56aef905997 100644 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md @@ -3,6 +3,8 @@ title: Layout sidebar_position: 4 --- +See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Spacing). + * [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/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 From ea5dddd0e3981288c64d36796223bbeb73df4228 Mon Sep 17 00:00:00 2001 From: Jessica Woodin <82840483+jessicawoodin@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:48:16 +0000 Subject: [PATCH 2/3] Additional fixes to old content --- .../Foundation/{colors.md => color.md} | 2 +- .../Foundation/{Icons.md => icons.md} | 0 .../docs/Flagship design library/Foundation/layout.md | 10 ---------- .../docs/Flagship design library/Foundation/spacing.md | 6 ++++++ 4 files changed, 7 insertions(+), 11 deletions(-) rename VAMobile/documentation/docs/Flagship design library/Foundation/{colors.md => color.md} (89%) rename VAMobile/documentation/docs/Flagship design library/Foundation/{Icons.md => icons.md} (100%) delete mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/layout.md create mode 100644 VAMobile/documentation/docs/Flagship design library/Foundation/spacing.md diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/colors.md b/VAMobile/documentation/docs/Flagship design library/Foundation/color.md similarity index 89% rename from VAMobile/documentation/docs/Flagship design library/Foundation/colors.md rename to VAMobile/documentation/docs/Flagship design library/Foundation/color.md index b1ab0e5a201..c8e31eab793 100644 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/colors.md +++ b/VAMobile/documentation/docs/Flagship design library/Foundation/color.md @@ -1,5 +1,5 @@ --- -title: Colors +title: Color sidebar_position: 2 --- diff --git a/VAMobile/documentation/docs/Flagship design library/Foundation/Icons.md b/VAMobile/documentation/docs/Flagship design library/Foundation/icons.md similarity index 100% rename from VAMobile/documentation/docs/Flagship design library/Foundation/Icons.md rename to VAMobile/documentation/docs/Flagship design library/Foundation/icons.md 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 56aef905997..00000000000 --- a/VAMobile/documentation/docs/Flagship design library/Foundation/layout.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Layout -sidebar_position: 4 ---- - -See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Spacing). - - - -* [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 From d446bdedb750f7fad478522acb36a575c3b44045 Mon Sep 17 00:00:00 2001 From: Jessica Woodin <82840483+jessicawoodin@users.noreply.github.com> Date: Mon, 9 Dec 2024 18:01:29 +0000 Subject: [PATCH 3/3] Add Radio Button documentation --- .../Selection and input/RadioButton.md | 37 +++++++++++++++++++ VAMobile/documentation/design/intro.md | 1 + .../Form Elements/RadioButton.md | 29 +-------------- 3 files changed, 39 insertions(+), 28 deletions(-) create mode 100644 VAMobile/documentation/design/Components/Selection and input/RadioButton.md 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 1ac79477e1d..f47b617b11c 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) ----- 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