@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.
Files changed (66) hide show
  1. package/cjs/accordion/AccordionHeader.js +3 -3
  2. package/cjs/index.js +1 -1
  3. package/cjs/{accordion-menu/AccordionMenu.js → menu/Menu.js} +7 -7
  4. package/cjs/{accordion-menu/AccordionMenuCollapsable.js → menu/MenuCollapse.js} +18 -8
  5. package/cjs/{accordion-menu/AccordionMenuItem.js → menu/MenuItem.js} +2 -2
  6. package/cjs/menu/MenuItems.js +23 -0
  7. package/cjs/menu/index.js +8 -0
  8. package/cjs/menu/package.json +6 -0
  9. package/esm/accordion/AccordionHeader.js +3 -3
  10. package/esm/accordion/AccordionHeader.js.map +1 -1
  11. package/esm/index.d.ts +1 -1
  12. package/esm/index.js +1 -1
  13. package/esm/index.js.map +1 -1
  14. package/esm/menu/Menu.d.ts +12 -0
  15. package/esm/{accordion-menu/AccordionMenu.js → menu/Menu.js} +8 -8
  16. package/esm/menu/Menu.js.map +1 -0
  17. package/esm/menu/MenuCollapse.d.ts +12 -0
  18. package/esm/menu/MenuCollapse.js +37 -0
  19. package/esm/menu/MenuCollapse.js.map +1 -0
  20. package/esm/menu/MenuItem.d.ts +13 -0
  21. package/esm/{accordion-menu/AccordionMenuItem.js → menu/MenuItem.js} +3 -3
  22. package/esm/menu/MenuItem.js.map +1 -0
  23. package/esm/{accordion-menu → menu}/MenuItems.d.ts +2 -1
  24. package/esm/menu/MenuItems.js +19 -0
  25. package/esm/menu/MenuItems.js.map +1 -0
  26. package/esm/menu/index.d.ts +3 -0
  27. package/esm/menu/index.js +2 -0
  28. package/esm/menu/index.js.map +1 -0
  29. package/package.json +3 -3
  30. package/src/accordion/AccordionHeader.tsx +4 -3
  31. package/src/accordion/accordion.stories.tsx +90 -0
  32. package/src/alert/{stories/alert.stories.tsx → alert.stories.tsx} +2 -2
  33. package/src/button/{stories/button.stories.tsx → button.stories.tsx} +1 -1
  34. package/src/index.ts +1 -1
  35. package/src/menu/Menu.tsx +36 -0
  36. package/src/menu/MenuCollapse.tsx +80 -0
  37. package/src/{accordion-menu/AccordionMenuItem.tsx → menu/MenuItem.tsx} +6 -6
  38. package/src/menu/MenuItems.tsx +21 -0
  39. package/src/menu/index.ts +3 -0
  40. package/src/menu/stories/menu.stories.mdx +93 -0
  41. package/src/menu/stories/menu.stories.tsx +139 -0
  42. package/cjs/accordion-menu/MenuItems.js +0 -8
  43. package/cjs/accordion-menu/index.js +0 -8
  44. package/cjs/accordion-menu/package.json +0 -6
  45. package/esm/accordion-menu/AccordionMenu.d.ts +0 -12
  46. package/esm/accordion-menu/AccordionMenu.js.map +0 -1
  47. package/esm/accordion-menu/AccordionMenuCollapsable.d.ts +0 -9
  48. package/esm/accordion-menu/AccordionMenuCollapsable.js +0 -28
  49. package/esm/accordion-menu/AccordionMenuCollapsable.js.map +0 -1
  50. package/esm/accordion-menu/AccordionMenuItem.d.ts +0 -13
  51. package/esm/accordion-menu/AccordionMenuItem.js.map +0 -1
  52. package/esm/accordion-menu/MenuItems.js +0 -4
  53. package/esm/accordion-menu/MenuItems.js.map +0 -1
  54. package/esm/accordion-menu/index.d.ts +0 -3
  55. package/esm/accordion-menu/index.js +0 -2
  56. package/esm/accordion-menu/index.js.map +0 -1
  57. package/src/accordion/stories/accordion.stories.mdx +0 -72
  58. package/src/accordion/stories/accordion.stories.tsx +0 -92
  59. package/src/accordion-menu/AccordionMenu.tsx +0 -39
  60. package/src/accordion-menu/AccordionMenuCollapsable.tsx +0 -45
  61. package/src/accordion-menu/MenuItems.tsx +0 -13
  62. package/src/accordion-menu/index.ts +0 -3
  63. package/src/accordion-menu/stories/accordion-menu.stories.mdx +0 -66
  64. package/src/accordion-menu/stories/accordion-menu.stories.tsx +0 -141
  65. package/src/alert/stories/alert.stories.mdx +0 -96
  66. 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 }, rest),
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, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", {
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, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
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 AccordionMenuCollapsable_1 = __importDefault(require("./AccordionMenuCollapsable"));
40
- const AccordionMenuItem_1 = __importDefault(require("./AccordionMenuItem"));
41
- const AccordionMenu = (0, react_1.forwardRef)((_a, ref) => {
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-accordion-menu", className) }, rest),
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
- AccordionMenu.Collapsable = AccordionMenuCollapsable_1.default;
47
- AccordionMenu.Item = AccordionMenuItem_1.default;
48
- exports.default = AccordionMenu;
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
- const Collapsable = (0, react_1.forwardRef)((_a, ref) => {
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
- return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-accordion-menu-collapsable", className, {
44
- "navds-accordion-menu-collapsable--open": isOpen,
45
- }) }, rest),
46
- react_1.default.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-accordion-menu-collapsable__button" },
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 ? "Pil peker opp" : "Pil peker ned", className: "navds-accordion-menu-collapsable__expand-icon" })),
49
- isOpen && react_1.default.createElement(MenuItems_1.default, null, children)));
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 = Collapsable;
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-accordion-menu-item", className, {
41
- "navds-accordion-menu-item--active": active,
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; } });
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../esm/menu/index.js",
5
+ "types": "../../esm/menu/index.d.ts"
6
+ }
@@ -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 }, rest),
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, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: cl("navds-accordion__expand-icon", {
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, { title: context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: cl("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
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,8CACE,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,IAChB,IAAI;QAEP,QAAQ;QACT,oBAAC,MAAM,IACL,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAC3D,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;gBAC5C,oCAAoC,EAAE,OAAO,CAAC,IAAI;aACnD,CAAC,GACF;QACF,oBAAC,YAAY,IACX,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAC3D,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"}
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,kBAAkB,CAAC;AACjC,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,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"}
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 Collapsable from "./AccordionMenuCollapsable";
16
- import Item from "./AccordionMenuItem";
17
- const AccordionMenu = forwardRef((_a, ref) => {
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-accordion-menu", className) }, rest),
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
- AccordionMenu.Collapsable = Collapsable;
23
- AccordionMenu.Item = Item;
24
- export default AccordionMenu;
25
- //# sourceMappingURL=AccordionMenu.js.map
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-accordion-menu-item", className, {
17
- "navds-accordion-menu-item--active": active,
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=AccordionMenuItem.js.map
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"}
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- declare const MenuItems: ({ children }: {
2
+ declare const MenuItems: ({ children, className, ...rest }: {
3
3
  children: React.ReactNode;
4
+ className?: string | undefined;
4
5
  }) => JSX.Element;
5
6
  export default MenuItems;
@@ -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,3 @@
1
+ export { default as Menu, MenuProps } from "./Menu";
2
+ export { MenuCollapseProps } from "./MenuCollapse";
3
+ export { MenuItemProps } from "./MenuItem";
@@ -0,0 +1,2 @@
1
+ export { default as Menu } from "./Menu";
2
+ //# sourceMappingURL=index.js.map
@@ -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.14.14",
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.7.3",
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": "9597c24328f81e62cd8b67ec8ab26bfaf3b0cebe"
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
- {...rest}
56
+ aria-expanded={context.open}
56
57
  >
57
58
  {children}
58
59
  <Expand
59
- title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
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
- title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
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
+ };
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
- import { Alert } from "..";
3
- import { BodyLong, Heading } from "../..";
2
+ import { Alert } from ".";
3
+ import { BodyLong, Heading } from "..";
4
4
 
5
5
  export default {
6
6
  title: "ds-react/alert",
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Button } from "../index";
2
+ import { Button } from "./index";
3
3
  import { Success } from "@navikt/ds-icons";
4
4
 
5
5
  export default {
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;