-
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.
* chore: docs * feat: toggle component * feat: toggle component tests * feat: toggle component docs
- Loading branch information
Showing
12 changed files
with
341 additions
and
59 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
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,70 @@ | ||
| import { Toggle, ToggleItemProps } from '@droz-js/visu' | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { Alien } from 'phosphor-react' | ||
|
|
||
| const meta: Meta<ToggleItemProps> = { | ||
| title: 'Toggle/Item', | ||
| component: Toggle.Item, | ||
| argTypes: { | ||
| children: { | ||
| control: 'none', | ||
| table: { | ||
| type: { | ||
| summary: 'React.ReactNode', | ||
| }, | ||
| }, | ||
| type: { name: 'other', required: false, value: 'React.ReactNode' }, | ||
| }, | ||
| text: { | ||
| control: 'text', | ||
| description: 'Aplica o text em ToggleItem', | ||
| table: { | ||
| type: { summary: 'text' }, | ||
| }, | ||
| type: { name: 'string', required: false }, | ||
| }, | ||
| value: { | ||
| control: 'text', | ||
| description: 'Aplica o value em ToggleItem', | ||
| table: { | ||
| type: { summary: 'text' }, | ||
| }, | ||
| type: { name: 'string', required: true }, | ||
| }, | ||
| icon: { | ||
| control: 'text', | ||
| description: 'Aplica o icon em ToggleItem', | ||
| table: { | ||
| type: { summary: 'text' }, | ||
| }, | ||
| type: { name: 'string', required: false }, | ||
| }, | ||
| notification: { | ||
| control: 'boolean', | ||
| description: 'Aplica o notification em ToggleItem', | ||
| table: { | ||
| type: { summary: 'boolean' }, | ||
| }, | ||
| type: { name: 'boolean', required: false }, | ||
| }, | ||
| }, | ||
| args: { | ||
| children: '', | ||
| text: 'Alien', | ||
| icon: <Alien />, | ||
| value: 'alien', | ||
| }, | ||
| } as Meta<ToggleItemProps> | ||
|
|
||
| export default meta | ||
| type ToggleItemStory = StoryObj<ToggleItemProps> | ||
|
|
||
| export const Comum: ToggleItemStory = { | ||
| render: (args: ToggleItemProps) => { | ||
| return ( | ||
| <Toggle.Root type="single" expanded> | ||
| <Toggle.Item {...args} /> | ||
| </Toggle.Root> | ||
| ) | ||
| }, | ||
| } |
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,61 @@ | ||
| import { Toggle, ToggleRootProps } from '@droz-js/visu' | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { Alien, FlyingSaucer, Planet } from 'phosphor-react' | ||
|
|
||
| const meta: Meta<ToggleRootProps> = { | ||
| title: 'Toggle/Toggle', | ||
| component: Toggle.Root, | ||
| argTypes: { | ||
| children: { | ||
| control: 'none', | ||
| table: { | ||
| type: { | ||
| summary: 'React.ReactNode', | ||
| }, | ||
| }, | ||
| type: { name: 'other', required: false, value: 'React.ReactNode' }, | ||
| }, | ||
| expanded: { | ||
| control: 'boolean', | ||
| description: 'Aplica o expanded em ToggleToggle', | ||
| table: { | ||
| type: { | ||
| summary: 'boolean', | ||
| }, | ||
| }, | ||
| type: { name: 'boolean', required: false }, | ||
| defaultValue: true, | ||
| }, | ||
| type: { | ||
| control: 'inline-radio', | ||
| description: 'Aplica o type em ToggleToggle', | ||
| options: ['multiple', 'single'] as ToggleRootProps['type'][], | ||
| table: { | ||
| type: { | ||
| summary: ['multiple', 'single'].join('|'), | ||
| }, | ||
| }, | ||
| type: { name: 'string', required: true }, | ||
| }, | ||
| }, | ||
| args: { | ||
| children: '', | ||
| type: 'single', | ||
| expanded: true, | ||
| }, | ||
| } as Meta<ToggleRootProps> | ||
|
|
||
| export default meta | ||
| type ToggleRootStory = StoryObj<ToggleRootProps> | ||
|
|
||
| export const Comum: ToggleRootStory = { | ||
| render: (args: ToggleRootProps) => { | ||
| return ( | ||
| <Toggle.Root {...args}> | ||
| <Toggle.Item value="ufo" text="UFO" icon={<FlyingSaucer />} /> | ||
| <Toggle.Item value="alien" text="Alien" icon={<Alien />} /> | ||
| <Toggle.Item value="planet" text="Planet" icon={<Planet />} /> | ||
| </Toggle.Root> | ||
| ) | ||
| }, | ||
| } |
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
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,55 @@ | ||
| import { Toggle } from '@library' | ||
|
|
||
| import { fireEvent, render, screen } from '@testing-library/react' | ||
| import { clsx } from 'clsx' | ||
|
|
||
| jest.mock('clsx', () => { | ||
| return { | ||
| clsx: jest.fn().mockImplementation(() => clsx), | ||
| } | ||
| }) | ||
|
|
||
| describe('ToggleRoot tests', () => { | ||
| it('Should render a ToggleRoot element', () => { | ||
| render(<Toggle.Root type="single" data-testid="element"></Toggle.Root>) | ||
| const element = screen.queryByTestId('element') | ||
|
|
||
| expect(element).toBeDefined() | ||
| }) | ||
|
|
||
| it('Should Toggle single element', () => { | ||
| render( | ||
| <Toggle.Root type="single" data-testid="element"> | ||
| <Toggle.Item value="op1">op1</Toggle.Item> | ||
| <Toggle.Item value="op2">op2</Toggle.Item> | ||
| </Toggle.Root>, | ||
| ) | ||
| const element = screen.queryByTestId('element') | ||
|
|
||
| if (element?.children[0]) fireEvent.click(element.children[0]) | ||
| expect(element?.children[0]).toHaveAttribute('data-state', 'on') | ||
| expect(element?.children[1]).toHaveAttribute('data-state', 'off') | ||
|
|
||
| if (element?.children[1]) fireEvent.click(element.children[1]) | ||
| expect(element?.children[0]).toHaveAttribute('data-state', 'off') | ||
| expect(element?.children[1]).toHaveAttribute('data-state', 'on') | ||
| }) | ||
|
|
||
| it('Should Toggle multiple element', () => { | ||
| render( | ||
| <Toggle.Root type="multiple" data-testid="element"> | ||
| <Toggle.Item value="op1">op1</Toggle.Item> | ||
| <Toggle.Item value="op2">op2</Toggle.Item> | ||
| </Toggle.Root>, | ||
| ) | ||
| const element = screen.queryByTestId('element') | ||
|
|
||
| if (element?.children[0]) fireEvent.click(element.children[0]) | ||
| expect(element?.children[0]).toHaveAttribute('data-state', 'on') | ||
| expect(element?.children[1]).toHaveAttribute('data-state', 'off') | ||
|
|
||
| if (element?.children[1]) fireEvent.click(element.children[1]) | ||
| expect(element?.children[0]).toHaveAttribute('data-state', 'on') | ||
| expect(element?.children[1]).toHaveAttribute('data-state', 'on') | ||
| }) | ||
| }) |
Oops, something went wrong.