feat: 🎸 Created a separate story which has dropdown questions

Created a separate story for the dropdown that has questions

BREAKING CHANGE: 🧨 No

✅ Closes: #887

stories/SQFormDropdown.stories.tsx

@@ -48,21 +48,36 @@ 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: 'Is there anything else you would like your plan to do for you?',
+  label: 'State',
   name: 'state',
   children: MOCK_STATE_OPTIONS,
   sqFormProps: {
     initialValues: {state: ''},
   },
 };
 
+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}
       >
-        <SQFormDropdownComponent
-          {...dropdownProps}
-          size={getSizeProp(size)}
-          questions={questions}
-        />
+        <SQFormDropdownComponent {...dropdownProps} size={getSizeProp(size)} />
       </SQFormStoryWrapper>
     </div>
   );
@@ -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;