@eureca/eureca-ui/src/components/Steps/stories/steps.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs } from '@storybook/addon-knobs';

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

const trackDetails = [
  {
    id: 0,
    type: 'initial',
    status: 'complete',
    title: 'Módulo 1: Comece por aqui.',
    date: null,
    score: '',
    maxScore: '',
    content: '',
  },
  {
    id: 1,
    type: 'fit',
    status: 'incomplete',
    title: 'Módulo 2: Fit Cultural',
    date: new Date(2018, 10, 13),
    score: '76%',
    maxScore: '',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
  {
    id: 2,
    type: 'pdf',
    status: 'complete',
    title: 'Módulo 3: Desafio #1  | Conta pra mim...',
    date: new Date(2019, 7, 30),
    score: '495',
    maxScore: '500',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
  {
    id: 3,
    type: 'pdf',
    status: 'complete',
    title: 'Módulo 4: Desafio #1  | Energia limpa para que te quero',
    date: new Date(),
    score: '484',
    maxScore: '500',
    content: 'Foi clara nos seus argumentos, soube uttilizar a lingua.',
  },
];

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

export function TrackStepperStory() {
  return (
    <Box maxWidth={600}>
      <TrackStepper
        tracks={trackDetails}
        companyName="EDP"
        onClickFile={id => console.log('Clicked File on Track: ', id)}
        onClickTrack={id => console.log('Clicked Incomplete Track: ', id)}
      />
    </Box>
  );
}