From b0d1ed742e8cc998374e87169eed7e4e4ff37486 Mon Sep 17 00:00:00 2001
From: Mudassar Raza <mudasarraza049@gmail.com>
Date: Wed, 3 May 2023 00:03:21 +0500
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20prop=20for=20S?=
 =?UTF-8?q?QForm=20questions=20to=20support=20rich=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added support for bulleted list for dropdown questions that were
converting to plain text before

BREAKING CHANGE: 🧨 No
---
 .../fields/SQFormDropdown/SQFormDropdown.tsx   | 18 ++++++++++++++++++
 stories/SQFormDropdown.stories.tsx             | 14 ++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx
index 527ba43b..f85c2fe1 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,15 @@ const classes = {
     },
     fontWeight: 600,
   },
+  typographyStyle: {
+    color: 'var(--color-granite)',
+    fontSize: 'var(--base-font-size)',
+    fontWeight: 'var(--font-weight-normal)',
+    whiteSpace: 'pre-line',
+    marginLeft: '25px',
+    marginTop: '20px',
+    lineHeight: '15px',
+  },
 };
 
 function SQFormDropdown({
@@ -62,6 +74,7 @@ function SQFormDropdown({
   onChange,
   size = 'auto',
   muiFieldProps = {},
+  questions,
 }: SQFormDropdownProps): React.ReactElement {
   const {
     formikField: {field},
@@ -137,6 +150,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}
diff --git a/stories/SQFormDropdown.stories.tsx b/stories/SQFormDropdown.stories.tsx
index 620004be..36840b1f 100644
--- a/stories/SQFormDropdown.stories.tsx
+++ b/stories/SQFormDropdown.stories.tsx
@@ -48,8 +48,14 @@ const MOCK_STATE_OPTIONS = [
   {label: 'Missouri', value: 'MO'},
 ];
 
+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',
+  label: 'Is there anything else you would like your plan to do for you?',
   name: 'state',
   children: MOCK_STATE_OPTIONS,
   sqFormProps: {
@@ -70,7 +76,11 @@ const Template: DropdownStoryType = (args) => {
         validationSchema={schema}
         {...sqFormProps}
       >
-        <SQFormDropdownComponent {...dropdownProps} size={getSizeProp(size)} />
+        <SQFormDropdownComponent
+          {...dropdownProps}
+          size={getSizeProp(size)}
+          questions={questions}
+        />
       </SQFormStoryWrapper>
     </div>
   );

From 66c2a04de52986a1518eb1e0de74934a2023e838 Mon Sep 17 00:00:00 2001
From: Mudassar Raza <mudasarraza049@gmail.com>
Date: Thu, 4 May 2023 18:41:15 +0500
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Added=20prop=20for?=
 =?UTF-8?q?=20SQForm=20questions=20to=20support=20rich=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added some spacing between label text and field

BREAKING CHANGE: 🧨 No

✅ Closes: #887
---
 src/components/fields/SQFormDropdown/SQFormDropdown.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx
index f85c2fe1..a7c5ff16 100644
--- a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx
+++ b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx
@@ -57,8 +57,7 @@ const classes = {
     fontSize: 'var(--base-font-size)',
     fontWeight: 'var(--font-weight-normal)',
     whiteSpace: 'pre-line',
-    marginLeft: '25px',
-    marginTop: '20px',
+    margin: '20px 0px 16px 25px',
     lineHeight: '15px',
   },
 };

From ab2b13089cd1523e6b9c0fceaac0ad80a81aecca Mon Sep 17 00:00:00 2001
From: Mudassar Raza <mudasarraza049@gmail.com>
Date: Tue, 11 Jul 2023 16:50:59 +0500
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Created=20a=20separa?=
 =?UTF-8?q?te=20story=20which=20has=20dropdown=20questions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Created a separate story for the dropdown that has questions

BREAKING CHANGE: 🧨 No

✅ Closes: #887
---
 stories/SQFormDropdown.stories.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

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}
       >
-        <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;