@eureca/eureca-ui/src/components/Tabs/stories/icon-tabs.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Box } from '@material-ui/core';

import { IconTabs } from '../';
import { IconTabsStory } from './icon-tabs.stories.js';

<Meta title='Originals/Tabs' component={IconTabs} decorators={[withKnobs]}/>

<Title>Icon Tabs</Title>

<Description>
  Componente de abas com ícones e card dos aplicativos Eureca
</Description>

<Description>
  Ao contrário do Tabs os itens escolhidos devem ser `children` do componente, como no exemplo no final da página.
</Description>

<Preview>
  <Story name="IconTabs">
    <IconTabsStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| items | Array de objetos com as opções de abas.  <br /> 'array' | - |
| current | Aba selecionada  <br /> 'string' | 0 |
| onChange | Função disparada ao se selecionar uma aba. Retorna a nova aba. <br /> 'func' | () => { } |
| children | Item a ser exibido no card <br /> 'func' | null |

<Subtitle>Formato do arquivo de entrada</Subtitle>

Cada objeto possui as chaves:

- `value`: string \| number
- `label`: string \| object \| element
- `icon`: object
- `disabled`: bool

```jsx
[
  { value: 0, label: 'Online', icon: <FiLayers />, disabled: false },
  { value: 1, label: 'Presencial', icon: <FiTarget />, disabled: false },
  { value: 2, label: 'Entrevista', icon: <FiMic />, disabled: true },
]
```

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<IconTabs items={fasesOptions} current={activeTab} onChange={v => setActiveTab(v)}>
  {tabs[activeTab]}
</IconTabs>
```