@navikt/ds-react 7.28.1 → 7.29.0

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: