Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 🎸 Add prop for SQForm questions to support rich text #888

Open
wants to merge 3 commits into
base: epic/style-updates
Choose a base branch
from
Open

feat: 🎸 Add prop for SQForm questions to support rich text #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0d1ed7
feat: 🎸 Add prop for SQForm questions to support rich text
MudassarRaza774 May 2, 2023
66c2a04
feat: 🎸 Added prop for SQForm questions to support rich text
MudassarRaza774 May 4, 2023
ab2b130
feat: 🎸 Created a separate story which has dropdown questions
MudassarRaza774 Jul 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions src/components/fields/SQFormDropdown/SQFormDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
InputLabel,
MenuItem,
Select,
Typography,
} from '@mui/material';
import {useForm} from '../../../hooks/useForm';
import {
Expand All @@ -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 = '';
Expand All @@ -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({
Expand All @@ -62,6 +73,7 @@ function SQFormDropdown({
onChange,
size = 'auto',
muiFieldProps = {},
questions,
}: SQFormDropdownProps): React.ReactElement {
const {
formikField: {field},
Expand Down Expand Up @@ -137,6 +149,11 @@ function SQFormDropdown({
<InputLabel shrink={true} id={labelID}>
{label}
</InputLabel>
{questions && (
<Typography sx={classes.typographyStyle}>
{questions.map((question) => `- ${question}\n`)}
</Typography>
)}
<Select
sx={classes.selectHeight}
displayEmpty={true}
Expand Down
25 changes: 25 additions & 0 deletions stories/SQFormDropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,17 @@ const MOCK_STATE_OPTIONS = [
{label: 'Missouri', value: 'MO'},
];

const MOCK_CONFIRMATION_OPTIONS = [
{label: 'Yes', value: 1},
{label: 'No', value: 0},
];

const questions = [
'What benefits do you use more often?',
"Are there benefits that you don't use today, but would like to learn if you have them?",
'Are there any quesions that you have about your plan?',
];

const defaultArgs = {
label: 'State',
name: 'state',
Expand All @@ -57,6 +68,16 @@ const defaultArgs = {
},
};

const argsWithQuestions = {
name: 'plans',
label: 'Is there anything else you would like your plan to do for you?',
children: MOCK_CONFIRMATION_OPTIONS,
questions: questions,
sqFormProps: {
initialValues: {plans: ''},
},
};

const validationSchema = Yup.object({
[defaultArgs.name]: Yup.string().required('Required'),
});
Expand Down Expand Up @@ -89,4 +110,8 @@ WithValidation.parameters = {
controls: {exclude: 'schema'},
};

export const withQuestion = Template.bind({});
withQuestion.args = argsWithQuestions;
withQuestion.storyName = 'Dropdown with Question';

export default meta;