Create LanguageDropDown component

[bmuenzenmeyer]

Create a LanguageDropDown component using the new figma design (direct link).

This component is an icon-button that when activated shows a dropdown of all locales. This is the final port of the LanguageDropDowncomponent recently deleted. Much of the functionality is the same to end users, but with different tech.

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.
• ❗ Review the translation guide, especially how to add new keys.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide
🌐 This story requires some internationalization support. Slow down!

• Create a new directory called LanguageDropDown within the Common directory that contains all the new code.
• Install @radix-ui/react-dropdown-menu for the accessible foundation and functionality we need.
  • Use DropdownMenu.Trigger to place the icon and button
  • The @heroicons/react module has the icon language available for use.
  • source the languages to display and the current value from the '@/hooks/useLocale' hook
  • implement a no-op for the click handler
• Add a storybook story file components/Common/LanguageDropDown/index.stories.tsx which exercises each of the component's states.
• Delete https://github.com/search?q=repo%3Anodejs%2Fnodejs.org%20useClickOutside&type=code after a quick search of the codebase - this was leftover from the previous design
• The aria-label must be internationalized, and in English state Choose Language. Add a new key components.common.languageDropdown.label to the i18n/locales/en.json file. useIntl from react-intl should be used to reference the key. Look for examples elsewhere in the codebase or in the old PR.

There are 2 states to capture within styles and stories:

• Light
• Dark

[burhanharoon]

Hi @bmuenzenmeyer, I would love to work on this, can you please assign me this so that I can start the development? Thanks!

[burhanharoon]

@bmuenzenmeyer nevermind about assigning, I just got to know you guys don't assign the issues, FYI I'm still working on this.

[ovflowd]

Also, for the Storybook, feel free to add mocked language options to the Dropdown, we don't need to get the real Dropdown options (Available Languages) for the Storybook.

[ovflowd]

It would also be interesting to add Unit Tests to ensure that onClick behaviour actually renders the Dropdown

[DhairyaMajmudar]

@ovflowd I am working on the model but not able to preview what I am building can you pls. help for that

[ovflowd]

@ovflowd I am working on the model but not able to preview what I am building can you pls. help for that

Read the Contribution Guidelines. It's all documented there. I'm not going to provide 1:1 support, sorry. (I don't have time for that)

[DhairyaMajmudar]

@ovflowd I am working on the model but not able to preview what I am building can you pls. help for that

Read the Contribution Guidelines. It's all documented there. I'm not going to provide 1:1 support, sorry. (I don't have time for that)

OkayJi 🥺

[ovflowd]

@ovflowd I am working on the model but not able to preview what I am building can you pls. help for that

Read the Contribution Guidelines. It's all documented there. I'm not going to provide 1:1 support, sorry. (I don't have time for that)

OkayJi 🥺

But is there anything specific that is not working? To preview changes you simply need to run npm run storybook then open http://localhost:6006

[Rounak-stha]

Hey, I was already working on this. As issues are not assigned, I didn't leave any comments.