diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx new file mode 100644 index 000000000..75907febb --- /dev/null +++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools-button.test.tsx @@ -0,0 +1,13 @@ +import { cleanup, render, screen } from "@testing-library/react"; +import React from "react"; +import "@testing-library/jest-dom"; +import GlobalImplementerToolsButton from "./global-implementer-tools.component"; + +describe("Testing the global implementer tools button", () => { + afterEach(cleanup); + it("should render global Implementer tools", () => { + render(); + const button = screen.getByTestId("globalImplementerToolsButton"); + expect(button).toBeInTheDocument(); + }); +}); diff --git a/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx new file mode 100644 index 000000000..780af3c7c --- /dev/null +++ b/packages/apps/esm-implementer-tools-app/src/global-implementer-tools.component.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import ChevronUp from "@carbon/icons-react/es/chevron--up/16"; +import ChevronDown from "@carbon/icons-react/es/chevron--down/16"; +import { UserHasAccess, useStore } from "@openmrs/esm-framework"; +import { implementerToolsStore, togglePopup } from "./store"; +import styles from "./implementer-tools.styles.scss"; + +const GlobalImplementerToolsButton: React.FC = () => { + const { t } = useTranslation(); + const { isOpen } = useStore(implementerToolsStore); + + return ( + +
+
+ {isOpen ? : } +
+
+
+ ); +}; + +export default GlobalImplementerToolsButton; diff --git a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss index 0886797dd..5b9a9ea69 100644 --- a/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss +++ b/packages/apps/esm-implementer-tools-app/src/implementer-tools.styles.scss @@ -17,3 +17,25 @@ .toolStyles { background-color: transparent; } + +// Chevron button - implementer-tools component + +.chevronImplementerToolsButton { + position: fixed; + bottom: 0; + left: calc(50vw - $spacing-05); + z-index: 9999; + + div { + background-color: $ui-02; + width: $spacing-07; + display: flex; + justify-content: center; + cursor: pointer; + transition: all 0.1s ease-in-out; + } + + div:hover { + padding: $spacing-03 0; + } +} diff --git a/packages/apps/esm-implementer-tools-app/src/index.ts b/packages/apps/esm-implementer-tools-app/src/index.ts index 0b81e3fe2..568f245b1 100644 --- a/packages/apps/esm-implementer-tools-app/src/index.ts +++ b/packages/apps/esm-implementer-tools-app/src/index.ts @@ -16,6 +16,13 @@ function setupOpenMRS() { options ), }, + { + route: () => true, + load: getAsyncLifecycle( + () => import("./global-implementer-tools.component"), + options + ), + }, ], extensions: [ {