@eureca/eureca-ui/src/components/Cards/stories/opportunity.stories.js

UI component library of Eureca's user and admin apps

import React from 'react';

import { withKnobs, text, number, select } from '@storybook/addon-knobs';

import { FiEye, FiEdit } from 'react-icons/fi';

import { colors } from '../../../theme/colors';

import { OpportunityCard } from '../';

const statusOptions = {
  Rascunho: colors.gray3,
  Publicado: colors.color3,
  Recebendo: colors.green1,
  Processando: colors.color4,
  Finalizado: colors.color6,
  Arquivado: colors.color5,
};

const originOptions = {
  Eureca: 'eureca',
  Privada: 'private',
  Parceiro: 'partner',
};

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

export function OpportunityCardStory() {
  const title = text('Título', 'Estágio Globo.com 2019');
  const subtitle = text('Sub-título', 'Educação e Seleção');
  const statusColor = select('Status', statusOptions, colors.gray3);
  const candidates = number('Candidatos', 13);
  const jobs = number('Jobs', 13);
  const menuOptions = [
    { id: 1, icon: <FiEye />, value: '1', label: 'label' },
    { id: 2, icon: <FiEdit />, value: '2', label: 'label2' },
  ];
  const image = text(
    'Imagem',
    'https://eureca-production.s3.amazonaws.com/oportunidades/199/tGcsinU8wGkHVu2eAvR0JHaXONAYU3.png'
  );
  const origin = select('Origin', originOptions, 'eureca');
  const data = { title, subtitle, statusColor, candidates, jobs, menuOptions, image, origin };

  const originList = {
    private: {
      label: 'Privada',
      background: colors.error2,
      color: colors.white,
    },
    partner: {
      label: 'Parceiro',
      background: colors.gray4,
      color: colors.gray2,
    },
  };

  function handleClickItem(value) {
    console.log('Clicked Menu Item: ', value);
  }

  function handleClickCard(id) {
    console.log('Clicked Card ID: ', id);
  }

  return (
    <OpportunityCard
      {...data}
      id="001"
      originList={originList}
      onClickItem={handleClickItem}
      onClickCard={handleClickCard}
    />
  );
}