Merge pull request #58 from indec-it/feat/sectionHeaderStatus

feat(sectionHeader): add icon status

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Form builder",
   "main": "index.js",
   "private": false,
@@ -41,14 +41,14 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@storybook/addon-actions": "^7.0.12",
-    "@storybook/addon-essentials": "^7.0.12",
-    "@storybook/addon-interactions": "^7.0.12",
-    "@storybook/addon-links": "^7.0.12",
-    "@storybook/cli": "^7.0.12",
-    "@storybook/react": "^7.0.12",
-    "@storybook/react-webpack5": "^7.0.12",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/addon-actions": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/cli": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-webpack5": "^7.0.26",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "babel-loader": "^9.1.2",
@@ -68,7 +68,7 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-watch-typeahead": "^2.2.2",
-    "storybook": "^7.0.12"
+    "storybook": "^7.0.26"
   },
   "dependencies": {
     "@emotion/react": "^11.11.0",

src/components/FormBuilder/FormBuilder.js

@@ -75,9 +75,7 @@ function FormBuilder({
             <FieldArray
               name={section.name}
               render={
-                sectionHelpers => values
-                && values[section.name]
-                && values[section.name].map((currentSection, index) => (
+                sectionHelpers => values?.[section.name]?.map((currentSection, index) => (
                   <Box key={currentSection.id} mb={2}>
                     {
                       components.SectionHeader
@@ -90,6 +88,7 @@ function FormBuilder({
                             section={section}
                             values={currentSection}
                             isReadOnly={isReadOnly}
+                            isValid={validateSchema.isValidSync({[section.name]: [currentSection]})}
                           />
                         )
                         : (
@@ -101,6 +100,7 @@ function FormBuilder({
                             section={section}
                             values={currentSection}
                             isReadOnly={isReadOnly}
+                            isValid={validateSchema.isValidSync({[section.name]: [currentSection]})}
                           />
                         )
                     }
@@ -117,11 +117,6 @@ function FormBuilder({
                     )}
                     <Modals
                       open={selectedSectionId === currentSection.id}
-                      values={currentSection}
-                      index={index}
-                      section={section}
-                      readOnlyMode
-                      cancelButtonLabel="Cerrar"
                       options={section.interruption.options}
                       label={section.interruption.reason}
                       name={`${section.name}.${index}.${section.interruption.name}`}

src/components/FormBuilder/FormBuilder.stories.js

@@ -369,6 +369,26 @@ WithInitialValues.args = {
               value: 12345678
             }
           ]
+        },
+        S1P4: {
+          id: 4,
+          answer: {
+            value: '1',
+            specifications: {
+              S1P1SQ1: {
+                id: 1,
+                answer: {
+                  value: 'test'
+                }
+              },
+              S1P1SQ2: {
+                id: 2,
+                answer: {
+                  value: ''
+                }
+              }
+            }
+          }
         }
       }
     ]

src/components/FormBuilder/Modals/Modals.js

@@ -28,14 +28,13 @@ const getChildren = (modal, {options, label, name}) => {
 };
 
 function Modals({
-  modal, acceptButtonLabel, cancelButtonLabel, onAccept, open, onClose, ...props
+  modal, onAccept, open, onClose, ...props
 }) {
   return (
     <Modal
       open={open}
       modal={modal}
-      acceptButtonLabel={acceptButtonLabel}
-      cancelButtonLabel={cancelButtonLabel}
+      cancelButtonLabel="Cerrar"
       onAccept={onAccept}
       onClose={onClose}
     >
@@ -47,17 +46,13 @@ function Modals({
 Modals.propTypes = {
   onClose: PropTypes.func.isRequired,
   onAccept: PropTypes.func,
-  acceptButtonLabel: PropTypes.string,
-  cancelButtonLabel: PropTypes.string,
   modal: PropTypes.oneOf(Object.values(modals)),
   selectedSection: PropTypes.number,
   open: PropTypes.bool
 };
 
 Modals.defaultProps = {
   onAccept: undefined,
-  acceptButtonLabel: undefined,
-  cancelButtonLabel: undefined,
   selectedSection: undefined,
   modal: undefined,
   open: false

src/components/FormBuilder/SectionHeader/SectionHeader.js

@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -33,7 +36,7 @@ const getHeaders = (questions, values, headers) => {
 };
 
 function SectionHeader({
-  section, sectionsLength, onView, onEdit, onDelete, values, isReadOnly
+  section, sectionsLength, onView, onEdit, onDelete, values, isReadOnly, isValid
 }) {
   return (
     <Box sx={{
@@ -45,13 +48,20 @@ function SectionHeader({
       flexWrap: 'wrap'
     }}
     >
-      <Box sx={{display: 'flex', flexDirection: 'column'}}>
-        <Typography variant="h6" fontWeight="bold">{section.label}</Typography>
+      <Stack>
+        <Stack direction="row" spacing={2} justifyContent="center" alignItems="center">
+          <Typography variant="h6" fontWeight="bold">{section.label}</Typography>
+          {
+            isValid
+              ? <CheckCircleIcon color="success" data-testid="success-icon" />
+              : <ErrorIcon color="error" data-testid="error-icon" />
+          }
+        </Stack>
         {section.introduction && (
           <Typography data-testid="introduction" fontWeight="bold" color="gray">{section.introduction}</Typography>
         )}
         <Typography>{getHeaders(section.questions, values, section.headers)}</Typography>
-      </Box>
+      </Stack>
       <Box>
         <IconButton data-testid="read-only-button" color="warning" onClick={onView}>
           <VisibilityIcon />
@@ -80,6 +90,7 @@ SectionHeader.propTypes = {
   sectionsLength: PropTypes.number.isRequired,
   section: sectionPropTypes.isRequired,
   values: PropTypes.shape({}).isRequired,
+  isValid: PropTypes.bool.isRequired,
   isReadOnly: PropTypes.bool
 };
 

src/components/FormBuilder/SectionHeader/SectionHeader.test.js

@@ -51,7 +51,8 @@ describe('<SectionHeader>', () => {
       values: {
         S1P1: {id: 1, answer: {value: ''}},
         S1P2: {id: 2, answer: {value: ''}}
-      }
+      },
+      isValid: false
     };
   });
 
@@ -195,4 +196,26 @@ describe('<SectionHeader>', () => {
       });
     });
   });
+
+  describe('when `props.isValid` is `false`', () => {
+    beforeEach(() => {
+      props.isValid = false;
+    });
+
+    it('should render an error icon', () => {
+      const {container} = getComponent();
+      expect(getByTestId(container, 'error-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('when `props.isValid` is `true`', () => {
+    beforeEach(() => {
+      props.isValid = true;
+    });
+
+    it('should render a check icon', () => {
+      const {container} = getComponent();
+      expect(getByTestId(container, 'success-icon')).toBeInTheDocument();
+    });
+  });
 });