@navikt/ds-react 7.29.0 → 7.30.0

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from "react";
+import { PencilIcon } from "@navikt/aksel-icons";
 import { Link } from "../../link";
 import { useRenameCSS } from "../../theme/Theme";
+import { CompositionWarning } from "../../util/composition-warning";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
@@ -24,17 +26,24 @@ export const FormSummaryEditLink: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(({ children, className, as = "a", ...rest }, ref) => {
   const { cn } = useRenameCSS();
+
   const translate = useI18n("FormSummary");
 
   return (
-    <Link
-      ref={ref}
-      as={as}
-      {...rest}
-      className={cn("navds-form-summary__edit", className)}
+    <CompositionWarning.Forbidden
+      name="FormSummary.Header"
+      message="<FormSummary.EditLink> should not be placed in <FormSummary.Header> anymore. See https://aksel.nav.no/komponenter/core/formsummary"
     >
-      {children || translate("editAnswer")}
-    </Link>
+      <Link
+        ref={ref}
+        as={as}
+        {...rest}
+        className={cn("navds-form-summary__edit", className)}
+      >
+        <PencilIcon aria-hidden fontSize="1.5rem" />
+        {children || translate("editAnswer")}
+      </Link>
+    </CompositionWarning.Forbidden>
   );
 });
 

package/src/form/form-summary/FormSummaryFooter.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
+
+/**
+ * Footer slot for actions in `FormSummary`.
+ */
+export interface FormSummaryFooterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Should include `<FormSummary.EditLink>`.
+   */
+  children: React.ReactNode;
+}
+
+export const FormSummaryFooter = forwardRef<
+  HTMLDivElement,
+  FormSummaryFooterProps
+>(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <div
+      ref={ref}
+      data-color="info"
+      {...rest}
+      className={cn("navds-form-summary__footer", className)}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default FormSummaryFooter;

package/src/form/form-summary/FormSummaryHeader.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../../theme/Theme";
+import { CompositionWarning } from "../../util/composition-warning";
 
 export interface FormSummaryHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   * Must include `<FormSummary.Heading>`.
    */
   children: React.ReactNode;
 }
@@ -12,17 +13,19 @@ export interface FormSummaryHeaderProps
 export const FormSummaryHeader = forwardRef<
   HTMLDivElement,
   FormSummaryHeaderProps
->(({ children, className, ...rest }, ref) => {
+>(({ children, className, ...rest }: FormSummaryHeaderProps, ref) => {
   const { cn } = useRenameCSS();
 
   return (
-    <header
-      ref={ref}
-      {...rest}
-      className={cn("navds-form-summary__header", className)}
-    >
-      {children}
-    </header>
+    <CompositionWarning.Root name="FormSummary.Header">
+      <div
+        ref={ref}
+        {...rest}
+        className={cn("navds-form-summary__header", className)}
+      >
+        {children}
+      </div>
+    </CompositionWarning.Root>
   );
 });
 

package/src/form/form-summary/index.ts

@@ -12,6 +12,10 @@ export {
   default as FormSummaryEditLink,
   type FormSummaryEditProps,
 } from "./FormSummaryEditLink";
+export {
+  default as FormSummaryFooter,
+  type FormSummaryFooterProps,
+} from "./FormSummaryFooter";
 export {
   default as FormSummaryHeader,
   type FormSummaryHeaderProps,

package/src/list/List.Item.tsx

@@ -31,8 +31,6 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
               icon
             ) : (
               <svg
-                width="0.375rem"
-                height="0.375rem"
                 viewBox="0 0 6 6"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"

package/src/overlays/floating-menu/parts/FocusScope.tsx

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { Slot } from "../../../slot/Slot";
 import { useCallbackRef, useMergeRefs } from "../../../util/hooks";
 

package/src/slot/Slot.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { mergeRefs } from "../util/hooks/useMergeRefs";
 import { mergeProps } from "./merge-props";
 

package/src/timeline/period/index.tsx

@@ -32,7 +32,9 @@ export interface TimelinePeriodProps
   /**
    * Callback when selecting a period.
    */
-  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onSelectPeriod?: (
+    event: React.MouseEvent<Element> | React.KeyboardEvent<Element>,
+  ) => void;
   /**
    * Content displayed in Popover on click.
    */

package/src/timeline/utils/timeline.ts

@@ -1,82 +1,71 @@
 import React, { ReactNode } from "react";
+import type { TimelinePeriod, TimelineRow, TimelineRowProps } from "..";
 import { omit } from "../../util";
+import { getChildRef } from "../../util/getChildRef";
 import { Period } from "./types.external";
 
-type ParsedChild = {
-  label?: string;
+type TimelineRowPropsWithRef = React.ComponentProps<typeof TimelineRow>;
+type TimelinePeriodPropsWithRef = React.ComponentProps<typeof TimelinePeriod>;
+
+type ParsedRow = {
+  label: string;
   icon?: React.ReactNode;
-  headingTag: string;
+  headingTag?: string;
   periods: Omit<Period, "id" | "endInclusive">[];
-  restProps: any;
-  ref: any;
+  restProps: Omit<TimelineRowProps, "label" | "icon" | "headingTag">;
+  ref?: React.Ref<HTMLOListElement>;
 };
 
 export const parseRows = (rowChildren: ReactNode[]) => {
-  const parsedChildren: ParsedChild[] = [];
-  rowChildren?.forEach((r: React.ReactNode) => {
-    const periods: ParsedChild["periods"] = [];
-    if (React.isValidElement(r) && r?.props?.children) {
-      if (Array.isArray(r.props.children)) {
-        for (let i = 0; i < r.props.children.length; i++) {
-          const p = r.props.children[i];
+  const parsedChildren: ParsedRow[] = [];
+
+  rowChildren?.forEach((row: React.ReactNode) => {
+    const periods: ParsedRow["periods"] = [];
+
+    if (
+      !React.isValidElement<TimelineRowPropsWithRef>(row) ||
+      !row.props.children
+    ) {
+      return;
+    }
 
-          periods.push({
-            start: p?.props?.start,
-            end: p?.props?.end,
-            status: p?.props?.status || "neutral",
-            onSelectPeriod: p.props?.onSelectPeriod,
-            label: r.props.label,
-            icon: p.props.icon,
-            children: p.props.children,
-            isActive: p.props.isActive,
-            statusLabel: p.props.statusLabel,
-            restProps: omit(p.props, [
-              "start",
-              "end",
-              "status",
-              "onSelectPeriod",
-              "label",
-              "icon",
-              "children",
-              "isActive",
-              "statusLabel",
-            ]),
-            ref: p?.ref,
-          });
-        }
-      } else {
-        periods.push({
-          start: r.props.children.props.start,
-          end: r.props.children.props.end,
-          status: r.props.children.props?.status || "neutral",
-          onSelectPeriod: r.props.children.props?.onSelectPeriod,
-          label: r.props.label,
-          icon: r.props.children.props?.icon,
-          children: r.props.children.props?.children,
-          statusLabel: r.props.children.props?.statusLabel,
-          restProps: omit(r.props.children.props, [
-            "start",
-            "end",
-            "status",
-            "onSelectPeriod",
-            "label",
-            "icon",
-            "children",
-            "isActive",
-            "statusLabel",
-          ]),
-          ref: r.props?.children?.ref,
-        });
+    React.Children.toArray(row.props.children).forEach((period) => {
+      if (!React.isValidElement<TimelinePeriodPropsWithRef>(period)) {
+        return;
       }
-      parsedChildren.push({
-        label: r.props.label,
-        icon: r.props.icon,
-        headingTag: r.props.headingTag,
-        periods,
-        restProps: omit(r.props, ["label", "icon", "headingTag"]),
-        ref: (r as any)?.ref,
+
+      periods.push({
+        start: period.props.start,
+        end: period.props.end,
+        status: period.props.status || "neutral",
+        onSelectPeriod: period.props.onSelectPeriod,
+        icon: period.props.icon,
+        children: period.props.children,
+        isActive: period.props.isActive,
+        statusLabel: period.props.statusLabel,
+        restProps: omit(period.props, [
+          "start",
+          "end",
+          "status",
+          "onSelectPeriod",
+          "icon",
+          "children",
+          "isActive",
+          "statusLabel",
+          "placement",
+        ]),
+        ref: getChildRef(period),
       });
-    }
+    });
+
+    parsedChildren.push({
+      label: row.props.label,
+      icon: row.props.icon,
+      headingTag: row.props.headingTag,
+      periods,
+      restProps: omit(row.props, ["label", "icon", "headingTag"]),
+      ref: getChildRef(row),
+    });
   });
 
   return parsedChildren;

package/src/timeline/utils/types.external.ts

@@ -16,18 +16,19 @@ export interface Positioned {
 
 export interface Period {
   id: string;
-  label?: string;
   start: Date;
   endInclusive: Date;
   status?: PeriodStatus;
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+  ) => void;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   end: Date;
   isActive?: boolean;
   statusLabel?: string;
   restProps?: any;
-  ref?: Element;
+  ref?: React.Ref<HTMLDivElement | HTMLButtonElement>;
 }
 
 export interface PositionedPeriod extends Period, Positioned {

package/src/timeline/utils/types.internal.ts

@@ -21,7 +21,9 @@ export interface Period {
   start: Date;
   endInclusive: Date;
   status?: PeriodStatus;
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
+  ) => void;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   isActive?: boolean;

package/src/util/composition-warning/CompositionWarning.tsx

@@ -0,0 +1,67 @@
+/**
+ * Give warnings based on component composition (which slot/parent a child is rendered in).
+ *
+ * Used when child components need to know which slot/parent they are rendered in
+ * (e.g. `FormSummary.Header` vs `FormSummary.Footer`) and should warn or error in development
+ * if placed in a discouraged or forbidden slot.
+ *
+ * Usage:
+ * - Wrap slot components with <CompositionWarning.Root name="FormSummary.Header">...</CompositionWarning.Root>
+ * - In child: `<CompositionWarning.Forbidden name="FormSummary.Header" />` to forbid slot.
+ *
+ * This is guidance only: warnings are logged to the console in development, never enforced at runtime.
+ */
+import React, { useEffect, useRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { createContext } from "../create-context";
+
+type CompositionName = string;
+
+const isDev = process.env.NODE_ENV !== "production";
+
+type CompositionWarningContextType = {
+  /**
+   * Name of the slot component we want to check.
+   */
+  name: CompositionName;
+};
+
+const [CompositionWarning, useCompositionWarning] =
+  createContext<CompositionWarningContextType>({
+    errorMessage:
+      "useCompositionWarning() must be used within <CompositionWarning />",
+  });
+
+type CompositionWarningForbiddenProps = {
+  children?: React.ReactElement;
+  /**
+   * Name of the parent slot component where the child is not allowed.
+   */
+  name: CompositionName;
+  /**
+   * Warning message to display if the child is found.
+   */
+  message: string;
+};
+
+function CompositionWarningForbidden({
+  children,
+  name,
+  message,
+}: CompositionWarningForbiddenProps) {
+  const compositionName = useCompositionWarning(false)?.name;
+
+  const elementRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!isDev || !compositionName || name !== compositionName) {
+      return;
+    }
+
+    console.warn(`[Aksel] ${message}\nElement: `, elementRef.current);
+  }, [compositionName, name, message]);
+
+  return <Slot ref={elementRef}>{children}</Slot>;
+}
+
+export { CompositionWarningForbidden as Forbidden, CompositionWarning as Root };

package/src/util/composition-warning/index.ts

@@ -0,0 +1 @@
+export * as CompositionWarning from "./CompositionWarning";

package/src/util/getChildRef.ts

@@ -0,0 +1,6 @@
+export const getChildRef = <T>(
+  children: React.ReactElement<React.RefAttributes<T>>,
+): React.Ref<T> | undefined =>
+  Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
+    : (children as any).ref; // React <19

package/src/util/renderStoriesForChromatic.tsx

@@ -1,4 +1,4 @@
-import { Args } from "@storybook/react";
+import { Args, StoryObj } from "@storybook/react";
 import React from "react";
 import { Renderer, StoryContext } from "storybook/internal/types";
 
@@ -8,15 +8,18 @@ export function renderStoriesForChromatic(
     | { render?: (...args: any[]) => React.ReactNode }
     | React.FunctionComponent<void>
   >,
-) {
+): StoryObj {
   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>
-      )),
+    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 },
     },