From 5b440c55f1dc1141a63594faefe7cce02cbf5580 Mon Sep 17 00:00:00 2001 From: jessicawoodin <82840483+jessicawoodin@users.noreply.github.com> Date: Fri, 4 Oct 2024 14:24:50 -0400 Subject: [PATCH 1/3] Update figma-permissions.md --- .../documentation/docs/UX/How-We-Work/figma-permissions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 From b66bd4d8de8fde62b1449bffad91a7f24de3d663 Mon Sep 17 00:00:00 2001 From: jessicawoodin <82840483+jessicawoodin@users.noreply.github.com> Date: Mon, 7 Oct 2024 09:34:31 -0400 Subject: [PATCH 2/3] Add Checkbox documentation --- .../Selection and input/Checkbox.md | 61 +++++++++++++++++++ VAMobile/documentation/design/intro.md | 3 + 2 files changed, 64 insertions(+) create mode 100644 VAMobile/documentation/design/Components/Selection and input/Checkbox.md 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..40017e931ae --- /dev/null +++ b/VAMobile/documentation/design/Components/Selection and input/Checkbox.md @@ -0,0 +1,61 @@ +--- +title: Checkbox +--- + +Snackbars provide feedback regarding API interactions at the bottom of the screen. + +## Examples + +### Default +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--default) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=263-702&t=1BgtKDvOeoxfzmzR-4) + + +### Variations +**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--with-action) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=263-702&t=1BgtKDvOeoxfzmzR-4) + + +## Usage + +### When to use Snackbar +* **If a user action that triggers an API call is successful or results in an error.** The snackbar may allow users to take an action on the feedback such as trying again or undoing the action. + +### How this component works +- The **icon** will be relevant to the state of the snackbar (success or error). +- The **text content** is a short description of the success or error action. It is used to inform the status of an action. +- The **left action button** is optional and should only be used when there is an additional action for the user to take on the snackbar. The left action button can be an "Undo" or "Try again" button. + - The undo button allows a user to reverse a successful action. When the action is successfully reversed, another snackbar will open informing the successful undo. The new snackbar will only have the dismiss button. + - The try again button allows a user to initiate a failed action. This will prompt the system to redo the action and either produce a successful or unsuccessful snackbar. +- The **right action button** is a dismiss button that allows a user to manually close the snackbar. + +### Behavior +- The current iteration of the snackbar will only be dismissible by the user selecting the “Dismiss” button, another snackbar opening, or the user navigating to a different screen. Additional iterations may incorporate a user-defined timebox on the snackbar. + +### Placement +- The snackbar always appears at the bottom of the screen on top of the other content. + +### Instances of this component in production +- Default snackbar displays in Messages when a draft is saved successfully. +- "Undo" snackbar appears in Messages when moving a message to a folder. +- "Try again" snackbar appears in Messages when a draft is not saved successfully. + +## Code usage +[Open Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--docs) + +## Content considerations +- Body copy for a successful snackbar states the item and the action that was performed on the item. Examples: Draft saved, Appointment canceled +- Body copy for an unsuccessful snackbar uses the same copy as its successful version with the addition of the word `not`. Examples: Draft not saved, Appointment not canceled +- Use only 2-3 words for successful snackbars. +- Use only 3-4 words for unsuccessful snackbars. +- Use `Undo` or `Try again` for optional left action button. (We use `Try again` instead of `Retry` to align with VA.gov and to reduce cognitive load.) +- Use `Dismiss` for right action button. +- Don't use words like `successful` or `failed` +- Don't use any punctuation + +## Accessibility considerations +- To ensure that the snackbar and its content is accessible to all users, the snackbar should not close on its own or after a certain amount of time. The snackbar can only be closed by the user selecting the “dismiss” button, another snackbar opening, or the user navigating to a different screen. +- Screen readers should automatically announce when a snackbar opens and begin reading its content. The screen reader will announce the component as an Alert as soon as the action is completed. Each action will be announced as a button. +- If a screen has bottom navigation, the snackbar should open above the navigation. +- There should only ever be one snackbar on the screen. Opening a new snackbar will close the previous snackbar. + +### Related +* [Snackbar - Material Design](https://m3.material.io/components/snackbar/overview) 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 From b6fccd4a176d395857b3fc46c15cefb2c9c84973 Mon Sep 17 00:00:00 2001 From: jessicawoodin <82840483+jessicawoodin@users.noreply.github.com> Date: Mon, 7 Oct 2024 10:22:22 -0400 Subject: [PATCH 3/3] Add documentation --- .../Selection and input/Checkbox.md | 70 ++++++++----------- .../Form Elements/Checkbox.md | 39 +---------- 2 files changed, 32 insertions(+), 77 deletions(-) diff --git a/VAMobile/documentation/design/Components/Selection and input/Checkbox.md b/VAMobile/documentation/design/Components/Selection and input/Checkbox.md index 40017e931ae..944ece80c14 100644 --- a/VAMobile/documentation/design/Components/Selection and input/Checkbox.md +++ b/VAMobile/documentation/design/Components/Selection and input/Checkbox.md @@ -2,60 +2,52 @@ title: Checkbox --- -Snackbars provide feedback regarding API interactions at the bottom of the screen. +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 -### Default -**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--default) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=263-702&t=1BgtKDvOeoxfzmzR-4) - +### Checkbox -### Variations -**Open in**: [Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--with-action) | [Figma](https://www.figma.com/design/Zzt8z60hCtdEzXx2GFWghH/%F0%9F%93%90-Component-Library---Design-System---VA-Mobile?node-id=263-702&t=1BgtKDvOeoxfzmzR-4) - +#### 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) + -## Usage +#### 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) + -### When to use Snackbar -* **If a user action that triggers an API call is successful or results in an error.** The snackbar may allow users to take an action on the feedback such as trying again or undoing the action. +### Checkbox Group -### How this component works -- The **icon** will be relevant to the state of the snackbar (success or error). -- The **text content** is a short description of the success or error action. It is used to inform the status of an action. -- The **left action button** is optional and should only be used when there is an additional action for the user to take on the snackbar. The left action button can be an "Undo" or "Try again" button. - - The undo button allows a user to reverse a successful action. When the action is successfully reversed, another snackbar will open informing the successful undo. The new snackbar will only have the dismiss button. - - The try again button allows a user to initiate a failed action. This will prompt the system to redo the action and either produce a successful or unsuccessful snackbar. -- The **right action button** is a dismiss button that allows a user to manually close the snackbar. +#### 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) + -### Behavior -- The current iteration of the snackbar will only be dismissible by the user selecting the “Dismiss” button, another snackbar opening, or the user navigating to a different screen. Additional iterations may incorporate a user-defined timebox on the snackbar. +#### 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) + -### Placement -- The snackbar always appears at the bottom of the screen on top of the other content. +#### 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) + -### Instances of this component in production -- Default snackbar displays in Messages when a draft is saved successfully. -- "Undo" snackbar appears in Messages when moving a message to a folder. -- "Try again" snackbar appears in Messages when a draft is not saved successfully. +## Usage +[Refer to the VA Design System for usage guidance](https://design.va.gov/components/form/checkbox) ## Code usage -[Open Storybook](https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/docs/snackbar--docs) +**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 -- Body copy for a successful snackbar states the item and the action that was performed on the item. Examples: Draft saved, Appointment canceled -- Body copy for an unsuccessful snackbar uses the same copy as its successful version with the addition of the word `not`. Examples: Draft not saved, Appointment not canceled -- Use only 2-3 words for successful snackbars. -- Use only 3-4 words for unsuccessful snackbars. -- Use `Undo` or `Try again` for optional left action button. (We use `Try again` instead of `Retry` to align with VA.gov and to reduce cognitive load.) -- Use `Dismiss` for right action button. -- Don't use words like `successful` or `failed` -- Don't use any punctuation +* Refer to the [VA Design System for content considerations](https://design.va.gov/components/form/checkbox#usage) ## Accessibility considerations -- To ensure that the snackbar and its content is accessible to all users, the snackbar should not close on its own or after a certain amount of time. The snackbar can only be closed by the user selecting the “dismiss” button, another snackbar opening, or the user navigating to a different screen. -- Screen readers should automatically announce when a snackbar opens and begin reading its content. The screen reader will announce the component as an Alert as soon as the action is completed. Each action will be announced as a button. -- If a screen has bottom navigation, the snackbar should open above the navigation. -- There should only ever be one snackbar on the screen. Opening a new snackbar will close the previous snackbar. +* 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 -* [Snackbar - Material Design](https://m3.material.io/components/snackbar/overview) +* [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/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