Merge pull request #9810 from department-of-veterans-affairs/jw-ds-pu…

…blish-checkbox Publish Checkbox documentation
department-of-veterans-affairs · Oct 7, 2024 · bfb5ee1 · bfb5ee1
2 parents 08b03a1 + c599d3b
commit bfb5ee1
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 41 deletions.
diff --git a/VAMobile/documentation/design/Components/Selection and input/Checkbox.md 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)
+<iframe width="620" height="250" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox--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/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)
+<iframe width="620" height="250" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox--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/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)
+<iframe width="620" height="250" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox--error&full=1&shortcuts=false&singleStory=true" allowfullscreen></iframe>
+
+### 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)
+<iframe width="620" height="500" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox-group--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/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)
+<iframe width="620" height="500" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox-group--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/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)
+<iframe width="620" height="500" alt="Image of component in Storybook" src="https://department-of-veterans-affairs.github.io/va-mobile-library/?path=/story/checkbox-group--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/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)
diff --git 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/...lagship design library/Components/Selection and Input/Form Elements/Checkbox.md b/...lagship 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
-<iframe width="800" height="450" alt="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-5372&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" alt="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-5373&mode=design&t=iS5TS46EHWCYCjWn-4" allowfullscreen></iframe>
-
-### Group
-
-#### Master component
-<iframe width="800" height="450" alt="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-7094&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" alt="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-7095&mode=design&t=iS5TS46EHWCYCjWn-4" allowfullscreen></iframe>
-
-## 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)
+See documentation in [Design System](/va-mobile-app/design/Components/Selection%20and%20input/Checkbox).
diff --git 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