@neo4j-ndl/react 3.5.7 → 3.6.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/lib/cjs/_common/IconIndicatorWrapper.js +43 -0
- package/lib/cjs/_common/IconIndicatorWrapper.js.map +1 -0
- package/lib/cjs/next/index.js +38 -0
- package/lib/cjs/next/index.js.map +1 -0
- package/lib/cjs/next/side-navigation/SideNavigation.js +206 -0
- package/lib/cjs/next/side-navigation/SideNavigation.js.map +1 -0
- package/lib/cjs/next/side-navigation/index.js +38 -0
- package/lib/cjs/next/side-navigation/index.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/index.js +43 -0
- package/lib/cjs/next/side-navigation/stories/index.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-badges.story.js +74 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-badges.story.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-compact.story.js +56 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-compact.story.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-default.story.js +57 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-default.story.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-secondary.story.js +72 -0
- package/lib/cjs/next/side-navigation/stories/side-nav-secondary.story.js.map +1 -0
- package/lib/cjs/next/side-navigation/stories/side-nav.stories.js +87 -0
- package/lib/cjs/next/side-navigation/stories/side-nav.stories.js.map +1 -0
- package/lib/cjs/side-navigation/SideNavigation.js +4 -1
- package/lib/cjs/side-navigation/SideNavigation.js.map +1 -1
- package/lib/esm/_common/IconIndicatorWrapper.js +37 -0
- package/lib/esm/_common/IconIndicatorWrapper.js.map +1 -0
- package/lib/esm/next/index.js +22 -0
- package/lib/esm/next/index.js.map +1 -0
- package/lib/esm/next/side-navigation/SideNavigation.js +200 -0
- package/lib/esm/next/side-navigation/SideNavigation.js.map +1 -0
- package/lib/esm/next/side-navigation/index.js +22 -0
- package/lib/esm/next/side-navigation/index.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/index.js +33 -0
- package/lib/esm/next/side-navigation/stories/index.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/side-nav-badges.story.js +72 -0
- package/lib/esm/next/side-navigation/stories/side-nav-badges.story.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/side-nav-compact.story.js +54 -0
- package/lib/esm/next/side-navigation/stories/side-nav-compact.story.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/side-nav-default.story.js +55 -0
- package/lib/esm/next/side-navigation/stories/side-nav-default.story.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/side-nav-secondary.story.js +70 -0
- package/lib/esm/next/side-navigation/stories/side-nav-secondary.story.js.map +1 -0
- package/lib/esm/next/side-navigation/stories/side-nav.stories.js +84 -0
- package/lib/esm/next/side-navigation/stories/side-nav.stories.js.map +1 -0
- package/lib/esm/side-navigation/SideNavigation.js +4 -1
- package/lib/esm/side-navigation/SideNavigation.js.map +1 -1
- package/lib/types/_common/IconIndicatorWrapper.d.ts +31 -0
- package/lib/types/next/index.d.ts +21 -0
- package/lib/types/next/side-navigation/SideNavigation.d.ts +93 -0
- package/lib/types/next/side-navigation/index.d.ts +21 -0
- package/lib/types/next/side-navigation/stories/index.d.ts +28 -0
- package/lib/types/next/side-navigation/stories/side-nav-badges.story.d.ts +23 -0
- package/lib/types/next/side-navigation/stories/side-nav-compact.story.d.ts +23 -0
- package/lib/types/next/side-navigation/stories/side-nav-default.story.d.ts +23 -0
- package/lib/types/next/side-navigation/stories/side-nav-secondary.story.d.ts +23 -0
- package/lib/types/next/side-navigation/stories/side-nav.stories.d.ts +95 -0
- package/lib/types/side-navigation/SideNavigation.d.ts +4 -1
- package/package.json +7 -2
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.IconIndicatorWrapper = void 0;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
/**
|
|
9
|
+
*
|
|
10
|
+
* Copyright (c) "Neo4j"
|
|
11
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
12
|
+
*
|
|
13
|
+
* This file is part of Neo4j.
|
|
14
|
+
*
|
|
15
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
16
|
+
* it under the terms of the GNU General Public License as published by
|
|
17
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
18
|
+
* (at your option) any later version.
|
|
19
|
+
*
|
|
20
|
+
* This program is distributed in the hope that it will be useful,
|
|
21
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
22
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
23
|
+
* GNU General Public License for more details.
|
|
24
|
+
*
|
|
25
|
+
* You should have received a copy of the GNU General Public License
|
|
26
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
27
|
+
*/
|
|
28
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
29
|
+
const react_1 = require("react");
|
|
30
|
+
exports.IconIndicatorWrapper = (0, react_1.forwardRef)(({ children, type, className, style, htmlAttributes }, ref) => {
|
|
31
|
+
const classes = (0, classnames_1.default)('ndl-icon-indicator-wrapper', className);
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: classes, style: style }, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(IconIndicator, { type: type })] })));
|
|
33
|
+
});
|
|
34
|
+
const IconIndicator = ({ type = 'info' }) => {
|
|
35
|
+
const classes = (0, classnames_1.default)('ndl-icon-indicator', {
|
|
36
|
+
'ndl-danger': type === 'danger',
|
|
37
|
+
'ndl-info': type === 'info',
|
|
38
|
+
'ndl-warning': type === 'warning',
|
|
39
|
+
});
|
|
40
|
+
return ((0, jsx_runtime_1.jsx)("svg", { width: "5", height: "5", viewBox: "0 0 5 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: classes, children: (0, jsx_runtime_1.jsx)("circle", { cx: "2.5", cy: "2.5", r: "2.5" }) }));
|
|
41
|
+
};
|
|
42
|
+
exports.IconIndicatorWrapper.displayName = 'IconIndicatorWrapper';
|
|
43
|
+
//# sourceMappingURL=IconIndicatorWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconIndicatorWrapper.js","sourceRoot":"","sources":["../../../src/_common/IconIndicatorWrapper.tsx"],"names":[],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAAoC;AACpC,iCAAmC;AActB,QAAA,oBAAoB,GAAG,IAAA,kBAAU,EAG5C,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC;IAEpE,OAAO,CACL,+CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAM,cAAc,eAChE,QAAQ,EACT,uBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,KACzB,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAMH,MAAM,aAAa,GAAG,CAAC,EAAE,IAAI,GAAG,MAAM,EAAsB,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,oBAAoB,EAAE;QAC/C,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,UAAU,EAAE,IAAI,KAAK,MAAM;QAC3B,aAAa,EAAE,IAAI,KAAK,SAAS;KAClC,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,OAAO,YAElB,mCAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAG,GAChC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,4BAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) "Neo4j"
|
|
5
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
6
|
+
*
|
|
7
|
+
* This file is part of Neo4j.
|
|
8
|
+
*
|
|
9
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
10
|
+
* it under the terms of the GNU General Public License as published by
|
|
11
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
12
|
+
* (at your option) any later version.
|
|
13
|
+
*
|
|
14
|
+
* This program is distributed in the hope that it will be useful,
|
|
15
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
16
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
17
|
+
* GNU General Public License for more details.
|
|
18
|
+
*
|
|
19
|
+
* You should have received a copy of the GNU General Public License
|
|
20
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
|
+
*/
|
|
22
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
23
|
+
if (k2 === undefined) k2 = k;
|
|
24
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
25
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
26
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
27
|
+
}
|
|
28
|
+
Object.defineProperty(o, k2, desc);
|
|
29
|
+
}) : (function(o, m, k, k2) {
|
|
30
|
+
if (k2 === undefined) k2 = k;
|
|
31
|
+
o[k2] = m[k];
|
|
32
|
+
}));
|
|
33
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
34
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
__exportStar(require("./side-navigation"), exports);
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/next/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,oDAAkC"}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.SideNavigation = void 0;
|
|
18
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
|
+
/**
|
|
20
|
+
*
|
|
21
|
+
* Copyright (c) "Neo4j"
|
|
22
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
23
|
+
*
|
|
24
|
+
* This file is part of Neo4j.
|
|
25
|
+
*
|
|
26
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
27
|
+
* it under the terms of the GNU General Public License as published by
|
|
28
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
29
|
+
* (at your option) any later version.
|
|
30
|
+
*
|
|
31
|
+
* This program is distributed in the hope that it will be useful,
|
|
32
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
33
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
34
|
+
* GNU General Public License for more details.
|
|
35
|
+
*
|
|
36
|
+
* You should have received a copy of the GNU General Public License
|
|
37
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
38
|
+
*/
|
|
39
|
+
const react_1 = require("@floating-ui/react");
|
|
40
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
41
|
+
const react_2 = require("react");
|
|
42
|
+
const IconIndicatorWrapper_1 = require("../../_common/IconIndicatorWrapper");
|
|
43
|
+
const button_1 = require("../../button");
|
|
44
|
+
const conditional_wrap_1 = require("../../conditional-wrap");
|
|
45
|
+
const divider_1 = require("../../divider");
|
|
46
|
+
const icons_1 = require("../../icons");
|
|
47
|
+
const popover_1 = require("../../popover");
|
|
48
|
+
const tooltip_1 = require("../../tooltip");
|
|
49
|
+
const typography_1 = require("../../typography");
|
|
50
|
+
const SideNavContext = (0, react_2.createContext)(null);
|
|
51
|
+
const useSideNavContext = () => {
|
|
52
|
+
const context = (0, react_2.useContext)(SideNavContext);
|
|
53
|
+
if (!context) {
|
|
54
|
+
throw new Error('SideNavigation subcomponents must be wrapped in <SideNavigation /> component');
|
|
55
|
+
}
|
|
56
|
+
return context;
|
|
57
|
+
};
|
|
58
|
+
const SideNavComponent = (0, react_2.forwardRef)(function SideNavComponent({ children, className, style, htmlAttributes, isExpanded = false, shouldExpandOnHover = true, pinButtonCallback, expandedWidth = '196px', }, ref) {
|
|
59
|
+
const [isHovered, setIsHovered] = (0, react_2.useState)(false);
|
|
60
|
+
const onMouseEnter = () => {
|
|
61
|
+
if (shouldExpandOnHover) {
|
|
62
|
+
setIsHovered(true);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const onMouseLeave = () => {
|
|
66
|
+
if (shouldExpandOnHover) {
|
|
67
|
+
setIsHovered(false);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const classes = (0, classnames_1.default)('ndl-side-nav ndl-side-nav-root', {
|
|
71
|
+
'ndl-side-nav-collapsed': !isExpanded && !shouldExpandOnHover,
|
|
72
|
+
'ndl-side-nav-expanded': isExpanded,
|
|
73
|
+
});
|
|
74
|
+
const innerClasses = (0, classnames_1.default)('ndl-side-nav-inner', className, {
|
|
75
|
+
'ndl-side-nav-hover': shouldExpandOnHover && isHovered && !isExpanded,
|
|
76
|
+
});
|
|
77
|
+
const customStyle = Object.assign(Object.assign({}, style), (Boolean(expandedWidth) && {
|
|
78
|
+
'--side-nav-width-expanded': typeof expandedWidth === 'string'
|
|
79
|
+
? expandedWidth
|
|
80
|
+
: `${expandedWidth}px`,
|
|
81
|
+
}));
|
|
82
|
+
return ((0, jsx_runtime_1.jsx)(SideNavContext.Provider, { value: {
|
|
83
|
+
isExpanded,
|
|
84
|
+
isHovered,
|
|
85
|
+
pinButtonCallback,
|
|
86
|
+
shouldExpandOnHover,
|
|
87
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { className: classes, style: customStyle, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: innerClasses }, htmlAttributes, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [(0, jsx_runtime_1.jsx)("nav", { className: "ndl-side-nav-nav", children: children }), shouldExpandOnHover && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-footer", children: (0, jsx_runtime_1.jsx)(PinButton, {}) }))] })) }) }));
|
|
88
|
+
});
|
|
89
|
+
const SideNavList = (0, react_2.forwardRef)(function SideNavList({ children, className, style }, ref) {
|
|
90
|
+
useSideNavContext();
|
|
91
|
+
const classes = (0, classnames_1.default)('ndl-side-nav-list', className);
|
|
92
|
+
return ((0, jsx_runtime_1.jsx)("ul", { className: classes, ref: ref, style: style, children: children }));
|
|
93
|
+
});
|
|
94
|
+
const NavItem = (0, react_2.forwardRef)(function NavItem(_a, ref) {
|
|
95
|
+
var { icon, label, rightElement, isSelected, className, style, htmlAttributes, as, badge } = _a, restProps = __rest(_a, ["icon", "label", "rightElement", "isSelected", "className", "style", "htmlAttributes", "as", "badge"]);
|
|
96
|
+
const { isExpanded, isHovered } = useSideNavContext();
|
|
97
|
+
const isInCategory = useSideNavCategoryContext();
|
|
98
|
+
const outerClasses = (0, classnames_1.default)('ndl-side-nav-item', className, {
|
|
99
|
+
'ndl-selected': isSelected === true,
|
|
100
|
+
});
|
|
101
|
+
const Component = as !== null && as !== void 0 ? as : 'button';
|
|
102
|
+
return ((0, jsx_runtime_1.jsx)("li", { className: outerClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-inner", children: [(0, jsx_runtime_1.jsx)(SelectedIndicator, {}), (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isExpanded === false &&
|
|
103
|
+
isHovered === false &&
|
|
104
|
+
!isInCategory &&
|
|
105
|
+
Boolean(label), wrap: (children) => ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { type: "simple", placement: "right", children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Trigger, { hasButtonWrapper: true, children: children }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Content, { children: label })] })), children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: "ndl-side-nav-item-button", style: style }, htmlAttributes, restProps, { onKeyDown: (e) => {
|
|
106
|
+
if (isInCategory && (e.key === 'Enter' || e.key === ' ')) {
|
|
107
|
+
e.stopPropagation();
|
|
108
|
+
}
|
|
109
|
+
}, children: [Boolean(icon) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-item-left-element", children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
|
|
110
|
+
var _a;
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)(IconIndicatorWrapper_1.IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
|
|
112
|
+
}, children: icon }) })), Boolean(label) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), (Boolean(rightElement) || Boolean(badge)) && ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-right-element", children: [rightElement, badge !== undefined && ((0, jsx_runtime_1.jsx)(ItemBadge, { type: badge.type, number: badge.number }))] }))] })) })] }) }));
|
|
113
|
+
});
|
|
114
|
+
/**
|
|
115
|
+
* SelectedIndicator
|
|
116
|
+
*/
|
|
117
|
+
const SelectedIndicator = () => {
|
|
118
|
+
return (0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-selected-indicator" });
|
|
119
|
+
};
|
|
120
|
+
const SideNavCategoryContext = (0, react_2.createContext)(false);
|
|
121
|
+
const useSideNavCategoryContext = () => {
|
|
122
|
+
return (0, react_2.useContext)(SideNavCategoryContext);
|
|
123
|
+
};
|
|
124
|
+
const CategoryItem = (0, react_2.forwardRef)(function CategoryItem({ children, icon, label, isSelected, className, style, htmlAttributes, badge, }, ref) {
|
|
125
|
+
const { isExpanded, isHovered } = useSideNavContext();
|
|
126
|
+
const outerClasses = (0, classnames_1.default)('ndl-side-nav-category-item', className, {
|
|
127
|
+
'ndl-selected': isSelected === true,
|
|
128
|
+
});
|
|
129
|
+
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
|
|
130
|
+
const anchorElement = (0, react_2.useRef)(null);
|
|
131
|
+
const mergedRef = (0, react_1.useMergeRefs)([ref, anchorElement]);
|
|
132
|
+
return ((0, jsx_runtime_1.jsx)(SideNavCategoryContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("li", { className: outerClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-inner", children: [(0, jsx_runtime_1.jsx)(SelectedIndicator, {}), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { isOpen: isOpen && children !== undefined && children !== null, onOpenChange: (open) => {
|
|
133
|
+
if (!open) {
|
|
134
|
+
setIsOpen(false);
|
|
135
|
+
}
|
|
136
|
+
}, placement: "top-end-top-start", offset: -7, shouldCaptureFocus: true, children: [(0, jsx_runtime_1.jsx)(popover_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: mergedRef, className: "ndl-side-nav-item-button", style: style }, htmlAttributes, { onMouseEnter: (e) => {
|
|
137
|
+
var _a;
|
|
138
|
+
setIsOpen(true);
|
|
139
|
+
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, e);
|
|
140
|
+
}, onMouseLeave: (e) => {
|
|
141
|
+
var _a;
|
|
142
|
+
setIsOpen(false);
|
|
143
|
+
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, e);
|
|
144
|
+
}, onKeyDown: (e) => {
|
|
145
|
+
var _a;
|
|
146
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
147
|
+
setIsOpen(!isOpen);
|
|
148
|
+
}
|
|
149
|
+
(_a = htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(htmlAttributes, e);
|
|
150
|
+
}, children: [Boolean(icon) && ((0, jsx_runtime_1.jsx)("div", { className: "ndl-side-nav-item-left-element", children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: Boolean(badge) && !isHovered && !isExpanded, wrap: (children) => {
|
|
151
|
+
var _a;
|
|
152
|
+
return ((0, jsx_runtime_1.jsx)(IconIndicatorWrapper_1.IconIndicatorWrapper, { type: (_a = badge === null || badge === void 0 ? void 0 : badge.type) !== null && _a !== void 0 ? _a : 'info', children: children }));
|
|
153
|
+
}, children: icon }) })), Boolean(label) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", as: "div", className: "ndl-side-nav-item-label", children: label })), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-side-nav-item-right-element", children: [badge && ((0, jsx_runtime_1.jsx)(ItemBadge, { type: badge.type, number: badge.number })), (0, jsx_runtime_1.jsx)(icons_1.ChevronRightIconOutline, { className: "n-size-4 n-text-palette-neutral-icon" })] })] })) }), (0, jsx_runtime_1.jsx)(popover_1.Popover.Content, { as: "nav", className: "ndl-side-nav ndl-side-nav-popover", htmlAttributes: {
|
|
154
|
+
onMouseEnter: () => {
|
|
155
|
+
setIsOpen(true);
|
|
156
|
+
},
|
|
157
|
+
onMouseLeave: () => {
|
|
158
|
+
setIsOpen(false);
|
|
159
|
+
},
|
|
160
|
+
}, children: (0, jsx_runtime_1.jsx)("ul", { className: "ndl-side-nav-popover-list", children: children }) })] })] }) }) }));
|
|
161
|
+
});
|
|
162
|
+
const CategoryHeader = ({ children, className }) => {
|
|
163
|
+
const { isExpanded, isHovered } = useSideNavContext();
|
|
164
|
+
const classes = (0, classnames_1.default)('ndl-side-nav-category-header', className, {
|
|
165
|
+
'ndl-side-nav-category-header-expanded': isExpanded || isHovered,
|
|
166
|
+
});
|
|
167
|
+
return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "h6", as: "li", className: classes, children: isExpanded || isHovered ? children : (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }));
|
|
168
|
+
};
|
|
169
|
+
/**
|
|
170
|
+
* SideNavDivider
|
|
171
|
+
*/
|
|
172
|
+
const SideNavDivider = () => {
|
|
173
|
+
return (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: "horizontal", className: "ndl-side-nav-divider" });
|
|
174
|
+
};
|
|
175
|
+
const ItemBadge = ({ number, type }) => {
|
|
176
|
+
useSideNavContext();
|
|
177
|
+
const badgeClasses = (0, classnames_1.default)('ndl-side-nav-item-badge', {
|
|
178
|
+
'ndl-danger': type === 'danger',
|
|
179
|
+
'ndl-info': type === 'info',
|
|
180
|
+
'ndl-warning': type === 'warning',
|
|
181
|
+
});
|
|
182
|
+
return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "span", className: badgeClasses, variant: "subheading-small", htmlAttributes: {
|
|
183
|
+
'aria-label': `${number} notifications of type ${type}`,
|
|
184
|
+
}, children: number }));
|
|
185
|
+
};
|
|
186
|
+
/**
|
|
187
|
+
* PinButton
|
|
188
|
+
*/
|
|
189
|
+
const PinButton = () => {
|
|
190
|
+
const { isExpanded, shouldExpandOnHover, pinButtonCallback } = useSideNavContext();
|
|
191
|
+
const classes = (0, classnames_1.default)('ndl-side-nav-pin-button');
|
|
192
|
+
if (!shouldExpandOnHover) {
|
|
193
|
+
return null;
|
|
194
|
+
}
|
|
195
|
+
return ((0, jsx_runtime_1.jsx)(button_1.IconButton, { onClick: pinButtonCallback, className: classes, ariaLabel: "Pin side navigation", size: "medium", isClean: true, isActive: isExpanded, children: (0, jsx_runtime_1.jsx)(icons_1.PinIcon, {}) }));
|
|
196
|
+
};
|
|
197
|
+
const SideNavigation = Object.assign(SideNavComponent, {
|
|
198
|
+
CategoryHeader,
|
|
199
|
+
CategoryItem,
|
|
200
|
+
Divider: SideNavDivider,
|
|
201
|
+
ItemBadge,
|
|
202
|
+
List: SideNavList,
|
|
203
|
+
NavItem,
|
|
204
|
+
});
|
|
205
|
+
exports.SideNavigation = SideNavigation;
|
|
206
|
+
//# sourceMappingURL=SideNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SideNavigation.js","sourceRoot":"","sources":["../../../../src/next/side-navigation/SideNavigation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,8CAAkD;AAClD,4DAAoC;AAEpC,iCAAgF;AAEhF,6EAG4C;AAO5C,yCAA0C;AAC1C,6DAAyD;AACzD,2CAAwC;AACxC,uCAA+D;AAC/D,2CAAwC;AACxC,2CAAwC;AACxC,iDAA8C;AAS9C,MAAM,cAAc,GAAG,IAAA,qBAAa,EAA4B,IAAI,CAAC,CAAC;AAEtE,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8EAA8E,CAC/E,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAgBF,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,SAAS,gBAAgB,CAC3D,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,mBAAmB,GAAG,IAAI,EAC1B,iBAAiB,EACjB,aAAa,GAAG,OAAO,GACV,EACf,GAAuC;IAEvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,mBAAmB,EAAE,CAAC;YACxB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,mBAAmB,EAAE,CAAC;YACxB,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,gCAAgC,EAAE;QAC3D,wBAAwB,EAAE,CAAC,UAAU,IAAI,CAAC,mBAAmB;QAC7D,uBAAuB,EAAE,UAAU;KACpC,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,EAAE;QAC/D,oBAAoB,EAAE,mBAAmB,IAAI,SAAS,IAAI,CAAC,UAAU;KACtE,CAAC,CAAC;IAEH,MAAM,WAAW,mCACZ,KAAK,GACL,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI;QAC5B,2BAA2B,EACzB,OAAO,aAAa,KAAK,QAAQ;YAC/B,CAAC,CAAC,aAAa;YACf,CAAC,CAAC,GAAG,aAAa,IAAI;KAC3B,CAAC,CACH,CAAC;IAEF,OAAO,CACL,uBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;YACL,UAAU;YACV,SAAS;YACT,iBAAiB;YACjB,mBAAmB;SACpB,YAED,gCAAK,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,YACzC,+CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,IACnB,cAAc,IAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,aAE1B,gCAAK,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAO,EACjD,mBAAmB,IAAI,CACtB,gCAAK,SAAS,EAAC,qBAAqB,YAClC,uBAAC,SAAS,KAAG,GACT,CACP,KACG,GACF,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC,CAAC;AAWH,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAC,SAAS,WAAW,CACjD,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAoB,EAChD,GAAyC;IAEzC,iBAAiB,EAAE,CAAC;IAEpB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,+BAAI,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,YAC3C,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AA6BH,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,SAAS,OAAO,CAGzC,EAW8C,EAC9C,GAAsB;QAZtB,EACE,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,EAAE,EACF,KAAK,OAEuC,EADzC,SAAS,cAVd,sGAWC,CADa;IAId,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACtD,MAAM,YAAY,GAAG,yBAAyB,EAAE,CAAC;IAEjD,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,EAAE;QAC9D,cAAc,EAAE,UAAU,KAAK,IAAI;KACpC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAsB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,QAAQ,CAAC;IAEpD,OAAO,CACL,+BAAI,SAAS,EAAE,YAAY,YACzB,iCAAK,SAAS,EAAC,yBAAyB,aACtC,uBAAC,iBAAiB,KAAG,EACrB,uBAAC,kCAAe,IACd,UAAU,EACR,UAAU,KAAK,KAAK;wBACpB,SAAS,KAAK,KAAK;wBACnB,CAAC,YAAY;wBACb,OAAO,CAAC,KAAK,CAAC,EAEhB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAClB,wBAAC,iBAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,aACtC,uBAAC,iBAAO,CAAC,OAAO,IAAC,gBAAgB,EAAE,IAAI,YACpC,QAAQ,GACO,EAClB,uBAAC,iBAAO,CAAC,OAAO,cAAE,KAAK,GAAmB,IAClC,CACX,YAED,wBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,KAAK,IACR,cAAc,EACd,SAAS,IACb,SAAS,EAAE,CAAC,CAAyC,EAAE,EAAE;4BACvD,IAAI,YAAY,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;gCACzD,CAAC,CAAC,eAAe,EAAE,CAAC;4BACtB,CAAC;wBACH,CAAC,aAEA,OAAO,CAAC,IAAI,CAAC,IAAI,CAChB,gCAAK,SAAS,EAAC,gCAAgC,YAC7C,uBAAC,kCAAe,IACd,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE;;wCAAC,OAAA,CAClB,uBAAC,2CAAoB,IAAC,IAAI,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,MAAM,YAC9C,QAAQ,GACY,CACxB,CAAA;qCAAA,YAEA,IAAI,GACW,GACd,CACP,EACA,OAAO,CAAC,KAAK,CAAC,IAAI,CACjB,uBAAC,uBAAU,IACT,OAAO,EAAC,aAAa,EACrB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,yBAAyB,YAElC,KAAK,GACK,CACd,EACA,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CAC5C,iCAAK,SAAS,EAAC,iCAAiC,aAC7C,YAAY,EACZ,KAAK,KAAK,SAAS,IAAI,CACtB,uBAAC,SAAS,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CACtD,IACG,CACP,KACS,GACI,IACd,GACH,CACN,CAAC;AACJ,CAAC,CAAiE,CAAC;AAEnE;;GAEG;AACH,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,OAAO,gCAAK,SAAS,EAAC,iCAAiC,GAAG,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,IAAA,qBAAa,EAAU,KAAK,CAAC,CAAC;AAE7D,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,OAAO,IAAA,kBAAU,EAAC,sBAAsB,CAAC,CAAC;AAC5C,CAAC,CAAC;AAYF,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,SAAS,YAAY,CACnD,EACE,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,SAAS,EACT,KAAK,EACL,cAAc,EACd,KAAK,GACa,EACpB,GAA0C;IAE1C,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEtD,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,4BAA4B,EAAE,SAAS,EAAE;QACvE,cAAc,EAAE,UAAU,KAAK,IAAI;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;IAErD,OAAO,CACL,uBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAC1C,+BAAI,SAAS,EAAE,YAAY,YACzB,iCAAK,SAAS,EAAC,yBAAyB,aACtC,uBAAC,iBAAiB,KAAG,EACrB,wBAAC,iBAAO,IACN,MAAM,EAAE,MAAM,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,EAC7D,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;4BACrB,IAAI,CAAC,IAAI,EAAE,CAAC;gCACV,SAAS,CAAC,KAAK,CAAC,CAAC;4BACnB,CAAC;wBACH,CAAC,EACD,SAAS,EAAC,mBAAmB,EAC7B,MAAM,EAAE,CAAC,CAAC,EACV,kBAAkB,EAAE,IAAI,aAExB,uBAAC,iBAAO,CAAC,OAAO,IAAC,gBAAgB,EAAE,IAAI,YACrC,kDACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,KAAK,IACR,cAAc,IAClB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;;wCAClB,SAAS,CAAC,IAAI,CAAC,CAAC;wCAChB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,+DAAG,CAAC,CAAC,CAAC;oCACpC,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;;wCAClB,SAAS,CAAC,KAAK,CAAC,CAAC;wCACjB,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,+DAAG,CAAC,CAAC,CAAC;oCACpC,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;;wCACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;4CACvC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;wCACrB,CAAC;wCACD,MAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,SAAS,+DAAG,CAAC,CAAC,CAAC;oCACjC,CAAC,aAEA,OAAO,CAAC,IAAI,CAAC,IAAI,CAChB,gCAAK,SAAS,EAAC,gCAAgC,YAC7C,uBAAC,kCAAe,IACd,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE;;oDAAC,OAAA,CAClB,uBAAC,2CAAoB,IAAC,IAAI,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,MAAM,YAC9C,QAAQ,GACY,CACxB,CAAA;iDAAA,YAEA,IAAI,GACW,GACd,CACP,EACA,OAAO,CAAC,KAAK,CAAC,IAAI,CACjB,uBAAC,uBAAU,IACT,OAAO,EAAC,aAAa,EACrB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,yBAAyB,YAElC,KAAK,GACK,CACd,EACD,iCAAK,SAAS,EAAC,iCAAiC,aAC7C,KAAK,IAAI,CACR,uBAAC,SAAS,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CACtD,EACD,uBAAC,+BAAuB,IAAC,SAAS,EAAC,sCAAsC,GAAG,IACxE,KACC,GACO,EAClB,uBAAC,iBAAO,CAAC,OAAO,IACd,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,mCAAmC,EAC7C,cAAc,EAAE;oCACd,YAAY,EAAE,GAAG,EAAE;wCACjB,SAAS,CAAC,IAAI,CAAC,CAAC;oCAClB,CAAC;oCACD,YAAY,EAAE,GAAG,EAAE;wCACjB,SAAS,CAAC,KAAK,CAAC,CAAC;oCACnB,CAAC;iCACF,YAED,+BAAI,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAM,GACzC,IACV,IACN,GACH,GAC2B,CACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAUH,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,8BAA8B,EAAE,SAAS,EAAE;QACpE,uCAAuC,EAAE,UAAU,IAAI,SAAS;KACjE,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,uBAAU,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,OAAO,YAChD,UAAU,IAAI,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAC,iBAAO,KAAG,GACtC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,OAAO,uBAAC,iBAAO,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAC,sBAAsB,GAAG,CAAC;AAC/E,CAAC,CAAC;AAUF,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAkB,EAAE,EAAE;IACrD,iBAAiB,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,yBAAyB,EAAE;QACzD,YAAY,EAAE,IAAI,KAAK,QAAQ;QAC/B,UAAU,EAAE,IAAI,KAAK,MAAM;QAC3B,aAAa,EAAE,IAAI,KAAK,SAAS;KAClC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,uBAAU,IACT,EAAE,EAAC,MAAM,EACT,SAAS,EAAE,YAAY,EACvB,OAAO,EAAC,kBAAkB,EAC1B,cAAc,EAAE;YACd,YAAY,EAAE,GAAG,MAAM,0BAA0B,IAAI,EAAE;SACxD,YAEA,MAAM,GACI,CACd,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,GAC1D,iBAAiB,EAAE,CAAC;IAEtB,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,yBAAyB,CAAC,CAAC;IAEtD,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,mBAAU,IACT,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,OAAO,EAClB,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,QAAQ,EACb,OAAO,QACP,QAAQ,EAAE,UAAU,YAEpB,uBAAC,eAAO,KAAG,GACA,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;IACrD,cAAc;IACd,YAAY;IACZ,OAAO,EAAE,cAAc;IACvB,SAAS;IACT,IAAI,EAAE,WAAW;IACjB,OAAO;CACR,CAAC,CAAC;AAEM,wCAAc"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) "Neo4j"
|
|
5
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
6
|
+
*
|
|
7
|
+
* This file is part of Neo4j.
|
|
8
|
+
*
|
|
9
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
10
|
+
* it under the terms of the GNU General Public License as published by
|
|
11
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
12
|
+
* (at your option) any later version.
|
|
13
|
+
*
|
|
14
|
+
* This program is distributed in the hope that it will be useful,
|
|
15
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
16
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
17
|
+
* GNU General Public License for more details.
|
|
18
|
+
*
|
|
19
|
+
* You should have received a copy of the GNU General Public License
|
|
20
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
|
+
*/
|
|
22
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
23
|
+
if (k2 === undefined) k2 = k;
|
|
24
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
25
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
26
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
27
|
+
}
|
|
28
|
+
Object.defineProperty(o, k2, desc);
|
|
29
|
+
}) : (function(o, m, k, k2) {
|
|
30
|
+
if (k2 === undefined) k2 = k;
|
|
31
|
+
o[k2] = m[k];
|
|
32
|
+
}));
|
|
33
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
34
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
__exportStar(require("./SideNavigation"), exports);
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/next/side-navigation/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,mDAAiC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) "Neo4j"
|
|
5
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
6
|
+
*
|
|
7
|
+
* This file is part of Neo4j.
|
|
8
|
+
*
|
|
9
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
10
|
+
* it under the terms of the GNU General Public License as published by
|
|
11
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
12
|
+
* (at your option) any later version.
|
|
13
|
+
*
|
|
14
|
+
* This program is distributed in the hope that it will be useful,
|
|
15
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
16
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
17
|
+
* GNU General Public License for more details.
|
|
18
|
+
*
|
|
19
|
+
* You should have received a copy of the GNU General Public License
|
|
20
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
|
+
*/
|
|
22
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
23
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.SideNavBadgesSrc = exports.SideNavSecondarySrc = exports.SideNavCompactSrc = exports.SideNavDefaultSrc = exports.SideNavBadges = exports.SideNavSecondary = exports.SideNavCompact = exports.SideNavDefault = void 0;
|
|
27
|
+
var side_nav_default_story_1 = require("./side-nav-default.story");
|
|
28
|
+
Object.defineProperty(exports, "SideNavDefault", { enumerable: true, get: function () { return __importDefault(side_nav_default_story_1).default; } });
|
|
29
|
+
var side_nav_compact_story_1 = require("./side-nav-compact.story");
|
|
30
|
+
Object.defineProperty(exports, "SideNavCompact", { enumerable: true, get: function () { return __importDefault(side_nav_compact_story_1).default; } });
|
|
31
|
+
var side_nav_secondary_story_1 = require("./side-nav-secondary.story");
|
|
32
|
+
Object.defineProperty(exports, "SideNavSecondary", { enumerable: true, get: function () { return __importDefault(side_nav_secondary_story_1).default; } });
|
|
33
|
+
var side_nav_badges_story_1 = require("./side-nav-badges.story");
|
|
34
|
+
Object.defineProperty(exports, "SideNavBadges", { enumerable: true, get: function () { return __importDefault(side_nav_badges_story_1).default; } });
|
|
35
|
+
const side_nav_badges_story_raw_1 = __importDefault(require("./side-nav-badges.story?raw"));
|
|
36
|
+
const side_nav_compact_story_raw_1 = __importDefault(require("./side-nav-compact.story?raw"));
|
|
37
|
+
const side_nav_default_story_raw_1 = __importDefault(require("./side-nav-default.story?raw"));
|
|
38
|
+
const side_nav_secondary_story_raw_1 = __importDefault(require("./side-nav-secondary.story?raw"));
|
|
39
|
+
exports.SideNavDefaultSrc = side_nav_default_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
|
|
40
|
+
exports.SideNavCompactSrc = side_nav_compact_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
|
|
41
|
+
exports.SideNavSecondarySrc = side_nav_secondary_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
|
|
42
|
+
exports.SideNavBadgesSrc = side_nav_badges_story_raw_1.default.replace(/^\/\*[\s\S]*?\*\/\s*/, '');
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/next/side-navigation/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,mEAAqE;AAA5D,yIAAA,OAAO,OAAkB;AAClC,mEAAqE;AAA5D,yIAAA,OAAO,OAAkB;AAClC,uEAAyE;AAAhE,6IAAA,OAAO,OAAoB;AACpC,iEAAmE;AAA1D,uIAAA,OAAO,OAAiB;AAEjC,4FAA8D;AAC9D,8FAAgE;AAChE,8FAAgE;AAChE,kGAAoE;AAEvD,QAAA,iBAAiB,GAAG,oCAAoB,CAAC,OAAO,CAC3D,sBAAsB,EACtB,EAAE,CACH,CAAC;AAEW,QAAA,iBAAiB,GAAG,oCAAoB,CAAC,OAAO,CAC3D,sBAAsB,EACtB,EAAE,CACH,CAAC;AAEW,QAAA,mBAAmB,GAAG,sCAAsB,CAAC,OAAO,CAC/D,sBAAsB,EACtB,EAAE,CACH,CAAC;AAEW,QAAA,gBAAgB,GAAG,mCAAmB,CAAC,OAAO,CACzD,sBAAsB,EACtB,EAAE,CACH,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) "Neo4j"
|
|
7
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
8
|
+
*
|
|
9
|
+
* This file is part of Neo4j.
|
|
10
|
+
*
|
|
11
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
12
|
+
* it under the terms of the GNU General Public License as published by
|
|
13
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
14
|
+
* (at your option) any later version.
|
|
15
|
+
*
|
|
16
|
+
* This program is distributed in the hope that it will be useful,
|
|
17
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
18
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
19
|
+
* GNU General Public License for more details.
|
|
20
|
+
*
|
|
21
|
+
* You should have received a copy of the GNU General Public License
|
|
22
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
23
|
+
*/
|
|
24
|
+
require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
25
|
+
const react_1 = require("@neo4j-ndl/react");
|
|
26
|
+
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
27
|
+
const next_1 = require("@neo4j-ndl/react/next");
|
|
28
|
+
const react_2 = require("react");
|
|
29
|
+
const Component = () => {
|
|
30
|
+
const [selected, setSelected] = (0, react_2.useState)(null);
|
|
31
|
+
const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-palette-neutral-bg-default", children: [(0, jsx_runtime_1.jsxs)(next_1.SideNavigation, { isExpanded: isExpanded, shouldExpandOnHover: true, pinButtonCallback: () => setIsExpanded(!isExpanded), children: [(0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.HomeIconOutline, {}), label: "Info Badge", isSelected: selected === 'nav-item-1', htmlAttributes: {
|
|
33
|
+
onClick: () => {
|
|
34
|
+
setSelected('nav-item-1');
|
|
35
|
+
},
|
|
36
|
+
}, badge: {
|
|
37
|
+
number: 1,
|
|
38
|
+
type: 'info',
|
|
39
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.CodeBracketIconOutline, {}), label: "Warning Badge", isSelected: selected === 'nav-item-2', htmlAttributes: {
|
|
40
|
+
onClick: () => setSelected('nav-item-2'),
|
|
41
|
+
}, badge: {
|
|
42
|
+
number: 1,
|
|
43
|
+
type: 'warning',
|
|
44
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ServerIconOutline, {}), label: "Critical Badge", isSelected: selected === 'nav-item-3', htmlAttributes: {
|
|
45
|
+
onClick: () => {
|
|
46
|
+
setSelected('nav-item-3');
|
|
47
|
+
},
|
|
48
|
+
}, badge: {
|
|
49
|
+
number: 1,
|
|
50
|
+
type: 'danger',
|
|
51
|
+
} })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.List, { children: (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.CategoryItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.WrenchScrewdriverIconOutline, {}), label: "Category Item", isSelected: ['nav-item-4', 'nav-item-5', 'nav-item-6'].includes(selected !== null && selected !== void 0 ? selected : ''), badge: {
|
|
52
|
+
number: 3,
|
|
53
|
+
type: 'danger',
|
|
54
|
+
}, children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Info Badge", isSelected: selected === 'nav-item-4', htmlAttributes: {
|
|
55
|
+
onClick: () => {
|
|
56
|
+
setSelected('nav-item-4');
|
|
57
|
+
},
|
|
58
|
+
}, badge: {
|
|
59
|
+
number: 1,
|
|
60
|
+
type: 'info',
|
|
61
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Warning Badge", isSelected: selected === 'nav-item-5', htmlAttributes: {
|
|
62
|
+
onClick: () => setSelected('nav-item-5'),
|
|
63
|
+
}, badge: {
|
|
64
|
+
number: 1,
|
|
65
|
+
type: 'warning',
|
|
66
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Critical Badge", isSelected: selected === 'nav-item-6', htmlAttributes: {
|
|
67
|
+
onClick: () => setSelected('nav-item-6'),
|
|
68
|
+
}, badge: {
|
|
69
|
+
number: 1,
|
|
70
|
+
type: 'danger',
|
|
71
|
+
} })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-full n-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4 n-bg-palette-neutral-bg-weak n-p-token-8 n-rounded-lg n-items-center n-justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "h6", children: "Side Nav with Badges" }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["Badges can be used to indicate that there are actions that need attention from the user on the specific page. The badge can have three different types of severity:", (0, jsx_runtime_1.jsx)("b", { className: "n-text-palette-primary-text", children: " info" }), ",", (0, jsx_runtime_1.jsx)("b", { className: "n-text-palette-warning-text", children: " warning" }), " and", (0, jsx_runtime_1.jsx)("b", { className: "n-text-palette-danger-text", children: " danger" }), ".", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), "The badge on a ", (0, jsx_runtime_1.jsx)("b", { children: "CategoryItem" }), " should be the type of the highest priority badge of the items in the category. The number should be the total number of badges in the category."] })] }) }) })] }));
|
|
72
|
+
};
|
|
73
|
+
exports.default = Component;
|
|
74
|
+
//# sourceMappingURL=side-nav-badges.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-nav-badges.story.js","sourceRoot":"","sources":["../../../../../src/next/side-navigation/stories/side-nav-badges.story.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
/**
|
|
5
|
+
*
|
|
6
|
+
* Copyright (c) "Neo4j"
|
|
7
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
8
|
+
*
|
|
9
|
+
* This file is part of Neo4j.
|
|
10
|
+
*
|
|
11
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
12
|
+
* it under the terms of the GNU General Public License as published by
|
|
13
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
14
|
+
* (at your option) any later version.
|
|
15
|
+
*
|
|
16
|
+
* This program is distributed in the hope that it will be useful,
|
|
17
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
18
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
19
|
+
* GNU General Public License for more details.
|
|
20
|
+
*
|
|
21
|
+
* You should have received a copy of the GNU General Public License
|
|
22
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
23
|
+
*/
|
|
24
|
+
require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
25
|
+
const react_1 = require("@neo4j-ndl/react");
|
|
26
|
+
const icons_1 = require("@neo4j-ndl/react/icons");
|
|
27
|
+
const next_1 = require("@neo4j-ndl/react/next");
|
|
28
|
+
const react_2 = require("react");
|
|
29
|
+
const Component = () => {
|
|
30
|
+
const [selected, setSelected] = (0, react_2.useState)(null);
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-palette-neutral-bg-default", children: [(0, jsx_runtime_1.jsxs)(next_1.SideNavigation, { isExpanded: false, shouldExpandOnHover: false, children: [(0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.HomeIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-1', htmlAttributes: {
|
|
32
|
+
onClick: () => {
|
|
33
|
+
setSelected('nav-item-1');
|
|
34
|
+
},
|
|
35
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.CodeBracketIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-2', htmlAttributes: {
|
|
36
|
+
onClick: () => setSelected('nav-item-2'),
|
|
37
|
+
} })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.List, { children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ServerIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-3', htmlAttributes: {
|
|
38
|
+
onClick: () => {
|
|
39
|
+
setSelected('nav-item-3');
|
|
40
|
+
},
|
|
41
|
+
} }), (0, jsx_runtime_1.jsxs)(next_1.SideNavigation.CategoryItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.WrenchScrewdriverIconOutline, {}), label: "Category Item", isSelected: ['nav-item-4', 'nav-item-5'].includes(selected !== null && selected !== void 0 ? selected : ''), children: [(0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isSelected: selected === 'nav-item-4', htmlAttributes: {
|
|
42
|
+
onClick: () => {
|
|
43
|
+
setSelected('nav-item-4');
|
|
44
|
+
},
|
|
45
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isSelected: selected === 'nav-item-5', htmlAttributes: {
|
|
46
|
+
onClick: () => setSelected('nav-item-5'),
|
|
47
|
+
} })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ChartBarIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-6', htmlAttributes: {
|
|
48
|
+
onClick: () => setSelected('nav-item-6'),
|
|
49
|
+
} }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Cog6ToothIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-7', htmlAttributes: {
|
|
50
|
+
onClick: () => setSelected('nav-item-7'),
|
|
51
|
+
} })] }), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(next_1.SideNavigation.List, { children: (0, jsx_runtime_1.jsx)(next_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.AcademicCapIconOutline, {}), label: "Nav Item", isSelected: selected === 'nav-item-8', htmlAttributes: {
|
|
52
|
+
onClick: () => setSelected('nav-item-8'),
|
|
53
|
+
} }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-full n-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4 n-bg-palette-neutral-bg-weak n-p-token-8 n-rounded-lg n-items-center n-justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "h6", children: "Compact Side Nav" }), (0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", children: ["When using a compact side nav you must make sure to set a", (0, jsx_runtime_1.jsx)("b", { children: " label" }), " on the NavItems, as the label will be used for the built in tooltip. It is also needed for screen readers to behave as correctly."] })] }) }) })] }));
|
|
54
|
+
};
|
|
55
|
+
exports.default = Component;
|
|
56
|
+
//# sourceMappingURL=side-nav-compact.story.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-nav-compact.story.js","sourceRoot":"","sources":["../../../../../src/next/side-navigation/stories/side-nav-compact.story.tsx"],"names":[],"mappings":"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"}
|