@navikt/ds-react 0.14.15 → 0.15.1
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/form/checkbox/Checkbox.js +12 -1
- package/cjs/form/checkbox/useCheckbox.js +1 -1
- 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/form/checkbox/Checkbox.d.ts +5 -0
- package/esm/form/checkbox/Checkbox.js +12 -1
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/useCheckbox.d.ts +0 -1
- package/esm/form/checkbox/useCheckbox.js +1 -1
- package/esm/form/checkbox/useCheckbox.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/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/form/checkbox/Checkbox.tsx +18 -1
- package/src/form/checkbox/stories/checkbox.stories.tsx +38 -1
- package/src/form/checkbox/useCheckbox.ts +0 -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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { Checkbox, CheckboxGroup } from "../../index";
|
|
3
3
|
import { Meta } from "@storybook/react/types-6-0";
|
|
4
4
|
export default {
|
|
@@ -6,6 +6,36 @@ export default {
|
|
|
6
6
|
component: Checkbox,
|
|
7
7
|
} as Meta;
|
|
8
8
|
|
|
9
|
+
export const Indeterminate = () => {
|
|
10
|
+
const [checked, setChecked] = useState([true, false]);
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<>
|
|
14
|
+
<Checkbox
|
|
15
|
+
checked={checked[0] && checked[1]}
|
|
16
|
+
indeterminate={checked[0] !== checked[1]}
|
|
17
|
+
onChange={(e) => setChecked([e.target.checked, e.target.checked])}
|
|
18
|
+
>
|
|
19
|
+
Parent
|
|
20
|
+
</Checkbox>
|
|
21
|
+
<div style={{ paddingLeft: "2rem" }}>
|
|
22
|
+
<Checkbox
|
|
23
|
+
checked={checked[0]}
|
|
24
|
+
onChange={(e) => setChecked([e.target.checked, checked[1]])}
|
|
25
|
+
>
|
|
26
|
+
Child 1
|
|
27
|
+
</Checkbox>
|
|
28
|
+
<Checkbox
|
|
29
|
+
checked={checked[1]}
|
|
30
|
+
onChange={(e) => setChecked([checked[0], e.target.checked])}
|
|
31
|
+
>
|
|
32
|
+
Child 2
|
|
33
|
+
</Checkbox>
|
|
34
|
+
</div>
|
|
35
|
+
</>
|
|
36
|
+
);
|
|
37
|
+
};
|
|
38
|
+
|
|
9
39
|
export const All = () => {
|
|
10
40
|
const Checkboxes = (props) => (
|
|
11
41
|
<CheckboxGroup
|
|
@@ -51,6 +81,13 @@ export const All = () => {
|
|
|
51
81
|
<Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
|
|
52
82
|
Orange
|
|
53
83
|
</Checkbox>
|
|
84
|
+
<h3>Indeterminate</h3>
|
|
85
|
+
<Checkbox value="Apple" indeterminate>
|
|
86
|
+
Apple
|
|
87
|
+
</Checkbox>
|
|
88
|
+
<Checkbox value="Orange" indeterminate size="small">
|
|
89
|
+
Orange
|
|
90
|
+
</Checkbox>
|
|
54
91
|
|
|
55
92
|
<h2>Checkbox group</h2>
|
|
56
93
|
<Checkboxes />
|
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;
|
|
@@ -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"}
|