Merge pull request #108 from indec-it/feat/supportMultiline

feat(textField): support multiline
indec-it · Mar 9, 2024 · d7ab827 · d7ab827
2 parents 071887d + a07aa3c
commit d7ab827
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 9 deletions.
diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
@@ -10,7 +10,7 @@ import InputLabel from '@/components/InputLabel';
 import FieldMessage from '@/components/FieldMessage';
 import {formikField, formikForm, label as labelPropTypes} from '@/utils/propTypes';
 
-function TextField({form, field, placeholder, label, disabled, tooltip, warnings, ...props}) {
+function TextField({form, field, placeholder, label, disabled, tooltip, warnings, multiline, ...props}) {
   const handleBlur = e => {
     const event = e;
     if (field.onChange && event.target.value) {
@@ -46,6 +46,8 @@ function TextField({form, field, placeholder, label, disabled, tooltip, warnings
         {...props}
         disabled={disabled}
         onBlur={handleBlur}
+        multiline={multiline}
+        rows={multiline ? 2 : 1}
       />
       <FieldMessage warnings={warnings} form={form} field={field} disabled={disabled} />
     </Box>
@@ -56,6 +58,7 @@ TextField.propTypes = {
   field: formikField.isRequired,
   form: formikForm.isRequired,
   disabled: PropTypes.bool,
+  multiline: PropTypes.bool,
   label: labelPropTypes.isRequired,
   placeholder: PropTypes.string,
   tooltip: PropTypes.string,
@@ -66,7 +69,8 @@ TextField.defaultProps = {
   placeholder: '[Ingrese texto]',
   tooltip: undefined,
   warnings: {},
-  disabled: false
+  disabled: false,
+  multiline: false
 };
 
 export default TextField;
diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
@@ -128,3 +128,12 @@ WithWarnings.args = {
   name: 'S1.0.S1P1.answer.value',
   withWarnings: true
 };
+
+export const WithMultiline = Template.bind({});
+WithMultiline.args = {
+  disabled: false,
+  label: {text: 'Write your name'},
+  name: 'S1.0.S1P1.answer.value',
+  warnings: {},
+  multiline: true
+};
diff --git a/src/utils/__tests__/getQuestionProps.test.js b/src/utils/__tests__/getQuestionProps.test.js
@@ -337,6 +337,62 @@ describe('getQuestionProps', () => {
       };
     });
 
+    describe('and `question.multiline` is `true`', () => {
+      beforeEach(() => {
+        question.multiline = true;
+      });
+
+      it('should have `props.multiline` as `true`', () => {
+        expect(
+          getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections})
+        ).toEqual(
+          expect.objectContaining({
+            props: {
+              label: {text: 'question 1', number: '1', introduction: undefined},
+              name: 'S1.0.S1P1.answer',
+              placeholder: undefined,
+              type: 'text',
+              disabled: true,
+              warnings: {},
+              isMultiple: false,
+              show: true,
+              subQuestions: [],
+              values: {answer: {value: ''}, id: 1},
+              multiline: true
+            }
+          })
+        );
+      });
+    });
+
+    describe('and `question.multiline` is `false`', () => {
+      beforeEach(() => {
+        question.multiline = false;
+      });
+
+      it('should have `props.multiline` as `false`', () => {
+        expect(
+          getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections})
+        ).toEqual(
+          expect.objectContaining({
+            props: {
+              label: {text: 'question 1', number: '1', introduction: undefined},
+              name: 'S1.0.S1P1.answer',
+              placeholder: undefined,
+              type: 'text',
+              disabled: true,
+              warnings: {},
+              isMultiple: false,
+              show: true,
+              subQuestions: [],
+              values: {answer: {value: ''}, id: 1},
+              multiline: false
+            }
+          })
+        );
+      });
+    });
+
     it('should return props', () => {
       expect(
         getQuestionProps({sectionIndex, section, question, values, disabled, warnings, initialValues, sections})
@@ -351,7 +407,8 @@ describe('getQuestionProps', () => {
           isMultiple: false,
           show: true,
           subQuestions: [],
-          values: {answer: {value: ''}, id: 1}
+          values: {answer: {value: ''}, id: 1},
+          multiline: false
         },
         questionName: 'S1.0.S1P1.answer',
         questionType: 1,
@@ -386,7 +443,8 @@ describe('getQuestionProps', () => {
           isMultiple: false,
           show: true,
           subQuestions: [],
-          values: {answer: {value: ''}, id: 1}
+          values: {answer: {value: ''}, id: 1},
+          multiline: false
         },
         questionName: 'S1.0.S1P1.answer',
         questionType: 2,
@@ -422,7 +480,8 @@ describe('getQuestionProps', () => {
           isMultiple: false,
           show: true,
           subQuestions: [],
-          values: {answer: {value: ''}, id: 1}
+          values: {answer: {value: ''}, id: 1},
+          multiline: false
         },
         questionName: 'S1.0.S1P1.answer',
         questionType: 2,
@@ -456,7 +515,8 @@ describe('getQuestionProps', () => {
           isMultiple: false,
           show: true,
           subQuestions: [],
-          values: {answer: {value: ''}, id: 1}
+          values: {answer: {value: ''}, id: 1},
+          multiline: false
         },
         questionName: 'S1.0.S1P1.answer',
         questionType: 8,
@@ -492,7 +552,8 @@ describe('getQuestionProps', () => {
           isMultiple: false,
           show: true,
           subQuestions: [],
-          values: {answer: {value: ''}, id: 1}
+          values: {answer: {value: ''}, id: 1},
+          multiline: false
         },
         questionName: 'S1.0.S1P1.answer',
         questionType: 8,

diff --git a/src/utils/getQuestionProps.js b/src/utils/getQuestionProps.js
@@ -17,7 +17,8 @@ const getQuestionProps = ({sectionIndex, section, question, values, disabled, wa
     options,
     metadata,
     navigation = [],
-    introduction
+    introduction,
+    multiline = false
   } = question;
 
   const questionName = section ? `${section.name}.${sectionIndex}.${name}.answer` : '';
@@ -39,7 +40,8 @@ const getQuestionProps = ({sectionIndex, section, question, values, disabled, wa
         isMultiple: multiple,
         values: values[name],
         subQuestions,
-        show
+        show,
+        multiline: type === questionTypes.TEXT_FIELD ? multiline : false
       };
       break;
     case questionTypes.DROPDOWN: