@navikt/ds-react 7.28.0 → 7.29.0

package/src/form/useFormField.ts

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { useContext } from "react";
+import { ReadMore } from "../read-more/ReadMore";
 import { useId } from "../util/hooks";
 import { FieldsetContext } from "./fieldset/context";
 
@@ -84,7 +85,7 @@ export const useFormField = (
       "Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:",
     );
     console.warn(
-      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#h3bfe00453471",
+      "https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#dc7a536235fa",
     );
   }
 
@@ -101,12 +102,29 @@ export const useFormField = (
       "aria-describedby":
         cl(props["aria-describedby"], {
           [inputDescriptionId]:
-            !!props?.description && typeof props?.description === "string",
+            props.description && !containsReadMore(props.description),
           [errorId]: showErrorMsg,
-          [fieldset?.errorId ?? ""]: hasError && !!fieldset?.error,
+          [fieldset?.errorId ?? ""]: hasError && fieldset?.error,
         }) || undefined,
 
       disabled,
     },
   };
 };
+
+export function containsReadMore(
+  children: React.ReactNode,
+  checkNested = true,
+): boolean {
+  if (React.isValidElement(children)) {
+    if (children.type === ReadMore) {
+      return true;
+    }
+    if (children.props.children && checkNested) {
+      return containsReadMore(children.props.children, false);
+    }
+  } else if (Array.isArray(children)) {
+    return children.some((child) => containsReadMore(child, checkNested));
+  }
+  return false;
+}

package/src/index.ts

@@ -58,6 +58,7 @@ export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
 export { Popover, type PopoverProps } from "./popover";
 export { Portal, type PortalProps } from "./portal";
+export { Process, type ProcessProps } from "./process";
 export { ProgressBar, type ProgressBarProps } from "./progress-bar";
 export { Provider, type ProviderProps } from "./provider";
 export { ReadMore, type ReadMoreProps } from "./read-more";

package/src/layout/box/Box.tsx

@@ -173,7 +173,8 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
               "navds-box-bg": background,
               "navds-box-border-color": borderColor,
               "navds-box-border-width": borderWidth,
-              "navds-box-border-radius": borderRadius,
+              "navds-box-border-radius": borderRadius && !themeContext,
+              "navds-box-radius": borderRadius && themeContext,
               "navds-box-shadow": shadow,
             })}
           >

package/src/link-card/LinkCard.tsx

@@ -15,6 +15,11 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    * @default true
    */
   arrow?: boolean;
+  /**
+   * Adjusts arrow position.
+   * @default "baseline"
+   */
+  arrowPosition?: "baseline" | "center";
   /**
    * Changes padding and typo sizes.
    * @default "medium"
@@ -24,7 +29,6 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
 
 type LinkCardContextProps = {
   size: LinkCardProps["size"];
-  arrow: LinkCardProps["arrow"];
 };
 
 const [LinkCardContextProvider, useLinkCardContext] =
@@ -93,6 +97,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
       children,
       className,
       arrow = true,
+      arrowPosition = "baseline",
       size = "medium",
       ...restProps
     }: LinkCardProps,
@@ -101,7 +106,7 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
     const { cn } = useRenameCSS();
 
     return (
-      <LinkCardContextProvider size={size} arrow={arrow}>
+      <LinkCardContextProvider size={size}>
         <LinkAnchorOverlay asChild>
           <BodyLong
             as="div"
@@ -113,9 +118,16 @@ export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
               className,
               `navds-link-card--${size}`,
             )}
+            data-align-arrow={arrowPosition}
             {...restProps}
           >
             {children}
+            {arrow && (
+              <LinkAnchorArrow
+                fontSize={size === "medium" ? "1.75rem" : "1.5rem"}
+                className={cn("navds-link-card__arrow")}
+              />
+            )}
           </BodyLong>
         </LinkAnchorOverlay>
       </LinkCardContextProvider>
@@ -155,11 +167,6 @@ export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
         {...restProps}
       >
         {children}
-        {context.arrow && (
-          <LinkAnchorArrow
-            fontSize={context.size === "medium" ? "1.75rem" : "1.5rem"}
-          />
-        )}
       </Heading>
     );
   },

package/src/process/Process.tsx

@@ -0,0 +1,358 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useRenameCSS } from "../theme/Theme";
+import { BodyLong, BodyShort, Heading } from "../typography";
+import { useId } from "../util";
+import { createContext } from "../util/create-context";
+import { useMergeRefs } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.hooks";
+
+interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
+  /**
+   * `<Process.Event />` elements.
+   */
+  children: React.ReactElement<typeof ProcessEvent>[];
+  /**
+   * Hides the "aktiv"-text when the event is active.
+   * @default false
+   */
+  hideStatusText?: boolean;
+}
+
+type ProcessContextProps = Pick<ProcessProps, "hideStatusText"> & {
+  rootId: string;
+  syncAriaControls: () => void;
+};
+
+const [ProcessContextProvider, useProcessContext] =
+  createContext<ProcessContextProps>({
+    providerName: "ProcessContextProvider",
+    hookName: "useProcessContext",
+    name: "ProcessContext",
+    errorMessage:
+      "`<Process.Event />` must be used within a `<Process />` component.",
+  });
+
+interface ProcessComponent
+  extends React.ForwardRefExoticComponent<
+    ProcessProps & React.RefAttributes<HTMLOListElement>
+  > {
+  /**
+   * @see 🏷️ {@link ProcessEventProps}
+   */
+  Event: typeof ProcessEvent;
+}
+
+/**
+ * A component that presents a Process as a vertical line of events.
+ * Each event can contain information, actions, links or status indicators.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/process)
+ * @see 🏷️ {@link ProcessProps}
+ *
+ * @example
+ * ```jsx
+ * <>
+ *   <Heading size="medium" spacing level="2" id="Process-heading">
+ *     Søknadssteg
+ *   </Heading>
+ *   <Process
+ *     aria-labelledby="Process-heading"
+ *     activeStep={activeStep}
+ *   >
+ *     <Process.Event title="Start søknad" timestamp="21. august 2025" />
+ *     <Process.Event
+ *       title="Saksopplysninger"
+ *       timestamp="22. august 2025"
+ *       icon={<PaperclipIcon />}
+ *     >
+ *       Saksopplysninger er sendt inn
+ *     </Process.Event>
+ *     <Process.Event
+ *       title="Vedlegg"
+ *       timestamp="25. august 2025"
+ *     >
+ *       <h3> Vedlegg er lastet opp </h3>
+ *       <p>
+ *         Dokumentasjon av saksopplysninger er lastet opp og tilgjengelig for
+ *         saksbehandler.
+ *       </p>
+ *     </Process.Event>
+ *     <Process.Event title="Vedtak" timestamp="8. september 2025">
+ *       Det er gjort endelig vedtak i saken
+ *     </Process.Event>
+ *   </Process>
+ * </>
+ * ```
+ */
+export const Process: ProcessComponent = forwardRef<
+  HTMLOListElement,
+  ProcessProps
+>(
+  (
+    {
+      children,
+      className,
+      hideStatusText = false,
+      id,
+      ...restProps
+    }: ProcessProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    const rootId = useId(id);
+
+    const rootRef = useRef<HTMLOListElement>(null);
+    const mergedRef = useMergeRefs(forwardedRef, rootRef);
+
+    const [activeChildId, setActiveChildId] = useState<string | undefined>(
+      undefined,
+    );
+
+    const syncAriaControls = useCallback(() => {
+      const activeChildren = rootRef.current?.querySelectorAll(
+        '[data-process-event][aria-current="true"]',
+      );
+
+      if (!activeChildren) {
+        setActiveChildId(undefined);
+        return;
+      }
+
+      if (activeChildren.length > 1) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(
+            "Aksel: Found multiple `<Process.Event />` elements with `status='active'`. Only one event should be active at a time.",
+            rootRef.current,
+          );
+        }
+        setActiveChildId(undefined);
+        return;
+      }
+
+      if (activeChildren.length === 1) {
+        const lastActiveChild = activeChildren[activeChildren.length - 1];
+        setActiveChildId(lastActiveChild.id);
+      } else {
+        setActiveChildId(undefined);
+      }
+    }, []);
+
+    return (
+      // `<ol />` elements with `list-style: none;` tends to be ignored by voiceover on Safari.
+      // To resolve this, we add `role="list"` to the `<ol />` element.
+      // eslint-disable-next-line jsx-a11y/no-redundant-roles
+      <ol
+        ref={mergedRef}
+        data-color="info"
+        // biome-ignore lint/a11y/noRedundantRoles: See comment above
+        role="list"
+        {...restProps}
+        className={cn("navds-process", className)}
+        id={rootId}
+        aria-controls={activeChildId}
+      >
+        <ProcessContextProvider
+          hideStatusText={hideStatusText}
+          rootId={rootId}
+          syncAriaControls={syncAriaControls}
+        >
+          {children}
+        </ProcessContextProvider>
+      </ol>
+    );
+  },
+) as ProcessComponent;
+
+/* ------------------------------ Process Event ------------------------------ */
+interface ProcessEventProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Rich content to display under the title and timestamp if provided.
+   */
+  children?: React.ReactNode;
+  /**
+   * Hide the content section of the event.
+   */
+  hideContent?: boolean;
+  /**
+   * Step title.
+   */
+  title?: string;
+  /**
+   * Timestamp or date to display for event.
+   */
+  timestamp?: string;
+  /**
+   * Icon or number to display inside the bullet.
+   */
+  bullet?: React.ReactNode;
+  /**
+   * Current event status.
+   * @default "uncompleted"
+   */
+  status?: "active" | "completed" | "uncompleted";
+}
+
+export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
+  (
+    {
+      title,
+      timestamp,
+      children,
+      bullet,
+      hideContent,
+      className,
+      id,
+      status = "uncompleted",
+      ...restProps
+    }: ProcessEventProps,
+    forwardedRef,
+  ) => {
+    const translate = useI18n("Process");
+    const { cn } = useRenameCSS();
+    const eventId = useId();
+    const { syncAriaControls, hideStatusText, rootId } = useProcessContext();
+
+    // syncAriaControls is already memoized with useCallback
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this only when status changes
+    useEffect(syncAriaControls, [status]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const isActive = status === "active";
+
+    return (
+      <li
+        ref={forwardedRef}
+        aria-current={isActive}
+        id={id ?? eventId}
+        {...restProps}
+        aria-controls={isActive ? rootId : undefined}
+        className={cn("navds-process__event", className)}
+        data-dot={bullet === undefined}
+        data-process-event=""
+        data-status={status}
+      >
+        <div className={cn("navds-process__item")}>
+          <ProcessBullet>{bullet}</ProcessBullet>
+
+          <div className={cn("navds-process__body")}>
+            {title && <ProcessTitle>{title}</ProcessTitle>}
+            {isActive && !hideStatusText && (
+              <BodyShort
+                size="small"
+                className={cn("navds-process__active-label")}
+              >
+                {translate("active")}
+              </BodyShort>
+            )}
+            {timestamp && <ProcessTimestamp>{timestamp}</ProcessTimestamp>}
+            {!hideContent && !!children && (
+              <ProcessContent>{children}</ProcessContent>
+            )}
+          </div>
+        </div>
+        <ProcessLine />
+      </li>
+    );
+  },
+);
+
+/* ------------------------------ Process Title ----------------------------- */
+interface ProcessTitleProps {
+  /**
+   * Title content.
+   */
+  children: React.ReactNode;
+}
+
+const ProcessTitle = ({ children }: ProcessTitleProps) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <Heading size="small" as="div" className={cn("navds-process__title")}>
+      {children}
+    </Heading>
+  );
+};
+
+/* ---------------------------- Process timestamp --------------------------- */
+interface ProcessTimestampProps {
+  /**
+   * Timestamp content.
+   */
+  children: React.ReactNode;
+}
+
+const ProcessTimestamp = ({ children }: ProcessTimestampProps) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <BodyShort
+      spacing
+      as="div"
+      size="small"
+      textColor="subtle"
+      className={cn("navds-process__timestamp")}
+    >
+      {children}
+    </BodyShort>
+  );
+};
+
+/* ----------------------------- Process Content ---------------------------- */
+interface ProcessContentProps {
+  /**
+   * Content content.
+   */
+  children: React.ReactNode;
+}
+
+const ProcessContent = ({ children }: ProcessContentProps) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <BodyLong as="div" className={cn("navds-process__content")}>
+      {children}
+    </BodyLong>
+  );
+};
+
+/* ----------------------------- Process Bullet ----------------------------- */
+interface ProcessBulletProps {
+  /**
+   * Bullet content.
+   */
+  children: React.ReactNode;
+}
+
+const ProcessBullet = ({ children }: ProcessBulletProps) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <BodyShort
+      as="span"
+      weight="semibold"
+      className={cn("navds-process__bullet")}
+      aria-hidden
+    >
+      {children}
+    </BodyShort>
+  );
+};
+
+/* ------------------------------ Process Line ------------------------------ */
+const ProcessLine = () => {
+  const { cn } = useRenameCSS();
+
+  return <span className={cn("navds-process__line")} />;
+};
+
+/* -------------------------- Process exports ------------------------- */
+Process.Event = ProcessEvent;
+
+export type { ProcessEventProps, ProcessProps };

package/src/process/index.ts

@@ -0,0 +1,7 @@
+"use client";
+export {
+  Process,
+  type ProcessProps,
+  ProcessEvent,
+  type ProcessEventProps,
+} from "./Process";

package/src/stepper/Stepper.tsx

@@ -27,6 +27,7 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   onStepChange?: (step: number) => void;
   /**
    * Makes stepper non-interactive if false.
+   * @deprecated Use `interactive` prop on `<Stepper.Step />` instead for individual steps. For completely static steppers, use `Process` component instead.
    * @default true
    */
   interactive?: boolean;

package/src/toggle-group/ToggleGroup.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { AkselColor } from "../types";
@@ -48,7 +47,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       label,
       value,
       defaultValue,
-      "aria-describedby": userDescribedby,
       variant,
       fill = false,
       "data-color": color,
@@ -103,6 +101,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
           >
             {label && (
               <Label
+                as="div"
                 size={size}
                 className={cn("navds-toggle-group__label")}
                 id={labelId}
@@ -111,6 +110,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               </Label>
             )}
             <div
+              aria-labelledby={label ? labelId : undefined}
               {...rest}
               ref={ref}
               className={cn(
@@ -118,9 +118,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
                 `navds-toggle-group--${size}`,
                 { [`navds-toggle-group--${localVariant}`]: localVariant },
               )}
-              aria-describedby={
-                cl(userDescribedby, !!label && labelId) || undefined
-              }
               role="radiogroup"
             >
               {children}

package/src/util/i18n/locales/en.ts

@@ -93,6 +93,9 @@ export default {
     previous: "Previous",
     next: "Next",
   },
+  Process: {
+    active: "Active",
+  },
   ProgressBar: {
     progress: "{current} of {max}",
     progressUnknown:

package/src/util/i18n/locales/nb.ts

@@ -99,6 +99,9 @@ export default {
     previous: "Forrige",
     next: "Neste",
   },
+  Process: {
+    active: "Aktiv",
+  },
   ProgressBar: {
     progress: "{current} av {max}",
     progressUnknown:

package/src/util/i18n/locales/nn.ts

@@ -93,6 +93,9 @@ export default {
     previous: "Førre",
     next: "Neste",
   },
+  Process: {
+    active: "Aktiv",
+  },
   ProgressBar: {
     progress: "{current} av {max}",
     progressUnknown:

package/src/util/renderStoriesForChromatic.tsx

@@ -0,0 +1,24 @@
+import { Args } from "@storybook/react";
+import React from "react";
+import { Renderer, StoryContext } from "storybook/internal/types";
+
+export function renderStoriesForChromatic(
+  stories: Record<
+    string,
+    | { render?: (...args: any[]) => React.ReactNode }
+    | React.FunctionComponent<void>
+  >,
+) {
+  return {
+    render: (...args: [Args, StoryContext<Renderer, Args>]) =>
+      Object.entries(stories).map(([storyName, story]) => (
+        <div key={storyName}>
+          <h2 className="storyheading">{storyName}</h2>
+          {typeof story === "function" ? story() : story.render?.(...args)}
+        </div>
+      )),
+    parameters: {
+      chromatic: { disable: false },
+    },
+  };
+}