@openmrs/esm-form-engine-lib 2.1.0-pre.1443 → 2.1.0-pre.1462

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1443",
+  "version": "2.1.0-pre.1462",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/components/renderer/form/form-renderer.component.tsx

@@ -91,7 +91,12 @@ export const FormRenderer = ({ processorContext, initialValues, setIsLoadingForm
             />
           );
         }
-        return <PageRenderer page={page} />;
+        return (
+          <PageRenderer
+            key={page.label}
+            page={page}
+          />
+        );
       })}
     </FormProvider>
   );

package/src/components/renderer/page/page.renderer.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { type FormPage } from '../../../types';
 import { isTrue } from '../../../utils/boolean-utils';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { Waypoint } from 'react-waypoint';
 import styles from './page.renderer.scss';
 import { Accordion, AccordionItem } from '@carbon/react';
 import { useFormFactory } from '../../../provider/form-factory-provider';
+import { ChevronDownIcon, ChevronUpIcon } from '@openmrs/esm-framework';
 
 interface PageRendererProps {
   page: FormPage;
@@ -15,32 +16,47 @@ interface PageRendererProps {
 function PageRenderer({ page }: PageRendererProps) {
   const { t } = useTranslation();
   const pageId = useMemo(() => page.label.replace(/\s/g, ''), [page.label]);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   const { setCurrentPage } = useFormFactory();
   const visibleSections = page.sections.filter((section) => {
     const hasVisibleQuestions = section.questions.some((question) => !isTrue(question.isHidden));
     return !isTrue(section.isHidden) && hasVisibleQuestions;
   });
+
+  const toggleCollapse = () => setIsCollapsed(!isCollapsed);
+
   return (
     <div>
       <Waypoint onEnter={() => setCurrentPage(pageId)} topOffset="50%" bottomOffset="60%">
         <div className={styles.pageContent}>
-          <div className={styles.pageHeader}>
-            <p className={styles.pageTitle}>{t(page.label)}</p>
+          <div className={styles.pageHeader} onClick={toggleCollapse}>
+            <p className={styles.pageTitle}>
+              {t(page.label)}
+              <span className={styles.collapseIconWrapper}>
+                {isCollapsed ? (
+                  <ChevronDownIcon className={styles.collapseIcon} aria-label="Expand" />
+                ) : (
+                  <ChevronUpIcon className={styles.collapseIcon} aria-label="Collapse" />
+                )}
+              </span>
+            </p>
           </div>
-          <Accordion>
-            {visibleSections.map((section) => (
-              <AccordionItem
-                title={t(section.label)}
-                open={true}
-                className={styles.sectionContainer}
-                key={`section-${section.label}`}>
-                <div className={styles.formSection}>
-                  <SectionRenderer section={section} />
-                </div>
-              </AccordionItem>
-            ))}
-          </Accordion>
+          {!isCollapsed && (
+            <Accordion>
+              {visibleSections.map((section) => (
+                <AccordionItem
+                  title={t(section.label)}
+                  open={true}
+                  className={styles.sectionContainer}
+                  key={`section-${section.label}`}>
+                  <div className={styles.formSection}>
+                    <SectionRenderer section={section} />
+                  </div>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          )}
         </div>
       </Waypoint>
     </div>

package/src/components/renderer/page/page.renderer.scss

@@ -1,13 +1,19 @@
 @use '@carbon/colors';
+@use '@carbon/type';
 
 .pageContent:last-child > hr {
   display: none;
 }
 
 .pageHeader {
-  display: flex;
-  flex-direction: row;
-  margin: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 1px;
+  padding: 0.5rem 1rem;
+
+  &:hover {
+    background-color: colors.$gray-20;
+  }
 }
 
 .pageTitle {
@@ -16,6 +22,16 @@
   line-height: 1.4;
   color: colors.$gray-100;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+}
+
+.collapseIcon {
+  fill: colors.$gray-70;
+  width: 1rem;
+  height: 1rem;
 }
 
 .sectionContainer > div {

package/src/components/sidebar/sidebar.scss

@@ -118,4 +118,4 @@
 
 .toggleContainer {
   margin-bottom: 0.5rem;
-}
+}