@navikt/ds-react 3.4.2 → 4.1.0

package/src/expansion-card/ExpansionCardContent.tsx

@@ -8,36 +8,33 @@ export interface ExpansionCardContentProps
   children: React.ReactNode;
 }
 
-export type ExpansionCardContentType = React.ForwardRefExoticComponent<
-  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardContent = forwardRef<
+  HTMLDivElement,
+  ExpansionCardContentProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-const ExpansionCardContent: ExpansionCardContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        ref={ref}
-        as="div"
-        className={cl("navds-expansioncard__content", className, {
-          "navds-expansioncard__content--closed": !panelContext.open,
-        })}
-        aria-hidden={!panelContext.open}
-        size={panelContext.size}
-      >
-        <div className="navds-expansioncard__content-inner">{children}</div>
-      </BodyLong>
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
     );
+    return null;
   }
-);
+
+  return (
+    <BodyLong
+      {...rest}
+      ref={ref}
+      as="div"
+      className={cl("navds-expansioncard__content", className, {
+        "navds-expansioncard__content--closed": !panelContext.open,
+      })}
+      aria-hidden={!panelContext.open}
+      size={panelContext.size}
+    >
+      <div className="navds-expansioncard__content-inner">{children}</div>
+    </BodyLong>
+  );
+});
 
 export default ExpansionCardContent;

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -3,33 +3,31 @@ import cl from "clsx";
 import { BodyLong } from "../typography/BodyLong";
 import { ExpansionCardContext } from "./ExpansionCard";
 
-interface ExpansionCardDescriptionProps
+export interface ExpansionCardDescriptionProps
   extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
 }
 
-export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
-  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
->;
+export const ExpansionCardDescription = forwardRef<
+  HTMLParagraphElement,
+  ExpansionCardDescriptionProps
+>(({ className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-export const ExpansionCardDescription: ExpansionCardDescriptionType =
-  forwardRef(({ className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="p"
-        ref={ref}
-        className={cl("navds-link-panel__description", className)}
-        size={panelContext.size}
-      />
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
     );
-  });
+    return null;
+  }
+
+  return (
+    <BodyLong
+      {...rest}
+      as="p"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+      size={panelContext.size}
+    />
+  );
+});

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -8,43 +8,40 @@ export interface ExpansionCardHeaderProps
   children: React.ReactNode;
 }
 
-export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
-  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardHeader = forwardRef<
+  HTMLDivElement,
+  ExpansionCardHeaderProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+    );
+    return null;
+  }
 
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={cl("navds-expansioncard__header", className)}
+    >
+      <div className="navds-expansioncard__header-content">{children}</div>
 
-    return (
-      <div
-        ref={ref}
-        {...rest}
-        className={cl("navds-expansioncard__header", className)}
+      <button
+        className="navds-expansioncard__header-button"
+        onClick={() => panelContext.toggleOpen()}
+        type="button"
+        aria-expanded={panelContext.open}
       >
-        <div className="navds-expansioncard__header-content">{children}</div>
-
-        <button
-          className="navds-expansioncard__header-button"
-          onClick={() => panelContext.toggleOpen()}
-          type="button"
-          aria-expanded={panelContext.open}
-        >
-          <ChevronDownIcon
-            className="navds-expansioncard__header-chevron"
-            title="Vis mer"
-          />
-        </button>
-      </div>
-    );
-  }
-);
+        <ChevronDownIcon
+          className="navds-expansioncard__header-chevron"
+          title="Vis mer"
+        />
+      </button>
+    </div>
+  );
+});
 
 export default ExpansionCardHeader;

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
 
-interface ExpansionCardTitleProps
+export interface ExpansionCardTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   /**
@@ -12,12 +12,10 @@ interface ExpansionCardTitleProps
   size?: "large" | "medium" | "small";
 }
 
-export type ExpansionCardTitleType = OverridableComponent<
+export const ExpansionCardTitle: OverridableComponent<
   ExpansionCardTitleProps,
   HTMLHeadingElement
->;
-
-export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+> = forwardRef(
   ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
     <Component
       {...rest}

package/src/form/ConfirmationPanel.tsx

@@ -26,6 +26,24 @@ export interface ConfirmationPanelProps
   errorId?: string;
 }
 
+/**
+ * A component that displays a confirmation checkbox with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/confirmationpanel)
+ * @see 🏷️ {@link ConfirmationPanelProps}
+ *
+ * @example
+ * ```jsx
+      <ConfirmationPanel
+        checked={state}
+        label="Ja, jeg samtykker."
+        onChange={() => setState((x) => !x)}
+      >
+        For å komme videre må du gi oss lov til å hente inn og bruke opplysninger
+        om deg.
+      </ConfirmationPanel>
+ * ```
+ */
 export const ConfirmationPanel = forwardRef<
   HTMLInputElement,
   ConfirmationPanelProps

package/src/form/Select.tsx

@@ -30,6 +30,22 @@ export interface SelectProps
   style?: React.CSSProperties;
 }
 
+/**
+ * A component that displays a select input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/select)
+ * @see 🏷️ {@link SelectProps}
+ *
+ * @example
+ * ```jsx
+ * <Select label="Hvilket land har du bosted i.">
+ *   <option value="">Velg land</option>
+ *   <option value="norge">Norge</option>
+ *   <option value="sverige">Sverige</option>
+ *   <option value="danmark">Danmark</option>
+ * </Select>
+ * ```
+ */
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
     const {

package/src/form/Switch.tsx

@@ -55,6 +55,17 @@ export interface SwitchProps
   description?: string;
 }
 
+/**
+ * A component that displays a switch input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
+ * @see 🏷️ {@link SwitchProps}
+ *
+ * @example
+ * ```jsx
+ * <Switch>Slå på notifikasjoner</Switch>
+ * ```
+ */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   (props, ref) => {
     const { inputProps, size } = useFormField(props, "switch");

package/src/form/TextField.tsx

@@ -33,6 +33,17 @@ export interface TextFieldProps
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
+/**
+ * A component that displays a text input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textfield)
+ * @see 🏷️ {@link TextFieldProps}
+ *
+ * @example
+ * ```jsx
+ * <TextField label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (props, ref) => {
     const {

package/src/form/Textarea.tsx

@@ -55,6 +55,17 @@ export interface TextareaProps
   };
 }
 
+/**
+ * A component that displays a textarea input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textarea)
+ * @see 🏷️ {@link TextareaProps}
+ *
+ * @example
+ * ```jsx
+ * <Textarea label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {

package/src/form/checkbox/CheckboxGroup.tsx

@@ -35,6 +35,21 @@ export interface CheckboxGroupProps
   onChange?: (value: any[]) => void;
 }
 
+/**
+ * A component that allows users to select one or more options from a list.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/checkbox)
+ * @see 🏷️ {@link CheckboxProps}
+ *
+ * @example
+ * ```jsx
+ * <CheckboxGroup legend="Hvor vil du sitte?">
+ *   <Checkbox value="Bakerst">Bakerst</Checkbox>
+ *   <Checkbox value="Midterst">Midterst</Checkbox>
+ *   <Checkbox value="Fremst">Fremst</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
 export const CheckboxGroup = forwardRef<
   HTMLFieldSetElement,
   CheckboxGroupProps

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

@@ -45,6 +45,16 @@ export interface RadioGroupProps
   required?: boolean;
 }
 
+/**
+ * Form radio group
+ * @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>
+ *    <Radio value="Nei">Nei</Radio>
+ * </RadioGroup>
+ */
 export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
   (
     {

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

@@ -5,11 +5,13 @@ export * from "./chat";
 export * from "./chips";
 export * from "./copybutton";
 export * from "./date";
+export * from "./dropdown";
 export * from "./expansion-card";
 export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";
+export * from "./internal-header";
 export * from "./link";
 export * from "./link-panel";
 export * from "./list";
@@ -20,10 +22,12 @@ 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";
 export * from "./tag";
+export * from "./timeline";
 export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";

package/src/internal-header/InternalHeader.tsx

@@ -0,0 +1,93 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
+import InternalHeaderButton, {
+  InternalHeaderButtonProps,
+} from "./InternalHeaderButton";
+import InternalHeaderTitle, {
+  InternalHeaderTitleProps,
+} from "./InternalHeaderTitle";
+import InternalHeaderUser, {
+  InternalHeaderUserProps,
+} from "./InternalHeaderUser";
+import InternalHeaderUserButton, {
+  InternalHeaderUserButtonProps,
+} from "./InternalHeaderUserButton";
+
+export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+interface InternalHeaderComponent
+  extends React.ForwardRefExoticComponent<
+    InternalHeaderProps & React.RefAttributes<HTMLElement>
+  > {
+  /**
+   * @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"
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader", className)}
+  />
+)) as InternalHeaderComponent;
+
+InternalHeader.Title = InternalHeaderTitle;
+InternalHeader.User = InternalHeaderUser;
+InternalHeader.Button = InternalHeaderButton;
+InternalHeader.UserButton = InternalHeaderUserButton;
+
+export default InternalHeader;

package/src/internal-header/InternalHeaderButton.tsx

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface InternalHeaderButtonProps
+  extends React.AnchorHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Application Button
+   */
+  children: React.ReactNode;
+}
+export const InternalHeaderButton: OverridableComponent<
+  InternalHeaderButtonProps,
+  HTMLButtonElement
+> = 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

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+export interface InternalHeaderTitleProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Application title
+   */
+  children: React.ReactNode;
+}
+
+export const InternalHeaderTitle: OverridableComponent<
+  InternalHeaderTitleProps,
+  HTMLAnchorElement
+> = 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

@@ -0,0 +1,35 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import { BodyShort, Detail } from "../typography";
+
+export interface InternalHeaderUserProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * User name
+   */
+  name: string;
+  /**
+   * User description
+   */
+  description?: string;
+}
+
+export const InternalHeaderUser = forwardRef<
+  HTMLDivElement,
+  InternalHeaderUserProps
+>(({ className, name, description, ...rest }, ref) => (
+  <div
+    {...rest}
+    ref={ref}
+    className={cl("navds-internalheader__user", className)}
+  >
+    <span>
+      <BodyShort size="small" as="div">
+        {name}
+      </BodyShort>
+      {description && <Detail as="div">{description}</Detail>}
+    </span>
+  </div>
+));
+
+export default InternalHeaderUser;