@equinor/cpl-top-bar-react 0.3.0 → 0.3.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 +2 -8
  2. package/dist/index.d.ts +2 -8
  3. package/dist/index.js +21 -26
  4. package/dist/index.mjs +21 -26
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as styled_components_dist_types from 'styled-components/dist/types';
3
3
  import * as styled_components from 'styled-components';
4
4
  import * as react from 'react';
5
- import { ReactNode } from 'react';
6
5
 
7
6
  interface FeedbackLinkProps {
8
7
  link: string;
@@ -21,11 +20,6 @@ interface TopBarProps {
21
20
  logoLink: string;
22
21
  sideMenuOpen?: boolean;
23
22
  setSideMenuOpen?: (open: boolean) => void;
24
- /**
25
- * optional custom button component to trigger the side menu
26
- * If provided, it will be rendered instead of the default menu button.
27
- */
28
- menuButton?: (onClick: () => void) => ReactNode;
29
23
  documentationLink?: string;
30
24
  documentationName?: string;
31
25
  feedbackLink?: React.ReactNode;
@@ -39,7 +33,7 @@ interface TopBarProps {
39
33
  * To use the Topbar component in dark mode, you need to wrap it in the `ThemeProvider` from `@equinor/cpl-theme-react`
40
34
  * and set the theme to 'dark'.
41
35
  */
42
- declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, menuButton, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
36
+ declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
43
37
  declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
44
38
 
45
39
  interface UserMenuProps {
@@ -51,6 +45,6 @@ interface UserMenuProps {
51
45
  settingsLink?: string;
52
46
  children?: React.ReactNode;
53
47
  }
54
- declare function UserMenu({ user, logout, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
48
+ declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
55
49
 
56
50
  export { FeedbackLink, StyledLink, TopBar, UserMenu };
package/dist/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as styled_components_dist_types from 'styled-components/dist/types';
3
3
  import * as styled_components from 'styled-components';
4
4
  import * as react from 'react';
5
- import { ReactNode } from 'react';
6
5
 
7
6
  interface FeedbackLinkProps {
8
7
  link: string;
@@ -21,11 +20,6 @@ interface TopBarProps {
21
20
  logoLink: string;
22
21
  sideMenuOpen?: boolean;
23
22
  setSideMenuOpen?: (open: boolean) => void;
24
- /**
25
- * optional custom button component to trigger the side menu
26
- * If provided, it will be rendered instead of the default menu button.
27
- */
28
- menuButton?: (onClick: () => void) => ReactNode;
29
23
  documentationLink?: string;
30
24
  documentationName?: string;
31
25
  feedbackLink?: React.ReactNode;
@@ -39,7 +33,7 @@ interface TopBarProps {
39
33
  * To use the Topbar component in dark mode, you need to wrap it in the `ThemeProvider` from `@equinor/cpl-theme-react`
40
34
  * and set the theme to 'dark'.
41
35
  */
42
- declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, menuButton, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
36
+ declare function TopBar({ appName, logoLink, sideMenuOpen, setSideMenuOpen, feedbackLink, documentationLink, documentationName, userMenu, logoPath, logoAlt, }: TopBarProps): react_jsx_runtime.JSX.Element;
43
37
  declare const StyledLink: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
44
38
 
45
39
  interface UserMenuProps {
@@ -51,6 +45,6 @@ interface UserMenuProps {
51
45
  settingsLink?: string;
52
46
  children?: React.ReactNode;
53
47
  }
54
- declare function UserMenu({ user, logout, settingsLink, children, }: UserMenuProps): react_jsx_runtime.JSX.Element;
48
+ declare function UserMenu({ user, logout, settingsLink, children }: UserMenuProps): react_jsx_runtime.JSX.Element;
55
49
 
56
50
  export { FeedbackLink, StyledLink, TopBar, UserMenu };
package/dist/index.js CHANGED
@@ -52,7 +52,6 @@ function TopBar({
52
52
  logoLink,
53
53
  sideMenuOpen,
54
54
  setSideMenuOpen,
55
- menuButton,
56
55
  feedbackLink,
57
56
  documentationLink,
58
57
  documentationName = "Documentation",
@@ -63,15 +62,15 @@ function TopBar({
63
62
  const hasSideMenu = setSideMenuOpen && sideMenuOpen !== void 0;
64
63
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledEDSTopBar, { children: [
65
64
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_eds_core_react.TopBar.Header, { style: { padding: 0 }, children: [
66
- hasSideMenu && (menuButton ? menuButton(() => setSideMenuOpen(!sideMenuOpen)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67
- import_eds_core_react.Button,
65
+ hasSideMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
66
+ ThemedButton,
68
67
  {
69
68
  variant: "ghost_icon",
70
69
  "aria-label": "menu action",
71
70
  onClick: () => setSideMenuOpen(!sideMenuOpen),
72
71
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_eds_core_react.Icon, { data: import_eds_icons.menu, size: 24 })
73
72
  }
74
- )),
73
+ ),
75
74
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppNameContainer, { children: [
76
75
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: logoPath, alt: logoAlt, height: 24, width: 22 }) }),
77
76
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: logoLink, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTypography, { children: appName }) })
@@ -92,8 +91,6 @@ var StyledEDSTopBar = (0, import_styled_components.default)(import_eds_core_reac
92
91
  gap: 0;
93
92
  padding: 0px 20px;
94
93
  margin: 0px;
95
- background: var(--background-default, rgba(255, 255, 255, 1));
96
- color: var(--color-text);
97
94
  `;
98
95
  var AppNameContainer = import_styled_components.default.div`
99
96
  display: flex;
@@ -101,23 +98,28 @@ var AppNameContainer = import_styled_components.default.div`
101
98
  align-items: center;
102
99
  `;
103
100
  var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
104
- font-weight: 300;
105
- color: var(--color-text);
101
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
106
102
  `;
107
103
  var LinkContainer = import_styled_components.default.div`
108
104
  display: flex;
109
105
  align-items: center;
110
106
  gap: ${import_eds_tokens.tokens.spacings.comfortable.large};
111
- `;
107
+ `;
112
108
  var StyledLink = import_styled_components.default.a`
113
109
  text-decoration: none;
114
110
  display: flex;
115
111
  align-items: center;
116
112
  gap: 0.3rem;
117
- font-weight: 300;
118
-
119
113
  text-decoration: none;
120
- color: var(--color-text);
114
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
115
+ `;
116
+ var ThemedButton = (0, import_styled_components.default)(import_eds_core_react.Button)`
117
+ &:hover {
118
+ color: var(--button-hover);
119
+ }
120
+
121
+
122
+
121
123
  `;
122
124
 
123
125
  // src/FeedbackLink/FeedbackLink.tsx
@@ -144,12 +146,7 @@ var import_eds_tokens2 = require("@equinor/eds-tokens");
144
146
  var import_react = require("react");
145
147
  var import_styled_components2 = __toESM(require("styled-components"));
146
148
  var import_jsx_runtime3 = require("react/jsx-runtime");
147
- function UserMenu({
148
- user,
149
- logout,
150
- settingsLink,
151
- children
152
- }) {
149
+ function UserMenu({ user, logout, settingsLink, children }) {
153
150
  var _a, _b, _c, _d, _e;
154
151
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
155
152
  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
@@ -226,7 +223,7 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
226
223
  width: 315px;
227
224
 
228
225
  background: var(--ui-background-temporary-nav, #fff);
229
- color: var(--color-text);
226
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__default.rgba};
230
227
 
231
228
  .menu-item {
232
229
  align-items: center;
@@ -235,13 +232,13 @@ var MenuWrapper = (0, import_styled_components2.default)(import_eds_core_react3.
235
232
  opacity: 0.85;
236
233
  padding: ${import_eds_tokens2.tokens.spacings.comfortable.small} ${import_eds_tokens2.tokens.spacings.comfortable.large};
237
234
 
238
- color: var(--color-text);
239
235
  svg {
240
236
  opacity: 0.7;
241
237
  }
242
238
  &:hover {
243
239
  opacity: 1;
244
- background: var(--menu-item-hover-color);
240
+ background-color: transparent;
241
+
245
242
  svg {
246
243
  opacity: 1;
247
244
  }
@@ -257,19 +254,17 @@ var LetterCircle = import_styled_components2.default.span`
257
254
  height: 32px;
258
255
  justify-content: center;
259
256
  width: 32px;
260
- background-color: var(--interactive-focus-border, ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex} );
261
- color: var(--color-text-inverse, #fff);
257
+ background-color: ${import_eds_tokens2.tokens.colors.interactive.primary__resting.rgba};
258
+ color: ${import_eds_tokens2.tokens.colors.text.static_icons__primary_white.rgba};
262
259
  `;
263
260
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react3.Button)`
264
261
  margin-left: 12px;
265
262
  font-weight: bold;
266
263
  width: 32px;
267
264
  height: 32px;
268
- background: var(--interactive-focus-border, ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex});
269
- color: var(--color-text-inverse, #fff);
270
265
 
271
266
  &:hover {
272
- background-color: var(--color-text, rgba(0, 79, 85, 1));
267
+ background-color: var(--button-hover, rgba(0, 79, 85, 1));
273
268
  }
274
269
  `;
275
270
  var IconAndTextWrapper = (0, import_styled_components2.default)(import_eds_core_react3.Menu.Item)`
package/dist/index.mjs CHANGED
@@ -13,7 +13,6 @@ function TopBar({
13
13
  logoLink,
14
14
  sideMenuOpen,
15
15
  setSideMenuOpen,
16
- menuButton,
17
16
  feedbackLink,
18
17
  documentationLink,
19
18
  documentationName = "Documentation",
@@ -24,15 +23,15 @@ function TopBar({
24
23
  const hasSideMenu = setSideMenuOpen && sideMenuOpen !== void 0;
25
24
  return /* @__PURE__ */ jsxs(StyledEDSTopBar, { children: [
26
25
  /* @__PURE__ */ jsxs(EDSTopBar.Header, { style: { padding: 0 }, children: [
27
- hasSideMenu && (menuButton ? menuButton(() => setSideMenuOpen(!sideMenuOpen)) : /* @__PURE__ */ jsx(
28
- Button,
26
+ hasSideMenu && /* @__PURE__ */ jsx(
27
+ ThemedButton,
29
28
  {
30
29
  variant: "ghost_icon",
31
30
  "aria-label": "menu action",
32
31
  onClick: () => setSideMenuOpen(!sideMenuOpen),
33
32
  children: /* @__PURE__ */ jsx(Icon, { data: menu, size: 24 })
34
33
  }
35
- )),
34
+ ),
36
35
  /* @__PURE__ */ jsxs(AppNameContainer, { children: [
37
36
  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { src: logoPath, alt: logoAlt, height: 24, width: 22 }) }),
38
37
  /* @__PURE__ */ jsx("a", { href: logoLink, children: /* @__PURE__ */ jsx(StyledTypography, { children: appName }) })
@@ -53,8 +52,6 @@ var StyledEDSTopBar = styled(EDSTopBar)`
53
52
  gap: 0;
54
53
  padding: 0px 20px;
55
54
  margin: 0px;
56
- background: var(--background-default, rgba(255, 255, 255, 1));
57
- color: var(--color-text);
58
55
  `;
59
56
  var AppNameContainer = styled.div`
60
57
  display: flex;
@@ -62,23 +59,28 @@ var AppNameContainer = styled.div`
62
59
  align-items: center;
63
60
  `;
64
61
  var StyledTypography = styled(Typography)`
65
- font-weight: 300;
66
- color: var(--color-text);
62
+ color: ${tokens.colors.text.static_icons__default.rgba};
67
63
  `;
68
64
  var LinkContainer = styled.div`
69
65
  display: flex;
70
66
  align-items: center;
71
67
  gap: ${tokens.spacings.comfortable.large};
72
- `;
68
+ `;
73
69
  var StyledLink = styled.a`
74
70
  text-decoration: none;
75
71
  display: flex;
76
72
  align-items: center;
77
73
  gap: 0.3rem;
78
- font-weight: 300;
79
-
80
74
  text-decoration: none;
81
- color: var(--color-text);
75
+ color: ${tokens.colors.text.static_icons__default.rgba};
76
+ `;
77
+ var ThemedButton = styled(Button)`
78
+ &:hover {
79
+ color: var(--button-hover);
80
+ }
81
+
82
+
83
+
82
84
  `;
83
85
 
84
86
  // src/FeedbackLink/FeedbackLink.tsx
@@ -105,12 +107,7 @@ import { tokens as tokens2 } from "@equinor/eds-tokens";
105
107
  import { useState } from "react";
106
108
  import styled2 from "styled-components";
107
109
  import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
108
- function UserMenu({
109
- user,
110
- logout,
111
- settingsLink,
112
- children
113
- }) {
110
+ function UserMenu({ user, logout, settingsLink, children }) {
114
111
  var _a, _b, _c, _d, _e;
115
112
  const [isOpen, setIsOpen] = useState(false);
116
113
  const [anchorEl, setAnchorEl] = useState(null);
@@ -187,7 +184,7 @@ var MenuWrapper = styled2(Menu)`
187
184
  width: 315px;
188
185
 
189
186
  background: var(--ui-background-temporary-nav, #fff);
190
- color: var(--color-text);
187
+ color: ${tokens2.colors.text.static_icons__default.rgba};
191
188
 
192
189
  .menu-item {
193
190
  align-items: center;
@@ -196,13 +193,13 @@ var MenuWrapper = styled2(Menu)`
196
193
  opacity: 0.85;
197
194
  padding: ${tokens2.spacings.comfortable.small} ${tokens2.spacings.comfortable.large};
198
195
 
199
- color: var(--color-text);
200
196
  svg {
201
197
  opacity: 0.7;
202
198
  }
203
199
  &:hover {
204
200
  opacity: 1;
205
- background: var(--menu-item-hover-color);
201
+ background-color: transparent;
202
+
206
203
  svg {
207
204
  opacity: 1;
208
205
  }
@@ -218,19 +215,17 @@ var LetterCircle = styled2.span`
218
215
  height: 32px;
219
216
  justify-content: center;
220
217
  width: 32px;
221
- background-color: var(--interactive-focus-border, ${tokens2.colors.interactive.primary__resting.hex} );
222
- color: var(--color-text-inverse, #fff);
218
+ background-color: ${tokens2.colors.interactive.primary__resting.rgba};
219
+ color: ${tokens2.colors.text.static_icons__primary_white.rgba};
223
220
  `;
224
221
  var StyledUserButton = styled2(Button2)`
225
222
  margin-left: 12px;
226
223
  font-weight: bold;
227
224
  width: 32px;
228
225
  height: 32px;
229
- background: var(--interactive-focus-border, ${tokens2.colors.interactive.primary__resting.hex});
230
- color: var(--color-text-inverse, #fff);
231
226
 
232
227
  &:hover {
233
- background-color: var(--color-text, rgba(0, 79, 85, 1));
228
+ background-color: var(--button-hover, rgba(0, 79, 85, 1));
234
229
  }
235
230
  `;
236
231
  var IconAndTextWrapper = styled2(Menu.Item)`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-top-bar-react",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",