@kenyaemr/esm-patient-registration-app 7.0.3-pre.89 → 8.0.0

package/src/patient-registration/patient-registration.scss

@@ -1,13 +1,9 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-.title {
-  color: var(--omrs-color-brand-teal);
-}
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .submit {
-  width: 250px;
+  width: 15.625rem;
 }
 
 .submit:hover {
@@ -32,6 +28,12 @@
   max-width: 50rem;
 }
 
+:global(.omrs-breakpoint-lt-desktop) {
+  .infoGrid {
+    max-width: unset;
+  }
+}
+
 .label01 {
   @include type.type-style('label-01');
   margin-top: layout.$spacing-05;
@@ -39,12 +41,6 @@
   color: $ui-04;
 }
 
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-  color: $ui-04;
-  cursor: pointer;
-}
-
 .space05 {
   margin: layout.$spacing-05 0;
 }
@@ -57,8 +53,8 @@
 .stickyColumn {
   position: sticky;
   margin-top: layout.$spacing-05;
-  // 3rem for the nav height and 1rem for top margin
-  top: 4rem;
+  // layout.$spacing-09 for the nav height and layout.$spacing-05 for top margin
+  top: layout.$spacing-10;
 }
 
 .touchTarget a:active {
@@ -83,18 +79,8 @@
   }
 }
 
-.main {
-  background-color: white;
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .infoGrid {
-    max-width: unset;
-  }
-}
-
 .spinner {
-  min-height: 1rem;
+  min-height: layout.$spacing-05;
   width: max-content;
 
   :global(.cds--inline-loading__text) {

package/src/patient-registration/patient-registration.test.tsx

@@ -1,24 +1,31 @@
 import React from 'react';
+import dayjs from 'dayjs';
+import userEvent from '@testing-library/user-event';
 import { BrowserRouter as Router, useParams } from 'react-router-dom';
 import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
+import {
+  type FetchResponse,
+  getDefaultsFromConfigSchema,
+  OpenmrsDatePicker,
+  showSnackbar,
+  useConfig,
+  usePatient,
+} from '@openmrs/esm-framework';
+import { mockedAddressTemplate } from '__mocks__';
+import { mockPatient } from 'tools';
+import { saveEncounter, savePatient } from './patient-registration.resource';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../config-schema';
 import type { AddressTemplate, Encounter } from './patient-registration.types';
-import { type RegistrationConfig } from '../config-schema';
-import { FormManager } from './form-manager';
 import { ResourcesContext } from '../offline.resources';
+import { FormManager } from './form-manager';
 import { PatientRegistration } from './patient-registration.component';
-import { saveEncounter, savePatient } from './patient-registration.resource';
-import { mockedAddressTemplate } from '__mocks__';
-import { mockPatient } from 'tools';
-import dayjs from 'dayjs';
-import { CalendarDate, parseDate } from '@internationalized/date';
 
-const mockedUseConfig = useConfig as jest.Mock;
-const mockedUsePatient = usePatient as jest.Mock;
-const mockedSaveEncounter = saveEncounter as jest.Mock;
-const mockedSavePatient = savePatient as jest.Mock;
-const mockedShowSnackbar = showSnackbar as jest.Mock;
+const mockSaveEncounter = jest.mocked(saveEncounter);
+const mockSavePatient = savePatient as jest.Mock;
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+const mockUsePatient = jest.mocked(usePatient);
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
 
 jest.mock('./field/field.resource', () => ({
   useConcept: jest.fn().mockImplementation((uuid: string) => {
@@ -86,38 +93,26 @@ jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockReturnValue({ patientUuid: undefined }),
 }));
 
-jest.mock('./patient-registration.resource', () => {
-  const originalModule = jest.requireActual('./patient-registration.resource');
-
-  return {
-    ...originalModule,
-    saveEncounter: jest.fn(),
-    savePatient: jest.fn(),
-  };
-});
+jest.mock('./patient-registration.resource', () => ({
+  ...jest.requireActual('./patient-registration.resource'),
+  saveEncounter: jest.fn(),
+  savePatient: jest.fn(),
+}));
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-    getLocale: jest.fn().mockReturnValue('en'),
-    OpenmrsDatePicker: jest.fn().mockImplementation(({ id, labelText, value, onChange }) => {
-      return (
-        <>
-          <label htmlFor={id}>{labelText}</label>
-          <input
-            id={id}
-            value={value ? dayjs(value).format('DD/MM/YYYY') : ''}
-            onChange={(evt) => {
-              onChange(dayjs(evt.target.value).toDate());
-            }}
-          />
-        </>
-      );
-    }),
-  };
+mockOpenmrsDatePicker.mockImplementation(({ id, labelText, value, onChange }) => {
+  return (
+    <>
+      <label htmlFor={id}>{labelText}</label>
+      <input
+        id={id}
+        // @ts-ignore
+        value={value ? dayjs(value).format('DD/MM/YYYY') : ''}
+        onChange={(evt) => {
+          onChange(dayjs(evt.target.value).toDate());
+        }}
+      />
+    </>
+  );
 });
 
 const mockResourcesContextValue = {
@@ -140,6 +135,9 @@ let mockOpenmrsConfig: RegistrationConfig = {
   ],
   fieldDefinitions: [],
   fieldConfigurations: {
+    phone: {
+      personAttributeUuid: '14d4f066-15f5-102d-96e4-000c29c2a5d7',
+    },
     dateOfBirth: {
       allowEstimatedDateOfBirth: true,
       useEstimatedDateOfBirth: {
@@ -170,9 +168,6 @@ let mockOpenmrsConfig: RegistrationConfig = {
       },
     },
   },
-  concepts: {
-    patientPhotoUuid: '736e8771-e501-4615-bfa7-570c03f4bef5',
-  },
   links: {
     submitButton: '#',
   },
@@ -236,7 +231,6 @@ const fillRequiredFields = async () => {
   const familyNameInput = within(demographicsSection).getByLabelText(/family/i) as HTMLInputElement;
   const dateOfBirthInput = within(demographicsSection).getByLabelText(/date of birth/i) as HTMLInputElement;
   const genderInput = within(demographicsSection).getByLabelText(/Male/) as HTMLSelectElement;
-  screen.debug(dateOfBirthInput);
   await user.type(givenNameInput, 'Paul');
   await user.type(familyNameInput, 'Gaihre');
   await user.clear(dateOfBirthInput);
@@ -254,11 +248,11 @@ function Wrapper({ children }) {
 
 describe('Registering a new patient', () => {
   beforeEach(() => {
-    mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
-    mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
-    mockedSaveEncounter.mockClear();
-    mockedShowSnackbar.mockClear();
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      ...mockOpenmrsConfig,
+    });
+    mockSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
   });
 
   it('renders without crashing', () => {
@@ -268,8 +262,8 @@ describe('Registering a new patient', () => {
   it('has the expected sections', async () => {
     render(<PatientRegistration isOffline={false} savePatientForm={jest.fn()} />, { wrapper: Wrapper });
 
-    expect(screen.getByLabelText(/Demographics Section/)).not.toBeNull();
-    expect(screen.getByLabelText(/Contact Info Section/)).not.toBeNull();
+    expect(screen.getByRole('region', { name: /demographics section/i })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: /contact info section/i })).toBeInTheDocument();
   });
 
   // TODO O3-3482: Fix this test case when OpenmrsDatePicker gets fixed on core
@@ -282,7 +276,7 @@ describe('Registering a new patient', () => {
 
     await fillRequiredFields();
     await user.click(await screen.findByText(/Register Patient/i));
-    expect(mockedSavePatient).toHaveBeenCalledWith(
+    expect(mockSavePatient).toHaveBeenCalledWith(
       expect.objectContaining({
         identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' },
         person: {
@@ -304,23 +298,23 @@ describe('Registering a new patient', () => {
   it('should not save the patient if validation fails', async () => {
     const user = userEvent.setup();
 
-    const mockedSavePatientForm = jest.fn();
-    render(<PatientRegistration isOffline={false} savePatientForm={mockedSavePatientForm} />, { wrapper: Wrapper });
+    const mockSavePatientForm = jest.fn();
+    render(<PatientRegistration isOffline={false} savePatientForm={mockSavePatientForm} />, { wrapper: Wrapper });
 
     const givenNameInput = (await screen.findByLabelText('First Name')) as HTMLInputElement;
 
     await user.type(givenNameInput, '5');
     await user.click(screen.getByText(/Register Patient/i));
 
-    expect(mockedSavePatientForm).not.toHaveBeenCalled();
+    expect(mockSavePatientForm).not.toHaveBeenCalled();
   });
 
   // TODO O3-3482: Fix this test case when OpenmrsDatePicker gets fixed on core
   it.skip('renders and saves registration obs', async () => {
     const user = userEvent.setup();
 
-    mockedSaveEncounter.mockResolvedValue({});
-    mockedUseConfig.mockReturnValue(configWithObs);
+    mockSaveEncounter.mockResolvedValue({} as unknown as FetchResponse);
+    mockUseConfig.mockReturnValue(configWithObs);
 
     render(<PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />, {
       wrapper: Wrapper,
@@ -337,9 +331,9 @@ describe('Registering a new patient', () => {
 
     await user.click(screen.getByText(/Register Patient/i));
 
-    expect(mockedSavePatient).toHaveBeenCalled();
+    expect(mockSavePatient).toHaveBeenCalled();
 
-    expect(mockedSaveEncounter).toHaveBeenCalledWith(
+    expect(mockSaveEncounter).toHaveBeenCalledWith(
       expect.objectContaining<Partial<Encounter>>({
         encounterType: 'reg-enc-uuid',
         patient: 'new-pt-uuid',
@@ -356,7 +350,7 @@ describe('Registering a new patient', () => {
   it.skip('retries saving registration obs after a failed attempt', async () => {
     const user = userEvent.setup();
 
-    mockedUseConfig.mockReturnValue(configWithObs);
+    mockUseConfig.mockReturnValue(configWithObs);
 
     render(<PatientRegistration isOffline={false} savePatientForm={FormManager.savePatientFormOnline} />, {
       wrapper: Wrapper,
@@ -367,52 +361,48 @@ describe('Registering a new patient', () => {
     const weight = within(customSection).getByLabelText('Weight (kg) (optional)');
     await user.type(weight, '-999');
 
-    mockedSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
+    mockSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
 
     const registerPatientButton = screen.getByText(/Register Patient/i);
 
     await user.click(registerPatientButton);
 
-    expect(mockedSavePatient).toHaveBeenCalledTimes(1);
-    expect(mockedSaveEncounter).toHaveBeenCalledTimes(1);
+    expect(mockSavePatient).toHaveBeenCalledTimes(1);
+    expect(mockSaveEncounter).toHaveBeenCalledTimes(1);
 
-    expect(mockedShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ subtitle: 'an error message' })),
-      mockedSaveEncounter.mockResolvedValue({});
+    expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ subtitle: 'an error message' })),
+      mockSaveEncounter.mockResolvedValue({} as FetchResponse);
 
     await user.click(registerPatientButton);
-    expect(mockedSavePatient).toHaveBeenCalledTimes(2);
-    expect(mockedSaveEncounter).toHaveBeenCalledTimes(2);
+    expect(mockSavePatient).toHaveBeenCalledTimes(2);
+    expect(mockSaveEncounter).toHaveBeenCalledTimes(2);
 
-    expect(mockedShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+    expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
   });
 });
 
 describe('Updating an existing patient record', () => {
   beforeEach(() => {
-    mockedUseConfig.mockReturnValue(mockOpenmrsConfig);
-    mockedSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
-    mockedSaveEncounter.mockClear();
-    mockedShowSnackbar.mockClear();
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue(mockOpenmrsConfig);
+    mockSavePatient.mockReturnValue({ data: { uuid: 'new-pt-uuid' }, ok: true });
   });
 
   it('edits patient demographics', async () => {
     const user = userEvent.setup();
+    mockSavePatient.mockResolvedValue({} as FetchResponse);
 
-    mockedSavePatient.mockResolvedValue({});
-
-    const mockedUseParams = useParams as jest.Mock;
+    const mockUseParams = useParams as jest.Mock;
 
-    mockedUseParams.mockReturnValue({ patientUuid: mockPatient.id });
+    mockUseParams.mockReturnValue({ patientUuid: mockPatient.id });
 
-    mockedUsePatient.mockReturnValue({
+    mockUsePatient.mockReturnValue({
       isLoading: false,
       patient: mockPatient,
       patientUuid: mockPatient.id,
       error: null,
     });
 
-    render(<PatientRegistration isOffline={false} savePatientForm={mockedSavePatient} />, { wrapper: Wrapper });
+    render(<PatientRegistration isOffline={false} savePatientForm={mockSavePatient} />, { wrapper: Wrapper });
 
     const givenNameInput: HTMLInputElement = screen.getByLabelText(/First Name/);
     const familyNameInput: HTMLInputElement = screen.getByLabelText(/Family Name/);
@@ -436,7 +426,7 @@ describe('Updating an existing patient record', () => {
     await user.type(familyNameInput, 'Smith');
     await user.click(screen.getByText(/Update patient/i));
 
-    expect(mockedSavePatient).toHaveBeenCalledWith(
+    expect(mockSavePatient).toHaveBeenCalledWith(
       false,
       {
         '0': {

package/src/patient-registration/patient-registration.types.ts

@@ -154,36 +154,36 @@ export interface RelationshipValue {
 }
 
 export interface FormValues {
-  patientUuid: string;
-  givenName: string;
-  middleName: string;
-  familyName: string;
+  additionalFamilyName: string;
   additionalGivenName: string;
   additionalMiddleName: string;
-  additionalFamilyName: string;
   addNameInLocalLanguage: boolean;
-  gender: string;
+  address: {
+    [addressField: string]: string;
+  };
+  attributes?: {
+    [attributeTypeUuid: string]: string;
+  };
   birthdate: Date | string;
-  yearsEstimated: number;
-  monthsEstimated: number;
   birthdateEstimated: boolean;
-  telephoneNumber: string;
-  isDead: boolean;
-  deathDate: string;
   deathCause: string;
-  relationships: Array<RelationshipValue>;
+  deathDate: string;
+  familyName: string;
+  gender: string;
+  givenName: string;
   identifiers: {
     [identifierFieldName: string]: PatientIdentifierValue;
   };
-  attributes?: {
-    [attributeTypeUuid: string]: string;
-  };
+  isDead: boolean;
+  middleName: string;
+  monthsEstimated: number;
   obs?: {
     [conceptUuid: string]: string;
   };
-  address: {
-    [addressField: string]: string;
-  };
+  patientUuid: string;
+  relationships: Array<RelationshipValue>;
+  telephoneNumber: string;
+  yearsEstimated: number;
   observation?: ObsResponse;
   concepts?: Array<ConceptAnswers>;
   token?: string;

package/src/patient-registration/section/death-info/death-info-section.test.tsx

@@ -6,15 +6,6 @@ import { DeathInfoSection } from './death-info-section.component';
 import { type FormValues } from '../../patient-registration.types';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-  };
-});
-
 const initialContextValues = {
   currentPhoto: 'data:image/png;base64,1234567890',
   identifierTypes: [],
@@ -34,7 +25,7 @@ describe('Death info section', () => {
   const renderDeathInfoSection = (isDead) => {
     initialContextValues.values.isDead = isDead;
 
-    return render(
+    render(
       <PatientRegistrationContext.Provider value={initialContextValues}>
         <Formik initialValues={initialFormValues} onSubmit={jest.fn()}>
           <Form>

package/src/patient-registration/section/demographics/demographics-section.test.tsx

@@ -1,37 +1,30 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import dayjs from 'dayjs';
 import { Formik, Form } from 'formik';
 import { initialFormValues } from '../../patient-registration.component';
+import { getDefaultsFromConfigSchema, OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { DemographicsSection } from './demographics-section.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { type FormValues } from '../../patient-registration.types';
-import dayjs from 'dayjs';
+import { type RegistrationConfig, esmPatientRegistrationSchema } from '../../../config-schema';
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
 
-  return {
-    ...originalModule,
-    validator: jest.fn(),
-    useConfig: jest.fn().mockImplementation(() => ({
-      fieldConfigurations: { dateOfBirth: { useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 } } },
-    })),
-    getLocale: jest.fn().mockReturnValue('en'),
-    OpenmrsDatePicker: jest.fn().mockImplementation(({ id, labelText, value, onChange }) => {
-      return (
-        <>
-          <label htmlFor={id}>{labelText}</label>
-          <input
-            id={id}
-            value={value ? dayjs(value).format('DD/MM/YYYY') : ''}
-            onChange={(evt) => {
-              onChange(dayjs(evt.target.value).toDate());
-            }}
-          />
-        </>
-      );
-    }),
-  };
+mockOpenmrsDatePicker.mockImplementation(({ id, labelText, value, onChange }) => {
+  return (
+    <>
+      <label htmlFor={id}>{labelText}</label>
+      <input
+        id={id}
+        // @ts-ignore
+        value={value ? dayjs(value).format('DD/MM/YYYY') : ''}
+        onChange={(evt) => {
+          onChange(dayjs(evt.target.value).toDate());
+        }}
+      />
+    </>
+  );
 });
 
 jest.mock('../../field/name/name-field.component', () => {
@@ -64,8 +57,18 @@ jest.mock('../../field/id/id-field.component', () => {
   };
 });
 
-describe('demographics section', () => {
-  const formValues: FormValues = initialFormValues;
+describe('Demographics section', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+      fieldConfigurations: {
+        dateOfBirth: {
+          allowEstimatedDateOfBirth: true,
+          useEstimatedDateOfBirth: { enabled: true, dayOfMonth: 0, month: 0 },
+        },
+      } as RegistrationConfig['fieldConfigurations'],
+    });
+  });
 
   const setupSection = async (birthdateEstimated?: boolean, addNameInLocalLanguage?: boolean) => {
     render(
@@ -83,7 +86,7 @@ describe('demographics section', () => {
               isOffline: true,
               setCapturePhotoProps: (value) => {},
             }}>
-            <DemographicsSection fields={['name', 'gender', 'dob']} id="demographics" />
+            <DemographicsSection fields={['name', 'gender', 'dob']} />
           </PatientRegistrationContext.Provider>
         </Form>
       </Formik>,

package/src/patient-registration/section/patient-relationships/relationships-section.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Form, Formik } from 'formik';
 import { render, screen } from '@testing-library/react';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { type Resources, ResourcesContext } from '../../../offline.resources';
+import { type FormValues } from '../../patient-registration.types';
+import { PatientRegistrationContext } from '../../patient-registration-context';
 import { RelationshipsSection } from './relationships-section.component';
 
 jest.mock('../../patient-registration.resource', () => ({
@@ -27,6 +28,19 @@ let mockResourcesContextValue = {
   relationshipTypes: null,
 } as Resources;
 
+const initialContextValues = {
+  currentPhoto: 'data:image/png;base64,1234567890',
+  identifierTypes: [],
+  inEditMode: false,
+  initialFormValues: {} as FormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  validationSchema: null,
+  values: {} as FormValues,
+};
+
 describe('RelationshipsSection', () => {
   it('renders a loader when relationshipTypes are not available', () => {
     render(
@@ -76,11 +90,7 @@ describe('RelationshipsSection', () => {
           }}
           onSubmit={null}>
           <Form>
-            <PatientRegistrationContext.Provider
-              value={{
-                setFieldValue: jest.fn(),
-                setInitialFormValues: jest.fn(),
-              }}>
+            <PatientRegistrationContext.Provider value={initialContextValues}>
               <RelationshipsSection />
             </PatientRegistrationContext.Provider>
           </Form>

package/src/patient-registration/section/patient-relationships/relationships.scss

@@ -1,6 +1,6 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .labelText {
   @include type.type-style('label-01');
@@ -11,7 +11,7 @@
 }
 
 .searchBox {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .relationshipHeader {

package/src/patient-registration/section/section-wrapper.component.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import styles from '../patient-registration.scss';
 import { Tile } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type SectionDefinition } from '../../config-schema';
 import { Section } from './section.component';
+import styles from './section.scss';
 
 export interface SectionWrapperProps {
   sectionDefinition: SectionDefinition;

package/src/patient-registration/section/section.scss

@@ -1 +1,16 @@
-@import '../patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+  color: $ui-04;
+}
+
+.productiveHeading02 {
+  @include type.type-style('heading-compact-02');
+  color: $ui-04;
+  cursor: pointer;
+}

package/src/patient-registration/ui-components/overlay/overlay.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '../../patient-registration.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .desktopOverlay {
   position: fixed;
-  top: spacing.$spacing-09;
+  top: layout.$spacing-09;
   right: 0;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
   min-width: 27rem;
   background-color: $ui-02;
   border-left: 1px solid $text-03;
@@ -25,7 +25,7 @@
   z-index: 9999;
   background-color: $ui-02;
   overflow: hidden;
-  padding-top: spacing.$spacing-09;
+  padding-top: layout.$spacing-09;
   display: grid;
   grid-template-rows: 1fr auto;
 }
@@ -49,7 +49,7 @@
 
 .headerContent {
   @include type.type-style('heading-compact-02');
-  padding: 0 spacing.$spacing-05;
+  padding: 0 layout.$spacing-05;
   color: $ui-05;
 }
 
@@ -58,6 +58,6 @@
 }
 
 .overlayContent {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   overflow-y: auto;
 }