diff --git a/stories/SQFormDropdown.stories.tsx b/stories/SQFormDropdown.stories.tsx
index 36840b1f..5f8f4640 100644
--- a/stories/SQFormDropdown.stories.tsx
+++ b/stories/SQFormDropdown.stories.tsx
@@ -48,6 +48,11 @@ 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?",
@@ -55,7 +60,7 @@ const questions = [
];
const defaultArgs = {
- label: 'Is there anything else you would like your plan to do for you?',
+ label: 'State',
name: 'state',
children: MOCK_STATE_OPTIONS,
sqFormProps: {
@@ -63,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'),
});
@@ -76,11 +91,7 @@ const Template: DropdownStoryType = (args) => {
validationSchema={schema}
{...sqFormProps}
>
-
+
);
@@ -99,4 +110,8 @@ WithValidation.parameters = {
controls: {exclude: 'schema'},
};
+export const withQuestion = Template.bind({});
+withQuestion.args = argsWithQuestions;
+withQuestion.storyName = 'Dropdown with Question';
+
export default meta;