@equinor/cpl-top-bar-react 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -13,15 +13,15 @@ interface TopBarProps {
 declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
 
 interface UserMenuProps {
-    logoutUrl: string;
-    darkMode?: boolean;
+    logout: string | (() => void);
     user: {
         name: string;
         email: string;
     };
+    darkMode?: boolean;
     settingsLink?: string;
     children?: React.ReactNode;
 }
-declare function UserMenu({ user, logoutUrl, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
+declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
 
 export { TopBar, UserMenu };

package/dist/index.d.ts

@@ -13,15 +13,15 @@ interface TopBarProps {
 declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
 
 interface UserMenuProps {
-    logoutUrl: string;
-    darkMode?: boolean;
+    logout: string | (() => void);
     user: {
         name: string;
         email: string;
     };
+    darkMode?: boolean;
     settingsLink?: string;
     children?: React.ReactNode;
 }
-declare function UserMenu({ user, logoutUrl, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
+declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
 
 export { TopBar, UserMenu };

package/dist/index.js

@@ -110,7 +110,7 @@ var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function UserMenu({
   user,
-  logoutUrl,
+  logout,
   darkMode = false,
   settingsLink,
   children
@@ -124,6 +124,19 @@ function UserMenu({
   const closeMenu = () => {
     setIsOpen(false);
   };
+  const LogOutMenuItem = () => {
+    if (typeof logout === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
+      ] });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
+      ] });
+    }
+  };
   const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -162,10 +175,7 @@ function UserMenu({
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.settings }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Settings" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
-          ] }),
+          LogOutMenuItem(),
           children
         ]
       }
@@ -199,7 +209,7 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react2.
     }
   }
   ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
-          background: #3e4f5c;
+          background: #3e4f5c; //TODO: get color from token in the future
           color: #fff;
           .menu-item {
             color: #fff;
@@ -218,10 +228,12 @@ var LetterCircle = import_styled_components2.default.span`
   height: 32px;
   justify-content: center;
   width: 32px;
+  background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex};
+  color: #fff;
   ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
           background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
           color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
-        ` : ``}
+        ` : ``};
 `;
 var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
   margin: 10px 12px;
@@ -243,13 +255,12 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
   padding: 12px 20px;
   width: 315px;
   color: inherit;
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: transparent;
+    cursor: default;
   }
-  ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
-          &:hover {
-            background: #305c75; //TODO: get color from token in the future
-          }
-        ` : ""}
 `;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -73,7 +73,7 @@ import styled2, { css as css2 } from "styled-components";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function UserMenu({
   user,
-  logoutUrl,
+  logout,
   darkMode = false,
   settingsLink,
   children
@@ -87,6 +87,19 @@ function UserMenu({
   const closeMenu = () => {
     setIsOpen(false);
   };
+  const LogOutMenuItem = () => {
+    if (typeof logout === "string") {
+      return /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
+        /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
+        /* @__PURE__ */ jsx2("span", { children: "Log out" })
+      ] });
+    } else {
+      return /* @__PURE__ */ jsxs2(Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
+        /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
+        /* @__PURE__ */ jsx2("span", { children: "Log out" })
+      ] });
+    }
+  };
   const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
@@ -125,10 +138,7 @@ function UserMenu({
             /* @__PURE__ */ jsx2(Icon2, { data: settings }),
             /* @__PURE__ */ jsx2("span", { children: "Settings" })
           ] }),
-          /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
-            /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
-            /* @__PURE__ */ jsx2("span", { children: "Log out" })
-          ] }),
+          LogOutMenuItem(),
           children
         ]
       }
@@ -162,7 +172,7 @@ var MenuWrapper = styled2(Menu)`
     }
   }
   ${({ $darkMode }) => $darkMode ? css2`
-          background: #3e4f5c;
+          background: #3e4f5c; //TODO: get color from token in the future
           color: #fff;
           .menu-item {
             color: #fff;
@@ -181,10 +191,12 @@ var LetterCircle = styled2.span`
   height: 32px;
   justify-content: center;
   width: 32px;
+  background-color: ${tokens2.colors.interactive.primary__resting.hex};
+  color: #fff;
   ${({ $darkMode }) => $darkMode ? css2`
           background: ${tokens2.colors.interactive.link_in_snackbars.hex};
           color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
-        ` : ``}
+        ` : ``};
 `;
 var StyledUserButton = styled2(Button)`
   margin: 10px 12px;
@@ -206,13 +218,12 @@ var IconAndTextWrapper = styled2(Menu.Item)`
   padding: 12px 20px;
   width: 315px;
   color: inherit;
-  &:hover {
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: transparent;
+    cursor: default;
   }
-  ${({ $darkMode }) => $darkMode ? css2`
-          &:hover {
-            background: #305c75; //TODO: get color from token in the future
-          }
-        ` : ""}
 `;
 export {
   TopBar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-top-bar-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",