@navikt/ds-react 0.14.14 → 0.15.0

package/src/accordion/stories/accordion.stories.tsx

@@ -1,92 +0,0 @@
-import React, { useState } from "react";
-import AccordionContent from "../AccordionContent";
-import AccordionHeader from "../AccordionHeader";
-import AccordionItem from "../AccordionItem";
-import { Accordion } from "../index";
-
-export default {
-  title: "ds-react/accordion",
-  component: Accordion,
-  subcomponents: {
-    AccordionItem,
-    AccordionContent,
-    AccordionHeader,
-  },
-};
-
-export const All = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <div>
-        <h1>Accordion</h1>
-        <h2>Controlled</h2>
-        <Accordion>
-          <Accordion.Item open={open}>
-            <Accordion.Header onClick={() => setOpen(!open)}>
-              Accordion header text
-            </Accordion.Header>
-            <Accordion.Content>
-              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-              officia laboris voluptate officia pariatur.Lorem est ex anim velit
-              occaecat nisi qui nostrud sit consectetur consectetur officia
-              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
-              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
-              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
-              velit in. Est exercitation id cillum qui do. Minim adipisicing
-              nostrud commodo proident occaecat aliquip nulla anim proident
-              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
-              dolore reprehenderit mollit velit.Ut consequat commodo minim
-              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
-              quis nostrud eu cupidatat sunt commodo reprehenderit irure
-              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
-              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
-        <h2>Un-controlled</h2>
-        <Accordion>
-          <Accordion.Item>
-            <Accordion.Header>Accordion header text</Accordion.Header>
-            <Accordion.Content>
-              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-              officia laboris voluptate officia pariatur.Lorem est ex anim velit
-              occaecat nisi qui nostrud sit consectetur consectetur officia
-              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
-              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
-              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
-              velit in. Est exercitation id cillum qui do. Minim adipisicing
-              nostrud commodo proident occaecat aliquip nulla anim proident
-              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
-              dolore reprehenderit mollit velit.Ut consequat commodo minim
-              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
-              quis nostrud eu cupidatat sunt commodo reprehenderit irure
-              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
-              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>Accordion header text</Accordion.Header>
-            <Accordion.Content>
-              Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-              officia laboris voluptate officia pariatur.Lorem est ex anim velit
-              occaecat nisi qui nostrud sit consectetur consectetur officia
-              nostrud ullamco. Est ex duis proident nostrud elit qui laborum
-              anim minim eu eiusmod. Veniam in nostrud sunt tempor velit
-              incididunt sint ex dolor qui velit id eu. Deserunt magna sunt
-              velit in. Est exercitation id cillum qui do. Minim adipisicing
-              nostrud commodo proident occaecat aliquip nulla anim proident
-              reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
-              dolore reprehenderit mollit velit.Ut consequat commodo minim
-              occaecat id pariatur. Nisi enim tempor laborum commodo. Tempor sit
-              quis nostrud eu cupidatat sunt commodo reprehenderit irure
-              deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
-              eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
-      </div>
-    </>
-  );
-};

package/src/accordion-menu/AccordionMenu.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-import MenuItems from "./MenuItems";
-import Collapsable, {
-  AccordionMenuCollapsableType,
-} from "./AccordionMenuCollapsable";
-import Item, { AccordionMenuItemType } from "./AccordionMenuItem";
-
-export interface AccordionMenuProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-}
-
-interface AccordionMenuComponent
-  extends React.ForwardRefExoticComponent<
-    AccordionMenuProps & React.RefAttributes<HTMLElement>
-  > {
-  Collapsable: AccordionMenuCollapsableType;
-  Item: AccordionMenuItemType;
-}
-
-const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
-  ({ children, className, ...rest }, ref) => {
-    return (
-      <nav
-        role="navigation"
-        ref={ref}
-        className={cl("navds-accordion-menu", className)}
-        {...rest}
-      >
-        <MenuItems>{children}</MenuItems>
-      </nav>
-    );
-  }
-) as AccordionMenuComponent;
-
-AccordionMenu.Collapsable = Collapsable;
-AccordionMenu.Item = Item;
-
-export default AccordionMenu;

package/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -1,45 +0,0 @@
-import React, { forwardRef, HTMLAttributes, useState } from "react";
-import cl from "classnames";
-import { Expand } from "@navikt/ds-icons";
-import MenuItems from "./MenuItems";
-
-export interface AccordionMenuCollapsableProps
-  extends HTMLAttributes<HTMLDivElement> {
-  title: string;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}
-
-export type AccordionMenuCollapsableType = React.ForwardRefExoticComponent<
-  AccordionMenuCollapsableProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Collapsable: AccordionMenuCollapsableType = forwardRef(
-  ({ children, defaultOpen = false, title, className, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-accordion-menu-collapsable", className, {
-          "navds-accordion-menu-collapsable--open": isOpen,
-        })}
-        {...rest}
-      >
-        <button
-          onClick={() => setIsOpen(!isOpen)}
-          className="navds-accordion-menu-collapsable__button"
-        >
-          {title}
-          <Expand
-            title={isOpen ? "Pil peker opp" : "Pil peker ned"}
-            className="navds-accordion-menu-collapsable__expand-icon"
-          />
-        </button>
-        {isOpen && <MenuItems>{children}</MenuItems>}
-      </div>
-    );
-  }
-);
-
-export default Collapsable;

package/src/accordion-menu/MenuItems.tsx

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

package/src/accordion-menu/index.ts

@@ -1,3 +0,0 @@
-export { default as AccordionMenu, AccordionMenuProps } from "./AccordionMenu";
-export { AccordionMenuCollapsableProps } from "./AccordionMenuCollapsable";
-export { AccordionMenuItemProps } from "./AccordionMenuItem";

package/src/accordion-menu/stories/accordion-menu.stories.mdx

@@ -1,66 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { AccordionMenu } from "../../index";
-
-<Meta title="ds-react/accordion-menu/intro" />
-
-# Hvordan ta i bruk Accordion-menu
-
-```jsx
-<AccordionMenu>
-  <AccordionMenu.item href="#leo">Leo</AccordionMenu.item>
-  <AccordionMenu.Collapsable title="Proin">
-    <AccordionMenu.item href="#nulla" active>
-      Nulla
-    </AccordionMenu.item>
-    <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
-  </AccordionMenu.Collapsable>
-  <AccordionMenu.Collapsable title="Accumsan">
-    <AccordionMenu.item href="#justo" aria-current="page">
-      Justo
-    </AccordionMenu.item>
-    <AccordionMenu.Collapsable title="Proin">
-      <AccordionMenu.item href="#nulla">Nulla</AccordionMenu.item>
-      <AccordionMenu.item href="#luctus">Luctus</AccordionMenu.item>
-    </AccordionMenu.Collapsable>
-  </AccordionMenu.Collapsable>
-</AccordionMenu>
-```
-
-<Canvas>
-  <AccordionMenu>
-    <AccordionMenu.Item href="#leo">Leo</AccordionMenu.Item>
-    <AccordionMenu.Collapsable title="Proin">
-      <AccordionMenu.Item href="#nulla" active>
-        Nulla
-      </AccordionMenu.Item>
-      <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-    </AccordionMenu.Collapsable>
-    <AccordionMenu.Collapsable title="Accumsan">
-      <AccordionMenu.Item href="#justo" aria-current="page">
-        Justo
-      </AccordionMenu.Item>
-      <AccordionMenu.Collapsable title="Proin">
-        <AccordionMenu.Item href="#nulla">Nulla</AccordionMenu.Item>
-        <AccordionMenu.Item href="#luctus">Luctus</AccordionMenu.Item>
-      </AccordionMenu.Collapsable>
-    </AccordionMenu.Collapsable>
-  </AccordionMenu>
-</Canvas>
-
-Accordion-menu støtter opp til maks to-nivårer av `AccordionMenu.Collapsable` akkurat nå.
-
-`AccordionMenu.Item` er implementert med `OverridableComponent`, noe som
-gjør at man kan ta i bruk eks react-router slik:
-
-```jsx
-<AccordionMenu.item
-  as={NavLink}
-  activeClassName="navds-accordion-menu-item--active"
-  to="/1"
->
-  Lenketekst
-</AccordionMenu.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/accordion-menu/stories/accordion-menu.stories.tsx

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

package/src/alert/stories/alert.stories.mdx

@@ -1,96 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Alert, Heading, BodyLong } from "../../index";
-
-<Meta title="ds-react/alert/intro" />
-
-# Hvordan ta i bruk Alert
-
-```jsx
-<Alert variant="info">
-  Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
-  eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud et
-  reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet ad
-  esse.
-</Alert>
-```
-
-<Canvas>
-  <Alert variant="info">
-    Id elit esse enim reprehenderit.Tempor tempor ex exercitation id aute
-    eu.Laborum nulla nisi irure voluptate mollit fugiat.Est quis culpa nostrud
-    et reprehenderit ea sint.Eu veniam labore enim labore qui eiusmod Lorem amet
-    ad esse.
-  </Alert>
-</Canvas>
-
-## Varianter
-
-`variants`-prop kan brukes for å endre utseende mellom
-`info`, `success`, `warning` og `error`.
-
-<Canvas>
-  <Alert variant="info">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="success">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="warning">Id elit esse enim reprehenderit.</Alert>
-  <Alert variant="error">Id elit esse enim reprehenderit.</Alert>
-</Canvas>
-
-## Sizing
-
-Alert har to størrelser: Default 64px height og small 32px height default.
-
-<Canvas>
-  <Alert size="small" variant="info">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="success">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="warning">
-    Id elit esse enim reprehenderit.
-  </Alert>
-  <Alert size="small" variant="error">
-    Id elit esse enim reprehenderit.
-  </Alert>
-</Canvas>
-
-## fullWidth
-
-<Canvas>
-  <div style={{ margin: 32, display: "grid", gap: 16 }}>
-    <Alert fullWidth variant="info">
-      Id elit esse enim reprehenderit.
-    </Alert>
-    <Alert fullWidth size="small" variant="info">
-      Id elit esse enim reprehenderit.
-    </Alert>
-  </div>
-</Canvas>
-
-## Med heading
-
-```jsx
-<Alert variant="info">
-  <Heading spacing size="small" level="2">
-    Aliquip duis est in commodo pariatur
-  </Heading>
-  <BodyLong>
-    Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
-    ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
-    consequat eu aute.
-  </BodyLong>
-</Alert>
-```
-
-<Canvas>
-  <Alert variant="info">
-    <Heading spacing size="small" level="3">
-      Aliquip duis est in commodo pariatur
-    </Heading>
-    <BodyLong>
-      Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui laboris
-      ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat sint commodo
-      consequat eu aute.
-    </BodyLong>
-  </Alert>
-</Canvas>

package/src/button/stories/button.stories.mdx

@@ -1,76 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Button, Loader } from "../../index";
-import { Success } from "@navikt/ds-icons";
-
-<Meta title="ds-react/button/intro" />
-
-# Hvordan ta i bruk Button
-
-```jsx
-<Button>Button</Button>
-```
-
-<Canvas>
-  <Button>Button</Button>
-</Canvas>
-
-## Varianter
-
-`variants`-prop kan brukes for å endre utseende mellom
-`primary`, `secondary`, `tertiary` og `danger`
-
-<Canvas>
-  <Button variant="primary">Primary</Button>
-  <Button variant="secondary">Secondary</Button>
-  <Button variant="tertiary">Tertiary</Button>
-  <Button variant="danger">Danger</Button>
-</Canvas>
-
-## Sizing
-
-Button har to størrelser: Default 48px min-height og small 32px min-height
-
-<Canvas>
-  <Button size="small" variant="primary">
-    Primary
-  </Button>
-  <Button size="small" variant="secondary">
-    Secondary
-  </Button>
-  <Button size="small" variant="tertiary">
-    Tertiary
-  </Button>
-  <Button size="small" variant="danger">
-    Danger
-  </Button>
-</Canvas>
-
-## Loading
-
-Button har en egen `loading`-prop setter knappen til disabled og viser `Loader`.
-Button width bli automatisk justert basert på innholdet sin bredde.
-
-<Canvas>
-  <Button loading variant="primary">
-    Primary
-  </Button>
-  <Button loading variant="secondary">
-    Secondary
-  </Button>
-</Canvas>
-
-## Med ikon
-
-Hvis man setter ikoner (svg) rett på button vil størrelsen
-bli justert automatisk og sentrert.
-
-<Canvas>
-  <Button>
-    <Success /> Knapp <Success />
-  </Button>
-  <Button size="small">
-    <Success />
-    Knapp
-    <Success />
-  </Button>
-</Canvas>