@navikt/ds-react 0.14.14 → 0.15.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/cjs/accordion/AccordionHeader.js +3 -3
- package/cjs/index.js +1 -1
- package/cjs/{accordion-menu/AccordionMenu.js → menu/Menu.js} +7 -7
- package/cjs/{accordion-menu/AccordionMenuCollapsable.js → menu/MenuCollapse.js} +18 -8
- package/cjs/{accordion-menu/AccordionMenuItem.js → menu/MenuItem.js} +2 -2
- package/cjs/menu/MenuItems.js +23 -0
- package/cjs/menu/index.js +8 -0
- package/cjs/menu/package.json +6 -0
- package/esm/accordion/AccordionHeader.js +3 -3
- package/esm/accordion/AccordionHeader.js.map +1 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/index.js.map +1 -1
- package/esm/menu/Menu.d.ts +12 -0
- package/esm/{accordion-menu/AccordionMenu.js → menu/Menu.js} +8 -8
- package/esm/menu/Menu.js.map +1 -0
- package/esm/menu/MenuCollapse.d.ts +12 -0
- package/esm/menu/MenuCollapse.js +37 -0
- package/esm/menu/MenuCollapse.js.map +1 -0
- package/esm/menu/MenuItem.d.ts +13 -0
- package/esm/{accordion-menu/AccordionMenuItem.js → menu/MenuItem.js} +3 -3
- package/esm/menu/MenuItem.js.map +1 -0
- package/esm/{accordion-menu → menu}/MenuItems.d.ts +2 -1
- package/esm/menu/MenuItems.js +19 -0
- package/esm/menu/MenuItems.js.map +1 -0
- package/esm/menu/index.d.ts +3 -0
- package/esm/menu/index.js +2 -0
- package/esm/menu/index.js.map +1 -0
- package/package.json +3 -3
- package/src/accordion/AccordionHeader.tsx +4 -3
- package/src/accordion/accordion.stories.tsx +90 -0
- package/src/alert/{stories/alert.stories.tsx → alert.stories.tsx} +2 -2
- package/src/button/{stories/button.stories.tsx → button.stories.tsx} +1 -1
- package/src/index.ts +1 -1
- package/src/menu/Menu.tsx +36 -0
- package/src/menu/MenuCollapse.tsx +80 -0
- package/src/{accordion-menu/AccordionMenuItem.tsx → menu/MenuItem.tsx} +6 -6
- package/src/menu/MenuItems.tsx +21 -0
- package/src/menu/index.ts +3 -0
- package/src/menu/stories/menu.stories.mdx +93 -0
- package/src/menu/stories/menu.stories.tsx +139 -0
- package/cjs/accordion-menu/MenuItems.js +0 -8
- package/cjs/accordion-menu/index.js +0 -8
- package/cjs/accordion-menu/package.json +0 -6
- package/esm/accordion-menu/AccordionMenu.d.ts +0 -12
- package/esm/accordion-menu/AccordionMenu.js.map +0 -1
- package/esm/accordion-menu/AccordionMenuCollapsable.d.ts +0 -9
- package/esm/accordion-menu/AccordionMenuCollapsable.js +0 -28
- package/esm/accordion-menu/AccordionMenuCollapsable.js.map +0 -1
- package/esm/accordion-menu/AccordionMenuItem.d.ts +0 -13
- package/esm/accordion-menu/AccordionMenuItem.js.map +0 -1
- package/esm/accordion-menu/MenuItems.js +0 -4
- package/esm/accordion-menu/MenuItems.js.map +0 -1
- package/esm/accordion-menu/index.d.ts +0 -3
- package/esm/accordion-menu/index.js +0 -2
- package/esm/accordion-menu/index.js.map +0 -1
- package/src/accordion/stories/accordion.stories.mdx +0 -72
- package/src/accordion/stories/accordion.stories.tsx +0 -92
- package/src/accordion-menu/AccordionMenu.tsx +0 -39
- package/src/accordion-menu/AccordionMenuCollapsable.tsx +0 -45
- package/src/accordion-menu/MenuItems.tsx +0 -13
- package/src/accordion-menu/index.ts +0 -3
- package/src/accordion-menu/stories/accordion-menu.stories.mdx +0 -66
- package/src/accordion-menu/stories/accordion-menu.stories.tsx +0 -141
- package/src/alert/stories/alert.stories.mdx +0 -96
- package/src/button/stories/button.stories.mdx +0 -76
|
@@ -54,12 +54,12 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
54
54
|
context.toggleOpen();
|
|
55
55
|
onClick && onClick(e);
|
|
56
56
|
};
|
|
57
|
-
return (react_1.default.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick }
|
|
57
|
+
return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
|
|
58
58
|
children,
|
|
59
|
-
react_1.default.createElement(ds_icons_1.Expand, {
|
|
59
|
+
react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", {
|
|
60
60
|
"navds-accordion__expand-icon--flip": context.open,
|
|
61
61
|
}) }),
|
|
62
|
-
react_1.default.createElement(ds_icons_1.ExpandFilled, {
|
|
62
|
+
react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
|
|
63
63
|
"navds-accordion__expand-icon--flip": context.open,
|
|
64
64
|
}) })));
|
|
65
65
|
});
|
package/cjs/index.js
CHANGED
|
@@ -11,7 +11,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
11
11
|
};
|
|
12
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
13
|
__exportStar(require("./accordion"), exports);
|
|
14
|
-
__exportStar(require("./accordion-menu"), exports);
|
|
15
14
|
__exportStar(require("./alert"), exports);
|
|
16
15
|
__exportStar(require("./button"), exports);
|
|
17
16
|
__exportStar(require("./form"), exports);
|
|
@@ -21,6 +20,7 @@ __exportStar(require("./guide-panel"), exports);
|
|
|
21
20
|
__exportStar(require("./link"), exports);
|
|
22
21
|
__exportStar(require("./link-panel"), exports);
|
|
23
22
|
__exportStar(require("./loader"), exports);
|
|
23
|
+
__exportStar(require("./menu"), exports);
|
|
24
24
|
__exportStar(require("./modal"), exports);
|
|
25
25
|
__exportStar(require("./panel"), exports);
|
|
26
26
|
__exportStar(require("./popover"), exports);
|
|
@@ -36,13 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const MenuItems_1 = __importDefault(require("./MenuItems"));
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
39
|
+
const MenuItem_1 = __importDefault(require("./MenuItem"));
|
|
40
|
+
const MenuCollapse_1 = __importDefault(require("./MenuCollapse"));
|
|
41
|
+
const Menu = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
43
|
-
return (react_1.default.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: (0, classnames_1.default)("navds-
|
|
43
|
+
return (react_1.default.createElement("nav", Object.assign({}, rest, { role: "navigation", ref: ref, className: (0, classnames_1.default)("navds-menu", className) }),
|
|
44
44
|
react_1.default.createElement(MenuItems_1.default, null, children)));
|
|
45
45
|
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
exports.default =
|
|
46
|
+
Menu.Collapse = MenuCollapse_1.default;
|
|
47
|
+
Menu.Item = MenuItem_1.default;
|
|
48
|
+
exports.default = Menu;
|
|
@@ -33,19 +33,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
33
33
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
34
|
};
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.NestingContext = void 0;
|
|
36
37
|
const react_1 = __importStar(require("react"));
|
|
37
38
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
39
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
39
40
|
const MenuItems_1 = __importDefault(require("./MenuItems"));
|
|
40
|
-
|
|
41
|
+
exports.NestingContext = (0, react_1.createContext)({ depth: 1 });
|
|
42
|
+
const NestingProvider = ({ children }) => {
|
|
43
|
+
const context = (0, react_1.useContext)(exports.NestingContext);
|
|
44
|
+
return (react_1.default.createElement(exports.NestingContext.Provider, { value: {
|
|
45
|
+
depth: context.depth + 1,
|
|
46
|
+
} }, children));
|
|
47
|
+
};
|
|
48
|
+
const Collapse = (0, react_1.forwardRef)((_a, ref) => {
|
|
41
49
|
var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
|
|
42
50
|
const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
51
|
+
const context = (0, react_1.useContext)(exports.NestingContext);
|
|
52
|
+
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-menu-collapse", className, {
|
|
53
|
+
"navds-menu-collapse--open": isOpen,
|
|
54
|
+
}) }),
|
|
55
|
+
react_1.default.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-menu-collapse__button" },
|
|
47
56
|
title,
|
|
48
|
-
react_1.default.createElement(ds_icons_1.Expand, { title: isOpen ? "
|
|
49
|
-
|
|
57
|
+
react_1.default.createElement(ds_icons_1.Expand, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon" }),
|
|
58
|
+
react_1.default.createElement(ds_icons_1.ExpandFilled, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled" })),
|
|
59
|
+
react_1.default.createElement(NestingProvider, null, isOpen && (react_1.default.createElement(MenuItems_1.default, { "data-depth": context.depth, className: "navds-menu__list--inner" }, children)))));
|
|
50
60
|
});
|
|
51
|
-
exports.default =
|
|
61
|
+
exports.default = Collapse;
|
|
@@ -37,8 +37,8 @@ const react_1 = __importStar(require("react"));
|
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const Item = (0, react_1.forwardRef)((_a, ref) => {
|
|
39
39
|
var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
|
|
40
|
-
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-
|
|
41
|
-
"navds-
|
|
40
|
+
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-menu-item", className, {
|
|
41
|
+
"navds-menu-item--active": active,
|
|
42
42
|
}) }, rest), children));
|
|
43
43
|
});
|
|
44
44
|
exports.default = Item;
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
18
|
+
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const MenuItems = (_a) => {
|
|
20
|
+
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
21
|
+
return (react_1.default.createElement("ul", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-menu__list", className) }), react_1.default.Children.toArray(children).map((child, i) => (react_1.default.createElement("li", { key: i, className: "navds-menu__list-item" }, child)))));
|
|
22
|
+
};
|
|
23
|
+
exports.default = MenuItems;
|
|
@@ -0,0 +1,8 @@
|
|
|
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.Menu = void 0;
|
|
7
|
+
var Menu_1 = require("./Menu");
|
|
8
|
+
Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
|
|
@@ -30,12 +30,12 @@ const AccordionHeader = forwardRef((_a, ref) => {
|
|
|
30
30
|
context.toggleOpen();
|
|
31
31
|
onClick && onClick(e);
|
|
32
32
|
};
|
|
33
|
-
return (React.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: cl("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick }
|
|
33
|
+
return (React.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: cl("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
|
|
34
34
|
children,
|
|
35
|
-
React.createElement(Expand, {
|
|
35
|
+
React.createElement(Expand, { "aria-hidden": true, className: cl("navds-accordion__expand-icon", {
|
|
36
36
|
"navds-accordion__expand-icon--flip": context.open,
|
|
37
37
|
}) }),
|
|
38
|
-
React.createElement(ExpandFilled, {
|
|
38
|
+
React.createElement(ExpandFilled, { "aria-hidden": true, className: cl("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
|
|
39
39
|
"navds-accordion__expand-icon--flip": context.open,
|
|
40
40
|
}) })));
|
|
41
41
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAclD,MAAM,eAAe,GAAwB,UAAU,CACrD,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAEnD,qBAAqB,CAAC,GAAG,EAAE;QACzB,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,8DAA8D,CAC/D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAclD,MAAM,eAAe,GAAwB,UAAU,CACrD,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAEnD,qBAAqB,CAAC,GAAG,EAAE;QACzB,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,8DAA8D,CAC/D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,CAAC,QAAQ,EACpB,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,SAAS,EACT,eAAe,EACf,sBAAsB,CACvB,EACD,OAAO,EAAE,WAAW,mBACL,OAAO,CAAC,IAAI;QAE1B,QAAQ;QACT,oBAAC,MAAM,yBAEL,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;gBAC5C,oCAAoC,EAAE,OAAO,CAAC,IAAI;aACnD,CAAC,GACF;QACF,oBAAC,YAAY,yBAEX,SAAS,EAAE,EAAE,CACX,8BAA8B,EAC9B,sCAAsC,EACtC;gBACE,oCAAoC,EAAE,OAAO,CAAC,IAAI;aACnD,CACF,GACD,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
package/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export * from "./accordion";
|
|
2
|
-
export * from "./accordion-menu";
|
|
3
2
|
export * from "./alert";
|
|
4
3
|
export * from "./button";
|
|
5
4
|
export * from "./form";
|
|
@@ -9,6 +8,7 @@ export * from "./guide-panel";
|
|
|
9
8
|
export * from "./link";
|
|
10
9
|
export * from "./link-panel";
|
|
11
10
|
export * from "./loader";
|
|
11
|
+
export * from "./menu";
|
|
12
12
|
export * from "./modal";
|
|
13
13
|
export * from "./panel";
|
|
14
14
|
export * from "./popover";
|
package/esm/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export * from "./accordion";
|
|
2
|
-
export * from "./accordion-menu";
|
|
3
2
|
export * from "./alert";
|
|
4
3
|
export * from "./button";
|
|
5
4
|
export * from "./form";
|
|
@@ -9,6 +8,7 @@ export * from "./guide-panel";
|
|
|
9
8
|
export * from "./link";
|
|
10
9
|
export * from "./link-panel";
|
|
11
10
|
export * from "./loader";
|
|
11
|
+
export * from "./menu";
|
|
12
12
|
export * from "./modal";
|
|
13
13
|
export * from "./panel";
|
|
14
14
|
export * from "./popover";
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MenuItemType } from "./MenuItem";
|
|
3
|
+
import { MenuCollapseType } from "./MenuCollapse";
|
|
4
|
+
export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
interface MenuComponent extends React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLElement>> {
|
|
8
|
+
Collapse: MenuCollapseType;
|
|
9
|
+
Item: MenuItemType;
|
|
10
|
+
}
|
|
11
|
+
declare const Menu: MenuComponent;
|
|
12
|
+
export default Menu;
|
|
@@ -12,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import React, { forwardRef } from "react";
|
|
13
13
|
import cl from "classnames";
|
|
14
14
|
import MenuItems from "./MenuItems";
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
const
|
|
15
|
+
import Item from "./MenuItem";
|
|
16
|
+
import Collapse from "./MenuCollapse";
|
|
17
|
+
const Menu = forwardRef((_a, ref) => {
|
|
18
18
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
19
|
-
return (React.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: cl("navds-
|
|
19
|
+
return (React.createElement("nav", Object.assign({}, rest, { role: "navigation", ref: ref, className: cl("navds-menu", className) }),
|
|
20
20
|
React.createElement(MenuItems, null, children)));
|
|
21
21
|
});
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
export default
|
|
25
|
-
//# sourceMappingURL=
|
|
22
|
+
Menu.Collapse = Collapse;
|
|
23
|
+
Menu.Item = Item;
|
|
24
|
+
export default Menu;
|
|
25
|
+
//# sourceMappingURL=Menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,IAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,QAA8B,MAAM,gBAAgB,CAAC;AAc5D,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACvC,6CACM,IAAI,IACR,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;QAEtC,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAA;CAAA,CACa,CAAC;AAEnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AAEjB,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
export declare const NestingContext: React.Context<{
|
|
3
|
+
depth: number;
|
|
4
|
+
}>;
|
|
5
|
+
export interface MenuCollapseProps extends HTMLAttributes<HTMLDivElement> {
|
|
6
|
+
title: string;
|
|
7
|
+
defaultOpen?: boolean;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
export declare type MenuCollapseType = React.ForwardRefExoticComponent<MenuCollapseProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const Collapse: MenuCollapseType;
|
|
12
|
+
export default Collapse;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { createContext, forwardRef, useContext, useState, } from "react";
|
|
13
|
+
import cl from "classnames";
|
|
14
|
+
import { Expand, ExpandFilled } from "@navikt/ds-icons";
|
|
15
|
+
import MenuItems from "./MenuItems";
|
|
16
|
+
export const NestingContext = createContext({ depth: 1 });
|
|
17
|
+
const NestingProvider = ({ children }) => {
|
|
18
|
+
const context = useContext(NestingContext);
|
|
19
|
+
return (React.createElement(NestingContext.Provider, { value: {
|
|
20
|
+
depth: context.depth + 1,
|
|
21
|
+
} }, children));
|
|
22
|
+
};
|
|
23
|
+
const Collapse = forwardRef((_a, ref) => {
|
|
24
|
+
var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
|
|
25
|
+
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
26
|
+
const context = useContext(NestingContext);
|
|
27
|
+
return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-menu-collapse", className, {
|
|
28
|
+
"navds-menu-collapse--open": isOpen,
|
|
29
|
+
}) }),
|
|
30
|
+
React.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-menu-collapse__button" },
|
|
31
|
+
title,
|
|
32
|
+
React.createElement(Expand, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon" }),
|
|
33
|
+
React.createElement(ExpandFilled, { title: isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff", className: "navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled" })),
|
|
34
|
+
React.createElement(NestingProvider, null, isOpen && (React.createElement(MenuItems, { "data-depth": context.depth, className: "navds-menu__list--inner" }, children)))));
|
|
35
|
+
});
|
|
36
|
+
export default Collapse;
|
|
37
|
+
//# sourceMappingURL=MenuCollapse.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuCollapse.js","sourceRoot":"","sources":["../../src/menu/MenuCollapse.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,UAAU,EACV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;AAE7E,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvC,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3C,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;YACL,KAAK,EAAE,OAAO,CAAC,KAAK,GAAG,CAAC;SACzB,IAEA,QAAQ,CACe,CAC3B,CAAC;AACJ,CAAC,CAAC;AAYF,MAAM,QAAQ,GAAqB,UAAU,CAC3C,CAAC,EAA4D,EAAE,GAAG,EAAE,EAAE;QAArE,EAAE,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAA1D,iDAA4D,CAAF;IACzD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE3C,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;YAC9C,2BAA2B,EAAE,MAAM;SACpC,CAAC;QAEF,gCACE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAC,6BAA6B;YAEtC,KAAK;YACN,oBAAC,MAAM,IACL,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,EACjE,SAAS,EAAC,kCAAkC,GAC5C;YACF,oBAAC,YAAY,IACX,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,sBAAsB,EACjE,SAAS,EAAC,2EAA2E,GACrF,CACK;QACT,oBAAC,eAAe,QACb,MAAM,IAAI,CACT,oBAAC,SAAS,kBACI,OAAO,CAAC,KAAK,EACzB,SAAS,EAAC,yBAAyB,IAElC,QAAQ,CACC,CACb,CACe,CACd,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { OverridableComponent } from "..";
|
|
3
|
+
export interface MenuItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Sets active styling if true
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
active?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare type MenuItemType = OverridableComponent<MenuItemProps, HTMLAnchorElement>;
|
|
12
|
+
declare const Item: MenuItemType;
|
|
13
|
+
export default Item;
|
|
@@ -13,9 +13,9 @@ import React, { forwardRef } from "react";
|
|
|
13
13
|
import cl from "classnames";
|
|
14
14
|
const Item = forwardRef((_a, ref) => {
|
|
15
15
|
var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
|
|
16
|
-
return (React.createElement(Component, Object.assign({ ref: ref, className: cl("navds-
|
|
17
|
-
"navds-
|
|
16
|
+
return (React.createElement(Component, Object.assign({ ref: ref, className: cl("navds-menu-item", className, {
|
|
17
|
+
"navds-menu-item--active": active,
|
|
18
18
|
}) }, rest), children));
|
|
19
19
|
});
|
|
20
20
|
export default Item;
|
|
21
|
-
//# sourceMappingURL=
|
|
21
|
+
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../src/menu/MenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAiB5B,MAAM,IAAI,GAAiB,UAAU,CACnC,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,MAAM,GAAG,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAAnE,yCAAqE,CAAF;IAGnE,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE;YAC1C,yBAAyB,EAAE,MAAM;SAClC,CAAC,IACE,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import cl from "classnames";
|
|
13
|
+
import React from "react";
|
|
14
|
+
const MenuItems = (_a) => {
|
|
15
|
+
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
16
|
+
return (React.createElement("ul", Object.assign({}, rest, { className: cl("navds-menu__list", className) }), React.Children.toArray(children).map((child, i) => (React.createElement("li", { key: i, className: "navds-menu__list-item" }, child)))));
|
|
17
|
+
};
|
|
18
|
+
export default MenuItems;
|
|
19
|
+
//# sourceMappingURL=MenuItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../src/menu/MenuItems.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,SAAS,GAAG,CAAC,EAOlB,EAAE,EAAE;QAPc,EACjB,QAAQ,EACR,SAAS,OAKV,EAJI,IAAI,cAHU,yBAIlB,CADQ;IAIH,OAAA,CACJ,4CAAQ,IAAI,IAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,KACvD,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAClD,4BAAI,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,uBAAuB,IAC1C,KAAK,CACH,CACN,CAAC,CACC,CACN,CAAA;CAAA,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAa,MAAM,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "NAV designsystem react components",
|
|
6
6
|
"author": "NAV Designsystem team",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@material-ui/core": "^4.12.3",
|
|
38
|
-
"@navikt/ds-icons": "^0.
|
|
38
|
+
"@navikt/ds-icons": "^0.8.0",
|
|
39
39
|
"@popperjs/core": "^2.10.1",
|
|
40
40
|
"classnames": "^2.2.6",
|
|
41
41
|
"react-collapse": "^5.1.0",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"@types/react": "^17.0.30",
|
|
65
65
|
"react": "^17.0.0"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "eceaa7e65907270047c4c0728370b1e606261aee"
|
|
68
68
|
}
|
|
@@ -43,6 +43,7 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
|
|
|
43
43
|
|
|
44
44
|
return (
|
|
45
45
|
<button
|
|
46
|
+
{...rest}
|
|
46
47
|
ref={ref}
|
|
47
48
|
id={context.buttonId}
|
|
48
49
|
className={cl(
|
|
@@ -52,17 +53,17 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
|
|
|
52
53
|
"navds-heading--small"
|
|
53
54
|
)}
|
|
54
55
|
onClick={handleClick}
|
|
55
|
-
{
|
|
56
|
+
aria-expanded={context.open}
|
|
56
57
|
>
|
|
57
58
|
{children}
|
|
58
59
|
<Expand
|
|
59
|
-
|
|
60
|
+
aria-hidden
|
|
60
61
|
className={cl("navds-accordion__expand-icon", {
|
|
61
62
|
"navds-accordion__expand-icon--flip": context.open,
|
|
62
63
|
})}
|
|
63
64
|
/>
|
|
64
65
|
<ExpandFilled
|
|
65
|
-
|
|
66
|
+
aria-hidden
|
|
66
67
|
className={cl(
|
|
67
68
|
"navds-accordion__expand-icon",
|
|
68
69
|
"navds-accordion__expand-icon--filled",
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import AccordionContent from "./AccordionContent";
|
|
3
|
+
import AccordionHeader from "./AccordionHeader";
|
|
4
|
+
import AccordionItem from "./AccordionItem";
|
|
5
|
+
import { Accordion } from ".";
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: "ds-react/accordion",
|
|
9
|
+
component: Accordion,
|
|
10
|
+
subcomponents: {
|
|
11
|
+
AccordionItem,
|
|
12
|
+
AccordionContent,
|
|
13
|
+
AccordionHeader,
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const All = () => {
|
|
18
|
+
const [open, setOpen] = useState(false);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<h1>Accordion</h1>
|
|
23
|
+
<h2>Controlled</h2>
|
|
24
|
+
<Accordion>
|
|
25
|
+
<Accordion.Item open={open}>
|
|
26
|
+
<Accordion.Header onClick={() => setOpen(!open)}>
|
|
27
|
+
Accordion header text
|
|
28
|
+
</Accordion.Header>
|
|
29
|
+
<Accordion.Content>
|
|
30
|
+
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
|
31
|
+
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
|
32
|
+
occaecat nisi qui nostrud sit consectetur consectetur officia
|
|
33
|
+
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
|
34
|
+
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
|
35
|
+
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
|
36
|
+
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
|
37
|
+
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
|
38
|
+
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
|
39
|
+
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
|
40
|
+
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
|
41
|
+
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
|
42
|
+
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
|
43
|
+
proident commodo adipisicing eiusmod id.
|
|
44
|
+
</Accordion.Content>
|
|
45
|
+
</Accordion.Item>
|
|
46
|
+
</Accordion>
|
|
47
|
+
<h2>Un-controlled</h2>
|
|
48
|
+
<Accordion>
|
|
49
|
+
<Accordion.Item>
|
|
50
|
+
<Accordion.Header>Accordion header text</Accordion.Header>
|
|
51
|
+
<Accordion.Content>
|
|
52
|
+
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
|
53
|
+
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
|
54
|
+
occaecat nisi qui nostrud sit consectetur consectetur officia
|
|
55
|
+
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
|
56
|
+
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
|
57
|
+
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
|
58
|
+
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
|
59
|
+
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
|
60
|
+
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
|
61
|
+
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
|
62
|
+
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
|
63
|
+
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
|
64
|
+
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
|
65
|
+
proident commodo adipisicing eiusmod id.
|
|
66
|
+
</Accordion.Content>
|
|
67
|
+
</Accordion.Item>
|
|
68
|
+
<Accordion.Item>
|
|
69
|
+
<Accordion.Header>Accordion header text</Accordion.Header>
|
|
70
|
+
<Accordion.Content>
|
|
71
|
+
Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
|
|
72
|
+
officia laboris voluptate officia pariatur.Lorem est ex anim velit
|
|
73
|
+
occaecat nisi qui nostrud sit consectetur consectetur officia
|
|
74
|
+
nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
|
|
75
|
+
minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
|
|
76
|
+
sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
|
|
77
|
+
exercitation id cillum qui do. Minim adipisicing nostrud commodo
|
|
78
|
+
proident occaecat aliquip nulla anim proident reprehenderit. Magna
|
|
79
|
+
ipsum officia veniam cupidatat duis veniam dolore reprehenderit
|
|
80
|
+
mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
|
|
81
|
+
enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
|
|
82
|
+
sunt commodo reprehenderit irure deserunt eiusmod ipsum.
|
|
83
|
+
Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
|
|
84
|
+
proident commodo adipisicing eiusmod id.
|
|
85
|
+
</Accordion.Content>
|
|
86
|
+
</Accordion.Item>
|
|
87
|
+
</Accordion>
|
|
88
|
+
</>
|
|
89
|
+
);
|
|
90
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export * from "./accordion";
|
|
2
|
-
export * from "./accordion-menu";
|
|
3
2
|
export * from "./alert";
|
|
4
3
|
export * from "./button";
|
|
5
4
|
export * from "./form";
|
|
@@ -9,6 +8,7 @@ export * from "./guide-panel";
|
|
|
9
8
|
export * from "./link";
|
|
10
9
|
export * from "./link-panel";
|
|
11
10
|
export * from "./loader";
|
|
11
|
+
export * from "./menu";
|
|
12
12
|
export * from "./modal";
|
|
13
13
|
export * from "./panel";
|
|
14
14
|
export * from "./popover";
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { forwardRef } from "react";
|
|
2
|
+
import cl from "classnames";
|
|
3
|
+
import MenuItems from "./MenuItems";
|
|
4
|
+
|
|
5
|
+
import Item, { MenuItemType } from "./MenuItem";
|
|
6
|
+
import Collapse, { MenuCollapseType } from "./MenuCollapse";
|
|
7
|
+
|
|
8
|
+
export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface MenuComponent
|
|
13
|
+
extends React.ForwardRefExoticComponent<
|
|
14
|
+
MenuProps & React.RefAttributes<HTMLElement>
|
|
15
|
+
> {
|
|
16
|
+
Collapse: MenuCollapseType;
|
|
17
|
+
Item: MenuItemType;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const Menu = forwardRef<HTMLElement, MenuProps>(
|
|
21
|
+
({ children, className, ...rest }, ref) => (
|
|
22
|
+
<nav
|
|
23
|
+
{...rest}
|
|
24
|
+
role="navigation"
|
|
25
|
+
ref={ref}
|
|
26
|
+
className={cl("navds-menu", className)}
|
|
27
|
+
>
|
|
28
|
+
<MenuItems>{children}</MenuItems>
|
|
29
|
+
</nav>
|
|
30
|
+
)
|
|
31
|
+
) as MenuComponent;
|
|
32
|
+
|
|
33
|
+
Menu.Collapse = Collapse;
|
|
34
|
+
Menu.Item = Item;
|
|
35
|
+
|
|
36
|
+
export default Menu;
|