fix: Language selector: add prop for display lang for bug fix

[kleinschmidtj]

Summary

• Added a new optional prop to handle cases where the current language is persisted and the component should know which language to display. Defaults to setting the displayed language as the first item in the langs array.
• Broken out the drop down part of the selector into a separate file.
• Dropdown prefers to set the label with the new prop's label.

Related Issues or PRs

closes #2621

How To Test

Use the new prop and confirm it overrides the existing behavior where the label is pulled from the first item in the langs array.

Screenshots (optional)

[github-actions]

	Warnings
⚠️	This PR does not include changes to tests, even though it affects source code.
⚠️	It looks like there are new component (JSX/TSX) files, but the entrypoint (index.ts) has not changed. - Did you forget to export new components from the library entrypoint?

Generated by 🚫 dangerJS against 480c2e3

[werdnanoslen]

I can't get the 2-lang variant to toggle (tested on Mac Firefox)

[kleinschmidtj]

@werdnanoslen Yeah, these stories are misleading. That prop would be used with a saved i18n locale. So instead of passing a static value as in the story, it would use i18n.language in conjunction with onClick() handlers that would use i18n.changeLanguage().

I'll make sure to write unit tests with this in mind, but maybe we consider getting rid of the stories.

[brandonlenz]

@werdnanoslen Yeah, these stories are misleading. That prop would be used with a saved i18n locale. So instead of passing a static value as in the story, it would use i18n.language in conjunction with onClick() handlers that would use i18n.changeLanguage().

I'll make sure to write unit tests with this in mind, but maybe we consider getting rid of the stories.

@kleinschmidtj if I'm understanding correctly, it should be possible to give your storybook example a useState (see Pagination.stories.tsx as an example), where the react state can serve as a mock for "saving and pulling the value from somewhere"

[kleinschmidtj]

@werdnanoslen Yeah, these stories are misleading. That prop would be used with a saved i18n locale. So instead of passing a static value as in the story, it would use i18n.language in conjunction with onClick() handlers that would use i18n.changeLanguage().
I'll make sure to write unit tests with this in mind, but maybe we consider getting rid of the stories.

@kleinschmidtj if I'm understanding correctly, it should be possible to give your storybook example a useState (see Pagination.stories.tsx as an example), where the react state can serve as a mock for "saving and pulling the value from somewhere"

Oh excellent @brandonlenz ! I have never done that and wasn't sure that was something I could do. I will look there. Thank you.

[kleinschmidtj]

@brandonlenz @werdnanoslen Created two templates to test this out:

http://localhost:9009/?path=/story/components-languageselector--languages-display-prop-sandbox

http://localhost:9009/?path=/story/components-languageselector--languages-display-more-than-two-languages-prop-sandbox

Thanks to you both!

[werdnanoslen]

Approving conceptually but I haven't reviewed the code. Good addition!

[brandonlenz]

@kleinschmidtj Nice! 🚢