Create Storybook Components for Prefill Pattern in VADS Guidance [stretch goal]

[bellepx0]

Develop Storybook components for the prefill pattern to be included in the VADS guidance documentation.

1. Create “Patterns” Folder in VADS Storybook
   • Main parent folder: Prefill
   • Two sub-folders: Components and Usage Examples
2. Components to be Created: a) Prefill Alert Component -> Three variations:
   • Unauthenticated Alert
   • Prefilled Info Alert
   • Signed In Alert b) Locked Gray Card Component c) Unlockable White Card with Border Component 3) Usage Examples --> Mock form samples demonstrating how each component is to be integrated into the form

**Keep in mind for following ticket: how and where to share the Storybook components. Potential places include the VA Forms Library docs and the Form Digitization Development Guide.

Acceptance Criteria:

• [ ] All components should be visually aligned with the designs.

[bellepx0]

Created draft PR for Matt to review and get team feedback

[bellepx0]

Update: Moved the PR out of draft. Tagged Matt as a reviewer letting him know we'd like his feedback. Also added the PR link to the collab cycle ticket under "Staging Review" > "Staging review artifacts" > "Required Artifacts".

[beckyphung]

@msbtterswrth Can we make sure to align on the same names of things across all of the different artifacts we're creating. For example, in our GitHub draft for the "Know when their information is prefilled" page, we use editable and uneditable to describe the types of cards.

In the storybook, I see we're using locked and unlocked. Editable and uneditable imo is clearer.

[msbtterswrth]

CC @bellepx0 if we could update that please

[bellepx0]

@beckyphung @msbtterswrth Updated all instances of locked and unlocked to editable and uneditable respectively.