diff --git a/VAMobile/documentation/design/Components/Selection and input/Checkbox.md b/VAMobile/documentation/design/Components/Selection and input/Checkbox.md new file mode 100644 index 00000000000..944ece80c14 --- /dev/null +++ b/VAMobile/documentation/design/Components/Selection and input/Checkbox.md @@ -0,0 +1,53 @@ +--- +title: Checkbox +--- + +Allows users to select one or more items from a list. Checkboxes are an easily understandable way to indicate that users can select one or more answers to a question or items from a list. + +## Examples + +### Checkbox + +#### Default +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox--default) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-384&t=iHMS9U3pTWPZb8Qb-4) + + +#### Tile +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox--tile) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-384&t=iHMS9U3pTWPZb8Qb-4) + + +#### Error +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox--error) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-384&t=iHMS9U3pTWPZb8Qb-4) + + +### Checkbox Group + +#### Default +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox-group--default) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-441&t=iHMS9U3pTWPZb8Qb-4) + + +#### Tile +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox-group--tile) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-441&t=iHMS9U3pTWPZb8Qb-4) + + +#### Error +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox-group--error) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=1415-441&t=iHMS9U3pTWPZb8Qb-4) + + +## Usage +[Refer to the VA Design System for usage guidance](https://design.va.gov/components/form/checkbox) + +## Code usage +**Open Storybook**: [Checkbox](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox--docs) | [Checkbox Group](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/checkbox-group--docs) + +## Content considerations +* Refer to the [VA Design System for content considerations](https://design.va.gov/components/form/checkbox#usage) + +## Accessibility considerations +* Refer to the [VA Design System for accessibility considerations](https://design.va.gov/components/form/checkbox#accessibility-considerations) +* Screenreaders should announce the name, role, and state of each checkbox. + +### Related +* [Checkbox - VA Design System](https://design.va.gov/components/form/checkbox) +* [Checkbox - USWDS](https://designsystem.digital.gov/components/checkbox/) +* [Checkbox - Material Design](https://m3.material.io/components/checkbox/overview) \ No newline at end of file diff --git a/VAMobile/documentation/design/intro.md b/VAMobile/documentation/design/intro.md index 4c2a3194b5d..1ac79477e1d 100644 --- a/VAMobile/documentation/design/intro.md +++ b/VAMobile/documentation/design/intro.md @@ -32,6 +32,9 @@ A system to help you write, design, and build digital services on the VA Mobile ### Navigation - [Segmented control](/va-mobile-app/design/Components/Navigation/Secondary/SegmentedControl) +### Selection and input +- [Checkbox](/va-mobile-app/design/Components/Selection%20and%20input/Checkbox) + ----- ## Design system team diff --git a/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/Checkbox.md b/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/Checkbox.md index b9a60d55352..a4211aeb5fb 100644 --- a/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/Checkbox.md +++ b/VAMobile/documentation/docs/Flagship design library/Components/Selection and Input/Form Elements/Checkbox.md @@ -2,41 +2,4 @@ title: Checkbox --- -Allows users to select one or more items from a list. Checkboxes are an easily understandable way to indicate that users can select one or more answers to a question or items from a list. - -## Examples - -### Single - -#### Master component - - -#### Examples - - -### Group - -#### Master component - - -#### Examples - - -## Usage - -[Refer to the VA Design System for usage guidance](https://design.va.gov/components/form/checkbox) - -## Content considerations -* Refer to the [VA Design System for content considerations](https://design.va.gov/components/form/checkbox/#content-considerations) - -## Accessibility considerations -* Refer to the [VA Design System for accessibility considerations](https://design.va.gov/components/form/checkbox/#accessibility-considerations) -* Screenreaders should announce the name, role, and state of each checkbox. - -## Code usage -Link to Storybook coming soon - -## Related -* [Checkbox - VA Design System](https://design.va.gov/components/form/checkbox) -* [Checkbox - USWDS](https://designsystem.digital.gov/components/checkbox/) -* [Checkbox - Material Design](https://m3.material.io/components/checkbox/overview) \ No newline at end of file +See documentation in [Design System](/va-mobile-app/design/Components/Selection%20and%20input/Checkbox). \ No newline at end of file diff --git a/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md b/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md index 158174a5511..a6aa01e8ad8 100644 --- a/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md +++ b/VAMobile/documentation/docs/UX/How-We-Work/figma-permissions.md @@ -12,13 +12,13 @@ All of our Figma files are set so “**anyone with the link can view**.” If yo ### Adding members or guests to the team 1. Admin, Owner, or Editor [invites new Member or Guest to VA Mobile App team](https://help.figma.com/hc/en-us/articles/360040453113-Add-members-or-guests-to-an-organization) as an Editor or Viewer. - 1. **Members** must have an Ad Hoc email address and can be set as an Editor or Viewer. - 2. **Guests** will not have an Ad Hoc email address and will automatically be set as a Viewer-restricted. + 1. **Members** must have an Ad Hoc email address and can be set as an Editor or Viewer. Typically, only designers on the VA Mobile App team should be Editors. All other team members should be Viewers. + 2. **Guests** will not have an Ad Hoc email address and will automatically be set as a Viewer. 2. **Member** or **Guest** accepts the invitation to join the VA Mobile App team. 3. In Figma, a **Member** or **Guest** will need to switch to the Ad Hoc organization in the top left corner, click on All Teams, and open the VA Mobile App team’s space. 4. **Member** or **Guest** can now see all of our Figma files. 3. **Members** will be able to Edit or View files depending on their permissions. - 4. **Guests** will be able to view files and use the library in their private drafts. + 4. **Guests** will be able to view files and use the library in their private drafts. If a guest needs edit access to a particular file, they can be added as an Editor in that file. #### Team permissions by role