diff --git a/packages/esm-patient-allergies-app/src/dashboard.meta.ts b/packages/esm-patient-allergies-app/src/dashboard.meta.ts index 32182e03bc..705bf977fc 100644 --- a/packages/esm-patient-allergies-app/src/dashboard.meta.ts +++ b/packages/esm-patient-allergies-app/src/dashboard.meta.ts @@ -2,4 +2,5 @@ export const dashboardMeta = { slot: 'patient-chart-allergies-dashboard-slot', path: 'Allergies', title: 'Allergies', + icon: 'omrs-icon-warning', }; diff --git a/packages/esm-patient-attachments-app/src/dashboard.meta.ts b/packages/esm-patient-attachments-app/src/dashboard.meta.ts index eeab51079b..dc90bd062c 100644 --- a/packages/esm-patient-attachments-app/src/dashboard.meta.ts +++ b/packages/esm-patient-attachments-app/src/dashboard.meta.ts @@ -2,4 +2,5 @@ export const dashboardMeta = { slot: 'patient-chart-attachments-dashboard-slot', path: 'Attachments', title: 'Attachments', + icon: 'omrs-icon-document-attachment', }; diff --git a/packages/esm-patient-chart-app/src/dashboard.meta.ts b/packages/esm-patient-chart-app/src/dashboard.meta.ts index dc827279a1..0246dc0dfd 100644 --- a/packages/esm-patient-chart-app/src/dashboard.meta.ts +++ b/packages/esm-patient-chart-app/src/dashboard.meta.ts @@ -2,10 +2,12 @@ export const summaryDashboardMeta = { slot: 'patient-chart-summary-dashboard-slot', path: 'Patient Summary', title: 'Patient Summary', + icon: 'omrs-icon-report', }; export const encountersDashboardMeta = { slot: 'patient-chart-encounters-dashboard-slot', path: 'Visits', title: 'Visits', + icon: 'omrs-icon-calendar-heat-map', }; diff --git a/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx b/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx index b76c50c192..c457df62cc 100644 --- a/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx +++ b/packages/esm-patient-chart-app/src/side-nav/generic-dashboard.component.tsx @@ -19,11 +19,17 @@ export const genericDashboardConfigSchema = { _default: '', _type: Type.String, }, + icon: { + _description: 'The icons for the navigation menu', + _default: '', + _type: Type.String, + }, }; export interface GenericDashboardConfig { path: string; title: string; + icon: string; /** This gets used by the patient chart when it renders the dashboard itself. */ slot: string; } @@ -40,6 +46,7 @@ export default function GenericDashboard({ basePath }: GenericDashboardProps) { path={config.path} title={config.title} basePath={basePath} + icon={config.icon} moduleName="@openmrs/esm-patient-chart-app" /> diff --git a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx index e91d2bdfe7..cf9942c534 100644 --- a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx +++ b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx @@ -3,12 +3,15 @@ import classNames from 'classnames'; import last from 'lodash-es/last'; import { useTranslation } from 'react-i18next'; import { useLocation } from 'react-router-dom'; -import { ConfigurableLink } from '@openmrs/esm-framework'; +import { ConfigurableLink, MaybeIcon } from '@openmrs/esm-framework'; +import { setupIcons } from '@openmrs/esm-styleguide/src/icons/icon-registration'; +import styles from './dashboard-extension.scss'; export interface DashboardExtensionProps { path: string; title: string; basePath: string; + icon: string; moduleName?: string; } @@ -16,6 +19,7 @@ export const DashboardExtension = ({ path, title, basePath, + icon, moduleName = '@openmrs/esm-patient-chart-app', }: DashboardExtensionProps) => { const { t } = useTranslation(moduleName); @@ -28,7 +32,10 @@ export const DashboardExtension = ({ className={classNames('cds--side-nav__link', { 'active-left-nav-link': path === navLink })} to={`${basePath}/${encodeURIComponent(path)}`} > - {t(title)} + + + {t(title)} + ); diff --git a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx index 9fcfbcc051..e6914a49bf 100644 --- a/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx +++ b/packages/esm-patient-common-lib/src/dashboards/createDashboardLink.tsx @@ -7,7 +7,13 @@ export const createDashboardLink = (db: DashboardLinkConfig) => { return ({ basePath }: { basePath: string }) => { return ( - + ); }; diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboard-extension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboard-extension.scss new file mode 100644 index 0000000000..6373e070da --- /dev/null +++ b/packages/esm-patient-common-lib/src/dashboards/dashboard-extension.scss @@ -0,0 +1,10 @@ +@use '@carbon/layout'; + +.menu { + display: flex; + align-items: start; +} + +.icon { + margin-right: layout.$spacing-03; +} diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/esm-patient-common-lib/src/types/index.ts b/packages/esm-patient-common-lib/src/types/index.ts index 7ef7db6a5a..8c884e6e01 100644 --- a/packages/esm-patient-common-lib/src/types/index.ts +++ b/packages/esm-patient-common-lib/src/types/index.ts @@ -3,6 +3,7 @@ export * from './test-results'; export interface DashboardLinkConfig { path: string; title: string; + icon: string; moduleName: string; } diff --git a/packages/esm-patient-conditions-app/src/dashboard.meta.ts b/packages/esm-patient-conditions-app/src/dashboard.meta.ts index c59fb562f9..1fc02b6896 100644 --- a/packages/esm-patient-conditions-app/src/dashboard.meta.ts +++ b/packages/esm-patient-conditions-app/src/dashboard.meta.ts @@ -2,4 +2,5 @@ export const dashboardMeta = { slot: 'patient-chart-conditions-dashboard-slot', path: 'Conditions', title: 'Conditions', + icon: 'omrs-icon-list-checked', }; diff --git a/packages/esm-patient-immunizations-app/src/dashboard.meta.ts b/packages/esm-patient-immunizations-app/src/dashboard.meta.ts index e4039d50f0..780aefa4b4 100644 --- a/packages/esm-patient-immunizations-app/src/dashboard.meta.ts +++ b/packages/esm-patient-immunizations-app/src/dashboard.meta.ts @@ -2,4 +2,5 @@ export const dashboardMeta = { slot: 'patient-chart-immunizations-dashboard-slot', path: 'Immunizations', title: 'Immunizations', + icon: 'omrs-icon-syringe', }; diff --git a/packages/esm-patient-medications-app/src/dashboard.meta.ts b/packages/esm-patient-medications-app/src/dashboard.meta.ts index 18d29689b7..b7cdde2163 100644 --- a/packages/esm-patient-medications-app/src/dashboard.meta.ts +++ b/packages/esm-patient-medications-app/src/dashboard.meta.ts @@ -3,4 +3,5 @@ export const dashboardMeta = { slot: 'patient-chart-medications-dashboard-slot', path: 'Medications', title: 'Medications', + icon: 'omrs-icon-medication', }; diff --git a/packages/esm-patient-orders-app/src/dashboard.meta.ts b/packages/esm-patient-orders-app/src/dashboard.meta.ts index 0c92b03a14..23a082d8df 100644 --- a/packages/esm-patient-orders-app/src/dashboard.meta.ts +++ b/packages/esm-patient-orders-app/src/dashboard.meta.ts @@ -2,5 +2,6 @@ export const ordersDashboardMeta = { slot: 'patient-chart-lab-orders-dashboard-slot', path: 'Orders', title: 'Orders', + icon: 'omrs-icon-shopping-cart', hideDashboardTitle: true, }; diff --git a/packages/esm-patient-programs-app/src/dashboard.meta.ts b/packages/esm-patient-programs-app/src/dashboard.meta.ts index f006966126..a0cf24647a 100644 --- a/packages/esm-patient-programs-app/src/dashboard.meta.ts +++ b/packages/esm-patient-programs-app/src/dashboard.meta.ts @@ -2,4 +2,5 @@ export const dashboardMeta = { slot: 'patient-chart-programs-dashboard-slot', path: 'Programs', title: 'Programs', + icon: 'omrs-icon-programs', }; diff --git a/packages/esm-patient-tests-app/src/test-results/dashboard.meta.ts b/packages/esm-patient-tests-app/src/test-results/dashboard.meta.ts index 769157bdd0..b474ddf1f0 100644 --- a/packages/esm-patient-tests-app/src/test-results/dashboard.meta.ts +++ b/packages/esm-patient-tests-app/src/test-results/dashboard.meta.ts @@ -3,5 +3,6 @@ export const dashboardMeta = { columns: 1, path: 'Results', title: 'Results', + icon: 'omrs-icon-chart-average', hideDashboardTitle: true, }; diff --git a/packages/esm-patient-vitals-app/src/dashboard.meta.ts b/packages/esm-patient-vitals-app/src/dashboard.meta.ts index 6a3974114f..f56d5256d3 100644 --- a/packages/esm-patient-vitals-app/src/dashboard.meta.ts +++ b/packages/esm-patient-vitals-app/src/dashboard.meta.ts @@ -2,6 +2,7 @@ export const dashboardMeta = { slot: 'patient-chart-vitals-biometrics-dashboard-slot', path: 'Vitals & Biometrics', title: 'Vitals & Biometrics', + icon: 'omrs-icon-activity', }; export default dashboardMeta;