@openmrs/esm-user-onboarding-app 4.0.1-pre.3 → 4.0.1-pre.302

package/src/tooltip/tooltip.scss

@@ -1,20 +1,20 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tooltipcontainer {
   background-color: $ui-02;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  max-width: 360px;
-  border-radius: spacing.$spacing-02;
-  gap: spacing.$spacing-04;
+  max-width: 22.5rem;
+  border-radius: layout.$spacing-02;
+  gap: layout.$spacing-04;
 
   .tooltipheader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: spacing.$spacing-01;
+    margin-bottom: layout.$spacing-01;
 
   .container {
     display: flex;
@@ -24,11 +24,11 @@
 
   .tooltiptitle {
     @include type.type-style('heading-02');
-    margin-bottom: spacing.$spacing-02;
+    margin-bottom: layout.$spacing-02;
   }
 
   .closeButton {
-    min-height: 16px;
+    min-height: layout.$spacing-05;
     padding: 0;
     align-self: flex-start;
   }
@@ -38,12 +38,12 @@
     color: $color-gray-70;
     @include type.type-style('body-compact-01');
     width: 100%;
-    margin-top: spacing.$spacing-01;
+    margin-top: layout.$spacing-01;
 }
 
 
   .tooltipfooter {
-    margin-top: spacing.$spacing-03;
+    margin-top: layout.$spacing-03;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -55,27 +55,27 @@
 
   .buttonContainer {
     display: flex;
-    gap: spacing.$spacing-03;
+    gap: layout.$spacing-03;
 
   .buttonback,
   .buttonnext {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: spacing.$spacing-02;
-    width: spacing.$spacing-12;
+    padding: layout.$spacing-02;
+    width: layout.$spacing-12;
 
     .arrowLeft,
     .arrowContainer {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: spacing.$spacing-02;
+      margin-left: layout.$spacing-02;
     }
 
     .arrowLeft svg {
       fill: $color-blue-60-2 !important;
-      margin-right: spacing.$spacing-02;
+      margin-right: layout.$spacing-02;
     }
   }
 }

package/src/tutorial/modal.component.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ModalHeader, ModalBody, Link } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useConfig, useAppContext, navigate } from '@openmrs/esm-framework';
-import styles from './styles.scss';
 import { type TutorialContext } from '../types';
-import { ModalHeader, ModalBody, Link } from '@carbon/react';
-import { ArrowRight } from '@carbon/react/icons';
+import styles from './styles.scss';
+
+interface TutorialModalProps {
+  open: boolean;
+  onClose: () => void;
+}
 
-const TutorialModal = ({ open, onClose }) => {
+const TutorialModal: React.FC<TutorialModalProps> = ({ open, onClose }) => {
   const { t } = useTranslation();
   const config = useConfig();
   const tutorials = config.tutorialData;
@@ -14,7 +19,7 @@ const TutorialModal = ({ open, onClose }) => {
 
   const handleWalkthroughClick = (index: number) => {
     const basePath = window.getOpenmrsSpaBase();
-    const homePath = `${basePath}home`;
+    const homePath = `${basePath}home/service-queues`;
     const currentPath = window.location.pathname;
     const tutorial = tutorials[index];
 
@@ -40,7 +45,7 @@ const TutorialModal = ({ open, onClose }) => {
 
   return (
     <React.Fragment>
-      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')} className={styles.modalHeader}>
+      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')}>
         <p className={styles.description}>
           {t('modalDescription', 'Find walkthroughs and video tutorials on some of the core features of OpenMRS.')}
         </p>
@@ -51,8 +56,11 @@ const TutorialModal = ({ open, onClose }) => {
             <li className={styles.tutorialItem} key={index}>
               <h3 className={styles.tutorialTitle}>{tutorial.title}</h3>
               <p className={styles.tutorialDescription}>{tutorial.description}</p>
-              <Link onClick={() => handleWalkthroughClick(index)} className={styles.tutorialLink} renderIcon={() => 
-                <ArrowRight aria-label="Arrow Right" />}>
+              <Link
+                onClick={() => handleWalkthroughClick(index)}
+                className={styles.tutorialLink}
+                renderIcon={() => <ArrowRight aria-label="Arrow Right" />}
+              >
                 {t('walkthrough', 'Walkthrough')}
               </Link>
             </li>

package/src/tutorial/{modal.component.test.tsx → modal.test.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
-import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { useAppContext, useConfig, navigate } from '@openmrs/esm-framework';
 import TutorialModal from './modal.component';
-import {useAppContext, useConfig, navigate} from "@openmrs/esm-framework";
-import userEvent from '@testing-library/user-event'
 
 jest.mock('@openmrs/esm-framework', () => ({
   useConfig: jest.fn(),
@@ -57,7 +57,6 @@ mockUseAppContext.mockReturnValue({
 
 describe('TutorialModal', () => {
   afterEach(() => {
-    jest.clearAllMocks();
     delete window.location;
     window.location = { pathname: '/patient-registration' } as any;
   });
@@ -72,14 +71,18 @@ describe('TutorialModal', () => {
       },
     });
 
-    render(<TutorialModal open={true} onClose={jest.fn()}/>);
+    render(<TutorialModal open={true} onClose={jest.fn()} />);
 
     const walkthroughButton = screen.getAllByText('Walkthrough');
     await user.click(walkthroughButton[0]);
 
-    expect(navigate).toHaveBeenCalledWith({ to: '/spa-base/home' });
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: expect.stringContaining('/spa-base/home/service-queues'),
+      }),
+    );
     Object.defineProperty(window.location, 'pathname', {
-      value: '/spa-base/home',
+      value: '/spa-base/home/service-queues',
     });
 
     await waitFor(() => expect(setSteps).toHaveBeenCalledWith(mockTutorialData[0].steps));
@@ -95,4 +98,3 @@ describe('TutorialModal', () => {
     });
   });
 });
-

package/src/tutorial/styles.scss

@@ -1,24 +1,23 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .description {
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
   @include type.type-style('body-compact-01');
 }
 
 .tutorialModal {
   display: flex;
   flex-direction: column;
-  gap: spacing.$spacing-04;
+  gap: layout.$spacing-04;
 
   .tutorialItem {
     border-bottom: 1px solid $ui-03;
-    padding-bottom: spacing.$spacing-02;
+    padding-bottom: layout.$spacing-02;
 
     .tutorialTitle {
-      margin-bottom: spacing.$spacing-04;
+      margin-bottom: layout.$spacing-04;
       @include type.type-style('heading-02');
     }
 
@@ -28,37 +27,10 @@
     }
 
     .tutorialLink {
-      margin-bottom: spacing.$spacing-04;
-      margin-top: spacing.$spacing-04;
+      margin-bottom: layout.$spacing-04;
+      margin-top: layout.$spacing-04;
       cursor: pointer;
     }
   }
 }
 
-.modalHeader {
-  :global {
-    .cds--modal-close-button {
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-end: 0;
-      margin: 0;
-      margin-top: calc(-1 * #{layout.$spacing-05});
-    }
-
-    .cds--modal-close {
-      background-color: rgba(0, 0, 0, 0);
-
-      &:hover {
-        background-color: var(--cds-layer-hover);
-      }
-    }
-
-    .cds--popover--left > .cds--popover > .cds--popover-content {
-      transform: translate(-4rem, 0.85rem);
-    }
-
-    .cds--popover--left > .cds--popover > .cds--popover-caret {
-      transform: translate(-3.75rem, 1.25rem);
-    }
-  }
-}

package/src/tutorial/{tutorial.tsx → tutorial.component.tsx}

@@ -12,11 +12,7 @@ const Tutorial = () => {
     });
   };
 
-  return (
-    <>
-      <div onClick={handleOpenModal}>{t('tutorials', 'Tutorials')}</div>
-    </>
-  );
+  return <div onClick={handleOpenModal}>{t('tutorials', 'Tutorials')}</div>;
 };
 
 export default Tutorial;

package/src/types.ts

@@ -1,15 +1,25 @@
-import {type Step} from "react-joyride";
+import { type Step } from 'react-joyride';
+
+export interface ExtendedStep extends Step {
+  hideBackButton?: boolean;
+  hideNextButton?: boolean;
+  hideFooter?: boolean;
+  hideCloseButton?: boolean;
+  data?: {
+    autoNextOn?: string;
+  };
+}
 
 export interface Tutorial {
   title: string;
   description: string;
-  steps: Step[];
+  steps: ExtendedStep[];
 }
 
 export interface TutorialContext {
   showTutorial: boolean;
-  steps: Step[];
+  steps: ExtendedStep[];
   setShowTutorial: (showTutorial: boolean) => void;
-  setSteps: (steps: Step[]) => void;
+  setSteps: (steps: ExtendedStep[]) => void;
+  [key: string | number | symbol]: unknown;
 }
-

package/translations/am.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ar.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ar_SY.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/bn.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/cs.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/de.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/en_US.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/es.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/es_MX.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/fr.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Retour",
+  "finish": "Terminer",
+  "modalDescription": "Vous trouverez des guides et des tutoriels vidéo sur certaines des principales fonctionnalités d'OpenMRS.",
+  "next": "Suivant",
+  "tutorial": "Tutoriels",
+  "walkthrough": "Visite guidée",
+  "welcome": "Bienvenue sur OpenMRS !"
+}

package/translations/he.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/hi.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/hi_IN.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/id.json

@@ -0,0 +1,9 @@
+{
+  "back": "Kembali",
+  "finish": "Selesai",
+  "modalDescription": "Temukan panduan dan tutorial video tentang beberapa fitur inti OpenMRS.",
+  "next": "Berikutnya",
+  "tutorial": "Tutorial",
+  "walkthrough": "Panduan",
+  "welcome": "Selamat datang di OpenMRS!"
+}

package/translations/it.json

@@ -0,0 +1,9 @@
+{
+  "back": "Indietro",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Avanti",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Benvenuto in OpenMRS!"
+}

package/translations/ka.json

@@ -0,0 +1,9 @@
+{
+  "back": "უკან",
+  "finish": "დასრულება",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "შემდეგი",
+  "tutorial": "სახელმძღვანელოები",
+  "walkthrough": "სწრაფი გავლა",
+  "welcome": "მოგესალმებათ OpenMRS!"
+}

package/translations/km.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ku.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ky.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/lg.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ne.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/pl.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/pt.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/pt_BR.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/qu.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ro_RO.json

@@ -0,0 +1,9 @@
+{
+  "back": "Înapoi",
+  "finish": "Finalizare",
+  "modalDescription": "Găsește ghiduri pas cu pas și tutoriale video despre unele dintre funcționalitățile de bază ale OpenMRS.",
+  "next": "Următorul",
+  "tutorial": "Tutoriale",
+  "walkthrough": "Ghid pas cu pas",
+  "welcome": "Bine ai venit în OpenMRS!"
+}

package/translations/ru_RU.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/si.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/sq.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/sw.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/sw_KE.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}