@eureca/eureca-ui/src/components/ProgressCard/stories/progress-card.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { withKnobs, select, number } from '@storybook/addon-knobs';
import { FiLayers } from 'react-icons/fi';

import { ProgressCard } from '..';

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

const cardTypes = {
  Online: 'online',
  Presencial: 'presencial',
  Entrevista: 'entrevista',
  Resultados: 'resultados',
};

const cardDate = {
  Unavailable: '',
  Date: addDays(new Date(), 43),
};

const cardFeedback = {
  Feedback: 'feedback',
  'Feedback Ready': 'feedbackReady',
  Confirmation: 'confirmation',
};

const progressOptions = {
  range: true,
  min: 0,
  max: 100,
  step: 1,
};

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

export function ProgressCardStory() {
  const title = select('Title', cardTypes, 'online');
  const progress = number('Progress', 0, progressOptions);
  const date = select('Date', cardDate, '');
  const status = select('Feedback', cardFeedback, 'feedback');

  const cardData = {
    title: title,
    icon: <FiLayers />,
    progress: progress,
    date: date,
    status: status,
  };

  return <ProgressCard {...cardData} active={true} onClick={() => {}} />;
}