Resolve 409 org selection component

[cannandev]

Changes proposed in this pull request:

• Break out into separate React components. Add prop for single vs multiple orgs.
• Change display of single org vs multiple orgs.

How to review these changes locally:

1. Check out and run this branch.
2. Navigate to http://localhost:3000/prototype/design-guide.
3. Head over to page.tsx, line 42. To display only one organization, set the prop to {true}.

<OrgPicker single={false} />

• Collapse the component and focus back on toggle button when: 1) clicking outside of the component, 2) tabbing outside, or 3) pressing ESC.
  ⚠️ Didn't want to block this PR review. We can create a ticket to add this behavior. I can work on it when I get back next week.

Related issues

Resolves #409
Blocks #408, #410
Needed for #518

Submitter checklist

• Added logging is not capturing sensitive data and is set to an appropriate level (DEBUG vs INFO etc)
• Updated relevant documentation (README, ADRs, explainers, diagrams)

Security considerations

Not sure if this is a security consideration, but confirmed with the engineers users will always be part of at least one organization. I did not add a state for no organization.

Design considerations

Discussed the following with Ethan, who gave a 👍🏾

• Using a cross-browser html entity for the View all organizations arrow, for now, instead of an icon. Looking into handling USWDS icons with the use option, so icon-size and text-color can be applied.
• Using scrollbar-width: thin for overflow. This doesn’t work on Safari or Android browsers. Fall back to browser default.
• A11Y: We'll keep an eye out for touch target, making sure they're large enough on mobile org links.

[beepdotgov]

@cannandev! I’m really excited to check out this PR — thanks so much for pulling it together.

I just pulled everything down, and I think I might be missing some styles? Most of the UI’s there, but it’s missing some design elements that were definitely in yesterday’s local preview:

Is everyone else seeing this locally, or is it just me?

[echappen]

@beepdotgov Here's a screen of what I see when I pull down the branch. There might be some caching going on, either with the build or with your browser. Try restarting the dev server, or hard refreshing the page:

[beepdotgov]

Thanks @echappen! Just restarted the server, cleared cache in two browsers, and even opened the PR in a third (Safari) I don’t use — still getting the same design. Wonder if something’s just not building correctly over here.

I’ll take my debugging questions to Slack!

Edit: Never mind! Was on the wrong branch 🤦🏻 (409/org-selection-component-ui, instead of 409/org-selection-component.) Sorry, folks.

[beepdotgov]

@cannandev Mentioned this in the comments, but this is looking very good. I left a few design notes, along with some non-blocking suggestions — please holler if anything’s unclear, or worth discussing further!

So exciting to see this in action! 🚀

[cannandev]

Hi @echappen and @beepdotgov I'm back 👋🏾

Ethan, I think I got everything. Just two notes:

The font size is around 16px; I was aiming for 15px. (Or the relative equivalent!)
The closest USWDS font equivalent is 14.9px. I hope that's ok! font-body-2xs

This got me wondering: what if we just loaded one image, and rotated it with a CSS transform? Could open up some fun transition opportunities.
I used an ease of 0.2s. That was the common timing I saw in our styles.scss. See #nav-global and dialong.overlayDrawer.

Do we want a global variable for transition timing?

[cannandev]

@echappen I added a super basic test using Testing Library fireEvent, since we're also using it for the test. LMK if I got this right.

[beepdotgov]

The closest USWDS font equivalent is 14.9px. I hope that's ok! font-body-2xs

That’s great, thanks @cannandev!

Do we want a global variable for transition timing?

Oh, great idea. If we’re using 0.2s everywhere, let’s go with that!

(I could see us potentially needing different timings for different kinds of animation, but we can cross that bridge when/if we get to it.)

[echappen]

@echappen I added a super basic test using Testing Library fireEvent, since we're also using it for the test. LMK if I got this right.

Tests look great to me, thanks for putting those together!

[echappen]

🥳

[beepdotgov]

🚀