@equinor/cpl-top-bar-react 0.3.0 → 0.3.1

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 +27 -16
  4. package/dist/index.mjs +27 -16
  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,7 +91,7 @@ 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));
94
+ background: var(--background-default, rgba(255, 255, 255, 1));
96
95
  color: var(--color-text);
97
96
  `;
98
97
  var AppNameContainer = import_styled_components.default.div`
@@ -101,24 +100,38 @@ var AppNameContainer = import_styled_components.default.div`
101
100
  align-items: center;
102
101
  `;
103
102
  var StyledTypography = (0, import_styled_components.default)(import_eds_core_react.Typography)`
104
- font-weight: 300;
105
103
  color: var(--color-text);
106
104
  `;
107
105
  var LinkContainer = import_styled_components.default.div`
108
106
  display: flex;
109
107
  align-items: center;
110
108
  gap: ${import_eds_tokens.tokens.spacings.comfortable.large};
111
- `;
109
+ `;
112
110
  var StyledLink = import_styled_components.default.a`
113
111
  text-decoration: none;
114
112
  display: flex;
115
113
  align-items: center;
116
114
  gap: 0.3rem;
117
- font-weight: 300;
118
-
115
+
119
116
  text-decoration: none;
120
117
  color: var(--color-text);
121
118
  `;
119
+ var ThemedButton = (0, import_styled_components.default)(import_eds_core_react.Button)`
120
+ background-color: transparent;
121
+ color: var(--interactive-focus-border, ${import_eds_tokens.tokens.colors.interactive.primary__resting.hex});
122
+
123
+ &:focus-visible {
124
+ outline-color: var(--interactive-focus-border, ${import_eds_tokens.tokens.colors.interactive.focus.hex});
125
+ }
126
+
127
+ &:hover {
128
+ background-color: var(
129
+ --interactive-primary-hover-alt,
130
+ ${import_eds_tokens.tokens.colors.interactive.primary__hover_alt.hex}
131
+ );
132
+ color: var(--interactive-secondary-hover, ${import_eds_tokens.tokens.colors.interactive.primary__resting.hex});
133
+ }
134
+ `;
122
135
 
123
136
  // src/FeedbackLink/FeedbackLink.tsx
124
137
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -144,12 +157,7 @@ var import_eds_tokens2 = require("@equinor/eds-tokens");
144
157
  var import_react = require("react");
145
158
  var import_styled_components2 = __toESM(require("styled-components"));
146
159
  var import_jsx_runtime3 = require("react/jsx-runtime");
147
- function UserMenu({
148
- user,
149
- logout,
150
- settingsLink,
151
- children
152
- }) {
160
+ function UserMenu({ user, logout, settingsLink, children }) {
153
161
  var _a, _b, _c, _d, _e;
154
162
  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
155
163
  const [anchorEl, setAnchorEl] = (0, import_react.useState)(null);
@@ -257,7 +265,10 @@ var LetterCircle = import_styled_components2.default.span`
257
265
  height: 32px;
258
266
  justify-content: center;
259
267
  width: 32px;
260
- background-color: var(--interactive-focus-border, ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex} );
268
+ background-color: var(
269
+ --interactive-focus-border,
270
+ ${import_eds_tokens2.tokens.colors.interactive.primary__resting.hex}
271
+ );
261
272
  color: var(--color-text-inverse, #fff);
262
273
  `;
263
274
  var StyledUserButton = (0, import_styled_components2.default)(import_eds_core_react3.Button)`
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,7 +52,7 @@ 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));
55
+ background: var(--background-default, rgba(255, 255, 255, 1));
57
56
  color: var(--color-text);
58
57
  `;
59
58
  var AppNameContainer = styled.div`
@@ -62,24 +61,38 @@ var AppNameContainer = styled.div`
62
61
  align-items: center;
63
62
  `;
64
63
  var StyledTypography = styled(Typography)`
65
- font-weight: 300;
66
64
  color: var(--color-text);
67
65
  `;
68
66
  var LinkContainer = styled.div`
69
67
  display: flex;
70
68
  align-items: center;
71
69
  gap: ${tokens.spacings.comfortable.large};
72
- `;
70
+ `;
73
71
  var StyledLink = styled.a`
74
72
  text-decoration: none;
75
73
  display: flex;
76
74
  align-items: center;
77
75
  gap: 0.3rem;
78
- font-weight: 300;
79
-
76
+
80
77
  text-decoration: none;
81
78
  color: var(--color-text);
82
79
  `;
80
+ var ThemedButton = styled(Button)`
81
+ background-color: transparent;
82
+ color: var(--interactive-focus-border, ${tokens.colors.interactive.primary__resting.hex});
83
+
84
+ &:focus-visible {
85
+ outline-color: var(--interactive-focus-border, ${tokens.colors.interactive.focus.hex});
86
+ }
87
+
88
+ &:hover {
89
+ background-color: var(
90
+ --interactive-primary-hover-alt,
91
+ ${tokens.colors.interactive.primary__hover_alt.hex}
92
+ );
93
+ color: var(--interactive-secondary-hover, ${tokens.colors.interactive.primary__resting.hex});
94
+ }
95
+ `;
83
96
 
84
97
  // src/FeedbackLink/FeedbackLink.tsx
85
98
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -105,12 +118,7 @@ import { tokens as tokens2 } from "@equinor/eds-tokens";
105
118
  import { useState } from "react";
106
119
  import styled2 from "styled-components";
107
120
  import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
108
- function UserMenu({
109
- user,
110
- logout,
111
- settingsLink,
112
- children
113
- }) {
121
+ function UserMenu({ user, logout, settingsLink, children }) {
114
122
  var _a, _b, _c, _d, _e;
115
123
  const [isOpen, setIsOpen] = useState(false);
116
124
  const [anchorEl, setAnchorEl] = useState(null);
@@ -218,7 +226,10 @@ var LetterCircle = styled2.span`
218
226
  height: 32px;
219
227
  justify-content: center;
220
228
  width: 32px;
221
- background-color: var(--interactive-focus-border, ${tokens2.colors.interactive.primary__resting.hex} );
229
+ background-color: var(
230
+ --interactive-focus-border,
231
+ ${tokens2.colors.interactive.primary__resting.hex}
232
+ );
222
233
  color: var(--color-text-inverse, #fff);
223
234
  `;
224
235
  var StyledUserButton = styled2(Button2)`
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.1",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",