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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +3 -3
  2. package/dist/index.d.ts +3 -3
  3. package/dist/index.js +27 -14
  4. package/dist/index.mjs +27 -14
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -13,15 +13,15 @@ interface TopBarProps {
13
13
  declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
14
14
 
15
15
  interface UserMenuProps {
16
- logoutUrl: string;
17
- darkMode?: boolean;
16
+ logout: string | (() => void);
18
17
  user: {
19
18
  name: string;
20
19
  email: string;
21
20
  };
21
+ darkMode?: boolean;
22
22
  settingsLink?: string;
23
23
  children?: React.ReactNode;
24
24
  }
25
- declare function UserMenu({ user, logoutUrl, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
25
+ declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
26
26
 
27
27
  export { TopBar, UserMenu };
package/dist/index.d.ts CHANGED
@@ -13,15 +13,15 @@ interface TopBarProps {
13
13
  declare function TopBar({ appName, logoLink, documentationLink, documentationName, userMenu, darkMode, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
14
14
 
15
15
  interface UserMenuProps {
16
- logoutUrl: string;
17
- darkMode?: boolean;
16
+ logout: string | (() => void);
18
17
  user: {
19
18
  name: string;
20
19
  email: string;
21
20
  };
21
+ darkMode?: boolean;
22
22
  settingsLink?: string;
23
23
  children?: React.ReactNode;
24
24
  }
25
- declare function UserMenu({ user, logoutUrl, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
25
+ declare function UserMenu({ user, logout, darkMode, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
26
26
 
27
27
  export { TopBar, UserMenu };
package/dist/index.js CHANGED
@@ -68,6 +68,8 @@ function TopBar({
68
68
  var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_react.TopBar)`
69
69
  border-color: rgba(255, 255, 255, 0.16);
70
70
  gap: 0;
71
+ padding: 0px 20px;
72
+ margin: 0px;
71
73
  ${({ $darkMode }) => $darkMode ? import_styled_components.css`
72
74
  background: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
73
75
  color: #fff;
@@ -110,7 +112,7 @@ var import_styled_components2 = __toESM(require("styled-components"));
110
112
  var import_jsx_runtime2 = require("react/jsx-runtime");
111
113
  function UserMenu({
112
114
  user,
113
- logoutUrl,
115
+ logout,
114
116
  darkMode = false,
115
117
  settingsLink,
116
118
  children
@@ -124,6 +126,19 @@ function UserMenu({
124
126
  const closeMenu = () => {
125
127
  setIsOpen(false);
126
128
  };
129
+ const LogOutMenuItem = () => {
130
+ if (typeof logout === "string") {
131
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
132
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
133
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
134
+ ] });
135
+ } else {
136
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
137
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
138
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
139
+ ] });
140
+ }
141
+ };
127
142
  const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
128
143
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
129
144
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -162,10 +177,7 @@ function UserMenu({
162
177
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.settings }),
163
178
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Settings" })
164
179
  ] }),
165
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
166
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
167
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
168
- ] }),
180
+ LogOutMenuItem(),
169
181
  children
170
182
  ]
171
183
  }
@@ -199,7 +211,7 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react2.
199
211
  }
200
212
  }
201
213
  ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
202
- background: #3e4f5c;
214
+ background: #3e4f5c; //TODO: get color from token in the future
203
215
  color: #fff;
204
216
  .menu-item {
205
217
  color: #fff;
@@ -218,13 +230,15 @@ var LetterCircle = import_styled_components2.default.span`
218
230
  height: 32px;
219
231
  justify-content: center;
220
232
  width: 32px;
233
+ background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex};
234
+ color: #fff;
221
235
  ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
222
236
  background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
223
237
  color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
224
- ` : ``}
238
+ ` : ``};
225
239
  `;
226
240
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
227
- margin: 10px 12px;
241
+ margin-left: 12px;
228
242
  font-weight: bold;
229
243
  width: 32px;
230
244
  height: 32px;
@@ -243,13 +257,12 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
243
257
  padding: 12px 20px;
244
258
  width: 315px;
245
259
  color: inherit;
246
- &:hover {
260
+ &:hover,
261
+ &:focus,
262
+ &:active {
263
+ background-color: transparent;
264
+ cursor: default;
247
265
  }
248
- ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
249
- &:hover {
250
- background: #305c75; //TODO: get color from token in the future
251
- }
252
- ` : ""}
253
266
  `;
254
267
  // Annotate the CommonJS export names for ESM import in node:
255
268
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -31,6 +31,8 @@ function TopBar({
31
31
  var StyledEDSTopBar = styled(EDSTopBar)`
32
32
  border-color: rgba(255, 255, 255, 0.16);
33
33
  gap: 0;
34
+ padding: 0px 20px;
35
+ margin: 0px;
34
36
  ${({ $darkMode }) => $darkMode ? css`
35
37
  background: ${tokens.colors.interactive.table__cell__fill_resting.hex};
36
38
  color: #fff;
@@ -73,7 +75,7 @@ import styled2, { css as css2 } from "styled-components";
73
75
  import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
74
76
  function UserMenu({
75
77
  user,
76
- logoutUrl,
78
+ logout,
77
79
  darkMode = false,
78
80
  settingsLink,
79
81
  children
@@ -87,6 +89,19 @@ function UserMenu({
87
89
  const closeMenu = () => {
88
90
  setIsOpen(false);
89
91
  };
92
+ const LogOutMenuItem = () => {
93
+ if (typeof logout === "string") {
94
+ return /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logout, className: "menu-item", id: "logout-button", children: [
95
+ /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
96
+ /* @__PURE__ */ jsx2("span", { children: "Log out" })
97
+ ] });
98
+ } else {
99
+ return /* @__PURE__ */ jsxs2(Menu.Item, { as: "button", onClick: logout, className: "menu-item", id: "logout-button", children: [
100
+ /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
101
+ /* @__PURE__ */ jsx2("span", { children: "Log out" })
102
+ ] });
103
+ }
104
+ };
90
105
  const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
91
106
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
92
107
  /* @__PURE__ */ jsx2(
@@ -125,10 +140,7 @@ function UserMenu({
125
140
  /* @__PURE__ */ jsx2(Icon2, { data: settings }),
126
141
  /* @__PURE__ */ jsx2("span", { children: "Settings" })
127
142
  ] }),
128
- /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
129
- /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
130
- /* @__PURE__ */ jsx2("span", { children: "Log out" })
131
- ] }),
143
+ LogOutMenuItem(),
132
144
  children
133
145
  ]
134
146
  }
@@ -162,7 +174,7 @@ var MenuWrapper = styled2(Menu)`
162
174
  }
163
175
  }
164
176
  ${({ $darkMode }) => $darkMode ? css2`
165
- background: #3e4f5c;
177
+ background: #3e4f5c; //TODO: get color from token in the future
166
178
  color: #fff;
167
179
  .menu-item {
168
180
  color: #fff;
@@ -181,13 +193,15 @@ var LetterCircle = styled2.span`
181
193
  height: 32px;
182
194
  justify-content: center;
183
195
  width: 32px;
196
+ background-color: ${tokens2.colors.interactive.primary__resting.hex};
197
+ color: #fff;
184
198
  ${({ $darkMode }) => $darkMode ? css2`
185
199
  background: ${tokens2.colors.interactive.link_in_snackbars.hex};
186
200
  color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
187
- ` : ``}
201
+ ` : ``};
188
202
  `;
189
203
  var StyledUserButton = styled2(Button)`
190
- margin: 10px 12px;
204
+ margin-left: 12px;
191
205
  font-weight: bold;
192
206
  width: 32px;
193
207
  height: 32px;
@@ -206,13 +220,12 @@ var IconAndTextWrapper = styled2(Menu.Item)`
206
220
  padding: 12px 20px;
207
221
  width: 315px;
208
222
  color: inherit;
209
- &:hover {
223
+ &:hover,
224
+ &:focus,
225
+ &:active {
226
+ background-color: transparent;
227
+ cursor: default;
210
228
  }
211
- ${({ $darkMode }) => $darkMode ? css2`
212
- &:hover {
213
- background: #305c75; //TODO: get color from token in the future
214
- }
215
- ` : ""}
216
229
  `;
217
230
  export {
218
231
  TopBar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-top-bar-react",
3
- "version": "0.1.0",
3
+ "version": "0.2.2",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",