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

* home page header

* Update translations file

* cleanup

* load header via extension

* loaded header via extension

* remove tertiary files

* removed tertiary files commited

* removed extra committed files

* cleanup

* yarn.lock

* PR reviews

* cleanup

* PR review resolutions

* updated translations

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

Co-authored-by: Dennis Kigen <[email protected]>

* PR reviews

* translations and cleanup

* PR review resolutions

* reinstate RTL style overrides

* translations

* Name changes

* Useful tweaks

---------

Co-authored-by: Dennis Kigen <[email protected]>

packages/esm-home-app/src/dashboard/home-dashboard.scss

@@ -14,10 +14,6 @@
     width: 100%;
   }
 }
-/*TO BE REMOVED ONCE WE IMPROVE LEFT SIDE NAVIGATION*/
-li::marker{
-  font-size: 0px;
-}
 
 .logoSection {
   display: flex;

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

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

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

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

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 pageHeader = getAsyncLifecycle(() => import('./page-header/page-header.component'), options);
+
 export const metrics = getAsyncLifecycle(() => import('./metrics/metrics.component'), options);
 
 export function startupApp() {

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Location } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import HomepageIllustration from './page-illustration.component';
+import HeaderDate from '../header-date/header-date.component';
+import styles from './page-header.scss';
+
+interface PageHeaderProps {
+  dashboardTitle: string;
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({ dashboardTitle }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const location = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header} role="banner">
+      <div className={styles['left-justified-items']}>
+        <HomepageIllustration />
+        <div className={styles['page-labels']}>
+          <p>{t('home', 'Home')}</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>
+          <HeaderDate />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageHeader;

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

@@ -0,0 +1,66 @@
+@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;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+// 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/page-header/page-illustration.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const HomepageIllustration: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <svg width="92" height="94" viewBox="0 0 92 94" xmlns="http://www.w3.org/2000/svg">
+      <title>{t('homepageIllustration', '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/routes.json

@@ -32,6 +32,11 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "page-header",
+      "slot": "home-dashboard-slot",
+      "component": "pageHeader"
+    }, 
     {
       "name": "metrics-slot",
       "slot": "home-dashboard-slot",

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

@@ -1,3 +1,5 @@
 {
-  "Home": "Home"
+  "home": "Home",
+  "Home": "Home",
+  "homepageIllustration": "Homepage illustration"
 }