blob: d371ef7bc7127f05313db35b8a455564cb6a17e2 [file] [log] [blame]
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02001// Copyright 2021 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import React from 'react';
6import { makeStyles } from '@material-ui/styles';
7import { RoleSelection } from './RoleSelection/RoleSelection.tsx';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +02008import {ISSUE_WIZARD_PERSONAS_DETAIL, IssueWizardPersona} from '../IssueWizardTypes.tsx';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02009
10const useStyles = makeStyles({
11 flex: {
12 display: 'flex',
13 justifyContent: 'space-between',
14 }
15});
16
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020017const getUserGroupSelectors = (
18 value: IssueWizardPersona,
19 onSelectorClick:
20 (selector: string) =>
21 (event: React.MouseEvent<HTMLElement>) => any) => {
22 const selectors = new Array();
23 Object.entries(ISSUE_WIZARD_PERSONAS_DETAIL).forEach(([key, persona]) => {
24 selectors.push(
25 <RoleSelection
26 checked={IssueWizardPersona[value] === key}
27 handleOnClick={onSelectorClick(key)}
28 value={persona.name}
29 description={persona.description}
30 inputProps={{ 'aria-label': persona.name }}
31 />
32 );
33 });
34 return selectors;
35}
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020036/**
37 * RadioDescription contains a set of radio buttons and descriptions (RoleSelection)
38 * to be chosen from in the landing step of the Issue Wizard.
39 *
40 * @returns React.ReactElement
41 */
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020042type Props = {
43 selectedRadio: IssueWizardPersona,
44 onClickRadio: Function,
45}
46
47export const RadioDescription = (props: Props): React.ReactElement => {
48 const { selectedRadio, onClickRadio } = props;
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020049 const classes = useStyles();
50
51 const handleRoleSelectionClick = (userGroup: string) =>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020052 (event: React.MouseEvent<HTMLElement>) => onClickRadio(userGroup);
53
54 const userGroupsSelectors = getUserGroupSelectors(selectedRadio, handleRoleSelectionClick);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020055
56 return (
57 <div className={classes.flex}>
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020058 {userGroupsSelectors}
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020059 </div>
60 );
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020061}