Incorporate Design System Checkbox and Checkbox Group Components into the Flagship App - Global

[kellylein]

Project Status Overview

Project Objective:

• The Design System team will be creating new Checkbox and Checkbox Group components. This Epic covers the Flagship Global team implementing that new component in the Health and Benefits sections of the app.
• The Flagship team will give feedback on the process to the Design System team to help them improve the Design System.

Current Dependencies / Blockers

Blockers

Blocker	Team / Owner	Est to Resolution

Monthly Updates

Updates

Month	Progress & Key Accomplishments	Issues/Risks/Blockers
date	update

Implementation Notes:
some technical recommendations from tech discovery (may change during implementation):

• There is a new Tile variant that's recommended for use on touch screens by USWDS/VADS. The design system team recommends using the Tile variant in the mobile app. Flagship engineers should consult with a designer to determine where to implement the new Tile variant.
• Both Checkbox and CheckboxGroup expect that the parent component handles the checked/unchecked state of the checkboxes via the checked and selectedItems props respectively
• FormWrapper Compatibility
  • Checkbox
    • In the app, FormWrapper currently uses the VASelector component to display checkboxes or radio buttons
    • For single checkboxes, recommend that the engineer update VASelector to return the DS Checkbox component by default or if SelectorType === Checkbox
    • Checkboxes in the form of VASelector are used in the app on the following screens:
      • AskForClaimDecision
      • UploadFile
      • UploadOrAddPhotos
      • EditAddressScreen
      • EditDirectDepositScreen
  • CheckboxGroup
    • FormWrapper doesn't currently support CheckboxGroup's, but could be updated to include it. I would check with @dumathane if FormWrapper is something that the team will continue to use in the future.
    • There are currently no uses of CheckboxGroup's anywhere in the app
  • Both Checkbox and CheckboxGroup can be used without FormWrapper

Additional notes:

• Based on Design System epic: https://app.zenhub.com/workspaces/va-mobile-60f1a34998bc75000f2a489f/issues/gh/department-of-veterans-affairs/va-mobile-library/69