Add Radio Button documentation

department-of-veterans-affairs · Dec 9, 2024 · d446bde · d446bde
1 parent ea5dddd
commit d446bde
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/VAMobile/documentation/design/Components/Selection and input/RadioButton.md 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)
+<iframe width="620" height="500" title="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/radio-button--default&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>
+
+### 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)
+<iframe width="620" height="500" title="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/radio-button--tile&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>
+
+### 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)
+<iframe width="620" height="500" title="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/radio-button--error&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>
+
+## 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)
diff --git 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/...ship design library/Components/Selection and Input/Form Elements/RadioButton.md b/...ship 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
-<iframe width="800" height="450" title="Image of master component in Figma showing light and dark mode" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/file/mAMh8vyVgsevAOungfvGN6/%5BNEW%5D-Checkbox-%26-Radio-Buttons?type=design&node-id=1509-7909&mode=design&t=iS5TS46EHWCYCjWn-4" title="Image of master component in Figma showing light and dark mode" allowfullscreen></iframe>
-
-### Examples
-<iframe width="800" height="450" title="Image of component examples in Figma" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com/file/mAMh8vyVgsevAOungfvGN6/%5BNEW%5D-Checkbox-%26-Radio-Buttons?type=design&node-id=1509-7910&mode=design&t=iS5TS46EHWCYCjWn-4" allowfullscreen></iframe>
-
-## 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)
+See documentation in [Design System](/va-mobile-app/design/Components/Selection%20and%20input/RadioButton).
-Original file line number
+Diff line change
@@ Expand Up @@
     ### Selection and input
     - [Checkbox](/va-mobile-app/design/Components/Selection%20and%20input/Checkbox)
+    - [Radio button](/va-mobile-app/design/Components/Selection%20and%20input/RadioButton)
     -----
@@ Expand Down @@