@openmrs/esm-styleguide 3.2.1-pre.1149 → 3.2.1-pre.1160

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "3.2.1-pre.1149",
+  "version": "3.2.1-pre.1160",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "browser": "dist/openmrs-esm-styleguide.js",
@@ -51,7 +51,7 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-extensions": "^3.2.1-pre.1149",
+    "@openmrs/esm-extensions": "^3.2.1-pre.1160",
     "@pickra/copy-code-block": "^1.1.7",
     "@storybook/addon-a11y": "^5.2.1",
     "@storybook/addon-knobs": "^5.2.1",
@@ -66,5 +66,5 @@
     "react-dom": "^16.13.1",
     "rxjs": "^6.5.3"
   },
-  "gitHead": "be5284bb64d1a9d85f4b1c2c349127533e9fcc6e"
+  "gitHead": "a34508fb8c153ebfbf13c97b9f386907f44d3b1e"
 }

package/src/declarations.d.ts

@@ -2,3 +2,5 @@ declare module "*.svg" {
   const content: string;
   export = content;
 }
+declare module "*.css";
+declare module "*.scss";

package/src/index.ts

@@ -7,6 +7,7 @@ export * from "./spinner";
 export * from "./notifications";
 export * from "./toasts";
 export * from "./modals";
+export * from "./left-nav";
 
 setupBranding();
 setupLogo();

package/src/left-nav/index.tsx

@@ -0,0 +1,49 @@
+/** @module @category UI */
+import React from "react";
+import { ExtensionSlot, useStore } from "@openmrs/esm-react-utils";
+import { createGlobalStore } from "@openmrs/esm-state";
+import { SideNav, SideNavProps } from "carbon-components-react";
+import styles from "./left-nav.module.scss";
+
+interface LeftNavStore {
+  slotName: string | null;
+  basePath: string;
+}
+
+const leftNavStore = createGlobalStore<LeftNavStore>("left-nav", {
+  slotName: null,
+  basePath: window.spaBase,
+});
+
+export function setLeftNav({ name, basePath }) {
+  leftNavStore.setState({ slotName: name, basePath });
+}
+
+export function unsetLeftNav(name) {
+  if (leftNavStore.getState().slotName == name) {
+    leftNavStore.setState({ slotName: null });
+  }
+}
+
+type LeftNavMenuProps = SideNavProps;
+
+export const LeftNavMenu = React.forwardRef<HTMLElement, LeftNavMenuProps>(
+  (props, ref) => {
+    const { slotName, basePath } = useStore(leftNavStore);
+
+    return (
+      <SideNav
+        ref={ref}
+        expanded
+        aria-label="Left navigation"
+        className={styles.link}
+        {...props}
+      >
+        <ExtensionSlot extensionSlotName="global-nav-menu-slot" />
+        {slotName ? (
+          <ExtensionSlot extensionSlotName={slotName} state={{ basePath }} />
+        ) : null}
+      </SideNav>
+    );
+  }
+);

package/src/left-nav/left-nav.module.scss

@@ -0,0 +1,34 @@
+@import "../vars";
+@import "carbon-components/scss/globals/scss/typography.scss";
+@import "~carbon-components/scss/globals/scss/_spacing.scss";
+
+.link > div a:nth-child(1) {
+  height: 3rem;
+  padding: 1.5rem 0 1.5rem 1.2rem;
+  color: $ui-04;
+  border-left: 0.25rem solid transparent;
+  @include carbon--type-style("productive-heading-01");
+}
+
+:global(.omrs-breakpoint-gt-tablet) .link > div {
+  padding-top: 1rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .link > div a:nth-child(1) {
+  height: 2rem;
+  color: $ui-04;
+  padding: 0 0 0 1rem;
+}
+
+.link > div a:nth-child(1):hover {
+  background-color: $ui-03;
+  color: $ui-05;
+  border-left: var(--brand-01);
+}
+
+.link > div a:nth-child(1):focus {
+  background-color: $ui-03;
+  outline: none;
+  color: $ui-05;
+  border-left: var(--brand-01);
+}

package/src/public.ts

@@ -10,3 +10,4 @@ export {
   ToastType,
   ToastNotificationMeta,
 } from "./toasts/toast.component";
+export * from "./left-nav";