@navikt/ds-react 3.4.2 → 4.1.0

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -0,0 +1,40 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BodyShort, Detail } from "../typography";
+import { OverridableComponent } from "../util/OverridableComponent";
+import InternalHeaderButton from "./InternalHeaderButton";
+
+export interface InternalHeaderUserButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * User name
+   */
+  name: string;
+  /**
+   * User description
+   */
+  description?: string;
+}
+
+export const InternalHeaderUserButton: OverridableComponent<
+  InternalHeaderUserButtonProps,
+  HTMLButtonElement
+> = forwardRef(({ as, name, description, className, ...rest }, ref) => (
+  <InternalHeaderButton
+    {...rest}
+    as={as}
+    ref={ref}
+    className={cl("navds-internalheader__user-button", className)}
+  >
+    <div>
+      <BodyShort size="small" as="div">
+        {name}
+      </BodyShort>
+      {description && <Detail as="div">{description}</Detail>}
+    </div>
+    <ChevronDownIcon title="vis meny" />
+  </InternalHeaderButton>
+));
+
+export default InternalHeaderUserButton;

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

@@ -0,0 +1,225 @@
+import {
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  MenuGridIcon,
+} from "@navikt/aksel-icons";
+import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { InternalHeader, Dropdown } from "..";
+
+export default {
+  title: "ds-react/InternalHeader",
+  component: InternalHeader,
+  argTypes: {
+    user: {
+      control: {
+        type: "radio",
+        options: ["simple", "with description", "with dropdown"],
+      },
+    },
+  },
+} as Meta;
+
+export const Default = {
+  render: (props) => {
+    return (
+      <InternalHeader style={{ width: 600 }}>
+        {props?.titleAsHeading ? (
+          <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
+        ) : (
+          <InternalHeader.Title href="/#home">
+            Tittel med lenke
+          </InternalHeader.Title>
+        )}
+        {props.systemMenu && (
+          <Dropdown>
+            <InternalHeader.Button
+              as={Dropdown.Toggle}
+              style={{ marginLeft: "auto" }}
+            >
+              <MenuGridIcon
+                style={{ fontSize: "1.5rem" }}
+                title="MenuGridIconer og oppslagsverk"
+              />
+            </InternalHeader.Button>
+            <Dropdown.Menu strategy="fixed">
+              <Dropdown.Menu.List>
+                <Dropdown.Menu.List.Item>
+                  <span>A.Inntekt</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item>
+                  <span>Aa-registeret</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item>
+                  <span>Gosys</span>
+                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+                </Dropdown.Menu.List.Item>
+              </Dropdown.Menu.List>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+        {(!props.user || props.user === "simple") && (
+          <InternalHeader.User
+            name="Ola Normann"
+            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
+          />
+        )}
+        {props.user === "with description" && (
+          <InternalHeader.User
+            name="Ola Normann"
+            description="0123456"
+            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
+          />
+        )}
+        {props.user === "with dropdown" && (
+          <Dropdown>
+            <InternalHeader.Button
+              as={Dropdown.Toggle}
+              style={{
+                marginLeft: props.systemMenu ? "none" : "auto",
+                paddingRight: "1.5rem",
+                paddingLeft: "1.5rem",
+                gap: "1rem",
+              }}
+            >
+              <BodyShort title="Ola Normann">KH</BodyShort>
+              <ChevronDownIcon />
+            </InternalHeader.Button>
+            <Dropdown.Menu strategy="fixed">
+              <div>
+                <BodyLong size="small" as="div">
+                  Ola Normann 16px
+                </BodyLong>
+                <Detail size="small" as="div">
+                  <div>Ident nr 14px</div>
+                  <div>Enhet: Skien</div>
+                </Detail>
+              </div>
+              <Dropdown.Menu.Divider />
+              <Dropdown.Menu.List>
+                <Dropdown.Menu.List.Item as="a" href="/#settings">
+                  Innstillinger
+                </Dropdown.Menu.List.Item>
+                <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
+                  Logg ut
+                </Dropdown.Menu.List.Item>
+              </Dropdown.Menu.List>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
+      </InternalHeader>
+    );
+  },
+
+  args: {
+    titleAsHeading: false,
+    systemMenu: false,
+  },
+};
+
+export const TitleAsHeading = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
+  </InternalHeader>
+);
+
+export const TitleAsLink = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+  </InternalHeader>
+);
+
+export const User = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <InternalHeader.User name="Ola Normann" style={{ marginLeft: "auto" }} />
+  </InternalHeader>
+);
+
+export const UserWithDescription = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <InternalHeader.User
+      name="Ola Normann"
+      description="id: 123456"
+      style={{ marginLeft: "auto" }}
+    />
+  </InternalHeader>
+);
+
+export const UserWithMenu = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <Dropdown>
+      <InternalHeader.Button
+        as={Dropdown.Toggle}
+        style={{
+          marginLeft: "auto",
+          paddingRight: "1.5rem",
+          paddingLeft: "1.5rem",
+          gap: "1rem",
+        }}
+      >
+        <BodyShort title="Ola Normann">KH</BodyShort>
+        <ChevronDownIcon />
+      </InternalHeader.Button>
+      <Dropdown.Menu strategy="fixed">
+        <div>
+          <BodyLong size="small" as="div">
+            Ola Normann 16px
+          </BodyLong>
+          <Detail size="small" as="div">
+            <div>Ident nr 14px</div>
+            <div>Enhet: Skien</div>
+          </Detail>
+        </div>
+        <Dropdown.Menu.Divider />
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item as="a" href="/#settings">
+            Innstillinger
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
+            Logg ut
+          </Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+  </InternalHeader>
+);
+
+export const UserWithMenuGridIconMenu = () => (
+  <InternalHeader style={{ width: 600 }}>
+    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+    <Dropdown>
+      <InternalHeader.Button
+        as={Dropdown.Toggle}
+        style={{ marginLeft: "auto" }}
+      >
+        <MenuGridIcon
+          style={{ fontSize: "1.5rem" }}
+          title="MenuGridIconer og oppslagsverk"
+        />
+      </InternalHeader.Button>
+      <Dropdown.Menu strategy="fixed">
+        <Dropdown.Menu.List>
+          <Dropdown.Menu.List.Item>
+            <span>A.Inntekt</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>
+            <span>Aa-registeret</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+          <Dropdown.Menu.List.Item>
+            <span>Gosys</span>
+            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
+          </Dropdown.Menu.List.Item>
+        </Dropdown.Menu.List>
+      </Dropdown.Menu>
+    </Dropdown>
+    <InternalHeader.User name="Ola Normann" description="id: 123456" />
+  </InternalHeader>
+);

package/src/internal-header/index.ts

@@ -0,0 +1,8 @@
+export {
+  default as InternalHeader,
+  type InternalHeaderProps,
+} from "./InternalHeader";
+export { type InternalHeaderButtonProps } from "./InternalHeaderButton";
+export { type InternalHeaderTitleProps } from "./InternalHeaderTitle";
+export { type InternalHeaderUserProps } from "./InternalHeaderUser";
+export { type InternalHeaderUserButtonProps } from "./InternalHeaderUserButton";

package/src/link/Link.tsx

@@ -10,6 +10,19 @@ export interface LinkProps
   children: React.ReactNode;
 }
 
+/**
+ * A component that displays a hyperlink.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/link)
+ * @see 🏷️ {@link LinkProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Link href="#">lenke til ny side</Link>
+ * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
+ * ```
+ */
 export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
   forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
     <Component {...rest} ref={ref} className={cl("navds-link", className)} />

package/src/link-panel/LinkPanel.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef } from "react";
 import { Panel, OverridableComponent } from "..";
 
 import cl from "clsx";
-import { LinkPanelTitle, LinkPanelTitleType } from "./LinkPanelTitle";
+import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 import {
   LinkPanelDescription,
-  LinkPanelDescriptionType,
+  LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 
@@ -24,10 +24,36 @@ export interface LinkPanelProps
 
 interface LinkPanelComponentType
   extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
-  Title: LinkPanelTitleType;
-  Description: LinkPanelDescriptionType;
+  /**
+   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;
+  /**
+   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   */
+  Description: React.ForwardRefExoticComponent<
+    LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
+/**
+ * A component that displays a link panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkpanel)
+ * @see 🏷️ {@link LinkPanelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <LinkPanel href="#" border>
+ *   <LinkPanel.Title>Arbeidssøker eller permittert</LinkPanel.Title>
+ *   <LinkPanel.Description>
+ *     Om jobb, registrering, CV, dagpenger og feriepenger av dagpenger
+ *   </LinkPanel.Description>
+ * </LinkPanel>
+ * ```
+ */
 export const LinkPanelComponent: OverridableComponent<
   LinkPanelProps,
   HTMLAnchorElement

package/src/link-panel/LinkPanelDescription.tsx

@@ -2,22 +2,19 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { BodyLong } from "..";
 
-interface LinkPanelDescriptionProps
+export interface LinkPanelDescriptionProps
   extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-export type LinkPanelDescriptionType = React.ForwardRefExoticComponent<
-  LinkPanelDescriptionProps & React.RefAttributes<HTMLDivElement>
->;
-
-export const LinkPanelDescription: LinkPanelDescriptionType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <BodyLong
-      {...rest}
-      as="div"
-      ref={ref}
-      className={cl("navds-link-panel__description", className)}
-    />
-  )
-);
+export const LinkPanelDescription = forwardRef<
+  HTMLDivElement,
+  LinkPanelDescriptionProps
+>(({ className, ...rest }, ref) => (
+  <BodyLong
+    {...rest}
+    as="div"
+    ref={ref}
+    className={cl("navds-link-panel__description", className)}
+  />
+));

package/src/link-panel/LinkPanelTitle.tsx

@@ -2,26 +2,23 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
 
-interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface LinkPanelTitleProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-export type LinkPanelTitleType = OverridableComponent<
+export const LinkPanelTitle: OverridableComponent<
   LinkPanelTitleProps,
   HTMLDivElement
->;
-
-export const LinkPanelTitle: LinkPanelTitleType = forwardRef(
-  ({ className, as: Component = "div", ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-link-panel__title",
-        "navds-heading",
-        "navds-heading--medium",
-        className
-      )}
-    />
-  )
-);
+> = forwardRef(({ className, as: Component = "div", ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    className={cl(
+      "navds-link-panel__title",
+      "navds-heading",
+      "navds-heading--medium",
+      className
+    )}
+  />
+));

package/src/list/List.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemType } from "./ListItem";
+import { ListItem, ListItemProps } from "./ListItem";
 
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -28,7 +28,12 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface ListComponent
   extends React.ForwardRefExoticComponent<ListProps> {
-  Item: ListItemType;
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   */
+  Item: React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  >;
 }
 
 interface ListContextProps {

package/src/list/ListItem.tsx

@@ -18,12 +18,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   icon?: React.ReactNode;
 }
 
-export interface ListItemType
-  extends React.ForwardRefExoticComponent<
-    ListItemProps & React.RefAttributes<HTMLLIElement>
-  > {}
-
-export const ListItem: ListItemType = forwardRef(
+export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, isNested } = useContext(ListContext);
 

package/src/loader/Loader.tsx

@@ -38,6 +38,17 @@ export type LoaderType = React.ForwardRefExoticComponent<
   LoaderProps & React.RefAttributes<SVGSVGElement>
 >;
 
+/**
+ * A component that displays a loading spinner.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/loader)
+ * @see 🏷️ {@link LoaderProps}
+ *
+ * @example
+ * ```jsx
+ * <Loader size="3xlarge" title="venter..." />
+ * ```
+ */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
   (
     {

package/src/modal/Modal.tsx

@@ -71,6 +71,33 @@ type ModalLifecycle = {
   setAppElement: (element: any) => void;
 };
 
+/**
+ * A component that displays a modal dialog.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/modal)
+ * @see 🏷️ {@link ModalProps}
+ *
+ * @example
+ * ```jsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Modal
+ *   open={open}
+ *   aria-label="Modal demo"
+ *   onClose={() => setOpen((x) => !x)}
+ *   aria-labelledby="modal-heading"
+ * >
+ *   <Modal.Content>
+ *     <Heading spacing level="1" size="large" id="modal-heading">
+ *       Viktig info
+ *     </Heading>
+ *     <BodyLong spacing>
+ *       Hallo!
+ *     </BodyLong>
+ *   </Modal.Content>
+ * </Modal>
+ * ```
+ */
 export const Modal = forwardRef<ReactModal, ModalProps>(
   (
     {

package/src/pagination/Pagination.tsx

@@ -89,6 +89,23 @@ export const getSteps = ({
   ];
 };
 
+/**
+ * A component that displays pagination controls.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/pagination)
+ * @see 🏷️ {@link PaginationProps}
+ *
+ * @example
+ * ```jsx
+ * <Pagination
+ *   page={pageState}
+ *   onPageChange={(x) => setPageState(x)}
+ *   count={9}
+ *   boundaryCount={1}
+ *   siblingCount={1}
+ * />
+ * ```
+ */
 export const Pagination = forwardRef<HTMLElement, PaginationProps>(
   (
     {

package/src/panel/Panel.tsx

@@ -16,6 +16,25 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
+/**
+ * A component that displays a bordered panel with heading and body.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
+ * @see 🏷️ {@link PanelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Panel border>
+ *   <Heading spacing level="2" size="large">
+ *     Søk om økonomisk sosialhjelp
+ *   </Heading>
+ *   <BodyLong>
+ *     Du kan søke om det du trenger økonomisk støtte til.
+ *   </BodyLong>
+ * </Panel>
+ * ```
+ */
 export const Panel: PanelType = forwardRef(
   (
     { children, className, border = false, as: Component = "div", ...rest },

package/src/popover/Popover.tsx

@@ -81,6 +81,26 @@ interface PopoverComponent
   Content: PopoverContentType;
 }
 
+/**
+ * A component that displays a popover.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/popover)
+ * @see 🏷️ {@link PopoverProps}
+ *
+ * @example
+ * ```jsx
+ * <Button ref={buttonRef} onClick={() => setOpenState(true)}>
+ *   Åpne popover
+ * </Button>
+ * <Popover
+ *   open={openState}
+ *   onClose={() => setOpenState(false)}
+ *   anchorEl={buttonRef.current}
+ * >
+ *   <Popover.Content>Innhold her!</Popover.Content>
+ * </Popover>
+ * ```
+ */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {

package/src/provider/Provider.tsx

@@ -23,6 +23,19 @@ export interface ProviderProps {
 
 export const useProvider = () => useContext(ProviderContext);
 
+/**
+ * Provides added context to the component tree.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/provider)
+ * @see 🏷️ {@link ProviderProps}
+ *
+ * @example
+ * ```jsx
+ * <Provider rootElement={rootElement}>
+ *   {app}
+ * </Provider>
+ * ```
+ */
 export const Provider = ({ children, ...rest }: ProviderProps) => {
   return (
     <ProviderContext.Provider value={rest}>{children}</ProviderContext.Provider>

package/src/read-more/ReadMore.tsx

@@ -30,6 +30,23 @@ export interface ReadMoreProps
   size?: "medium" | "small";
 }
 
+/**
+ * ReadMore
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/read-more)
+ * @see 🏷️ {@link ReadMoreProps}
+ *
+ * @example
+ * // Default
+ * <ReadMore header="Dette regnes som helsemessige begrensninger">
+ *  Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ *
+ * @example
+ * // Litt mindre versjon
+ * <ReadMore size="small" header="Dette regnes som helsemessige begrensninger">
+ *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ */
 export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
   (
     {