(feat) O3-2901: Add a page header to the home page

packages/esm-home-app/src/homepage-header-date/homepage-header-date.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Calendar } from '@carbon/react/icons';
+import styles from './homepage-header-date.scss';
+import { formatDate } from '@openmrs/esm-framework';
+
+export const HomepageHeaderDate = () => {
+  return (
+    <React.Fragment>
+      <Calendar size={16} />
+      <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+    </React.Fragment>
+  );
+};

packages/esm-home-app/src/homepage-header-date/homepage-header-date.scss

@@ -0,0 +1,3 @@
+.value{
+  margin-left: 0.25rem
+}

packages/esm-home-app/src/homepage-header/homepage-header.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Location } from '@carbon/react/icons';
+import { ConfigObject, useConfig, useSession } from '@openmrs/esm-framework';
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import dayjs from 'dayjs';
+import styles from './homepage-header.scss';
+import HomepageIllustration from './homepage-illustration.component';
+import { HomepageHeaderDate } from '../homepage-header-date/homepage-header-date.component';
+
+interface HomepageHeaderProps {
+  dashboardTitle: string;
+}
+
+const HomepageHeader: React.FC<HomepageHeaderProps> = ({ dashboardTitle }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+  const config = useConfig() as ConfigObject;
+
+  return (
+    <div className={styles.header} role="banner">
+      <div className={styles['left-justified-items']}>
+        <HomepageIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('home', config.appNameLabel)}</p>
+          <p className={styles['page-name']}>{dashboardTitle}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <Location size={16} />
+          <span className={styles.value}>{location}</span>
+          <span className={styles.middot}>&middot;</span>
+          <HomepageHeaderDate />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomepageHeader;

packages/esm-home-app/src/homepage-header/homepage-header.scss

@@ -0,0 +1,85 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: layout.$spacing-12;
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin: 1rem 0;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.dropdownContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+.datePicker {
+  background-color: transparent;
+  width: 10rem;
+  border: none;
+
+  &>input {
+    color: colors.$blue-10;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .date-and-location {
+    &>svg {
+      order: -1;
+    }
+
+    &>span:nth-child(2) {
+      order: -2;
+    }
+  }
+}

packages/esm-home-app/src/homepage-header/homepage-illustration.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const HomepageIllustration: React.FC = () => {
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>Homepage illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path fill="#FFF" d="M0 0h92v94H0z" />
+        <path
+          d="M40 32c.84-.602 1.12-1.797 1-3 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 3.572 2.1 6.706 5 8-6.76 1.741-12 7.91-12 15v15h28V32h-4zM76 67V52c0-7.09-5.24-13.278-12-15 2.9-1.294 5.12-4.428 5-8 .12-5.005-3.96-9-9-9s-9.12 3.995-9 9c-.12 1.203.14 2.398 1 3h-4v35h28z"
+          fill="#CEE6E5"
+        />
+        <path
+          d="M32 75V60.312c0-7.402 5.24-13.59 12.3-15.216-3.2-1.39-5.42-4.523-5.42-8.166 0-4.935 4.08-8.93 9.12-8.93 5.04 0 9.12 3.995 9.12 8.93 0 3.642-2.22 6.776-5.42 8.166C58.76 46.741 64 52.91 64 60.313V75"
+          fill="#7BBCB9"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default HomepageIllustration;

packages/esm-home-app/src/index.ts

@@ -24,6 +24,8 @@ export const homeWidgetDbLink = getSyncLifecycle(createDashboardLink(dashboardMe
 
 export const homeWidgetDashboard = getSyncLifecycle(homeWidgetDashboardComponent, options);
 
+export const homePageHeader = getAsyncLifecycle(() => import('./homepage-header/homepage-header.component'), options);
+
 export function startupApp() {
   defineConfigSchema(moduleName, esmHomeSchema);
   // t('Home', 'Home');

packages/esm-home-app/src/openmrs-esm-home-schema.ts

@@ -35,4 +35,9 @@ export const esmHomeSchema = {
       _validators: [validators.isUrlWithTemplateParameters(['patientUuid'])],
     },
   },
+  appNameLabel: {
+    _type: Type.String,
+    _default: 'Home',
+    _description: 'The name of the frontend app which is appended to the app header.',
+  },
 };

packages/esm-home-app/src/routes.json

@@ -32,6 +32,13 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "home-page-header",
+      "slot": "home-dashboard-slot",
+      "component": "homePageHeader",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "home-widget-dashboard",
       "slot": "home-dashboard-slot",

packages/esm-home-app/translations/en.json

@@ -1,3 +1,4 @@
 {
+  "home": "",
   "Home": "Home"
 }