#11 Introduce question component

redaktions-app/src/components/Question.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {render} from '@testing-library/react'
+import Question from "./Question";
+
+
+describe('The Question component', () => {
+  test('displays title, category and description', () => {
+    const {queryByText} = render(<Question title={"Test Title"} category={"Test Category"}
+                                         description="Test Description"/>);
+    expect(queryByText(/Test Title/)?.textContent).toBe("Test Title");
+    expect(queryByText(/Test Category/)?.textContent).toBe("Test Category");
+    expect(queryByText(/Test Description/)?.textContent).toBe("Test Description");
+  });
+});

redaktions-app/src/components/Question.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionActions from '@material-ui/core/AccordionActions';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Divider from '@material-ui/core/Divider';
+import {IconButton} from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginBottom: theme.spacing(1)
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      flexGrow: 1,
+    },
+    secondaryHeading: {
+      fontSize: theme.typography.pxToRem(15),
+      color: theme.palette.text.secondary,
+    },
+    details: {
+      alignItems: 'center',
+    },
+  }),
+);
+
+interface QuestionProps {
+  title: string,
+  description: string,
+  category: string
+}
+
+export default function Question(props: QuestionProps) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon/>}
+          aria-controls="panel1c-content"
+          id="panel1c-header"
+        >
+          <div className={classes.heading}>
+            <Typography>{props.title}</Typography>
+          </div>
+          <div className={classes.secondaryHeading}>
+            <Typography>{props.category}</Typography>
+          </div>
+        </AccordionSummary>
+        <AccordionDetails className={classes.details}>
+          <Typography color="textSecondary">
+            {props.description}
+          </Typography>
+        </AccordionDetails>
+        <Divider/>
+        <AccordionActions>
+          <IconButton size={"small"} aria-label="edit">
+            <EditIcon />
+          </IconButton>
+          <IconButton size={"small"} aria-label="delete">
+            <DeleteIcon />
+          </IconButton>
+        </AccordionActions>
+      </Accordion>
+    </div>
+  );
+}