Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/react/issue-wizard/LandingStep.tsx b/static_src/react/issue-wizard/LandingStep.tsx
new file mode 100644
index 0000000..efe6491
--- /dev/null
+++ b/static_src/react/issue-wizard/LandingStep.tsx
@@ -0,0 +1,108 @@
+import React from 'react';
+import {makeStyles, withStyles} from '@material-ui/styles';
+import {blue, yellow, red, grey} from '@material-ui/core/colors';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox, {CheckboxProps} from '@material-ui/core/Checkbox';
+import SelectMenu from './SelectMenu.tsx';
+import RadioDescription from './RadioDescription.tsx';
+
+const CustomCheckbox = withStyles({
+ root: {
+ color: blue[400],
+ '&$checked': {
+ color: blue[600],
+ },
+ },
+ checked: {},
+})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
+
+const useStyles = makeStyles({
+ pad: {
+ margin: '10px, 20px',
+ display: 'inline-block',
+ },
+ flex: {
+ display: 'flex',
+ },
+ inlineBlock: {
+ display: 'inline-block',
+ },
+ warningBox: {
+ minHeight: '10vh',
+ borderStyle: 'solid',
+ borderWidth: '2px',
+ borderColor: yellow[800],
+ borderRadius: '8px',
+ background: yellow[50],
+ padding: '0px 20px 1em',
+ margin: '30px 0px'
+ },
+ warningHeader: {
+ color: yellow[800],
+ fontSize: '16px',
+ fontWeight: '500',
+ },
+ star:{
+ color: red[700],
+ marginRight: '8px',
+ fontSize: '16px',
+ display: 'inline-block',
+ },
+ header: {
+ color: grey[900],
+ fontSize: '28px',
+ marginTop: '6vh',
+ },
+ subheader: {
+ color: grey[700],
+ fontSize: '18px',
+ lineHeight: '32px',
+ },
+ red: {
+ color: red[600],
+ },
+});
+
+export default function LandingStep({checkExisting, setCheckExisting, userType, setUserType, category, setCategory}:
+ {checkExisting: boolean, setCheckExisting: Function, userType: string, setUserType: Function, category: string, setCategory: Function}) {
+ const classes = useStyles();
+
+ const handleCheckChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ setCheckExisting(event.target.checked);
+ };
+
+ return (
+ <>
+ <p className={classes.header}>Report an issue with Chromium</p>
+ <p className={classes.subheader}>
+ We want you to enter the best possible issue report so that the project team members
+ can act on it effectively. The following steps will help route your issue to the correct
+ people.
+ </p>
+ <p className={classes.subheader}>
+ Please select your following role: <span className={classes.red}>*</span>
+ </p>
+ <RadioDescription value={userType} setValue={setUserType}/>
+ <div className={classes.subheader}>
+ Which of the following best describes the issue that you are reporting? <span className={classes.red}>*</span>
+ </div>
+ <SelectMenu option={category} setOption={setCategory}/>
+ <div className={classes.warningBox}>
+ <p className={classes.warningHeader}> Avoid duplicate issue reports:</p>
+ <div>
+ <div className={classes.star}>*</div>
+ <FormControlLabel className={classes.pad}
+ control={
+ <CustomCheckbox
+ checked={checkExisting}
+ onChange={handleCheckChange}
+ name="warningCheck"
+ />
+ }
+ label="By checking this box, I'm acknowledging that I have searched for existing issues that already report this problem."
+ />
+ </div>
+ </div>
+ </>
+ );
+}
\ No newline at end of file