@navikt/ds-react 7.29.1 → 7.30.1

package/src/form/checkbox/Checkbox.tsx

@@ -1,7 +1,8 @@
+import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
@@ -10,6 +11,94 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
+    const descriptionId = useId();
+    const themeContext = useThemeInternal(false);
+
+    if (themeContext?.isDarkside) {
+      return (
+        <div
+          className={cn(
+            props.className,
+            "navds-checkbox",
+            `navds-checkbox--${size}`,
+            {
+              "navds-checkbox--error": hasError,
+              "navds-checkbox--disabled": inputProps.disabled,
+              "navds-checkbox--readonly": readOnly,
+            },
+          )}
+          data-color={hasError ? "danger" : props["data-color"]}
+        >
+          <div className={cn("navds-checkbox__input-wrapper")}>
+            <input
+              {...omit(props, [
+                "children",
+                "size",
+                "error",
+                "description",
+                "hideLabel",
+                "indeterminate",
+                "errorId",
+                "readOnly",
+              ])}
+              {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+              aria-describedby={cl(inputProps["aria-describedby"], {
+                [descriptionId]: props.description,
+              })}
+              type="checkbox"
+              className={cn("navds-checkbox__input")}
+              ref={(el) => {
+                if (el) {
+                  el.indeterminate = props.indeterminate ?? false;
+                }
+
+                if (typeof ref === "function") {
+                  ref(el);
+                } else if (ref != null) {
+                  ref.current = el;
+                }
+              }}
+            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 13 10"
+              fill="none"
+              focusable={false}
+              role="img"
+              aria-hidden
+              className={cn("navds-checkbox__icon")}
+            >
+              <path
+                d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <BodyShort
+            as="label"
+            htmlFor={inputProps.id}
+            size={size}
+            className={cn("navds-checkbox__label", {
+              "navds-sr-only": props.hideLabel,
+            })}
+          >
+            {!nested && readOnly && <ReadOnlyIconWithTitle />}
+            {props.children}
+          </BodyShort>
+          {props.description && (
+            <BodyShort
+              id={descriptionId}
+              size={size}
+              className={cn(
+                "navds-form-field__subdescription navds-checkbox__description",
+              )}
+            >
+              {props.description}
+            </BodyShort>
+          )}
+        </div>
+      );
+    }
 
     return (
       <div

package/src/form/checkbox/useCheckbox.ts

@@ -40,19 +40,19 @@ const useCheckbox = (props: CheckboxProps) => {
       defaultChecked: checkboxGroup?.defaultValue
         ? checkboxGroup.defaultValue.includes(props.value)
         : props.defaultChecked,
-      onChange: (e) => {
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
         if (readOnly) {
           return;
         }
-        props.onChange?.(e);
+        props.onChange?.(event);
         checkboxGroup?.toggleValue(props.value);
       },
-      onClick: (e) => {
+      onClick: (event: React.MouseEvent<HTMLInputElement>) => {
         if (readOnly) {
-          e.preventDefault();
+          event.preventDefault();
           return;
         }
-        props?.onClick?.(e);
+        props?.onClick?.(event);
       },
     },
   };

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

@@ -3,6 +3,7 @@ import { useRenameCSS } from "../../theme/Theme";
 import FormSummaryAnswer from "./FormSummaryAnswer";
 import FormSummaryAnswers from "./FormSummaryAnswers";
 import FormSummaryEditLink from "./FormSummaryEditLink";
+import FormSummaryFooter from "./FormSummaryFooter";
 import FormSummaryHeader from "./FormSummaryHeader";
 import FormSummaryHeading from "./FormSummaryHeading";
 import FormSummaryLabel from "./FormSummaryLabel";
@@ -13,7 +14,7 @@ interface FormSummaryComponent
     FormSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Must include `<FormSummary.Heading>` and optionally `<FormSummary.EditLink>`.
+   * Must include `<FormSummary.Heading>`.
    */
   Header: typeof FormSummaryHeader;
   /**
@@ -21,7 +22,7 @@ interface FormSummaryComponent
    */
   Heading: typeof FormSummaryHeading;
   /**
-   * Link to edit the answers to use in the `FormSummary.Header` component. Should link to the relevant part of the form.
+   * Link to edit the answers to use in the `FormSummary.Footer` component. Should link to the relevant part of the form.
    */
   EditLink: typeof FormSummaryEditLink;
   /**
@@ -40,6 +41,10 @@ interface FormSummaryComponent
    * Corresponds to the answer in the form. To be used in the `FormSummary.Answer` component.
    */
   Value: typeof FormSummaryValue;
+  /**
+   * Footer component for the form summary, if applicable this is a good place for `<FormSummary.EditLink>`.
+   */
+  Footer: typeof FormSummaryFooter;
 }
 
 export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
@@ -48,20 +53,7 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
    *
    *  - `<FormSummary.Header>`
    *  - `<FormSummary.Answers>`
-   *
-   * @example
-   * <FormSummary>
-   *   <FormSummary.Header>
-   *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
-   *     <FormSummary.EditLink href="#" />
-   *   </FormSummary.Header>
-   *   <FormSummary.Answers>
-   *     <FormSummary.Answer>
-   *       <FormSummary.Label>Navn</FormSummary.Label>
-   *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
-   *     </FormSummary.Answer>
-   *   </FormSummary.Answers>
-   * </FormSummary>
+   *  - `<FormSummary.Footer>` (optional)
    */
   children: React.ReactNode;
 }
@@ -75,7 +67,6 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
  * <FormSummary>
  *   <FormSummary.Header>
  *     <FormSummary.Heading level="2">HeadingTekst</FormSummary.Heading>
- *     <FormSummary.EditLink href="#" />
  *   </FormSummary.Header>
  *   <FormSummary.Answers>
  *     <FormSummary.Answer>
@@ -83,6 +74,9 @@ export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
  *       <FormSummary.Value>Ola Nordmann</FormSummary.Value>
  *     </FormSummary.Answer>
  *   </FormSummary.Answers>
+ *   <FormSummary.Footer>
+ *     <FormSummary.EditLink href="#" />
+ *   </FormSummary.Footer>
  * </FormSummary>
  */
 export const FormSummary = forwardRef<HTMLDivElement, FormSummaryProps>(
@@ -104,5 +98,6 @@ FormSummary.Answers = FormSummaryAnswers;
 FormSummary.Answer = FormSummaryAnswer;
 FormSummary.Label = FormSummaryLabel;
 FormSummary.Value = FormSummaryValue;
+FormSummary.Footer = FormSummaryFooter;
 
 export default FormSummary;

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/form/radio/Radio.tsx

@@ -1,13 +1,58 @@
+import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
+  const descriptionId = useId();
+  const themeContext = useThemeInternal(false);
+
+  if (themeContext?.isDarkside) {
+    return (
+      <div
+        className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
+          "navds-radio--error": hasError,
+          "navds-radio--disabled": inputProps.disabled,
+          "navds-radio--readonly": readOnly,
+        })}
+        data-color={hasError ? "danger" : props["data-color"]}
+      >
+        <input
+          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={cl(inputProps["aria-describedby"], {
+            [descriptionId]: props.description,
+          })}
+          className={cn("navds-radio__input")}
+          ref={ref}
+        />
+        <BodyShort
+          as="label"
+          htmlFor={inputProps.id}
+          className={cn("navds-radio__label")}
+          size={size}
+        >
+          {props.children}
+        </BodyShort>
+        {props.description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className={cn(
+              "navds-form-field__subdescription navds-radio__description",
+            )}
+          >
+            {props.description}
+          </BodyShort>
+        )}
+      </div>
+    );
+  }
 
   return (
     <div

package/src/form/radio/useRadio.ts

@@ -37,19 +37,19 @@ export const useRadio = (props: RadioProps) => {
         radioGroup?.value === undefined
           ? undefined
           : radioGroup?.value === props.value,
-      onChange: (e) => {
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
         if (readOnly) {
           return;
         }
-        props.onChange?.(e);
+        props.onChange?.(event);
         radioGroup?.onChange?.(props.value);
       },
-      onClick: (e) => {
+      onClick: (event: React.MouseEvent<HTMLInputElement>) => {
         if (readOnly) {
-          e.preventDefault();
+          event.preventDefault();
           return;
         }
-        props?.onClick?.(e);
+        props?.onClick?.(event);
       },
       required: radioGroup?.required,
       type: "radio",

package/src/form/search/Search.tsx

@@ -271,7 +271,7 @@ function ClearButton({
   const themeContext = useThemeInternal(false);
   const translate = useI18n("Search");
 
-  return themeContext ? (
+  return themeContext?.isDarkside ? (
     <Button
       className={cn("navds-search__button-clear")}
       variant="tertiary"

package/src/guide-panel/GuidePanel.tsx

@@ -64,14 +64,14 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
       >
         <div className={cn("navds-guide")}>
           {illustration ??
-            (themeContext ? (
+            (themeContext?.isDarkside ? (
               <DarksideGudiepanelIllustration />
             ) : (
               <DefaultIllustration />
             ))}
         </div>
         <div className={cn("navds-guide-panel__content")}>
-          {themeContext && (
+          {themeContext?.isDarkside && (
             <svg
               viewBox="0 0 33 22"
               width="33"
@@ -96,7 +96,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
               />
             </svg>
           )}
-          {themeContext ? (
+          {themeContext?.isDarkside ? (
             <div className={cn("navds-guide-panel__content-inner")}>
               {children}
             </div>

package/src/help-text/HelpText.tsx

@@ -81,8 +81,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
-          offset={themeContext ? 8 : 12}
-          arrow={!themeContext}
+          offset={themeContext?.isDarkside ? 8 : 12}
+          arrow={!themeContext?.isDarkside}
         >
           <Popover.Content className={cn("navds-body-short")}>
             {children}

package/src/internal-header/InternalHeader.tsx

@@ -84,7 +84,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
   /*
    * Component is always in "dark" mode, so we manually override global theme.
    */
-  if (themeContext) {
+  if (themeContext?.isDarkside) {
     return (
       <Theme theme="dark" asChild hasBackground={false}>
         <header

package/src/layout/base/BasePrimitive.tsx

@@ -253,7 +253,7 @@ export const BasePrimitive = ({
 }: BasePrimitiveProps) => {
   const themeContext = useThemeInternal(false);
   const { cn } = useRenameCSS();
-  const prefix = themeContext ? "ax" : "a";
+  const prefix = themeContext?.isDarkside ? "ax" : "a";
 
   const style: React.CSSProperties = {
     /* Padding */

package/src/layout/bleed/Bleed.tsx

@@ -82,7 +82,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
   ) => {
     const themeContext = useThemeInternal(false);
     const { cn } = useRenameCSS();
-    const prefix = themeContext ? "ax" : "a";
+    const prefix = themeContext?.isDarkside ? "ax" : "a";
 
     let style: React.CSSProperties = {
       ..._style,

package/src/layout/box/Box.tsx

@@ -113,7 +113,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
 
       if (
         process.env.NODE_ENV !== "production" &&
-        themeContext &&
+        themeContext?.isDarkside &&
         (background || borderColor || shadow)
       ) {
         let errorText = ``;
@@ -131,7 +131,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
         );
       }
 
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
 
       const style: React.CSSProperties = {
         ..._style,
@@ -173,8 +173,9 @@ 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 && !themeContext,
-              "navds-box-radius": borderRadius && themeContext,
+              "navds-box-border-radius":
+                borderRadius && !themeContext?.isDarkside,
+              "navds-box-radius": borderRadius && themeContext?.isDarkside,
               "navds-box-shadow": shadow,
             })}
           >

package/src/layout/grid/HGrid.tsx

@@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 
       const styles: React.CSSProperties = {

package/src/layout/page/Page.tsx

@@ -56,7 +56,11 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       const themeContext = useThemeInternal(false);
       const { cn } = useRenameCSS();
 
-      if (process.env.NODE_ENV !== "production" && themeContext && background) {
+      if (
+        process.env.NODE_ENV !== "production" &&
+        themeContext?.isDarkside &&
+        background
+      ) {
         console.warn(
           `Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``,
         );

package/src/layout/stack/Stack.tsx

@@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 
       const style: React.CSSProperties = {

package/src/link/Link.tsx

@@ -72,7 +72,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
        */
       let localVariant: LinkProps["variant"];
 
-      if (themeContext) {
+      if (themeContext?.isDarkside) {
         localVariant = variant;
       } else {
         localVariant = variant ?? "action";

package/src/list/List.tsx

@@ -63,7 +63,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 
     const listSize = size ?? contextSize;
 
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       if (
         process.env.NODE_ENV !== "production" &&
         (title || description || headingTag)

package/src/overlays/action-menu/ActionMenu.tsx

@@ -802,7 +802,7 @@ export const ActionMenuRadioItem = forwardRef<
                   fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
-              {themeContext ? (
+              {themeContext?.isDarkside ? (
                 <g className={cn("navds-action-menu__indicator-icon--checked")}>
                   <rect
                     width="24"

package/src/pagination/PaginationItem.tsx

@@ -46,7 +46,7 @@ export const Item: PaginationItemType = forwardRef(
     return (
       <Button
         as={Component}
-        variant={themeContext ? "tertiary-neutral" : "tertiary"}
+        variant={themeContext?.isDarkside ? "tertiary-neutral" : "tertiary"}
         data-color={color}
         aria-current={selected}
         data-pressed={selected}

package/src/popover/Popover.tsx

@@ -138,7 +138,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (themeContext ? 8 : arrow ? 16 : 4)),
+        flOffset(offset ?? (themeContext?.isDarkside ? 8 : arrow ? 16 : 4)),
         chosenFlip &&
           flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
@@ -191,7 +191,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         >
           {children}
           {/* Hide arrow in new design, prop will be removed in breaking change update */}
-          {arrow && !themeContext && (
+          {arrow && !themeContext?.isDarkside && (
             <div
               ref={(node) => {
                 arrowRef.current = node;

package/src/portal/Portal.tsx

@@ -26,7 +26,7 @@ export const Portal = forwardRef<HTMLDivElement, PortalProps>(
      * Portal can be mounted outside of theme-classNames.
      * If a theme is present, we want to make sure that theme cascades to portaled element.
      */
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       return root
         ? ReactDOM.createPortal(
             <Theme