@eureca/eureca-ui/src/components/TrackNavigationSideBar/stories/track-navigation-side-bar.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 { TrackNavigationSideBar } from '../';
import { TrackNavigationSideBarStory } from './track-navigation-side-bar.stories.js';

<Meta title='Originals/Track Navigation Sidebar' component={TrackNavigationSideBar} decorators={[withKnobs]}/>

<Title>Track Navigation Sidebar</Title>

<Description>
  Componente de acompanhamento do status de uma fase e seus módulos
</Description>

<Preview>
  <Story name="TrackNavigationSideBar">
    <TrackNavigationSideBarStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| data | Valores de entrada do componente <br /> 'array' | - |
| active | ID do módulo ativo. Caso exista este será destacado e a trilha será expandida. <br /> 'number' \| 'string' | - |
| onClickModule | Função disparada ao se clicar em um módulo. Retorna o novo valor.  <br /> 'func' | ( ) => { } |

<Subtitle>Exemplo de arquivo de entrada</Subtitle>

Cada objeto possui as chaves:

- `id`: string \| number
- `type`: string (ex: 'online')
- `title`: string
- `icon`: object
- `finished`: bool
- `disabled`: bool
- `modules`: array de objetos apresentado mais abaixo.

```jsx
[
  { 
    id: 1, 
    type: 'online', 
    title: 'Online', 
    icon: <FiLayers />, 
    finished: true, 
    disabled: false, 
    modules: [
      {
        id: 1,
        done: true,
        type: 'form',
        title: 'Comece por aqui.',
        icon: <FiEdit />,
      },
    ],
  },
]
```

<Subtitle>Exemplo de array de módulos</Subtitle>

Cada objeto possui as chaves:

- `id`: string \| number
- `done`: bool,
- `type`: string (ex: 'video')
- `title`: string
- `icon`: object

```jsx
[
  {
    id: 1,
    done: true,
    type: 'form',
    title: 'Comece por aqui.',
    icon: <FiEdit />,
  },
]
```

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

```jsx
<TrackNavigationSideBar
  data={data}
  active={1}
  onClickModule={(path, module) => handleChange(path, module)}
/>
```