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

This is the final port of the Codebox component recently deleted

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 CodeBox within the Common directory that contains all the new code.
• Use the new Button component introduced within feat: add Button component #5783
• Use the new Notification component introduced within Create Notification Component #5948
• Use the new Tabs and Tab components introduced within Create Tab and Tabs components #5817 to support 1 to many files
• Use the useCopyToClipboard.ts hook that already exists.
  • onClick of the Copy to clipboard button, show the Notification and copy the contents of the current tab using the hook.
  • Disable the button's click handler functionality during this state
• The @heroicons/react module has the icon document-duplicate available for use. This is a slight variant of the Figma, as the icon in the design is not available.
• Add a storybook story file components/Common/Codebox/index.stories.tsx which exercises each of the component's states.
• Note: per a design decision, we will only use dark mode (Nord theme) of shiki, despite the screenshot and figma still displaying a light mode
• Copy to clipboard must be internationalized. Add a new key components.common.codebox.copy to the i18n/locales/en.json file. FormattedMessage from react-intl should be used to reference the key. Look for examples elsewhere in the codebase.

Suggested props include:

• language (string): displays in the bottom left of the Codebox, labeling the type of content
• linkText (string, optional): displays in the top-right of the Codebox if present and linkUrl
• linkUrl (typeof next/link or ??, optional): the location the user navigates to when linkText is clicked
• children in the form of Tabs and Tabs

Example of linkText and linkUrl:

There are 3 states to capture within styles and stories:

• 1 file format (such as bash)
• 2 files (CJS and ESM)
• linkText and linkUrl present