@eureca/eureca-ui/src/components/Chips/stories/chips.stories.js

UI component library of Eureca's user and admin apps

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

import { FiPaperclip } from 'react-icons/fi';

import { Chips } from '../';

export default { title: 'Material/Chips', decorators: [withKnobs], includeStories: [] };

const customStyle = {
  color: 'white',
  background: 'salmon',
  borderColor: 'salmon',
};

export function BasicChip() {
  const content = text('Text', 'Educação & Seleção');
  const variant = select('Type', { Outlined: 'outlined', Default: 'default' }, 'outlined');
  const size = select('Size', { Medium: 'medium', Small: 'small' }, 'medium');
  const deleteIcon = boolean('Delete Icon', false);
  const styles = boolean('Inline style', false);
  const leftIcon = boolean('Left Icon', false);

  function onDelete(value) {
    console.log(value);
  }

  return (
    <Chips
      variant={variant}
      onDelete={deleteIcon ? onDelete : null}
      style={styles ? customStyle : null}
      size={size}
      icon={leftIcon ? <FiPaperclip /> : null}
      label={content}
    />
  );
}