@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
@@ -0,0 +1,80 @@
1
+ import React, {
2
+ createContext,
3
+ forwardRef,
4
+ HTMLAttributes,
5
+ useContext,
6
+ useState,
7
+ } from "react";
8
+ import cl from "classnames";
9
+ import { Expand, ExpandFilled } from "@navikt/ds-icons";
10
+ import MenuItems from "./MenuItems";
11
+
12
+ export const NestingContext = createContext<{ depth: number }>({ depth: 1 });
13
+
14
+ const NestingProvider = ({ children }) => {
15
+ const context = useContext(NestingContext);
16
+
17
+ return (
18
+ <NestingContext.Provider
19
+ value={{
20
+ depth: context.depth + 1,
21
+ }}
22
+ >
23
+ {children}
24
+ </NestingContext.Provider>
25
+ );
26
+ };
27
+
28
+ export interface MenuCollapseProps extends HTMLAttributes<HTMLDivElement> {
29
+ title: string;
30
+ defaultOpen?: boolean;
31
+ children: React.ReactNode;
32
+ }
33
+
34
+ export type MenuCollapseType = React.ForwardRefExoticComponent<
35
+ MenuCollapseProps & React.RefAttributes<HTMLDivElement>
36
+ >;
37
+
38
+ const Collapse: MenuCollapseType = forwardRef(
39
+ ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
40
+ const [isOpen, setIsOpen] = useState(defaultOpen);
41
+ const context = useContext(NestingContext);
42
+
43
+ return (
44
+ <div
45
+ {...rest}
46
+ ref={ref}
47
+ className={cl("navds-menu-collapse", className, {
48
+ "navds-menu-collapse--open": isOpen,
49
+ })}
50
+ >
51
+ <button
52
+ onClick={() => setIsOpen(!isOpen)}
53
+ className="navds-menu-collapse__button"
54
+ >
55
+ {title}
56
+ <Expand
57
+ title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
58
+ className="navds-menu-collapse__expand-icon"
59
+ />
60
+ <ExpandFilled
61
+ title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
62
+ className="navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled"
63
+ />
64
+ </button>
65
+ <NestingProvider>
66
+ {isOpen && (
67
+ <MenuItems
68
+ data-depth={context.depth}
69
+ className="navds-menu__list--inner"
70
+ >
71
+ {children}
72
+ </MenuItems>
73
+ )}
74
+ </NestingProvider>
75
+ </div>
76
+ );
77
+ }
78
+ );
79
+
80
+ export default Collapse;
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
2
2
  import { OverridableComponent } from "..";
3
3
  import cl from "classnames";
4
4
 
5
- export interface AccordionMenuItemProps
5
+ export interface MenuItemProps
6
6
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
7
7
  children: React.ReactNode;
8
8
  /**
@@ -12,12 +12,12 @@ export interface AccordionMenuItemProps
12
12
  active?: boolean;
13
13
  }
14
14
 
15
- export type AccordionMenuItemType = OverridableComponent<
16
- AccordionMenuItemProps,
15
+ export type MenuItemType = OverridableComponent<
16
+ MenuItemProps,
17
17
  HTMLAnchorElement
18
18
  >;
19
19
 
20
- const Item: AccordionMenuItemType = forwardRef(
20
+ const Item: MenuItemType = forwardRef(
21
21
  (
22
22
  { children, as: Component = "a", active = false, className, ...rest },
23
23
  ref
@@ -25,8 +25,8 @@ const Item: AccordionMenuItemType = forwardRef(
25
25
  return (
26
26
  <Component
27
27
  ref={ref}
28
- className={cl("navds-accordion-menu-item", className, {
29
- "navds-accordion-menu-item--active": active,
28
+ className={cl("navds-menu-item", className, {
29
+ "navds-menu-item--active": active,
30
30
  })}
31
31
  {...rest}
32
32
  >
@@ -0,0 +1,21 @@
1
+ import cl from "classnames";
2
+ import React from "react";
3
+
4
+ const MenuItems = ({
5
+ children,
6
+ className,
7
+ ...rest
8
+ }: {
9
+ children: React.ReactNode;
10
+ className?: string;
11
+ }) => (
12
+ <ul {...rest} className={cl("navds-menu__list", className)}>
13
+ {React.Children.toArray(children).map((child, i) => (
14
+ <li key={i} className="navds-menu__list-item">
15
+ {child}
16
+ </li>
17
+ ))}
18
+ </ul>
19
+ );
20
+
21
+ export default MenuItems;
@@ -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,93 @@
1
+ import { Meta, Canvas } from "@storybook/addon-docs";
2
+ import { Menu } from "../../index";
3
+
4
+ <Meta title="ds-react/menu/intro" />
5
+
6
+ # Hvordan ta i bruk Menu
7
+
8
+ ```jsx
9
+ <Menu>
10
+ <Menu.Item href="#leo">Leo</Menu.Item>
11
+ <Menu.Collapse title="Proin">
12
+ <Menu.Item href="#nulla" active>
13
+ Nulla
14
+ </Menu.Item>
15
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
16
+ </Menu.Collapse>
17
+ <Menu.Collapse title="Accumsan">
18
+ <Menu.Item href="#justo" aria-current="page">
19
+ Justo
20
+ </Menu.Item>
21
+ <Menu.Collapse title="Proin">
22
+ <Menu.Item href="#nulla">Nulla</Menu.Item>
23
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
24
+ </Menu.Collapse>
25
+ </Menu.Collapse>
26
+ </Menu>
27
+ ```
28
+
29
+ <Canvas>
30
+ <Menu>
31
+ <Menu.Item href="#leo">Leo</Menu.Item>
32
+ <Menu.Collapse title="Proin">
33
+ <Menu.Item href="#nulla" active>
34
+ Nulla
35
+ </Menu.Item>
36
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
37
+ </Menu.Collapse>
38
+ <Menu.Collapse title="Accumsan">
39
+ <Menu.Item href="#justo">Justo</Menu.Item>
40
+ <Menu.Collapse title="Proin">
41
+ <Menu.Item href="#nulla">Nulla</Menu.Item>
42
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
43
+ </Menu.Collapse>
44
+ </Menu.Collapse>
45
+ </Menu>
46
+ </Canvas>
47
+
48
+ ## Elementer i menyen
49
+
50
+ Menyen har to typer elementer man kan bruke: `Collapse` for nesting og `Item` for navigasjonslenker på siden.
51
+
52
+ <Canvas>
53
+ <div>
54
+ <h2>Item</h2>
55
+ <Menu>
56
+ <Menu.Item href="#leo">Lenke</Menu.Item>
57
+ <Menu.Item href="#leo">Lenke</Menu.Item>
58
+ <Menu.Item href="#leo">Lenke</Menu.Item>
59
+ <Menu.Item href="#leo">Lenke</Menu.Item>
60
+ <Menu.Item href="#leo">Lenke</Menu.Item>
61
+ </Menu>
62
+ <h2>Collapses + Item</h2>
63
+ <Menu>
64
+ <Menu.Collapse title="Proin">
65
+ <Menu.Item href="#nulla" active>
66
+ Nulla
67
+ </Menu.Item>
68
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
69
+ </Menu.Collapse>
70
+ <Menu.Collapse title="Accumsan">
71
+ <Menu.Item href="#justo">Justo</Menu.Item>
72
+ <Menu.Collapse title="Proin">
73
+ <Menu.Item href="#nulla">Nulla</Menu.Item>
74
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
75
+ </Menu.Collapse>
76
+ </Menu.Collapse>
77
+ <Menu.Item href="#leo">Lenke</Menu.Item>
78
+ <Menu.Item href="#leo">Lenke</Menu.Item>
79
+ </Menu>
80
+ </div>
81
+ </Canvas>
82
+
83
+ `Menu.Item` er implementert med `OverridableComponent`, noe som
84
+ gjør at man kan ta i bruk eks react-router slik:
85
+
86
+ ```jsx
87
+ <Menu.Item as={NavLink} activeClassName="navds-menu-item--active" to="/1">
88
+ Lenketekst
89
+ </Menu.Item>
90
+ ```
91
+
92
+ Her er `NavLink` fra `react-router-dom` brukt, og man får da
93
+ samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.
@@ -0,0 +1,139 @@
1
+ import * as React from "react";
2
+ import cl from "classnames";
3
+ import { Menu } from "../index";
4
+ import { NavLink, HashRouter as Router } from "react-router-dom";
5
+ import { MenuItemProps } from "../MenuItem";
6
+
7
+ export default {
8
+ title: "ds-react/menu",
9
+ component: { Menu },
10
+ };
11
+
12
+ export const All = () => (
13
+ <div
14
+ style={{
15
+ background: "white",
16
+ maxWidth: 288,
17
+ }}
18
+ >
19
+ <h2>Only Menu.Items</h2>
20
+ <Menu>
21
+ <Menu.Item href="#leo">Leo</Menu.Item>
22
+
23
+ <Menu.Item href="#justo">Justo</Menu.Item>
24
+ <Menu.Item href="#pariatur" active aria-current="page">
25
+ Pariatur
26
+ </Menu.Item>
27
+ <Menu.Item href="#nulla">Nulla</Menu.Item>
28
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
29
+ <Menu.Item href="#justo">Justo</Menu.Item>
30
+ <Menu.Item href="#pariatur">Pariatur</Menu.Item>
31
+ </Menu>
32
+
33
+ <h2>With Collapse</h2>
34
+ <Menu>
35
+ <Menu.Item href="#leo">Leo</Menu.Item>
36
+ <Menu.Collapse title="Proin">
37
+ <Menu.Item href="#nulla" active>
38
+ Nulla
39
+ </Menu.Item>
40
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
41
+ </Menu.Collapse>
42
+ <Menu.Collapse title="Accumsan">
43
+ <Menu.Item href="#justo" aria-current="page">
44
+ Justo
45
+ </Menu.Item>
46
+ <Menu.Item href="#pariatur" active aria-current="page">
47
+ Pariatur
48
+ </Menu.Item>
49
+ <Menu.Collapse title="Proin">
50
+ <Menu.Item href="#nulla" active>
51
+ Nulla
52
+ </Menu.Item>
53
+ <Menu.Collapse title="Proin">
54
+ <Menu.Item href="#nulla" active>
55
+ Nulla
56
+ </Menu.Item>
57
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
58
+ </Menu.Collapse>
59
+ <Menu.Item href="#luctus">Luctus</Menu.Item>
60
+ </Menu.Collapse>
61
+ </Menu.Collapse>
62
+ <Menu.Item href="#justo" active>
63
+ Justo
64
+ </Menu.Item>
65
+ <Menu.Item href="#pariatur">Pariatur</Menu.Item>
66
+ </Menu>
67
+ </div>
68
+ );
69
+
70
+ export const ReactRouter = () => {
71
+ const MenuItemLink = (props: MenuItemProps & { to: string }) => {
72
+ const { to } = props;
73
+
74
+ const CustomLink = React.useMemo(
75
+ () => (props: MenuItemProps) => (
76
+ <NavLink
77
+ {...props}
78
+ to={to}
79
+ className={({ isActive }) =>
80
+ cl(props.className, {
81
+ "navds-menu-item--active": isActive,
82
+ })
83
+ }
84
+ />
85
+ ),
86
+ [to]
87
+ );
88
+
89
+ return (
90
+ <Menu.Item {...props} as={CustomLink}>
91
+ Nivå 2 innrykk 2 rems
92
+ </Menu.Item>
93
+ );
94
+ };
95
+
96
+ return (
97
+ <Menu>
98
+ <Menu.Collapse title="Nivå 1 - 3 rems høy">
99
+ <MenuItemLink to="/1">Nivå 2 innrykk 2 rems</MenuItemLink>
100
+ <MenuItemLink to="/2">Subtitle 3</MenuItemLink>
101
+ </Menu.Collapse>
102
+ <Menu.Collapse title="Skjema og søknad">
103
+ <Menu.Collapse title="Satser">
104
+ <MenuItemLink to="/3">
105
+ Nivå 3 - 3 rems innrykk Har du rett til dagpenger når du mottar
106
+ annen økonomisk støtte fra NAV?
107
+ </MenuItemLink>
108
+ </Menu.Collapse>
109
+ <MenuItemLink to="/4">Subtitle 2</MenuItemLink>
110
+ <MenuItemLink to="/5">Subtitle 3</MenuItemLink>
111
+ </Menu.Collapse>
112
+ <Menu.Collapse title="Sakbehandlingstider">
113
+ <Menu.Collapse title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
114
+ <MenuItemLink to="/6">Subtitle 5</MenuItemLink>
115
+ </Menu.Collapse>
116
+ </Menu.Collapse>
117
+ <MenuItemLink to="/7">Internasjonalt</MenuItemLink>
118
+ <Menu.Collapse title="Meld fra om endringer lang tittel på første nivå">
119
+ <MenuItemLink to="/8">Subtitle 6</MenuItemLink>
120
+ </Menu.Collapse>
121
+ <MenuItemLink to="/9">Nivå 1</MenuItemLink>
122
+ </Menu>
123
+ );
124
+ };
125
+
126
+ ReactRouter.decorators = [
127
+ (Story) => (
128
+ <Router>
129
+ <div
130
+ style={{
131
+ background: "white",
132
+ maxWidth: 288,
133
+ }}
134
+ >
135
+ <Story />
136
+ </div>
137
+ </Router>
138
+ ),
139
+ ];
@@ -1,8 +0,0 @@
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
- const react_1 = __importDefault(require("react"));
7
- const MenuItems = ({ children }) => (react_1.default.createElement("ul", { className: "navds-accordion-menu__list" }, react_1.default.Children.toArray(children).map((child, i) => (react_1.default.createElement("li", { key: i, className: "navds-accordion-menu__list-item" }, child)))));
8
- exports.default = MenuItems;
@@ -1,8 +0,0 @@
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.AccordionMenu = void 0;
7
- var AccordionMenu_1 = require("./AccordionMenu");
8
- Object.defineProperty(exports, "AccordionMenu", { enumerable: true, get: function () { return __importDefault(AccordionMenu_1).default; } });
@@ -1,6 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "main": "./index.js",
4
- "module": "../../esm/accordion-menu/index.js",
5
- "types": "../../esm/accordion-menu/index.d.ts"
6
- }
@@ -1,12 +0,0 @@
1
- import React from "react";
2
- import { AccordionMenuCollapsableType } from "./AccordionMenuCollapsable";
3
- import { AccordionMenuItemType } from "./AccordionMenuItem";
4
- export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
5
- children: React.ReactNode;
6
- }
7
- interface AccordionMenuComponent extends React.ForwardRefExoticComponent<AccordionMenuProps & React.RefAttributes<HTMLElement>> {
8
- Collapsable: AccordionMenuCollapsableType;
9
- Item: AccordionMenuItemType;
10
- }
11
- declare const AccordionMenu: AccordionMenuComponent;
12
- export default AccordionMenu;
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionMenu.js","sourceRoot":"","sources":["../../src/accordion-menu/AccordionMenu.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;AACpC,OAAO,WAEN,MAAM,4BAA4B,CAAC;AACpC,OAAO,IAA+B,MAAM,qBAAqB,CAAC;AAclE,MAAM,aAAa,GAAG,UAAU,CAC9B,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,2CACE,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAC5C,IAAI;QAER,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,WAAW,GAAG,WAAW,CAAC;AACxC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC;AAE1B,eAAe,aAAa,CAAC"}
@@ -1,9 +0,0 @@
1
- import React, { HTMLAttributes } from "react";
2
- export interface AccordionMenuCollapsableProps extends HTMLAttributes<HTMLDivElement> {
3
- title: string;
4
- defaultOpen?: boolean;
5
- children: React.ReactNode;
6
- }
7
- export declare type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>>;
8
- declare const Collapsable: AccordionMenuCollapsableType;
9
- export default Collapsable;
@@ -1,28 +0,0 @@
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, { forwardRef, useState } from "react";
13
- import cl from "classnames";
14
- import { Expand } from "@navikt/ds-icons";
15
- import MenuItems from "./MenuItems";
16
- const Collapsable = forwardRef((_a, ref) => {
17
- var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
18
- const [isOpen, setIsOpen] = useState(defaultOpen);
19
- return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-accordion-menu-collapsable", className, {
20
- "navds-accordion-menu-collapsable--open": isOpen,
21
- }) }, rest),
22
- React.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-accordion-menu-collapsable__button" },
23
- title,
24
- React.createElement(Expand, { title: isOpen ? "Pil peker opp" : "Pil peker ned", className: "navds-accordion-menu-collapsable__expand-icon" })),
25
- isOpen && React.createElement(MenuItems, null, children)));
26
- });
27
- export default Collapsable;
28
- //# sourceMappingURL=AccordionMenuCollapsable.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionMenuCollapsable.js","sourceRoot":"","sources":["../../src/accordion-menu/AccordionMenuCollapsable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAC;AAapC,MAAM,WAAW,GAAiC,UAAU,CAC1D,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;IAElD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,SAAS,EAAE;YAC3D,wCAAwC,EAAE,MAAM;SACjD,CAAC,IACE,IAAI;QAER,gCACE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,EACjC,SAAS,EAAC,0CAA0C;YAEnD,KAAK;YACN,oBAAC,MAAM,IACL,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EACjD,SAAS,EAAC,+CAA+C,GACzD,CACK;QACR,MAAM,IAAI,oBAAC,SAAS,QAAE,QAAQ,CAAa,CACxC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,13 +0,0 @@
1
- import React from "react";
2
- import { OverridableComponent } from "..";
3
- export interface AccordionMenuItemProps 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 AccordionMenuItemType = OverridableComponent<AccordionMenuItemProps, HTMLAnchorElement>;
12
- declare const Item: AccordionMenuItemType;
13
- export default Item;
@@ -1 +0,0 @@
1
- {"version":3,"file":"AccordionMenuItem.js","sourceRoot":"","sources":["../../src/accordion-menu/AccordionMenuItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAiB5B,MAAM,IAAI,GAA0B,UAAU,CAC5C,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,2BAA2B,EAAE,SAAS,EAAE;YACpD,mCAAmC,EAAE,MAAM;SAC5C,CAAC,IACE,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- const MenuItems = ({ children }) => (React.createElement("ul", { className: "navds-accordion-menu__list" }, React.Children.toArray(children).map((child, i) => (React.createElement("li", { key: i, className: "navds-accordion-menu__list-item" }, child)))));
3
- export default MenuItems;
4
- //# sourceMappingURL=MenuItems.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MenuItems.js","sourceRoot":"","sources":["../../src/accordion-menu/MenuItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CACjE,4BAAI,SAAS,EAAC,4BAA4B,IACvC,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,iCAAiC,IACpD,KAAK,CACH,CACN,CAAC,CACC,CACN,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,3 +0,0 @@
1
- export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
2
- export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
3
- export { AccordionMenuItemProps } from "./AccordionMenuItem";
@@ -1,2 +0,0 @@
1
- export { default as AccordionMenu } from "./AccordionMenu";
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAsB,MAAM,iBAAiB,CAAC"}
@@ -1,72 +0,0 @@
1
- import { Meta, Canvas, Props } from "@storybook/addon-docs";
2
- import { Accordion } from "../../index";
3
-
4
- <Meta title="ds-react/accordion/intro" />
5
-
6
- # Hvordan ta i bruk Accordion
7
-
8
- ```jsx
9
- <Accordion>
10
- <Accordion.Item>
11
- <Accordion.Header>Accordion header text</Accordion.Header>
12
- <Accordion.Content>
13
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
14
- laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi
15
- qui nostrud sit.
16
- </Accordion.Content>
17
- </Accordion.Item>
18
- <Accordion.Item>
19
- <Accordion.Header>Aliquip amet irure consectetur occaecat</Accordion.Header>
20
- <Accordion.Content>
21
- Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
22
- consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do deserunt
23
- amet exercitation velit Lorem.
24
- </Accordion.Content>
25
- </Accordion.Item>
26
- </Accordion>
27
- ```
28
-
29
- <Canvas>
30
- <Accordion>
31
- <Accordion.Item>
32
- <Accordion.Header>Accordion header text</Accordion.Header>
33
- <Accordion.Content>
34
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
35
- officia laboris voluptate officia pariatur.Lorem est ex anim velit
36
- occaecat nisi qui nostrud sit.
37
- </Accordion.Content>
38
- </Accordion.Item>
39
- <Accordion.Item>
40
- <Accordion.Header>
41
- Aliquip amet irure consectetur occaecat
42
- </Accordion.Header>
43
- <Accordion.Content>
44
- Cupidatat aliqua eu ea et anim excepteur. Labore aliquip dolore laborum
45
- consequat. Reprehenderit ad velit quis eiusmod ex sint aliquip do
46
- deserunt amet exercitation velit Lorem.
47
- </Accordion.Content>
48
- </Accordion.Item>
49
- </Accordion>
50
- </Canvas>
51
-
52
- ## Controlled state
53
-
54
- Accordion-komponeten styrer selv open-state, men om man ønsker kan man selv overskrive denne med
55
- `open`-prop + `onClick`-prop slik det er gjort på eksemplet.
56
-
57
- ```jsx
58
- <Accordion>
59
- <Accordion.Item open={open}>
60
- <Accordion.Header onClick={(open) => setOpen(!open)}>
61
- Accordion header text
62
- </Accordion.Header>
63
- <Accordion.Content>
64
- Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
65
- laboris voluptate officia pariatur.Lorem est ex anim velit
66
- </Accordion.Content>
67
- </Accordion.Item>
68
- </Accordion>
69
- ```
70
-
71
- `renderContentWhenClosed`-prop på `Accordion.Item` bestemmer om innholdet (children) skal beholdes i dom-strukturen mens
72
- Accordion er lukket. Defaulter til `false`.