diff --git a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx index 527ba43b..a7c5ff16 100644 --- a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx +++ b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx @@ -7,6 +7,7 @@ import { InputLabel, MenuItem, Select, + Typography, } from '@mui/material'; import {useForm} from '../../../hooks/useForm'; import { @@ -33,6 +34,8 @@ export type SQFormDropdownProps = BaseFieldProps & { onChange?: SelectProps['onChange']; /** Any valid prop for material ui select child component - https://material-ui.com/api/select/#props */ muiFieldProps?: SelectProps; + /** OPTIONAL - Questions that could be asked with the dropdown label */ + questions?: string[]; }; const EMPTY_VALUE = ''; @@ -49,6 +52,14 @@ const classes = { }, fontWeight: 600, }, + typographyStyle: { + color: 'var(--color-granite)', + fontSize: 'var(--base-font-size)', + fontWeight: 'var(--font-weight-normal)', + whiteSpace: 'pre-line', + margin: '20px 0px 16px 25px', + lineHeight: '15px', + }, }; function SQFormDropdown({ @@ -62,6 +73,7 @@ function SQFormDropdown({ onChange, size = 'auto', muiFieldProps = {}, + questions, }: SQFormDropdownProps): React.ReactElement { const { formikField: {field}, @@ -137,6 +149,11 @@ function SQFormDropdown({ {label} + {questions && ( + + {questions.map((question) => `- ${question}\n`)} + + )}