feat: [DHIS2-10941] Enrollment widget

* feat: [DHIS2-10941] enrollment widget

* feat: [DHIS2-10941] enrollment widget

cypress/integration/EnrollmentPage/StagesAndEventsWidget/index.js

@@ -1,11 +1,9 @@
+import '../sharedSteps';
+
 beforeEach(() => {
     cy.loginThroughForm();
 });
 
-Given('you open the enrollment page', () => {
-    cy.visit('#/enrollment?enrollmentId=wBU0RAsYjKE');
-});
-
 Then('the program stages should be displayed', () => {
     cy.get('[data-test="stages-and-events-widget"]')
         .within(() => {

cypress/integration/EnrollmentPage/WidgetEnrollment.feature

@@ -0,0 +1,12 @@
+Feature: User interacts with Enrollment Widget
+
+Scenario: User can close the Enrollment Widget
+Given you open the enrollment page
+When you click the enrollment widget toggle open close button
+Then the enrollment widget should be closed
+
+Scenario: User can close and reopen the Enrollment Widget
+Given you open the enrollment page
+When you click the enrollment widget toggle open close button
+And you click the enrollment widget toggle open close button
+Then the enrollment details should be displayed

cypress/integration/EnrollmentPage/WidgetEnrollment/index.js

@@ -0,0 +1,30 @@
+import '../sharedSteps';
+
+beforeEach(() => {
+    cy.loginThroughForm();
+});
+
+Then('the enrollment details should be displayed', () => {
+    cy.get('[data-test="enrollment-widget"]')
+        .within(() => {
+            cy.contains('placeholder content enrollment').should('exist');
+        });
+});
+
+When('you click the enrollment widget toggle open close button', () => {
+    cy.get('[data-test="enrollment-widget"]')
+        .within(() => {
+            cy.get('[data-test="widget-open-close-toggle-button"]')
+                .click();
+        });
+});
+
+Then('the enrollment widget should be closed', () => {
+    cy.get('[data-test="enrollment-widget"]')
+        .within(() => {
+            cy.get('[data-test="widget-contents"]')
+                .children()
+                .should('not.exist');
+            cy.contains('placeholder content enrollment').should('not.exist');
+        });
+});

cypress/integration/EnrollmentPage/sharedSteps.js

@@ -0,0 +1,3 @@
+Given('you open the enrollment page', () => {
+    cy.visit('#/enrollment?enrollmentId=wBU0RAsYjKE');
+});

src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js

@@ -3,6 +3,7 @@ import React, { type ComponentType } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { spacersNum } from '@dhis2/ui';
 import { WidgetStagesAndEvents } from '../../../WidgetStagesAndEvents';
+import { WidgetEnrollment } from '../../../WidgetEnrollment';
 import type { Props, PlainProps } from './EnrollmentPageDefault.types';
 
 const getStyles = ({ typography }) => ({
@@ -39,7 +40,8 @@ export const EnrollmentPageDefaultPlain = ({ program, classes }: PlainProps) =>
                 />
             </div>
             <div className={classes.rightColumn}>
-                [placeholder]
+                [placeholder profile widget]
+                <WidgetEnrollment />
             </div>
         </div>
     </>

src/core_modules/capture-core/components/WidgetEnrollment/WidgetEnrollment.component.js

@@ -0,0 +1,25 @@
+// @flow
+import React, { useState, useCallback } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { Widget } from '../Widget';
+import type { Props } from './enrollment.types';
+
+export const WidgetEnrollment = ({ className }: Props) => {
+    const [open, setOpenStatus] = useState(true);
+
+    return (
+        <div
+            data-test="enrollment-widget"
+            className={className}
+        >
+            <Widget
+                header={i18n.t('Enrollment')}
+                onOpen={useCallback(() => setOpenStatus(true), [setOpenStatus])}
+                onClose={useCallback(() => setOpenStatus(false), [setOpenStatus])}
+                open={open}
+            >
+                [placeholder content enrollment]
+            </Widget>
+        </div>
+    );
+};

src/core_modules/capture-core/components/WidgetEnrollment/enrollment.types.js

@@ -0,0 +1,5 @@
+// @flow
+
+export type Props = {|
+    className?: string,
+|};

src/core_modules/capture-core/components/WidgetEnrollment/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { WidgetEnrollment } from './WidgetEnrollment.component';