@navikt/ds-react 4.0.0 → 4.1.0

package/src/form/error-summary/ErrorSummary.tsx

@@ -32,6 +32,24 @@ interface ErrorSummaryComponent
   Item: ErrorSummaryItemType;
 }
 
+/**
+ * A component that displays a summary of errors.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
+ * @see 🏷️ {@link ErrorSummaryProps}
+ *
+ * @example
+ * ```jsx
+ * <ErrorSummary heading="Du må fikse disse feilene før du kan sende inn søknad.">
+ *   <ErrorSummary.Item href="#1">
+ *     Felt må fylles ut med alder
+ *   </ErrorSummary.Item>
+ *   <ErrorSummary.Item href="#2">
+ *     Tekstfeltet må ha en godkjent e-mail
+ *   </ErrorSummary.Item>
+ * </ErrorSummary>
+ * ```
+ */
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {

package/src/form/radio/RadioGroup.tsx

@@ -47,8 +47,8 @@ export interface RadioGroupProps
 
 /**
  * Form radio group
- * @see https://aksel.nav.no/komponenter/core/radio
- * @see {@link RadioGroupProps}
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/radio)
+ * @see 🏷️ {@link RadioGroupProps}
  * @example
  * <RadioGroup legend="Får du AAP nå?">
  *    <Radio value="ja">Ja</Radio>

package/src/form/search/Search.tsx

@@ -91,6 +91,19 @@ export const SearchContext = React.createContext<SearchContextProps | null>(
   null
 );
 
+/**
+ * A component that displays a search input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/search)
+ * @see 🏷️ {@link SearchProps}
+ *
+ * @example
+ * ```jsx
+ * <form>
+ *   <Search label="Søk alle NAV sine sider" variant="primary" />
+ * </form>
+ * ```
+ */
 export const Search = forwardRef<HTMLInputElement, SearchProps>(
   (props, ref) => {
     const {

package/src/guide-panel/GuidePanel.tsx

@@ -18,6 +18,21 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
   poster?: boolean;
 }
 
+/**
+ * A component that displays a guide panel.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/guidepanel)
+ * @see 🏷️ {@link GuidePanelProps}
+ *
+ * @example
+ * ```jsx
+ * <GuidePanel>
+ *   Saksbehandlingstiden varierer fra kommune til kommune. Hvis det går mer
+ *   enn X måneder siden du søkte, skal du få brev om at saksbehandlingstiden
+ *   er forlenget.
+ * </GuidePanel>
+ * ```
+ */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   (
     { children, className, illustration, poster = false, color, ...rest },

package/src/help-text/HelpText.tsx

@@ -31,6 +31,19 @@ export interface HelpTextProps
     | "left-end";
 }
 
+/**
+ * A component that displays a help text button with a popover.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/helptext)
+ * @see 🏷️ {@link HelpTextProps}
+ *
+ * @example
+ * ```jsx
+ * <HelpText title="Hvor kommer dette fra?">
+ *   Informasjonen er hentet fra X sin statistikk fra 2021
+ * </HelpText>
+ * ```
+ */
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   (
     {

package/src/index.ts

@@ -22,6 +22,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./provider";
 export * from "./read-more";
+export * from "./skeleton";
 export * from "./stepper";
 export * from "./table";
 export * from "./tabs";

package/src/internal-header/InternalHeader.tsx

@@ -1,17 +1,18 @@
+import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
+import InternalHeaderButton, {
+  InternalHeaderButtonProps,
+} from "./InternalHeaderButton";
 import InternalHeaderTitle, {
-  InternalHeaderTitleType,
+  InternalHeaderTitleProps,
 } from "./InternalHeaderTitle";
 import InternalHeaderUser, {
-  InternalHeaderUserType,
+  InternalHeaderUserProps,
 } from "./InternalHeaderUser";
-import InternalHeaderButton, {
-  InternalHeaderButtonType,
-} from "./InternalHeaderButton";
 import InternalHeaderUserButton, {
-  InternalHeaderUserButtonType,
+  InternalHeaderUserButtonProps,
 } from "./InternalHeaderUserButton";
-import cl from "clsx";
 
 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
@@ -21,12 +22,60 @@ interface InternalHeaderComponent
   extends React.ForwardRefExoticComponent<
     InternalHeaderProps & React.RefAttributes<HTMLElement>
   > {
-  Title: InternalHeaderTitleType;
-  User: InternalHeaderUserType;
-  Button: InternalHeaderButtonType;
-  UserButton: InternalHeaderUserButtonType;
+  /**
+   * @see 🏷️ {@link InternalHeaderTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<InternalHeaderTitleProps, HTMLAnchorElement>;
+  /**
+   * @see 🏷️ {@link InternalHeaderUserProps}
+   */
+  User: React.ForwardRefExoticComponent<
+    InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link InternalHeaderButtonProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Button: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
+  /**
+   * @see 🏷️ {@link InternalHeaderUserButtonProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  UserButton: OverridableComponent<
+    InternalHeaderUserButtonProps,
+    HTMLButtonElement
+  >;
 }
 
+/**
+ * Simple Header for internal pages and systems.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/i-header)
+ * @see 🏷️ {@link InternalHeaderProps}
+ *
+ * @example
+ * ```jsx
+ * <InternalHeader>
+ *   <InternalHeader.Title as="h1">Sykepenger</InternalHeader.Title>
+ *   <InternalHeader.User name="Ola Normann" className="ml-auto" />
+ * </InternalHeader>
+ * ```
+ * @example
+ * ```jsx
+ * <InternalHeader >
+ *  <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
+ *  <Dropdown>
+ *    <InternalHeader.Button
+ *      as={Dropdown.Toggle}
+ *    >
+ *      <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
+ *    </InternalHeader.Button>
+ *    <Dropdown.Menu />
+ *  </Dropdown>
+ * </InternalHeader>
+ * ```
+ */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => (
   <header
     data-theme="dark"

package/src/internal-header/InternalHeaderButton.tsx

@@ -9,20 +9,15 @@ export interface InternalHeaderButtonProps
    */
   children: React.ReactNode;
 }
-
-export type InternalHeaderButtonType = OverridableComponent<
+export const InternalHeaderButton: OverridableComponent<
   InternalHeaderButtonProps,
   HTMLButtonElement
->;
-
-export const InternalHeaderButton: InternalHeaderButtonType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl("navds-internalheader__button", className)}
-    />
-  )
-);
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader__button", className)}
+  />
+));
 
 export default InternalHeaderButton;

package/src/internal-header/InternalHeaderTitle.tsx

@@ -10,26 +10,18 @@ export interface InternalHeaderTitleProps
   children: React.ReactNode;
 }
 
-export type InternalHeaderTitleType = OverridableComponent<
+export const InternalHeaderTitle: OverridableComponent<
   InternalHeaderTitleProps,
   HTMLAnchorElement
->;
-
-export const InternalHeaderTitle: InternalHeaderTitleType = forwardRef(
-  ({ as: Component = "a", children, className, ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      size="xsmall"
-      className={cl(
-        "navds-internalheader__title",
-        "navds-body-short",
-        className
-      )}
-    >
-      <span>{children}</span>
-    </Component>
-  )
-);
+> = forwardRef(({ as: Component = "a", children, className, ...rest }, ref) => (
+  <Component
+    {...rest}
+    ref={ref}
+    size="xsmall"
+    className={cl("navds-internalheader__title", "navds-body-short", className)}
+  >
+    <span>{children}</span>
+  </Component>
+));
 
 export default InternalHeaderTitle;

package/src/internal-header/InternalHeaderUser.tsx

@@ -14,10 +14,6 @@ export interface InternalHeaderUserProps
   description?: string;
 }
 
-export type InternalHeaderUserType = React.ForwardRefExoticComponent<
-  InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
->;
-
 export const InternalHeaderUser = forwardRef<
   HTMLDivElement,
   InternalHeaderUserProps

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -17,27 +17,24 @@ export interface InternalHeaderUserButtonProps
   description?: string;
 }
 
-export type InternalHeaderUserButtonType = OverridableComponent<
+export const InternalHeaderUserButton: OverridableComponent<
   InternalHeaderUserButtonProps,
   HTMLButtonElement
->;
-
-export const InternalHeaderUserButton: InternalHeaderUserButtonType =
-  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>
-  ));
+> = 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/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>