(feat) O3-3782: Use styleguide page header component in lab app (#83)

* use styleguide pageHeader * Fixup * Bump core tooling and framework --------- Co-authored-by: Dennis Kigen <[email protected]>
openmrs · Aug 13, 2024 · b90646d · b90646d
1 parent e9a90d0
commit b90646d
Show file tree

Hide file tree

Showing 6 changed files with 1,942 additions and 594 deletions.
diff --git a/src/header/laboratory-header.component.tsx b/src/header/laboratory-header.component.tsx
diff --git a/src/header/laboratory-header.scss b/src/header/laboratory-header.scss
diff --git a/src/header/laboratory-illustration.component.tsx b/src/header/laboratory-illustration.component.tsx
diff --git a/src/laboratory-dashboard.component.tsx b/src/laboratory-dashboard.component.tsx
@@ -1,16 +1,26 @@
 import React from "react";
-import { LaboratoryHeader } from "./header/laboratory-header.component";
+import { useTranslation } from "react-i18next";
+import { PageHeader, LaboratoryPictogram } from "@openmrs/esm-framework";
 import Overlay from "./components/overlay/overlay.component";
 import LaboratoryOrdersTabs from "./lab-tabs/laboratory-tabs.component";
 import LaboratorySummaryTiles from "./lab-tiles/laboratory-summary-tiles.component";
+import styles from "./laboratory-dashboard.scss";
 
 const LaboratoryDashboard: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <div className={`omrs-main-content`}>
-      <LaboratoryHeader />
-      <LaboratorySummaryTiles />
-      <LaboratoryOrdersTabs />
-      <Overlay />
+      <PageHeader
+        illustration={<LaboratoryPictogram />}
+        title={t("laboratory", "Laboratory")}
+        className={styles.pageHeader}
+      />
+      <div className={styles.container}>
+        <LaboratorySummaryTiles />
+        <LaboratoryOrdersTabs />
+        <Overlay />
+      </div>
     </div>
   );
 };

diff --git a/src/laboratory-dashboard.scss b/src/laboratory-dashboard.scss
@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.pageHeader {
+  border-bottom: 1px solid $ui-03;
+}
+
+.container {
+  margin-top: layout.$spacing-07;
+}