@eureca/eureca-ui/src/components/TrackNavigationSideBar/stories/track-navigation-side-bar.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import {
  FiLayers,
  FiTarget,
  FiMic,
  FiAward,
  FiMinimize2,
  FiPaperclip,
  FiVideo,
  FiEdit,
} from 'react-icons/fi';

import { TrackNavigationSideBar } from '..';

const dataModules = [
  {
    id: 1,
    done: true,
    type: 'form',
    title: 'Comece por aqui.',
    icon: <FiEdit />,
  },
  {
    id: 2,
    done: true,
    type: 'fit',
    title: 'Fit Cultural',
    icon: <FiMinimize2 />,
  },
  {
    id: 3,
    done: true,
    type: 'video',
    title: 'Desafio #1 | Conta pra mim...',
    icon: <FiVideo />,
  },
  {
    id: 4,
    done: false,
    type: 'pdf',
    title: 'Desafio #2 | Energia limpa para que te quero',
    icon: <FiPaperclip />,
  },
];

export default {
  title: 'Originals/Track Navigation Side Bar',
  decorators: [withKnobs],
  includeStories: [],
};

export function TrackNavigationSideBarStory() {
  const disabled = boolean('Disabled', true);
  const finished = boolean('Finished');

  const data = [
    {
      id: 1,
      type: 'online',
      title: 'Online',
      icon: <FiLayers />,
      finished: true,
      disabled: false,
      modules: dataModules,
    },
    {
      id: 2,
      type: 'presencial',
      title: 'Presencial',
      icon: <FiTarget />,
      finished: false,
      disabled: false,
      modules: dataModules,
    },
    {
      id: 3,
      type: 'entrevista',
      title: 'Entrevista',
      icon: <FiMic />,
      finished: false,
      disabled: false,
      modules: dataModules,
    },
    {
      id: 4,
      type: 'resultados',
      title: 'Resultados',
      icon: <FiAward />,
      finished: finished,
      disabled: disabled,
      modules: dataModules,
    },
  ];

  return (
    <TrackNavigationSideBar
      data={data}
      onClickModule={(path, module) => console.log('Fase: ', path, 'Módulo Clicado: ', module)}
    />
  );
}