diff --git a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker-modal.test.tsx b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker-modal.test.tsx index 001f505990..5f71d53c7c 100644 --- a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker-modal.test.tsx +++ b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker-modal.test.tsx @@ -31,7 +31,7 @@ describe('PrintIdentifierStickerModal', () => { const mockHandlePrint = jest.fn(); mockedUseReactToPrint.mockReturnValue(mockHandlePrint); - renderPrintIdentifierStickerModal(); + render(); expect(screen.getByText(/print identifier sticker/i)).toBeInTheDocument(); const printButton = screen.getByRole('button', { name: /print/i }); @@ -57,7 +57,7 @@ describe('PrintIdentifierStickerModal', () => { }, }); - renderPrintIdentifierStickerModal(); + render(); expect(screen.getAllByTestId('barcode')[0]).toBeInTheDocument(); expect(Barcode).toHaveBeenCalledWith( @@ -91,7 +91,7 @@ describe('PrintIdentifierStickerModal', () => { }, }); - renderPrintIdentifierStickerModal(); + render(); expect(screen.queryByTestId('barcode')).not.toBeInTheDocument(); expect(screen.queryByTestId('openmrs-logo')).not.toBeInTheDocument(); @@ -110,43 +110,39 @@ describe('PrintIdentifierStickerModal', () => { }, }); - renderPrintIdentifierStickerModal(); + render(); expect(screen.getAllByRole('img')[0]).toHaveAttribute('src', '/openmrs/spa/logo.png'); }); it("renders the patient's details in the print modal", () => { - renderPrintIdentifierStickerModal(); + render(); expect(screen.getAllByText(/Joshua Johnson/i)[0]).toBeInTheDocument(); expect(screen.getAllByText(/\+255777053243/i)[0]).toBeInTheDocument(); expect(screen.getAllByText(/100008E/i)[0]).toBeInTheDocument(); expect(screen.getAllByText(age(mockFhirPatient.birthDate))[0]).toBeInTheDocument(); }); -}); -it('should not render multiple sticker inputs if multiple stickers are disabled via config', async () => { - mockedUseConfig.mockReturnValue({ - ...defaultConfig, - printPatientSticker: { - ...defaultConfig.printPatientSticker, - printMultipleStickers: { - enabled: false, - totalStickers: 1, - stickerColumnsPerPage: 1, - stickerRowsPerPage: 1, + it('should not render multiple sticker inputs if multiple stickers are disabled via config', async () => { + mockedUseConfig.mockReturnValue({ + ...defaultConfig, + printPatientSticker: { + ...defaultConfig.printPatientSticker, + printMultipleStickers: { + enabled: false, + totalStickers: 1, + stickerColumnsPerPage: 1, + stickerRowsPerPage: 1, + }, + stickerSize: { height: '2in', width: '2in' }, }, - stickerSize: { height: '2in', width: '2in' }, - }, - }); + }); - renderPrintIdentifierStickerModal(); + render(); - expect(screen.queryByLabelText('columnsPerPage')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('rowsPerPage')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('totalNumber')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('columnsPerPage')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('rowsPerPage')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('totalNumber')).not.toBeInTheDocument(); + }); }); - -function renderPrintIdentifierStickerModal() { - return render(); -} diff --git a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx index 3f0ba3dd4e..afc5569175 100644 --- a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx +++ b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.modal.tsx @@ -1,23 +1,23 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'; +import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import { useReactToPrint } from 'react-to-print'; import { Button, + Column, + Grid, InlineLoading, ModalBody, ModalFooter, ModalHeader, NumberInput, Stack, - Grid, - Column, Toggle, } from '@carbon/react'; -import { getPatientName, showSnackbar, useConfig, getCoreTranslation } from '@openmrs/esm-framework'; +import { getPatientName, getCoreTranslation, showSnackbar, useConfig } from '@openmrs/esm-framework'; import { type ConfigObject } from '../config-schema'; -import styles from './print-identifier-sticker.scss'; -import classNames from 'classnames'; import PrintComponent from './print-identifier-sticker.component'; +import styles from './print-identifier-sticker.scss'; interface PrintIdentifierStickerProps { closeModal: () => void; @@ -26,17 +26,17 @@ interface PrintIdentifierStickerProps { interface PrintMultipleStickersComponentProps extends Partial { pageSize: string; + patient: fhir.Patient; printMultipleStickers: { enabled: boolean; - totalStickers: number; stickerColumnsPerPage: number; stickerRowsPerPage: number; + totalStickers: number; }; stickerSize: { height: string; width: string; }; - patient: fhir.Patient; } const PrintIdentifierSticker: React.FC = ({ closeModal, patient }) => { diff --git a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss index 57eecc5966..870369a06f 100644 --- a/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss +++ b/packages/esm-patient-banner-app/src/print-identifier-sticker/print-identifier-sticker.scss @@ -1,7 +1,7 @@ +@use '@carbon/colors'; @use '@carbon/layout'; @use '@carbon/type'; @use '@openmrs/esm-styleguide/src/_vars' as *; -@use '@carbon/colors'; .stickerContainer { padding: layout.$spacing-03 layout.$spacing-05; @@ -10,7 +10,7 @@ } .gridContainer { - padding-left: 0rem; + padding-left: 0; } .documentHeader { @@ -30,13 +30,13 @@ } .gridRow { - padding: 0px; + padding: 0; display: flex; flex-direction: row; justify-content: space-between; div { - margin-left: 0px; + margin-left: 0; margin-bottom: 5px; } } @@ -77,6 +77,7 @@ @include type.type-style('heading-03'); font-weight: 700; } + :global(.cds--toggle__switch--checked) { background-color: colors.$green-50; } @@ -92,18 +93,18 @@ } .previewContainer { - max-height: 10rem; + max-height: layout.$spacing-13; overflow: scroll; background-color: white; width: 100%; border: 1px solid $ui-03; margin-left: auto; margin-right: auto; - padding: 2rem; + padding: layout.$spacing-07; } .labelNumberInput { - padding: 1rem; + padding: layout.$spacing-05; } .hidePreviewContainer { @@ -149,17 +150,17 @@ .multipleStickerInputs { display: flex; - gap: 1rem; + gap: layout.$spacing-05; } .previewButton { - margin-top: 1rem; + margin-top: layout.$spacing-05; } .fieldsContainer { display: grid; grid-template-columns: 1fr 1fr; - gap: 1rem 1rem; + gap: layout.$spacing-05 layout.$spacing-05; } .fieldRow {