Issue 442/basic information form

[andycwilliams]

This PR:

Resolves #442

Just a draft for now to make sure I'm on the right track.

1. Adds (basic) styling to BasicInfo.jsx
2. Adds logic from #515

Screenshots (if applicable):

Future Steps/PRs Needed to Finish This Work (optional):

1. Ensure this component is properly implementing the useCivicProfile hook
2. Ensure the labeling (such as all the ids and names) is consistent and adheres to any standards (if necessary)

Issues needing discussion/feedback (optional):

1. What styling is needed for each form as well as overall Civic Profile section

[timbot1789]

This all looks like it's on the right track.

• For the placeholder text, I'd say legal first name and legal last name. We want to emphasize that the data put here should be usable in a legal context.
• I think there's a typo in the test that's causing it to fail. You're trying to select a textbox role, but the first name is actually an input role.

[xscottxbrownx]

I haven't looked at this deeply yet...

But, personally don't like the date format - not a big deal though. Still logical.

When does submit button become active? Seems like it's disabled because isSuccess is false, but can't switch isSuccess to true without the button it seems.

And to hit on what Tim was saying more about the test...

I was able to get it passing by matching the label of each <TextField>:
const firstNameField = getByRole('textbox', { name: 'Legal first name' }); worked.

[xscottxbrownx]

I'm not really sure why but two things:

1. the margin between the first input and second is like double the others on mobile
2. the clear function doesn't seem to clear the date field

[andycwilliams]

Opening up this PR now. That final test still isn't passing, so my hope right now is to comment that one out and create a separate issue to address it.

Also please ignore my above mis-click.

[leekahung]

Opening up this PR now. That final test still isn't passing, so my hope right now is to comment that one out and create a separate issue to address it.

Think we could make an exception for this one. We could comment on the unit test for the basic information form for now, but like what you've mentioned we'll have to open an issue/bug report to fix it.

Can approve this after the merge conflict resolution.

[leekahung]

I believe this test is failing because the input field for the date picker is not your typical text field. You can't use the same approach to test the data picker. The same would be said for legalGender which is a select field.

If you'd like, we can open up another issue to write unit tests for these inputs.

[leekahung]

Hey Andy, I've finished reviewing the PR. Just one minor feedback on potential changes (see feedback), but it seems to be working overall, so I'm approving.

[leekahung]

Not too big of an issue since the feature appears to be working as intended, however, MUI is complaining about the input fields if it's not using one of the values from the option elements.

Think we could simply set the defaultValue, state, and clear value for gender as the number 9 to work around the problem. So Line 36, Line 75, and Line 133.