Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/react/issue-wizard/DetailsStep.tsx b/static_src/react/issue-wizard/DetailsStep.tsx
new file mode 100644
index 0000000..1a69cc1
--- /dev/null
+++ b/static_src/react/issue-wizard/DetailsStep.tsx
@@ -0,0 +1,65 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import React from 'react';
+import {createStyles, createTheme} from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/styles';
+import TextField from '@material-ui/core/TextField';
+import {red, grey} from '@material-ui/core/colors';
+
+/**
+ * The detail step is the second step on the dot
+ * stepper. This react component provides the users with
+ * specific questions about their bug to be filled out.
+ */
+const theme: Theme = createTheme();
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(1),
+ width: '100%',
+ },
+ },
+ head: {
+ marginTop: '25px',
+ },
+ red: {
+ color: red[600],
+ },
+ grey: {
+ color: grey[600],
+ },
+ }), {defaultTheme: theme}
+);
+
+export default function DetailsStep({textValues, setTextValues, category}:
+ {textValues: Object, setTextValues: Function, category: string}): React.ReactElement {
+ const classes = useStyles();
+
+ const handleChange = (valueName: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+ const textInput = e.target.value;
+ setTextValues({...textValues, [valueName]: textInput});
+ };
+
+ return (
+ <>
+ <h2 className={classes.grey}>Details for problems with {category}</h2>
+ <form className={classes.root} noValidate autoComplete="off">
+ <h3 className={classes.head}>Please enter a one line summary <span className={classes.red}>*</span></h3>
+ <TextField id="outlined-basic-1" variant="outlined" onChange={handleChange('oneLineSummary')}/>
+
+ <h3 className={classes.head}>Steps to reproduce problem <span className={classes.red}>*</span></h3>
+ <TextField multiline rows={4} id="outlined-basic-2" variant="outlined" onChange={handleChange('stepsToReproduce')}/>
+
+ <h3 className={classes.head}>Please describe the problem <span className={classes.red}>*</span></h3>
+ <TextField multiline rows={3} id="outlined-basic-3" variant="outlined" onChange={handleChange('describeProblem')}/>
+
+ <h3 className={classes.head}>Additional Comments</h3>
+ <TextField multiline rows={3} id="outlined-basic-4" variant="outlined" onChange={handleChange('additionalComments')}/>
+ </form>
+ </>
+ );
+}