@navikt/ds-react 0.15.0-rc.30 → 0.15.0

package/src/menu/MenuCollapse.tsx

@@ -0,0 +1,80 @@
+import React, {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useState,
+} from "react";
+import cl from "classnames";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import MenuItems from "./MenuItems";
+
+export const NestingContext = createContext<{ depth: number }>({ depth: 1 });
+
+const NestingProvider = ({ children }) => {
+  const context = useContext(NestingContext);
+
+  return (
+    <NestingContext.Provider
+      value={{
+        depth: context.depth + 1,
+      }}
+    >
+      {children}
+    </NestingContext.Provider>
+  );
+};
+
+export interface MenuCollapseProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export type MenuCollapseType = React.ForwardRefExoticComponent<
+  MenuCollapseProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Collapse: MenuCollapseType = forwardRef(
+  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const context = useContext(NestingContext);
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-menu-collapse", className, {
+          "navds-menu-collapse--open": isOpen,
+        })}
+      >
+        <button
+          onClick={() => setIsOpen(!isOpen)}
+          className="navds-menu-collapse__button"
+        >
+          {title}
+          <Expand
+            title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
+            className="navds-menu-collapse__expand-icon"
+          />
+          <ExpandFilled
+            title={isOpen ? "lukk navigasjons-skuff" : "åpne navigason-skuff"}
+            className="navds-menu-collapse__expand-icon navds-menu-collapse__expand-icon--filled"
+          />
+        </button>
+        <NestingProvider>
+          {isOpen && (
+            <MenuItems
+              data-depth={context.depth}
+              className="navds-menu__list--inner"
+            >
+              {children}
+            </MenuItems>
+          )}
+        </NestingProvider>
+      </div>
+    );
+  }
+);
+
+export default Collapse;

package/src/{accordion-menu/AccordionMenuItem.tsx → menu/MenuItem.tsx}

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "..";
 import cl from "classnames";
 
-export interface AccordionMenuItemProps
+export interface MenuItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
   /**
@@ -12,12 +12,12 @@ export interface AccordionMenuItemProps
   active?: boolean;
 }
 
-export type AccordionMenuItemType = OverridableComponent<
-  AccordionMenuItemProps,
+export type MenuItemType = OverridableComponent<
+  MenuItemProps,
   HTMLAnchorElement
 >;
 
-const Item: AccordionMenuItemType = forwardRef(
+const Item: MenuItemType = forwardRef(
   (
     { children, as: Component = "a", active = false, className, ...rest },
     ref
@@ -25,8 +25,8 @@ const Item: AccordionMenuItemType = forwardRef(
     return (
       <Component
         ref={ref}
-        className={cl("navds-accordion-menu-item", className, {
-          "navds-accordion-menu-item--active": active,
+        className={cl("navds-menu-item", className, {
+          "navds-menu-item--active": active,
         })}
         {...rest}
       >

package/src/menu/MenuItems.tsx

@@ -0,0 +1,21 @@
+import cl from "classnames";
+import React from "react";
+
+const MenuItems = ({
+  children,
+  className,
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <ul {...rest} className={cl("navds-menu__list", className)}>
+    {React.Children.toArray(children).map((child, i) => (
+      <li key={i} className="navds-menu__list-item">
+        {child}
+      </li>
+    ))}
+  </ul>
+);
+
+export default MenuItems;

package/src/menu/index.ts

@@ -0,0 +1,3 @@
+export { default as Menu, MenuProps } from "./Menu";
+export { MenuCollapseProps } from "./MenuCollapse";
+export { MenuItemProps } from "./MenuItem";

package/src/menu/stories/menu.stories.mdx

@@ -0,0 +1,93 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Menu } from "../../index";
+
+<Meta title="ds-react/menu/intro" />
+
+# Hvordan ta i bruk Menu
+
+```jsx
+<Menu>
+  <Menu.Item href="#leo">Leo</Menu.Item>
+  <Menu.Collapse title="Proin">
+    <Menu.Item href="#nulla" active>
+      Nulla
+    </Menu.Item>
+    <Menu.Item href="#luctus">Luctus</Menu.Item>
+  </Menu.Collapse>
+  <Menu.Collapse title="Accumsan">
+    <Menu.Item href="#justo" aria-current="page">
+      Justo
+    </Menu.Item>
+    <Menu.Collapse title="Proin">
+      <Menu.Item href="#nulla">Nulla</Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+    </Menu.Collapse>
+  </Menu.Collapse>
+</Menu>
+```
+
+<Canvas>
+  <Menu>
+    <Menu.Item href="#leo">Leo</Menu.Item>
+    <Menu.Collapse title="Proin">
+      <Menu.Item href="#nulla" active>
+        Nulla
+      </Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+    </Menu.Collapse>
+    <Menu.Collapse title="Accumsan">
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla">Nulla</Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+    </Menu.Collapse>
+  </Menu>
+</Canvas>
+
+## Elementer i menyen
+
+Menyen har to typer elementer man kan bruke: `Collapse` for nesting og `Item` for navigasjonslenker på siden.
+
+<Canvas>
+  <div>
+    <h2>Item</h2>
+    <Menu>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+    </Menu>
+    <h2>Collapses + Item</h2>
+    <Menu>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla" active>
+          Nulla
+        </Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+      <Menu.Collapse title="Accumsan">
+        <Menu.Item href="#justo">Justo</Menu.Item>
+        <Menu.Collapse title="Proin">
+          <Menu.Item href="#nulla">Nulla</Menu.Item>
+          <Menu.Item href="#luctus">Luctus</Menu.Item>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+      <Menu.Item href="#leo">Lenke</Menu.Item>
+    </Menu>
+  </div>
+</Canvas>
+
+`Menu.Item` er implementert med `OverridableComponent`, noe som
+gjør at man kan ta i bruk eks react-router slik:
+
+```jsx
+<Menu.Item as={NavLink} activeClassName="navds-menu-item--active" to="/1">
+  Lenketekst
+</Menu.Item>
+```
+
+Her er `NavLink` fra `react-router-dom` brukt, og man får da
+samtidig bruke alle propsene til denne komponenten som da er `activeClassName` her.

package/src/menu/stories/menu.stories.tsx

@@ -0,0 +1,139 @@
+import * as React from "react";
+import cl from "classnames";
+import { Menu } from "../index";
+import { NavLink, HashRouter as Router } from "react-router-dom";
+import { MenuItemProps } from "../MenuItem";
+
+export default {
+  title: "ds-react/menu",
+  component: { Menu },
+};
+
+export const All = () => (
+  <div
+    style={{
+      background: "white",
+      maxWidth: 288,
+    }}
+  >
+    <h2>Only Menu.Items</h2>
+    <Menu>
+      <Menu.Item href="#leo">Leo</Menu.Item>
+
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Item href="#pariatur" active aria-current="page">
+        Pariatur
+      </Menu.Item>
+      <Menu.Item href="#nulla">Nulla</Menu.Item>
+      <Menu.Item href="#luctus">Luctus</Menu.Item>
+      <Menu.Item href="#justo">Justo</Menu.Item>
+      <Menu.Item href="#pariatur">Pariatur</Menu.Item>
+    </Menu>
+
+    <h2>With Collapse</h2>
+    <Menu>
+      <Menu.Item href="#leo">Leo</Menu.Item>
+      <Menu.Collapse title="Proin">
+        <Menu.Item href="#nulla" active>
+          Nulla
+        </Menu.Item>
+        <Menu.Item href="#luctus">Luctus</Menu.Item>
+      </Menu.Collapse>
+      <Menu.Collapse title="Accumsan">
+        <Menu.Item href="#justo" aria-current="page">
+          Justo
+        </Menu.Item>
+        <Menu.Item href="#pariatur" active aria-current="page">
+          Pariatur
+        </Menu.Item>
+        <Menu.Collapse title="Proin">
+          <Menu.Item href="#nulla" active>
+            Nulla
+          </Menu.Item>
+          <Menu.Collapse title="Proin">
+            <Menu.Item href="#nulla" active>
+              Nulla
+            </Menu.Item>
+            <Menu.Item href="#luctus">Luctus</Menu.Item>
+          </Menu.Collapse>
+          <Menu.Item href="#luctus">Luctus</Menu.Item>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <Menu.Item href="#justo" active>
+        Justo
+      </Menu.Item>
+      <Menu.Item href="#pariatur">Pariatur</Menu.Item>
+    </Menu>
+  </div>
+);
+
+export const ReactRouter = () => {
+  const MenuItemLink = (props: MenuItemProps & { to: string }) => {
+    const { to } = props;
+
+    const CustomLink = React.useMemo(
+      () => (props: MenuItemProps) => (
+        <NavLink
+          {...props}
+          to={to}
+          className={({ isActive }) =>
+            cl(props.className, {
+              "navds-menu-item--active": isActive,
+            })
+          }
+        />
+      ),
+      [to]
+    );
+
+    return (
+      <Menu.Item {...props} as={CustomLink}>
+        Nivå 2 innrykk 2 rems
+      </Menu.Item>
+    );
+  };
+
+  return (
+    <Menu>
+      <Menu.Collapse title="Nivå 1 - 3 rems høy">
+        <MenuItemLink to="/1">Nivå 2 innrykk 2 rems</MenuItemLink>
+        <MenuItemLink to="/2">Subtitle 3</MenuItemLink>
+      </Menu.Collapse>
+      <Menu.Collapse title="Skjema og søknad">
+        <Menu.Collapse title="Satser">
+          <MenuItemLink to="/3">
+            Nivå 3 - 3 rems innrykk Har du rett til dagpenger når du mottar
+            annen økonomisk støtte fra NAV?
+          </MenuItemLink>
+        </Menu.Collapse>
+        <MenuItemLink to="/4">Subtitle 2</MenuItemLink>
+        <MenuItemLink to="/5">Subtitle 3</MenuItemLink>
+      </Menu.Collapse>
+      <Menu.Collapse title="Sakbehandlingstider">
+        <Menu.Collapse title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
+          <MenuItemLink to="/6">Subtitle 5</MenuItemLink>
+        </Menu.Collapse>
+      </Menu.Collapse>
+      <MenuItemLink to="/7">Internasjonalt</MenuItemLink>
+      <Menu.Collapse title="Meld fra om endringer lang tittel på første nivå">
+        <MenuItemLink to="/8">Subtitle 6</MenuItemLink>
+      </Menu.Collapse>
+      <MenuItemLink to="/9">Nivå 1</MenuItemLink>
+    </Menu>
+  );
+};
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <div
+        style={{
+          background: "white",
+          maxWidth: 288,
+        }}
+      >
+        <Story />
+      </div>
+    </Router>
+  ),
+];

package/src/table/Table.tsx

@@ -3,15 +3,9 @@ import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
 import Row, { RowType } from "./Row";
-import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
 
-export interface SortState {
-  orderBy: string;
-  direction: "ascending" | "descending";
-}
-
 export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   /**
    * Changes padding
@@ -23,14 +17,6 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
    * @default false
    */
   zebraStripes?: boolean;
-  /**
-   * Sort state
-   */
-  sort?: SortState;
-  /**
-   * Callback whens ort state changes
-   */
-  onSortChange?: (state?: SortState) => void;
 }
 
 export interface TableType
@@ -42,47 +28,17 @@ export interface TableType
   Row: RowType;
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
-  ColumnHeader: ColumnHeaderType;
 }
 
 export interface TableContextProps {
   size: "medium" | "small";
-  toggleColumnSort?: (sortKey: string) => void;
-  sort?: SortState;
 }
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
 const Table = forwardRef(
-  (
-    {
-      className,
-      zebraStripes = false,
-      size = "medium",
-      onSortChange,
-      sort,
-      ...rest
-    },
-    ref
-  ) => (
-    <TableContext.Provider
-      value={{
-        size,
-        toggleColumnSort: (sortKey) =>
-          onSortChange?.(
-            sort?.orderBy === sortKey && sort.direction === "descending"
-              ? undefined
-              : {
-                  orderBy: sortKey,
-                  direction:
-                    sort?.direction === "ascending"
-                      ? "descending"
-                      : "ascending",
-                }
-          ),
-        sort,
-      }}
-    >
+  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
+    <TableContext.Provider value={{ size }}>
       <table
         {...rest}
         ref={ref}
@@ -97,7 +53,6 @@ const Table = forwardRef(
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
-Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;
 

package/src/table/stories/table.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Table } from "../";
-import { Alert, Button, Checkbox, Link } from "../..";
+import { Table } from "../index";
+import { Alert, Checkbox, Link } from "@navikt/ds-react";
 
 export default {
   title: "ds-react/table",
@@ -12,7 +12,6 @@ export const All = () => {
     <Table {...props}>
       <Table.Header>
         <Table.Row>
-          {props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
           <Table.HeaderCell>ID</Table.HeaderCell>
           <Table.HeaderCell>Fornavn</Table.HeaderCell>
           <Table.HeaderCell>Etternavn</Table.HeaderCell>
@@ -21,48 +20,18 @@ export const All = () => {
       </Table.Header>
       <Table.Body>
         <Table.Row>
-          {props.button && (
-            <Table.DataCell
-              style={{
-                paddingTop: 6,
-                paddingBottom: 6,
-              }}
-            >
-              <Button size="xsmall">Click me!</Button>
-            </Table.DataCell>
-          )}
           <Table.HeaderCell>1</Table.HeaderCell>
           <Table.DataCell>Jean-Luc</Table.DataCell>
           <Table.DataCell>Picard</Table.DataCell>
           <Table.DataCell>Kaptein</Table.DataCell>
         </Table.Row>
         <Table.Row>
-          {props.button && (
-            <Table.DataCell
-              style={{
-                paddingTop: 6,
-                paddingBottom: 6,
-              }}
-            >
-              <Button size="xsmall">Click me!</Button>
-            </Table.DataCell>
-          )}
           <Table.HeaderCell>2</Table.HeaderCell>
           <Table.DataCell>William</Table.DataCell>
           <Table.DataCell>Riker</Table.DataCell>
           <Table.DataCell>Kommandør</Table.DataCell>
         </Table.Row>
         <Table.Row>
-          {props.button && (
-            <Table.DataCell
-              style={{
-                paddingTop: 6,
-                paddingBottom: 6,
-              }}
-            >
-              <Button size="xsmall">Click me!</Button>
-            </Table.DataCell>
-          )}
           <Table.HeaderCell>3</Table.HeaderCell>
           <Table.DataCell>Geordi</Table.DataCell>
           <Table.DataCell>La Forge</Table.DataCell>
@@ -79,8 +48,6 @@ export const All = () => {
       <TableComponent zebraStripes />
       <h2>Small Table</h2>
       <TableComponent size="small" />
-      <h2>Small Table with buttons</h2>
-      <TableComponent size="small" button />
       <h2>Table with divs</h2>
       <Alert variant="warning">
         Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}

package/cjs/accordion-menu/MenuItems.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-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)))));
-exports.default = MenuItems;

package/cjs/accordion-menu/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccordionMenu = void 0;
-var AccordionMenu_1 = require("./AccordionMenu");
-Object.defineProperty(exports, "AccordionMenu", { enumerable: true, get: function () { return __importDefault(AccordionMenu_1).default; } });

package/cjs/accordion-menu/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/accordion-menu/index.js",
-  "types": "../../esm/accordion-menu/index.d.ts"
-}

package/cjs/pagination/Pagination.js

@@ -1,44 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSteps = void 0;
-const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const ds_icons_1 = require("@navikt/ds-icons");
-const __1 = require("..");
-const getSteps = ({ current, count }) => new Array(count)
-    .fill(null)
-    .map((_, i) => i)
-    .filter((n) => {
-    if (count < 8) {
-        return true;
-    }
-    if (n === count - 1 || n === 0) {
-        return true;
-    }
-    if (n >= current - 1 && n <= current + 1) {
-        return true;
-    }
-    if (current <= 3 && n <= 4) {
-        return true;
-    }
-    if (current >= count - 4 && n >= count - 5) {
-        return true;
-    }
-    return false;
-});
-exports.getSteps = getSteps;
-const Pagination = ({ page, onPageChange, count, className, }) => {
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-pagination", className) },
-        react_1.default.createElement(__1.Button, { variant: "tertiary", size: "small", disabled: page === 0, onClick: () => onPageChange(page - 1) },
-            react_1.default.createElement(ds_icons_1.Back, null)),
-        (0, exports.getSteps)({ current: page, count }).map((n, i, a) => (react_1.default.createElement(react_1.default.Fragment, null,
-            i !== 0 && a[i - 1] !== n - 1 && (react_1.default.createElement("div", { className: "navds-pagination__ellipsis" },
-                react_1.default.createElement("span", null, "..."))),
-            react_1.default.createElement(__1.Button, { key: n, variant: page === n ? "primary" : "tertiary", size: "small", onClick: () => onPageChange(n) }, n + 1)))),
-        react_1.default.createElement(__1.Button, { variant: "tertiary", size: "small", disabled: page === count - 1, onClick: () => onPageChange(page + 1) },
-            react_1.default.createElement(ds_icons_1.Next, null))));
-};
-exports.default = Pagination;

package/cjs/pagination/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-var Pagination_1 = require("./Pagination");
-Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return __importDefault(Pagination_1).default; } });
-__exportStar(require("./Pagination"), exports);

package/cjs/pagination/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.js",
-  "module": "../../esm/pagination/index.js",
-  "types": "../../esm/pagination/index.d.ts"
-}