@kenyaemr/esm-bed-management-app 1.0.1-pre.4

package/src/workspace/overlay.component.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Button, Header } from "@carbon/react";
+import { ArrowLeft, Close } from "@carbon/react/icons";
+import { isDesktop, useLayoutType } from "@openmrs/esm-framework";
+import styles from "./overlay.scss";
+import { useTranslation } from "react-i18next";
+
+interface OverlayProps {
+  closePanel: () => void;
+  header: string;
+  children?: React.ReactNode;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ closePanel, children, header }) => {
+  const layout = useLayoutType();
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={
+        isDesktop(layout) ? styles.desktopOverlay : styles.tabletOverlay
+      }
+    >
+      {isDesktop(layout) ? (
+        <div className={styles.desktopHeader}>
+          <div className={styles.headerContent}>{header}</div>
+          <Button
+            className={styles.closePanelButton}
+            onClick={closePanel}
+            kind="ghost"
+            hasIconOnly
+            renderIcon={(props) => <Close size={16} {...props} />}
+            iconDescription={t("closeOverlay", "Close overlay")}
+          />
+        </div>
+      ) : (
+        <Header
+          aria-label="Tablet overlay"
+          className={styles.tabletOverlayHeader}
+        >
+          <Button
+            onClick={closePanel}
+            hasIconOnly
+            renderIcon={(props) => <ArrowLeft size={16} {...props} />}
+            iconDescription={t("closeOverlay", "Close overlay")}
+          />
+          <div className={styles.headerContent}>{header}</div>
+        </Header>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Overlay;

package/src/workspace/overlay.scss

@@ -0,0 +1,96 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+@import '../root.scss';
+
+.desktopOverlay {
+  position: fixed;
+  top: spacing.$spacing-09;
+  width: 37rem;
+  right: 0;
+  bottom: 0;
+  border-left: 1px solid $text-03;
+  background-color: $ui-01;
+  overflow-y: auto;
+  height: calc(100vh - 3rem);
+  z-index: 99999;
+  display: grid;
+  grid-template-rows: 1fr auto;
+}
+
+.desktopOverlay::after {
+  height: 100%;
+  border-left: 1px solid $text-03;
+}
+
+.tabletOverlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: $ui-01;
+  overflow: hidden;
+  padding-top: spacing.$spacing-09;
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.tabletOverlayHeader {
+  button {
+    @include brand-01(background-color);
+  }
+
+  .headerContent {
+    color: $ui-02;
+  }
+}
+
+.desktopHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-03;
+  border-bottom: 1px solid $text-03;
+  position: absolute;
+  position: -webkit-sticky;
+  width: 100%;
+  z-index: 1000;
+  top: 0;
+}
+
+.headerContent {
+  @include type.type-style('heading-compact-02');
+  padding: 0 spacing.$spacing-05;
+  color: $ui-05;
+}
+
+.closePanelButton {
+  background-color: $ui-background;
+  color: $ui-05;
+  fill: $ui-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .overlayContent {
+    padding: 0 0 0 0;
+    overflow-y: auto;
+  }
+}
+
+.wardLabel {
+   @include type.type-style('label-01');
+  // color: colors.$gray-70;
+}

package/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "bedManagement": "Bed Management",
+  "headTitle": "",
+  "home": "Home",
+  "manageBed": "Manage Beds",
+  "wardType": ""
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext"
+  }
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("openmrs/default-webpack-config");