|
1 | 1 | import React from 'react'
|
2 |
| -import type {Meta} from '@storybook/react' |
| 2 | +import type {Meta, StoryFn} from '@storybook/react' |
3 | 3 | import UnderlinePanels from './UnderlinePanels'
|
4 |
| -import type {ComponentProps} from '../../utils/types' |
5 | 4 |
|
6 |
| -export default { |
| 5 | +const meta: Meta<typeof UnderlinePanels> = { |
7 | 6 | title: 'Experimental/Components/UnderlinePanels',
|
8 | 7 | component: UnderlinePanels,
|
9 |
| -} as Meta<ComponentProps<typeof UnderlinePanels>> |
| 8 | + parameters: { |
| 9 | + controls: { |
| 10 | + expanded: true, |
| 11 | + }, |
| 12 | + }, |
| 13 | + argTypes: { |
| 14 | + 'aria-label': { |
| 15 | + type: { |
| 16 | + name: 'string', |
| 17 | + }, |
| 18 | + }, |
| 19 | + 'aria-labelledby': { |
| 20 | + type: { |
| 21 | + name: 'string', |
| 22 | + }, |
| 23 | + }, |
| 24 | + id: { |
| 25 | + type: { |
| 26 | + name: 'string', |
| 27 | + }, |
| 28 | + }, |
| 29 | + loadingCounters: { |
| 30 | + control: { |
| 31 | + type: 'boolean', |
| 32 | + }, |
| 33 | + }, |
| 34 | + }, |
| 35 | + args: { |
| 36 | + 'aria-label': 'Select a tab', |
| 37 | + 'aria-labelledby': 'tab', |
| 38 | + id: 'test', |
| 39 | + loadingCounters: false, |
| 40 | + }, |
| 41 | +} |
10 | 42 |
|
11 |
| -export const Default = () => ( |
12 |
| - <UnderlinePanels aria-label="Select a tab"> |
13 |
| - <UnderlinePanels.Tab>Tab 1</UnderlinePanels.Tab> |
14 |
| - <UnderlinePanels.Tab>Tab 2</UnderlinePanels.Tab> |
15 |
| - <UnderlinePanels.Tab>Tab 3</UnderlinePanels.Tab> |
16 |
| - <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel> |
17 |
| - <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel> |
18 |
| - <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel> |
19 |
| - </UnderlinePanels> |
20 |
| -) |
| 43 | +export default meta |
| 44 | + |
| 45 | +export const Default: StoryFn<typeof UnderlinePanels> = () => { |
| 46 | + const tabs = ['Tab 1', 'Tab 2', 'Tab 3'] |
| 47 | + const panels = ['Panel 1', 'Panel 2', 'Panel 3'] |
| 48 | + |
| 49 | + return ( |
| 50 | + <UnderlinePanels aria-label="Select a tab"> |
| 51 | + {tabs.map((tab: string, index: number) => ( |
| 52 | + <UnderlinePanels.Tab key={index} aria-selected={index === 0 ? true : undefined}> |
| 53 | + {tab} |
| 54 | + </UnderlinePanels.Tab> |
| 55 | + ))} |
| 56 | + {panels.map((panel: string, index: number) => ( |
| 57 | + <UnderlinePanels.Panel key={index}>{panel}</UnderlinePanels.Panel> |
| 58 | + ))} |
| 59 | + </UnderlinePanels> |
| 60 | + ) |
| 61 | +} |
| 62 | + |
| 63 | +export const Playgound: StoryFn<typeof UnderlinePanels> = args => { |
| 64 | + const tabs = ['Tab 1', 'Tab 2', 'Tab 3'] |
| 65 | + const panels = ['Panel 1', 'Panel 2', 'Panel 3'] |
| 66 | + |
| 67 | + return ( |
| 68 | + <UnderlinePanels {...args}> |
| 69 | + {tabs.map((tab: string, index: number) => ( |
| 70 | + <UnderlinePanels.Tab key={index} aria-selected={index === 0 ? true : undefined}> |
| 71 | + {tab} |
| 72 | + </UnderlinePanels.Tab> |
| 73 | + ))} |
| 74 | + {panels.map((panel: string, index: number) => ( |
| 75 | + <UnderlinePanels.Panel key={index}>{panel}</UnderlinePanels.Panel> |
| 76 | + ))} |
| 77 | + </UnderlinePanels> |
| 78 | + ) |
| 79 | +} |
0 commit comments