@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
|
@@ -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
|
|
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
|
|
16
|
-
|
|
15
|
+
export type MenuItemType = OverridableComponent<
|
|
16
|
+
MenuItemProps,
|
|
17
17
|
HTMLAnchorElement
|
|
18
18
|
>;
|
|
19
19
|
|
|
20
|
-
const Item:
|
|
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-
|
|
29
|
-
"navds-
|
|
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,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,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 +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`.
|