Merge branch 'main' into avm99963-monorail
Merged commit 4137ed7879acadbf891e8c471108acb874dae886.
GitOrigin-RevId: b6100ffc5b1da355a35f37b13fcaaf746ee8b307
diff --git a/static_src/react/issue-wizard/RadioDescription/RadioDescription.test.tsx b/static_src/react/issue-wizard/RadioDescription/RadioDescription.test.tsx
index 296e449..6d1398f 100644
--- a/static_src/react/issue-wizard/RadioDescription/RadioDescription.test.tsx
+++ b/static_src/react/issue-wizard/RadioDescription/RadioDescription.test.tsx
@@ -3,12 +3,12 @@
// found in the LICENSE file.
import React from 'react';
-import { render, screen, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import { assert } from 'chai';
import sinon from 'sinon';
import { RadioDescription } from './RadioDescription.tsx';
+import {IssueWizardPersona} from '../IssueWizardTypes.tsx';
describe('RadioDescription', () => {
afterEach(cleanup);
@@ -29,7 +29,7 @@
it('checks selected radio value', () => {
// We're passing in the "Web Developer" value here manually
// to tell our code that that radio button is selected.
- render(<RadioDescription value={'Web Developer'} />);
+ render(<RadioDescription selectedRadio={IssueWizardPersona.Developer} />);
const checkedRadio = screen.getByRole('radio', { name: /Web Developer/i });
assert.isTrue(checkedRadio.checked);
@@ -43,25 +43,25 @@
// Using the sinon.js testing library to create a function for testing.
const setValue = sinon.stub();
- render(<RadioDescription setValue={setValue} />);
+ render(<RadioDescription onClickRadio={setValue} />);
const radio = screen.getByRole('radio', { name: /Web Developer/i });
- userEvent.click(radio);
+ fireEvent.click(radio);
// Asserts that "Web Developer" was passed into our "setValue" function.
- sinon.assert.calledWith(setValue, 'Web Developer');
+ sinon.assert.calledWith(setValue, IssueWizardPersona.Developer);
});
it('sets radio value when any part of the parent RoleSelection is clicked', () => {
const setValue = sinon.stub();
- render(<RadioDescription setValue={setValue} />);
+ render(<RadioDescription onClickRadio={setValue} />);
// Click text in the RoleSelection component
const p = screen.getByText('End User');
- userEvent.click(p);
+ fireEvent.click(p);
// Asserts that "End User" was passed into our "setValue" function.
- sinon.assert.calledWith(setValue, 'End User');
+ sinon.assert.calledWith(setValue, IssueWizardPersona.EndUser);
});
-});
\ No newline at end of file
+});
diff --git a/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx b/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
index 9a5a7d2..d371ef7 100644
--- a/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
+++ b/static_src/react/issue-wizard/RadioDescription/RadioDescription.tsx
@@ -5,12 +5,7 @@
import React from 'react';
import { makeStyles } from '@material-ui/styles';
import { RoleSelection } from './RoleSelection/RoleSelection.tsx';
-
-const userGroups = Object.freeze({
- END_USER: 'End User',
- WEB_DEVELOPER: 'Web Developer',
- CONTRIBUTOR: 'Chromium Contributor',
-});
+import {ISSUE_WIZARD_PERSONAS_DETAIL, IssueWizardPersona} from '../IssueWizardTypes.tsx';
const useStyles = makeStyles({
flex: {
@@ -19,41 +14,48 @@
}
});
+const getUserGroupSelectors = (
+ value: IssueWizardPersona,
+ onSelectorClick:
+ (selector: string) =>
+ (event: React.MouseEvent<HTMLElement>) => any) => {
+ const selectors = new Array();
+ Object.entries(ISSUE_WIZARD_PERSONAS_DETAIL).forEach(([key, persona]) => {
+ selectors.push(
+ <RoleSelection
+ checked={IssueWizardPersona[value] === key}
+ handleOnClick={onSelectorClick(key)}
+ value={persona.name}
+ description={persona.description}
+ inputProps={{ 'aria-label': persona.name }}
+ />
+ );
+ });
+ return selectors;
+}
/**
* RadioDescription contains a set of radio buttons and descriptions (RoleSelection)
* to be chosen from in the landing step of the Issue Wizard.
*
* @returns React.ReactElement
*/
-export const RadioDescription = ({ value, setValue }: { value: string, setValue: Function }): React.ReactElement => {
+type Props = {
+ selectedRadio: IssueWizardPersona,
+ onClickRadio: Function,
+}
+
+export const RadioDescription = (props: Props): React.ReactElement => {
+ const { selectedRadio, onClickRadio } = props;
const classes = useStyles();
const handleRoleSelectionClick = (userGroup: string) =>
- (event: React.MouseEvent<HTMLElement>) => setValue(userGroup)
+ (event: React.MouseEvent<HTMLElement>) => onClickRadio(userGroup);
+
+ const userGroupsSelectors = getUserGroupSelectors(selectedRadio, handleRoleSelectionClick);
return (
<div className={classes.flex}>
- <RoleSelection
- checked={value === userGroups.END_USER}
- handleOnClick={handleRoleSelectionClick(userGroups.END_USER)}
- value={userGroups.END_USER}
- description="I am a user trying to do something on a website."
- inputProps={{ 'aria-label': userGroups.END_USER }}
- />
- <RoleSelection
- checked={value === userGroups.WEB_DEVELOPER}
- handleOnClick={handleRoleSelectionClick(userGroups.WEB_DEVELOPER)}
- value={userGroups.WEB_DEVELOPER}
- description="I am a web developer trying to build something."
- inputProps={{ 'aria-label': userGroups.WEB_DEVELOPER }}
- />
- <RoleSelection
- checked={value === userGroups.CONTRIBUTOR}
- handleOnClick={handleRoleSelectionClick(userGroups.CONTRIBUTOR)}
- value={userGroups.CONTRIBUTOR}
- description="I know about a problem in specific tests or code."
- inputProps={{ 'aria-label': userGroups.CONTRIBUTOR }}
- />
+ {userGroupsSelectors}
</div>
);
-}
\ No newline at end of file
+}
diff --git a/static_src/react/issue-wizard/RadioDescription/RoleSelection/RoleSelection.tsx b/static_src/react/issue-wizard/RadioDescription/RoleSelection/RoleSelection.tsx
index 803a7b7..f1f1933 100644
--- a/static_src/react/issue-wizard/RadioDescription/RoleSelection/RoleSelection.tsx
+++ b/static_src/react/issue-wizard/RadioDescription/RoleSelection/RoleSelection.tsx
@@ -10,7 +10,8 @@
const useStyles = makeStyles({
container: {
width: '320px',
- height: '150px',
+ minWidth: '140px',
+ height: '160px',
position: 'relative',
display: 'inline-block',
cursor: 'pointer',
@@ -18,15 +19,14 @@
text: {
position: 'absolute',
display: 'inline-block',
- left: '55px',
},
title: {
- marginTop: '7px',
- fontSize: '20px',
+ margin: '0.5rem 0',
+ fontSize: '1.125rem',
color: grey[900],
},
subheader: {
- fontSize: '16px',
+ fontSize: '0.875rem',
color: grey[800],
},
line: {