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

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.
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
@@ -39,6 +39,7 @@ module.exports = __toCommonJS(src_exports);
39
39
  var import_eds_core_react = require("@equinor/eds-core-react");
40
40
  var import_eds_icons = require("@equinor/eds-icons");
41
41
  var import_styled_components = __toESM(require("styled-components"));
42
+ var import_eds_tokens = require("@equinor/eds-tokens");
42
43
  var import_jsx_runtime = require("react/jsx-runtime");
43
44
  function TopBar({
44
45
  appName,
@@ -65,10 +66,12 @@ function TopBar({
65
66
  ] });
66
67
  }
67
68
  var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_react.TopBar)`
68
- background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
69
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
70
69
  border-color: rgba(255, 255, 255, 0.16);
71
70
  gap: 0;
71
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
72
+ background: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
73
+ color: #fff;
74
+ ` : ""}
72
75
  `;
73
76
  var AppNameContainer = import_styled_components.default.div`
74
77
  display: flex;
@@ -77,30 +80,37 @@ var AppNameContainer = import_styled_components.default.div`
77
80
  `;
78
81
  var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
79
82
  font-weight: 300;
80
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
83
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
84
+ color: #fff;
85
+ ` : ""}
81
86
  `;
82
87
  var DocumentationDiv = import_styled_components.default.div`
83
88
  text-decoration: none;
84
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
85
89
  display: flex;
86
90
  gap: 0.3rem;
87
91
  font-weight: 300;
88
92
  a {
89
93
  text-decoration: none;
90
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
94
+ color: inherit;
91
95
  }
96
+ ${({ $darkMode }) => $darkMode ? import_styled_components.css`
97
+ color: ${import_eds_tokens.tokens.colors.interactive.table__cell__fill_resting.hex};
98
+ a {
99
+ color: #fff;
100
+ }
101
+ ` : ""}
92
102
  `;
93
103
 
94
104
  // src/UserMenu/UserMenu.tsx
95
105
  var import_eds_core_react2 = require("@equinor/eds-core-react");
96
106
  var import_eds_icons2 = require("@equinor/eds-icons");
97
- var import_eds_tokens = require("@equinor/eds-tokens");
107
+ var import_eds_tokens2 = require("@equinor/eds-tokens");
98
108
  var import_react = require("react");
99
109
  var import_styled_components2 = __toESM(require("styled-components"));
100
110
  var import_jsx_runtime2 = require("react/jsx-runtime");
101
111
  function UserMenu({
102
112
  user,
103
- logoutUrl,
113
+ logout,
104
114
  darkMode = false,
105
115
  settingsLink,
106
116
  children
@@ -114,6 +124,19 @@ function UserMenu({
114
124
  const closeMenu = () => {
115
125
  setIsOpen(false);
116
126
  };
127
+ const LogOutMenuItem = () => {
128
+ if (typeof logout === "string") {
129
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
130
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
131
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
132
+ ] });
133
+ } else {
134
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
135
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
136
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
137
+ ] });
138
+ }
139
+ };
117
140
  const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
118
141
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
119
142
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -141,7 +164,7 @@ function UserMenu({
141
164
  anchorEl,
142
165
  style: { padding: 0, paddingBottom: 2 },
143
166
  children: [
144
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { children: [
167
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(IconAndTextWrapper, { $darkMode: darkMode, children: [
145
168
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
146
169
  isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
147
170
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
@@ -152,10 +175,7 @@ function UserMenu({
152
175
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.settings }),
153
176
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Settings" })
154
177
  ] }),
155
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_eds_core_react2.Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
156
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons2.log_out }),
157
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Log out" })
158
- ] }),
178
+ LogOutMenuItem(),
159
179
  children
160
180
  ]
161
181
  }
@@ -163,59 +183,71 @@ function UserMenu({
163
183
  ] });
164
184
  }
165
185
  var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu)`
166
- background: ${(p) => p.$darkMode ? " #3E4F5C" : " #3a7e82"};
167
- border-radius: ${import_eds_tokens.tokens.shape.corners.borderRadius};
168
- margin-top: ${import_eds_tokens.tokens.spacings.comfortable.small};
169
- margin-bottom: -${import_eds_tokens.tokens.spacings.comfortable.small};
170
- padding-bottom: ${import_eds_tokens.tokens.spacings.comfortable.small};
186
+ border-radius: ${import_eds_tokens2.tokens.shape.corners.borderRadius};
187
+ margin-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
188
+ margin-bottom: -${import_eds_tokens2.tokens.spacings.comfortable.small};
189
+ padding-bottom: ${import_eds_tokens2.tokens.spacings.comfortable.small};
171
190
  padding-left: 0;
172
191
  padding-right: 0;
173
- padding-top: ${import_eds_tokens.tokens.spacings.comfortable.small};
192
+ padding-top: ${import_eds_tokens2.tokens.spacings.comfortable.small};
174
193
  width: 315px;
175
- color: white;
176
194
 
177
195
  .menu-item {
178
196
  align-items: center;
179
- background: transparent;
180
- color: white;
181
197
  display: flex;
182
- gap: ${import_eds_tokens.tokens.spacings.comfortable.medium};
198
+ gap: ${import_eds_tokens2.tokens.spacings.comfortable.medium};
183
199
  opacity: 0.85;
184
- padding: ${import_eds_tokens.tokens.spacings.comfortable.small} ${import_eds_tokens.tokens.spacings.comfortable.large};
200
+ padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
185
201
  svg {
186
202
  opacity: 0.7;
187
203
  }
188
204
  &:hover {
189
- background: #305c75;
190
205
  opacity: 1;
191
206
  svg {
192
207
  opacity: 1;
193
208
  }
194
209
  }
195
210
  }
211
+ ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
212
+ background: #3e4f5c; //TODO: get color from token in the future
213
+ color: #fff;
214
+ .menu-item {
215
+ color: #fff;
216
+ &:hover {
217
+ background: #305c75;
218
+ }
219
+ }
220
+ ` : ``}
196
221
  `;
197
222
  var LetterCircle = import_styled_components2.default.span`
198
223
  align-items: center;
199
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
200
224
  border-radius: 1000px;
201
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
202
225
  display: flex;
203
226
  flex-shrink: 0;
204
227
  font-weight: bold;
205
228
  height: 32px;
206
229
  justify-content: center;
207
230
  width: 32px;
231
+ background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex};
232
+ color: #fff;
233
+ ${({ $darkMode }) => $darkMode ? import_styled_components2.css`
234
+ background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
235
+ color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
236
+ ` : ``};
208
237
  `;
209
238
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react2.Button)`
210
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
211
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
212
239
  margin: 10px 12px;
213
240
  font-weight: bold;
214
241
  width: 32px;
215
242
  height: 32px;
216
- &:hover {
217
- background: ${(p) => p.$darkMode ? "#fff" : "#132634"};
218
- }
243
+
244
+ ${({ $darkMode }) => $darkMode && import_styled_components2.css`
245
+ background: ${import_eds_tokens2.tokens.colors.interactive.link_in_snackbars.hex};
246
+ color: ${import_eds_tokens2.tokens.colors.interactive.table__cell__fill_resting.hex};
247
+ &:hover {
248
+ background: #fff;
249
+ }
250
+ `}
219
251
  `;
220
252
  var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react2.Menu.Item)`
221
253
  display: flex;
@@ -223,8 +255,11 @@ var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_
223
255
  padding: 12px 20px;
224
256
  width: 315px;
225
257
  color: inherit;
226
- &:hover {
227
- background: #305c75;
258
+ &:hover,
259
+ &:focus,
260
+ &:active {
261
+ background-color: transparent;
262
+ cursor: default;
228
263
  }
229
264
  `;
230
265
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.mjs CHANGED
@@ -1,7 +1,8 @@
1
1
  // src/TopBar/TopBar.tsx
2
2
  import { TopBar as EDSTopBar, Icon, Typography } from "@equinor/eds-core-react";
3
3
  import { external_link } from "@equinor/eds-icons";
4
- import styled from "styled-components";
4
+ import styled, { css } from "styled-components";
5
+ import { tokens } from "@equinor/eds-tokens";
5
6
  import { jsx, jsxs } from "react/jsx-runtime";
6
7
  function TopBar({
7
8
  appName,
@@ -28,10 +29,12 @@ function TopBar({
28
29
  ] });
29
30
  }
30
31
  var StyledEDSTopBar = styled(EDSTopBar)`
31
- background-color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
32
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
33
32
  border-color: rgba(255, 255, 255, 0.16);
34
33
  gap: 0;
34
+ ${({ $darkMode }) => $darkMode ? css`
35
+ background: ${tokens.colors.interactive.table__cell__fill_resting.hex};
36
+ color: #fff;
37
+ ` : ""}
35
38
  `;
36
39
  var AppNameContainer = styled.div`
37
40
  display: flex;
@@ -40,30 +43,37 @@ var AppNameContainer = styled.div`
40
43
  `;
41
44
  var StyledTypography = styled(Typography)`
42
45
  font-weight: 300;
43
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
46
+ ${({ $darkMode }) => $darkMode ? css`
47
+ color: #fff;
48
+ ` : ""}
44
49
  `;
45
50
  var DocumentationDiv = styled.div`
46
51
  text-decoration: none;
47
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
48
52
  display: flex;
49
53
  gap: 0.3rem;
50
54
  font-weight: 300;
51
55
  a {
52
56
  text-decoration: none;
53
- color: ${(p) => p.$darkMode ? "#fff" : "#132634"};
57
+ color: inherit;
54
58
  }
59
+ ${({ $darkMode }) => $darkMode ? css`
60
+ color: ${tokens.colors.interactive.table__cell__fill_resting.hex};
61
+ a {
62
+ color: #fff;
63
+ }
64
+ ` : ""}
55
65
  `;
56
66
 
57
67
  // src/UserMenu/UserMenu.tsx
58
68
  import { Button, Icon as Icon2, Menu } from "@equinor/eds-core-react";
59
69
  import { log_out, settings } from "@equinor/eds-icons";
60
- import { tokens } from "@equinor/eds-tokens";
70
+ import { tokens as tokens2 } from "@equinor/eds-tokens";
61
71
  import { useState } from "react";
62
- import styled2 from "styled-components";
72
+ import styled2, { css as css2 } from "styled-components";
63
73
  import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
64
74
  function UserMenu({
65
75
  user,
66
- logoutUrl,
76
+ logout,
67
77
  darkMode = false,
68
78
  settingsLink,
69
79
  children
@@ -77,6 +87,19 @@ function UserMenu({
77
87
  const closeMenu = () => {
78
88
  setIsOpen(false);
79
89
  };
90
+ const LogOutMenuItem = () => {
91
+ if (typeof logout === "string") {
92
+ return /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logout, className: "menu-item", children: [
93
+ /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
94
+ /* @__PURE__ */ jsx2("span", { children: "Log out" })
95
+ ] });
96
+ } else {
97
+ return /* @__PURE__ */ jsxs2(Menu.Item, { as: "button", onClick: logout, className: "menu-item", children: [
98
+ /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
99
+ /* @__PURE__ */ jsx2("span", { children: "Log out" })
100
+ ] });
101
+ }
102
+ };
80
103
  const firstLetter = (_c = (_b = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a[0]) == null ? void 0 : _b.toUpperCase()) != null ? _c : "-";
81
104
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
82
105
  /* @__PURE__ */ jsx2(
@@ -104,7 +127,7 @@ function UserMenu({
104
127
  anchorEl,
105
128
  style: { padding: 0, paddingBottom: 2 },
106
129
  children: [
107
- /* @__PURE__ */ jsxs2(IconAndTextWrapper, { children: [
130
+ /* @__PURE__ */ jsxs2(IconAndTextWrapper, { $darkMode: darkMode, children: [
108
131
  /* @__PURE__ */ jsx2(LetterCircle, { $darkMode: darkMode, children: firstLetter }),
109
132
  isOpen && /* @__PURE__ */ jsxs2("div", { children: [
110
133
  /* @__PURE__ */ jsx2("div", { style: { fontWeight: "bold", lineHeight: 0.9, marginBottom: 2 }, children: (_d = user == null ? void 0 : user.name) != null ? _d : "-" }),
@@ -115,10 +138,7 @@ function UserMenu({
115
138
  /* @__PURE__ */ jsx2(Icon2, { data: settings }),
116
139
  /* @__PURE__ */ jsx2("span", { children: "Settings" })
117
140
  ] }),
118
- /* @__PURE__ */ jsxs2(Menu.Item, { as: "a", href: logoutUrl, className: "menu-item", children: [
119
- /* @__PURE__ */ jsx2(Icon2, { data: log_out }),
120
- /* @__PURE__ */ jsx2("span", { children: "Log out" })
121
- ] }),
141
+ LogOutMenuItem(),
122
142
  children
123
143
  ]
124
144
  }
@@ -126,59 +146,71 @@ function UserMenu({
126
146
  ] });
127
147
  }
128
148
  var MenuWrapper = styled2(Menu)`
129
- background: ${(p) => p.$darkMode ? " #3E4F5C" : " #3a7e82"};
130
- border-radius: ${tokens.shape.corners.borderRadius};
131
- margin-top: ${tokens.spacings.comfortable.small};
132
- margin-bottom: -${tokens.spacings.comfortable.small};
133
- padding-bottom: ${tokens.spacings.comfortable.small};
149
+ border-radius: ${tokens2.shape.corners.borderRadius};
150
+ margin-top: ${tokens2.spacings.comfortable.small};
151
+ margin-bottom: -${tokens2.spacings.comfortable.small};
152
+ padding-bottom: ${tokens2.spacings.comfortable.small};
134
153
  padding-left: 0;
135
154
  padding-right: 0;
136
- padding-top: ${tokens.spacings.comfortable.small};
155
+ padding-top: ${tokens2.spacings.comfortable.small};
137
156
  width: 315px;
138
- color: white;
139
157
 
140
158
  .menu-item {
141
159
  align-items: center;
142
- background: transparent;
143
- color: white;
144
160
  display: flex;
145
- gap: ${tokens.spacings.comfortable.medium};
161
+ gap: ${tokens2.spacings.comfortable.medium};
146
162
  opacity: 0.85;
147
- padding: ${tokens.spacings.comfortable.small} ${tokens.spacings.comfortable.large};
163
+ padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
148
164
  svg {
149
165
  opacity: 0.7;
150
166
  }
151
167
  &:hover {
152
- background: #305c75;
153
168
  opacity: 1;
154
169
  svg {
155
170
  opacity: 1;
156
171
  }
157
172
  }
158
173
  }
174
+ ${({ $darkMode }) => $darkMode ? css2`
175
+ background: #3e4f5c; //TODO: get color from token in the future
176
+ color: #fff;
177
+ .menu-item {
178
+ color: #fff;
179
+ &:hover {
180
+ background: #305c75;
181
+ }
182
+ }
183
+ ` : ``}
159
184
  `;
160
185
  var LetterCircle = styled2.span`
161
186
  align-items: center;
162
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
163
187
  border-radius: 1000px;
164
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
165
188
  display: flex;
166
189
  flex-shrink: 0;
167
190
  font-weight: bold;
168
191
  height: 32px;
169
192
  justify-content: center;
170
193
  width: 32px;
194
+ background-color: ${tokens2.colors.interactive.primary__resting.hex};
195
+ color: #fff;
196
+ ${({ $darkMode }) => $darkMode ? css2`
197
+ background: ${tokens2.colors.interactive.link_in_snackbars.hex};
198
+ color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
199
+ ` : ``};
171
200
  `;
172
201
  var StyledUserButton = styled2(Button)`
173
- background: ${(p) => p.$darkMode ? "#97CACE" : " #007079"};
174
- color: ${(p) => p.$darkMode ? "#132634" : "#fff"};
175
202
  margin: 10px 12px;
176
203
  font-weight: bold;
177
204
  width: 32px;
178
205
  height: 32px;
179
- &:hover {
180
- background: ${(p) => p.$darkMode ? "#fff" : "#132634"};
181
- }
206
+
207
+ ${({ $darkMode }) => $darkMode && css2`
208
+ background: ${tokens2.colors.interactive.link_in_snackbars.hex};
209
+ color: ${tokens2.colors.interactive.table__cell__fill_resting.hex};
210
+ &:hover {
211
+ background: #fff;
212
+ }
213
+ `}
182
214
  `;
183
215
  var IconAndTextWrapper = styled2(Menu.Item)`
184
216
  display: flex;
@@ -186,8 +218,11 @@ var IconAndTextWrapper = styled2(Menu.Item)`
186
218
  padding: 12px 20px;
187
219
  width: 315px;
188
220
  color: inherit;
189
- &:hover {
190
- background: #305c75;
221
+ &:hover,
222
+ &:focus,
223
+ &:active {
224
+ background-color: transparent;
225
+ cursor: default;
191
226
  }
192
227
  `;
193
228
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-top-bar-react",
3
- "version": "0.0.1",
3
+ "version": "0.2.0",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",