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;