1import React from "react";
 2import gql from "graphql-tag";
 3import { withStyles } from "@material-ui/core/styles";
 4
 5import Card from "@material-ui/core/Card";
 6import CardContent from "@material-ui/core/CardContent";
 7import Chip from "@material-ui/core/Chip";
 8import Typography from "@material-ui/core/Typography";
 9
10const styles = theme => ({
11  labelList: {
12    display: "flex",
13    flexWrap: "wrap",
14    marginTop: theme.spacing.unit
15  },
16  label: {
17    marginRight: theme.spacing.unit
18  },
19  summary: {
20    marginBottom: theme.spacing.unit * 2
21  }
22});
23
24const BugSummary = ({ bug, classes }) => (
25  <Card className={classes.summary}>
26    <CardContent>
27      <Typography variant="headline" component="h2">
28        {bug.title}
29      </Typography>
30      <Typography variant="subheading" component="h3" title={bug.id}>
31        #{bug.id.slice(0, 8)} • {bug.status.toUpperCase()}
32      </Typography>
33      <div className={classes.labelList}>
34        {bug.labels.map(label => (
35          <Chip key={label} label={label} className={classes.label} />
36        ))}
37      </div>
38    </CardContent>
39  </Card>
40);
41
42BugSummary.fragment = gql`
43  fragment BugSummary on Bug {
44    id
45    title
46    status
47    labels
48  }
49`;
50
51export default withStyles(styles)(BugSummary);