department-of-veterans-affairs · jessicawoodin · Dec 11, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
@@ -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)
@@ -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)

@@ -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).
@@ -0,0 +1,6 @@
+---
+title: Color
+sidebar_position: 2
+---
+
+See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Color).
@@ -0,0 +1,6 @@
+---
+title: Icons
+sidebar_position: 5
+---
+
+See documentation in [Design System](/va-mobile-app/design/Foundation/Icons).
@@ -0,0 +1,6 @@
+---
+title: Spacing
+sidebar_position: 4
+---
+
+See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Spacing).
@@ -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.
-
-<!-- <table>
-<caption>Mobile app typography styles</caption>
-<tr>
-    <th>Use</th>
-    <th>Font</th>
-    <th>Font Size</th>
-    <th>Line Height</th>
-    <th>Style</th>
-</tr>
-<tr>
-    <td>Heading</td>
-    <td>Bitter Bold</td>
-    <td>24px</td>
-    <td>30px</td>
-    <td>N/A</td>
-</tr>
-<tr>
-    <td>Mobile Body</td>
-    <td>Source Sans Pro Regular</td>
-    <td>20px</td>
-    <td>30px</td>
-    <td>N/A</td>
-</tr>
-<tr>
-    <td>Mobile Body Bold</td>
-    <td>Source Sans Pro Bold</td>
-    <td>20px</td>
-    <td>20px</td>
-    <td>N/A</td>
-</tr>
-<tr>
-    <td>Mobile Body Link</td>
-    <td>Source Sans Pro Regular</td>
-    <td>20px</td>
-    <td>30px</td>
-    <td>Underline</td>
-</tr>
-<tr>
-    <td>Mobile Body Required</td>
-    <td>Source Sans Pro Regular</td>
-    <td>20px</td>
-    <td>30px</td>
-    <td>Asterisk before text</td>
-</tr>
-<tr>
-    <td>Helper Text</td>
-    <td>Source Sans Pro Regular</td>
-    <td>16px</td>
-    <td>22px</td>
-    <td>N/A</td>
-</tr>
-</table> -->
-
-<iframe width="550" height="500" title="Flagship library typography" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FQVLPB3eOunmKrgQOuOt0SU%2F%25F0%259F%2593%2590-DesignLibrary2.0---VAMobile%3Ftype%3Ddesign%26node-id%3D3859%253A7737%26t%3DLWuS4oyNuplsuZBa-1" allowfullscreen></iframe>
-
-## 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.
+See documentation in [Design System](/va-mobile-app/design/Foundation/Design%20tokens/Typography).