@navikt/ds-react 0.19.25 → 1.0.0-rc.3

package/src/menu/MenuCollapse.tsx

@@ -1,80 +0,0 @@
-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>
->;
-
-export 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/menu/MenuItem.tsx

@@ -1,39 +0,0 @@
-import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
-import cl from "classnames";
-
-export interface MenuItemProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  children: React.ReactNode;
-  /**
-   * Sets active styling if true
-   * @default false
-   */
-  active?: boolean;
-}
-
-export type MenuItemType = OverridableComponent<
-  MenuItemProps,
-  HTMLAnchorElement
->;
-
-export const Item: MenuItemType = forwardRef(
-  (
-    { children, as: Component = "a", active = false, className, ...rest },
-    ref
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        className={cl("navds-menu-item", className, {
-          "navds-menu-item--active": active,
-        })}
-        {...rest}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-export default Item;

package/src/menu/MenuItems.tsx

@@ -1,21 +0,0 @@
-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

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

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

@@ -1,93 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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/page-header/PageHeader.tsx

@@ -1,72 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
-import { BodyShort, Heading } from "..";
-
-export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * PageHeader title
-   */
-  children: string;
-  /**
-   * Pictogram placed in PageHeader
-   */
-  illustration?: React.ReactNode;
-  /**
-   * Short text placed under title
-   */
-  description?: string;
-  /**
-   * Predefined variants for PageHeader
-   * @default "guide"
-   */
-  variant?: "situation" | "product" | "guide";
-  /**
-   * Decides how to align content
-   * @default "left"
-   */
-  align?: "left" | "center";
-}
-
-const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
-  (
-    {
-      children,
-      className,
-      illustration,
-      description,
-      variant = "guide",
-      align = "left",
-      ...rest
-    },
-    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-page-header",
-          className,
-          `navds-page-header--${variant}`,
-          `navds-page-header--${align}`
-        )}
-        {...rest}
-      >
-        {illustration && (
-          <div className="navds-page-header__illustration">{illustration}</div>
-        )}
-        <div className="navds-page-header__wrapper">
-          <Heading className="navds-page-header__title" size="xlarge" level="1">
-            {children}
-          </Heading>
-          {description && (
-            <BodyShort className="navds-page-header__description">
-              {description}
-            </BodyShort>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-export default PageHeader;

package/src/page-header/index.ts

@@ -1,2 +0,0 @@
-export { default as PageHeader } from "./PageHeader";
-export { PageHeaderProps } from "./PageHeader";

package/src/page-header/stories/header.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { PageHeader } from "../index";
-import { illustrationPictogram } from "./pictogram";
-
-<Meta title="ds-react(deprecated)/page-header/intro" />
-
-# Hvordan ta i bruk PageHeader
-
-Denne PageHeader-komponenten er utviklet i sammenheng med nye produktsider på NAV og
-vil sannsynligvis forgå en del endringer før de er ferdige.
-
-```jsx
-<PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
-  AUTE OFFICIA SINT SUNT FUGIAT
-</PageHeader>
-```
-
-<Canvas>
-  <PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-</Canvas>
-
-## Med illustrasjon
-
-Illustrasjonene brukt i PageHeader er "Pictogram" som er designet for den sepsifikke siden og
-man skal da ikke bare velge et fra figma vilkårlig.
-
-<Canvas>
-  <PageHeader
-    illustration={illustrationPictogram}
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-</Canvas>
-
-## Temaer
-
-Headeren kommer i tre tema: `guide`, `product` og `situation`
-
-<Canvas>
-  <PageHeader
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    variant="guide"
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-  <PageHeader
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    variant="product"
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-  <PageHeader
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    variant="situation"
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-</Canvas>
-
-## Sentrert
-
-Innhold kan sentreres med `align="center"`-prop
-
-<Canvas>
-  <PageHeader
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    align="center"
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-  <PageHeader
-    illustration={illustrationPictogram}
-    description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-    align="center"
-  >
-    AUTE OFFICIA SINT SUNT FUGIAT
-  </PageHeader>
-</Canvas>

package/src/page-header/stories/header.stories.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { PageHeader } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-import { illustrationPictogram } from "./pictogram";
-export default {
-  title: "ds-react(deprecated)/page-header",
-  component: PageHeader,
-} as Meta;
-
-export const All = () => {
-  return (
-    <div>
-      <h2>PageHeader</h2>
-      <PageHeader description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE.">
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <br />
-      <h2>PageHeader m/illustration</h2>
-      <PageHeader
-        illustration={illustrationPictogram}
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <h2>PageHeader center</h2>
-      <PageHeader
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        align="center"
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <h2>PageHeader center m/illustration</h2>
-      <PageHeader
-        illustration={illustrationPictogram}
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        align="center"
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <h2>PageHeader variants</h2>
-      <PageHeader
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        variant="guide"
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <PageHeader
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        variant="product"
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-      <PageHeader
-        description="LABORIS AUTE DESERUNT ID AUTE OFFICIA SINT SUNT FUGIAT EX ET CUPIDATAT CONSEQUAT DOLORE."
-        variant="situation"
-      >
-        AUTE OFFICIA SINT SUNT FUGIAT
-      </PageHeader>
-    </div>
-  );
-};

package/src/page-header/stories/pictogram.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-/* prettier-ignore */
-export const illustrationPictogram = <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M37.6697 60.6469L9 31.9772L30.9772 10L59.6469 38.6697L72.1116 26.205L81 82L25.205 73.1116L37.6697 60.6469Z" fill="#FFECCC"/>
-<path d="M94.5 64.0584C94.5 72.104 88.003 78.6169 80 78.6169C71.997 78.6169 65.5 72.104 65.5 64.0584C65.5 56.0129 71.997 49.5 80 49.5C88.003 49.5 94.5 56.0129 94.5 64.0584Z" stroke="#262626" stroke-width="3"/>
-<path d="M91.9999 95.9999V95.9999C91.9999 89.3725 86.6274 83.9561 79.9999 83.9561V83.9561C73.3725 83.9561 67.9999 89.3725 67.9999 95.9999V95.9999" stroke="#262626" stroke-width="3"/>
-<ellipse cx="76.0001" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
-<ellipse cx="84" cy="63.5566" rx="2" ry="2.00731" fill="#262626"/>
-<path d="M29 29.488V30C29 25.0515 25.866 22 22 22C18.134 22 15 25.0515 15 30V29.488" stroke="#262626" stroke-width="3"/>
-<circle cx="22" cy="15" r="5.5" stroke="#262626" stroke-width="3"/>
-<rect x="1.5" y="1.5" width="41" height="56" stroke="#262626" stroke-width="3"/>
-<path d="M10 37H27" stroke="#262626" stroke-width="3"/>
-<path d="M10 47H18.5" stroke="#262626" stroke-width="3"/>
-</svg>

package/src/speech-bubble/Bubble.tsx

@@ -1,48 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from "react";
-import cl from "classnames";
-
-export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Bubble text
-   */
-  children: React.ReactNode;
-  /**
-   * User defined toptext, normally "name + date"
-   */
-  topText?: React.ReactNode;
-  /**
-   * Background color bubble
-   */
-  backgroundColor?: string;
-}
-
-export type BubbleType = React.ForwardRefExoticComponent<
-  BubbleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Bubble: BubbleType = forwardRef(
-  ({ children, className, topText, backgroundColor, ...rest }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-speechbubble__bubble",
-          className,
-          "navds-body-long"
-        )}
-        style={{ backgroundColor: backgroundColor }}
-        tabIndex={0}
-        {...rest}
-      >
-        {topText && (
-          <span className="navds-speechbubble__top-text navds-detail">
-            {topText}
-          </span>
-        )}
-        {children}
-      </div>
-    );
-  }
-);
-
-export default Bubble;