forked from nodejs/nodejs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create tabs component (nodejs#5964)
* feat(Tabs): create component * chore: update collaborator guide * fix: use open sans font * refactor: nest tabs trigger class * refactor: format * docs: add radix url * style: ident * refactor: remove decorated component * refactor: use tabs prop * refactor: change tab default value * refactor: remove duplicated defaultValue prop * refactor: remove react globals types * refactor: review * test(Tabs): create initial unit tests * refactor: remove tabs content * fix: fixes * test: fix keys * fix: package-lock --------- Co-authored-by: Claudio Wunder <[email protected]>
- Loading branch information
Showing
8 changed files
with
199 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import * as TabsPrimitive from '@radix-ui/react-tabs'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| import Tabs from '../index'; | ||
|
|
||
| describe('Tabs', () => { | ||
| const tabs = [ | ||
| { key: 'package', label: 'Package Manager' }, | ||
| { key: 'prebuilt', label: 'Prebuilt Installer' }, | ||
| { key: 'source', label: 'Source Code' }, | ||
| ]; | ||
|
|
||
| beforeEach(() => { | ||
| render( | ||
| <Tabs tabs={tabs} defaultValue="package"> | ||
| <TabsPrimitive.Content value="package"> | ||
| Package Manager | ||
| </TabsPrimitive.Content> | ||
| <TabsPrimitive.Content value="prebuilt"> | ||
| Prebuilt Installer | ||
| </TabsPrimitive.Content> | ||
| <TabsPrimitive.Content value="source"> | ||
| Source Code | ||
| </TabsPrimitive.Content> | ||
| </Tabs> | ||
| ); | ||
| }); | ||
|
|
||
| it('renders the correct number of tabs', () => { | ||
| const tabElements = screen.getAllByRole('tab'); | ||
| expect(tabElements).toHaveLength(3); | ||
| }); | ||
|
|
||
| it('renders the correct tab content when clicked', async () => { | ||
| const user = userEvent.setup(); | ||
|
|
||
| const beforeActiveTabPanel = screen.getAllByRole('tabpanel'); | ||
|
|
||
| expect(beforeActiveTabPanel).toHaveLength(1); | ||
|
|
||
| expect(beforeActiveTabPanel.at(0)).toHaveTextContent('Package Manager'); | ||
|
|
||
| const tabElements = screen.getAllByRole('tab'); | ||
| await user.click(tabElements.at(-1)); | ||
|
|
||
| const afterActiveTabPanel = screen.getAllByRole('tabpanel'); | ||
|
|
||
| expect(afterActiveTabPanel).toHaveLength(1); | ||
|
|
||
| expect(afterActiveTabPanel.at(0)).toHaveTextContent('Source Code'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .tabsList { | ||
| @apply flex | ||
| gap-1 | ||
| font-open-sans; | ||
|
|
||
| .tabsTrigger { | ||
| @apply border-b-2 | ||
| border-b-transparent | ||
| px-1 | ||
| pb-[11px] | ||
| text-sm | ||
| font-semibold | ||
| text-neutral-800 | ||
| data-[state=active]:border-b-green-600 | ||
| data-[state=active]:text-green-600 | ||
| dark:text-neutral-200 | ||
| dark:data-[state=active]:border-b-green-400 | ||
| dark:data-[state=active]:text-green-400; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import * as TabsPrimitive from '@radix-ui/react-tabs'; | ||
| import type { Meta as MetaObj, StoryObj } from '@storybook/react'; | ||
|
|
||
| import Tabs from './index'; | ||
|
|
||
| type Story = StoryObj<typeof Tabs>; | ||
| type Meta = MetaObj<typeof Tabs>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| defaultValue: 'prebuilt', | ||
| tabs: [ | ||
| { | ||
| key: 'package', | ||
| label: 'Package Manager', | ||
| }, | ||
| { | ||
| key: 'prebuilt', | ||
| label: 'Prebuilt Installer', | ||
| }, | ||
| { | ||
| key: 'source', | ||
| label: 'Source Code', | ||
| }, | ||
| ], | ||
| children: ( | ||
| <> | ||
| <TabsPrimitive.Content value="package"> | ||
| Package Manager | ||
| </TabsPrimitive.Content> | ||
| <TabsPrimitive.Content value="prebuilt"> | ||
| Prebuilt Installer | ||
| </TabsPrimitive.Content> | ||
| <TabsPrimitive.Content value="source"> | ||
| Source Code | ||
| </TabsPrimitive.Content> | ||
| </> | ||
| ), | ||
| }, | ||
| }; | ||
|
|
||
| export default { component: Tabs } as Meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import * as TabsPrimitive from '@radix-ui/react-tabs'; | ||
| import classNames from 'classnames'; | ||
| import type { FC, PropsWithChildren } from 'react'; | ||
|
|
||
| import styles from './index.module.css'; | ||
|
|
||
| type Tab = { | ||
| key: string; | ||
| label: string; | ||
| }; | ||
|
|
||
| type TabsProps = { | ||
| tabs: Tab[]; | ||
| headerClassName?: string; | ||
| } & TabsPrimitive.TabsProps; | ||
|
|
||
| const Tabs: FC<PropsWithChildren<TabsProps>> = ({ | ||
| tabs, | ||
| headerClassName, | ||
| children, | ||
| ...props | ||
| }) => ( | ||
| <TabsPrimitive.Root {...props}> | ||
| <TabsPrimitive.List | ||
| className={classNames(styles.tabsList, headerClassName)} | ||
| > | ||
| {tabs.map(tab => ( | ||
| <TabsPrimitive.Trigger | ||
| key={tab.key} | ||
| value={tab.key} | ||
| className={styles.tabsTrigger} | ||
| > | ||
| {tab.label} | ||
| </TabsPrimitive.Trigger> | ||
| ))} | ||
| </TabsPrimitive.List> | ||
| {children} | ||
| </TabsPrimitive.Root> | ||
| ); | ||
|
|
||
| export default Tabs; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters