{"version":3,"file":"Tabs.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Card, CardContent, CardHeader, Flex, TabPanel, Tabs, Text } from '@pega/cosmos-react-core';\n\nimport { TabsMock } from './Tabs.mocks';\n\nexport default {\n  title: 'Core/Tabs',\n  component: Tabs,\n  args: {\n    type: 'horizontal'\n  },\n  argTypes: {\n    type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface TabDemoProps {\n  type: 'horizontal' | 'vertical';\n  showHeader?: boolean;\n}\n\nexport const TabsDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n  const tabsRef = useRef<HTMLElement>(null);\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3', errors: 0 },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5', errors: 2 },\n    { name: 'Tab 6', id: '6', count: 4 },\n    { name: 'Tab 7', id: '7' },\n    { name: 'Tab 8', id: '8' },\n    { name: 'Tab 9', id: '9' },\n    { name: 'Very long tab name 10', id: '10' }\n  ];\n\n  return (\n    <Card container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <CardHeader container={{ direction: 'column' }}>\n        {args.showHeader && <Text variant='h2'>Details</Text>}\n        <Tabs\n          tabs={tabs}\n          type={args.type}\n          onTabClick={handleTabChange}\n          currentTabId={panelShown}\n          ref={tabsRef}\n        />\n      </CardHeader>\n      <CardContent>\n        {tabs.map(({ id, name }) => (\n          <TabPanel\n            tabId={id}\n            currentTabId={panelShown}\n            title={args.type === 'horizontal' ? name : undefined}\n            tablistRef={tabsRef}\n            tablistType={args.type}\n            key={id}\n          >\n            <Flex\n              container={{\n                direction: 'column',\n                rowGap: 1,\n                ...(args.type === 'vertical' && { pad: [1, 2] })\n              }}\n            >\n              <div>{name} content</div>\n              {id === '1' && <TabsMock type={args.type} />}\n            </Flex>\n          </TabPanel>\n        ))}\n      </CardContent>\n    </Card>\n  );\n};\n\nTabsDemo.args = {\n  showHeader: true\n};\n\nTabsDemo.argTypes = {\n  showHeader: { control: { type: 'boolean' } }\n};\n\nexport const TabsCountDemo: StoryFn<TabDemoProps> = (args: TabDemoProps) => {\n  return <TabsMock type={args.type} />;\n};\n"]}