@navikt/ds-react 7.22.0 → 7.23.1

package/src/alert/Alert.tsx

@@ -8,6 +8,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { BodyLong } from "../typography";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -53,6 +54,10 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * **Requires closeButton to be true**.
    */
   onClose?: () => void;
+  /**
+   * Overriding Alert color is not supported.
+   */
+  "data-color"?: never;
 }
 
 const IconMap = {
@@ -93,6 +98,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     return (
       <div
         {...rest}
+        data-color={variantToRole(variant)}
+        data-variant={variant}
         ref={ref}
         className={cn(
           className,
@@ -142,4 +149,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   },
 );
 
+function variantToRole(variant: AlertProps["variant"]): AkselColor {
+  switch (variant) {
+    case "warning":
+      return "warning";
+    case "error":
+      return "danger";
+    case "info":
+      return "info";
+    case "success":
+      return "success";
+    default:
+      return "info";
+  }
+}
+
 export default Alert;

package/src/button/Button.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import { Loader } from "../loader";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { omit } from "../util";
 import { composeEventHandlers } from "../util/composeEventHandlers";
@@ -75,6 +76,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         icon,
         iconPosition = "left",
         onKeyUp,
+        "data-color": color,
         ...rest
       },
       ref,
@@ -93,6 +95,8 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       return (
         <Component
           {...(Component !== "button" ? { role: "button" } : {})}
+          data-color={color ?? variantToColor(variant)}
+          data-variant={variantToSimplifiedVariant(variant)}
           {...filterProps}
           ref={ref}
           onKeyUp={composeEventHandlers(onKeyUp, handleKeyUp)}
@@ -126,4 +130,38 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
     },
   );
 
+function variantToColor(
+  variant: ButtonProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "primary-neutral":
+    case "secondary-neutral":
+    case "tertiary-neutral":
+      return "neutral";
+    case "danger":
+      return "danger";
+    default:
+      return undefined;
+  }
+}
+
+function variantToSimplifiedVariant(
+  variant: ButtonProps["variant"],
+): "primary" | "secondary" | "tertiary" {
+  switch (variant) {
+    case "primary":
+    case "primary-neutral":
+    case "danger":
+      return "primary";
+    case "secondary":
+    case "secondary-neutral":
+      return "secondary";
+    case "tertiary":
+    case "tertiary-neutral":
+      return "tertiary";
+    default:
+      return "primary";
+  }
+}
+
 export default Button;

package/src/chat/Chat.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
 import Bubble from "./Bubble";
 
@@ -94,6 +95,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       toptextPosition,
       size = "medium",
       toptextHeadingLevel = "3",
+      "data-color": color,
       ...rest
     }: ChatProps,
     ref,
@@ -111,7 +113,9 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
           `navds-chat--${size}`,
           `navds-chat--${variant}`,
         )}
+        data-color={color ?? variantToColor(variant)}
         {...rest}
+        data-variant={variant}
       >
         {avatar && (
           <div className={cn("navds-chat__avatar")} aria-hidden>
@@ -139,6 +143,19 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
   },
 ) as ChatComponent;
 
+function variantToColor(variant: ChatProps["variant"]): AkselColor {
+  switch (variant) {
+    case "neutral":
+      return "neutral";
+    case "subtle":
+      return "neutral";
+    case "info":
+      return "info";
+    default:
+      return "neutral";
+  }
+}
+
 Chat.Bubble = Bubble;
 
 export default Chat;

package/src/chips/Removable.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -25,27 +26,40 @@ export const RemovableChips = forwardRef<
   (
     {
       children,
-      variant = "action",
+      variant,
       onDelete,
       className,
       onClick,
       type = "button",
+      "data-color": color,
       ...rest
     },
     ref,
   ) => {
     const translate = useI18n("Chips");
+    const themeContext = useThemeInternal(false);
     const { cn } = useRenameCSS();
 
+    let localVariant: ChipsRemovableProps["variant"] | undefined;
+
+    if (themeContext) {
+      localVariant = variant;
+    } else {
+      localVariant = variant ?? "action";
+    }
+
     return (
       <button
+        data-color={color ?? variantToColor(localVariant)}
         {...rest}
         ref={ref}
         type={type}
         className={cn(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
-          `navds-chips__removable--${variant}`,
+          {
+            [`navds-chips__removable--${localVariant}`]: localVariant,
+          },
         )}
         aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
@@ -59,4 +73,17 @@ export const RemovableChips = forwardRef<
   },
 );
 
+function variantToColor(
+  variant?: ChipsRemovableProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 
 export interface ChipsToggleProps
@@ -30,25 +31,33 @@ export const ToggleChips: OverridableComponent<
       className,
       children,
       selected,
-      variant = "action",
+      variant,
       checkmark = true,
       as: Component = "button",
+      "data-color": color,
       ...rest
     },
     ref,
   ) => {
     const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
+    let localVariant: ChipsToggleProps["variant"] | undefined;
+
+    if (themeContext) {
+      localVariant = variant;
+    } else {
+      localVariant = variant ?? "action";
+    }
 
     return (
       <Component
+        data-color={color ?? variantToColor(localVariant)}
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-chips__chip navds-chips__toggle",
-          className,
-          `navds-chips__toggle--${variant}`,
-          { "navds-chips__toggle--with-checkmark": checkmark },
-        )}
+        className={cn("navds-chips__chip navds-chips__toggle", className, {
+          "navds-chips__toggle--with-checkmark": checkmark,
+          [`navds-chips__toggle--${localVariant}`]: localVariant,
+        })}
         aria-pressed={selected}
         data-pressed={selected}
       >
@@ -77,11 +86,7 @@ export const ToggleChips: OverridableComponent<
                 clipRule="evenodd"
                 d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
                 /* After removing old fallbacks, change to currentColor */
-                fill={`var(${
-                  variant === "action"
-                    ? "--ax-text-accent"
-                    : "--ax-text-neutral"
-                }, var(--ac-chip-toggle-circle-border, var(--a-border-default)))`}
+                fill="var(--ax-text-default, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
               />
             )}
           </svg>
@@ -92,4 +97,17 @@ export const ToggleChips: OverridableComponent<
   },
 );
 
+function variantToColor(
+  variant?: ChipsToggleProps["variant"],
+): AkselColor | undefined {
+  switch (variant) {
+    case "action":
+      return "accent";
+    case "neutral":
+      return "neutral";
+    default:
+      return undefined;
+  }
+}
+
 export default ToggleChips;

package/src/expansion-card/ExpansionCard.tsx

@@ -113,6 +113,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
       open,
       defaultOpen = false,
       size = "medium",
+      "data-color": color = "neutral",
       ...rest
     },
     ref,
@@ -138,6 +139,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
         }}
       >
         <section
+          data-color={color}
           {...rest}
           className={cn(
             "navds-expansioncard",

package/src/form/checkbox/Checkbox.tsx

@@ -27,6 +27,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "navds-checkbox--readonly": readOnly,
           },
         )}
+        data-color={hasError ? "danger" : props["data-color"]}
       >
         <input
           {...omit(props, [

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -27,7 +27,12 @@ const Option = ({ option }: { option: ComboboxOption }) => {
 
   if (readOnly || inputProps.disabled) {
     return (
-      <Chips.Toggle variant="neutral" checkmark={false} as="div">
+      <Chips.Toggle
+        data-color="neutral"
+        variant="neutral"
+        checkmark={false}
+        as="div"
+      >
         {option.label}
       </Chips.Toggle>
     );

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -60,7 +60,7 @@ export const ConfirmationPanel = forwardRef<
 
   const id = useId();
 
-  const currentRole = hasError
+  const currentColor = hasError
     ? "danger"
     : props.checked
       ? "success"
@@ -73,7 +73,7 @@ export const ConfirmationPanel = forwardRef<
         "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
-      data-color-role={currentRole}
+      data-color={currentColor}
     >
       <div className={cn("navds-confirmation-panel__inner")}>
         {children && (

package/src/form/error-summary/ErrorSummary.tsx

@@ -105,7 +105,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         <Heading
           className={cn("navds-error-summary__heading")}
           as={headingTag}
-          size="small"
+          size={size === "medium" ? "small" : "xsmall"}
           ref={headingRef}
           tabIndex={-1}
         >

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

@@ -12,18 +12,29 @@ export interface FormSummaryAnswersProps
 export const FormSummaryAnswers = forwardRef<
   HTMLDListElement,
   FormSummaryAnswersProps
->(({ children, className, ...rest }: FormSummaryAnswersProps, ref) => {
-  const { cn } = useRenameCSS();
+>(
+  (
+    {
+      children,
+      className,
+      "data-color": color = "info",
+      ...rest
+    }: FormSummaryAnswersProps,
+    ref,
+  ) => {
+    const { cn } = useRenameCSS();
 
-  return (
-    <dl
-      ref={ref}
-      {...rest}
-      className={cn("navds-form-summary__answers", className)}
-    >
-      {children}
-    </dl>
-  );
-});
+    return (
+      <dl
+        ref={ref}
+        data-color={color}
+        {...rest}
+        className={cn("navds-form-summary__answers", className)}
+      >
+        {children}
+      </dl>
+    );
+  },
+);
 
 export default FormSummaryAnswers;

package/src/form/radio/Radio.tsx

@@ -21,6 +21,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         "navds-radio--disabled": inputProps.disabled,
         "navds-radio--readonly": readOnly,
       })}
+      data-color={hasError ? "danger" : props["data-color"]}
     >
       <input
         {...omit(props, ["children", "size", "description", "readOnly"])}

package/src/form/search/Search.tsx

@@ -91,7 +91,7 @@ interface SearchComponent
  * @example
  * ```jsx
  * <form role="search">
- *   <Search label="Søk alle Nav sine sider" variant="primary" />
+ *   <Search label="Søk i alle Nav sine sider" variant="primary" />
  * </form>
  * ```
  */
@@ -126,11 +126,9 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
 
     const { cn } = useRenameCSS();
 
-    const themeContext = useThemeInternal(false);
-
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
-    const translate = useI18n("Search");
+
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
     const handleChange = (newValue: string) => {
@@ -151,32 +149,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     const showClearButton =
       clearButton && !inputProps.disabled && (value ?? internalValue);
 
-    const ClearButton = () =>
-      themeContext ? (
-        <Button
-          className={cn("navds-search__button-clear")}
-          variant="tertiary-neutral"
-          size={size === "medium" ? "small" : "xsmall"}
-          icon={<XMarkIcon aria-hidden />}
-          title={clearButtonLabel || translate("clear")}
-          hidden={!showClearButton}
-          onClick={(event) => handleClear({ trigger: "Click", event })}
-          type="button"
-        />
-      ) : (
-        <button
-          type="button"
-          onClick={(event) => handleClear({ trigger: "Click", event })}
-          className={cn("navds-search__button-clear")}
-          hidden={!showClearButton}
-        >
-          <span className={cn("navds-sr-only")}>
-            {clearButtonLabel || translate("clear")}
-          </span>
-          <XMarkIcon aria-hidden />
-        </button>
-      );
-
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
@@ -245,7 +217,13 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               )}
               {...(htmlSize ? { size: Number(htmlSize) } : {})}
             />
-            <ClearButton />
+            {showClearButton && (
+              <ClearButton
+                handleClear={handleClear}
+                size={size}
+                clearButtonLabel={clearButtonLabel}
+              />
+            )}
           </div>
           <SearchContext.Provider
             value={{
@@ -275,6 +253,45 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
   },
 ) as SearchComponent;
 
+type SearchClearButtonProps = Pick<SearchProps, "size" | "clearButtonLabel"> & {
+  handleClear: (clearEvent: SearchClearEvent) => void;
+};
+
+function ClearButton({
+  size,
+  clearButtonLabel,
+  handleClear,
+}: SearchClearButtonProps) {
+  const { cn } = useRenameCSS();
+
+  const themeContext = useThemeInternal(false);
+  const translate = useI18n("Search");
+
+  return themeContext ? (
+    <Button
+      className={cn("navds-search__button-clear")}
+      variant="tertiary"
+      data-color="neutral"
+      size={size === "medium" ? "small" : "xsmall"}
+      icon={<XMarkIcon aria-hidden />}
+      title={clearButtonLabel || translate("clear")}
+      onClick={(event) => handleClear({ trigger: "Click", event })}
+      type="button"
+    />
+  ) : (
+    <button
+      type="button"
+      onClick={(event) => handleClear({ trigger: "Click", event })}
+      className={cn("navds-search__button-clear")}
+    >
+      <span className={cn("navds-sr-only")}>
+        {clearButtonLabel || translate("clear")}
+      </span>
+      <XMarkIcon aria-hidden />
+    </button>
+  );
+}
+
 Search.Button = SearchButton;
 
 export default Search;

package/src/guide-panel/GuidePanel.tsx

@@ -35,12 +35,23 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
-  ({ children, className, illustration, poster, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      illustration,
+      poster,
+      "data-color": color = "info",
+      ...rest
+    },
+    ref,
+  ) => {
     const { cn } = useRenameCSS();
     const themeContext = useThemeInternal(false);
 
     return (
       <div
+        data-color={color}
         {...rest}
         ref={ref}
         className={cn("navds-guide-panel", className, {
@@ -81,7 +92,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M0 20C-2.87106e-10 19.9934 3.21047e-05 19.987 9.68646e-05 19.9804C0.0494722 14.9659 0.299239 11.5341 0.964025 8.68212C1.64231 5.77217 2.72947 3.56367 4.28501 0.971094C4.71185 0.259692 5.53358 -0.114327 6.35038 0.0310157C7.16718 0.176359 7.80944 0.810884 7.96467 1.62586C8.84145 6.22896 11.9453 10.3172 16.2599 13.2908C20.5715 16.2623 25.9294 18.0001 31 18.0001C32.1046 18.0001 33 18.8954 33 20L0 20ZM6.755 4.70521C8.97688 10.7068 14.4934 15.469 20.8803 18.0001C24.1345 19.2897 27.6146 20.0001 31 20.0001L2 20.0001C2.00689 19.3003 2.01774 18.6346 2.033 18.0001C2.19625 11.2107 2.86405 7.98363 4.58479 4.54371C4.9944 3.72487 5.46367 2.89399 6 2.00011C6.17639 2.92619 6.43058 3.82889 6.755 4.70521Z"
-                fill="var(--ax-border-info)"
+                fill="var(--ax-border-default)"
               />
             </svg>
           )}

package/src/guide-panel/Illustration.darkside.tsx

@@ -16,12 +16,7 @@ export const DarksideGudiepanelIllustration = () => {
       role="img"
     >
       <g clipPath="url(#clip0_1387_21067)">
-        <rect
-          width="80"
-          height="80"
-          rx="40"
-          fill="var(--ax-bg-info-moderate)"
-        />
+        <rect width="80" height="80" rx="40" fill="var(--ax-bg-moderate)" />
 
         <path
           fillRule="evenodd"

package/src/help-text/HelpText.tsx

@@ -44,6 +44,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       title,
       onClick,
       wrapperClassName,
+      "data-color": color = "info",
       ...rest
     },
     ref,
@@ -58,7 +59,10 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const titleWithFallback = title || translate("title");
 
     return (
-      <div className={cn("navds-help-text", wrapperClassName)}>
+      <div
+        className={cn("navds-help-text", wrapperClassName)}
+        data-color={color}
+      >
         <button
           {...rest}
           ref={mergedRef}

package/src/layout/box/Box.darkside.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from "react";
 import type {
-  BorderColorKeys,
-  BorderColorWithRoleKeys,
-  ShadowKeys,
-  StaticBgKeys,
-  StaticDefaultBgKeys,
+  AkselColoredBorderToken,
+  AkselColoredStatelessBackgroundToken,
+  AkselRootBackgroundToken,
+  AkselRootBorderToken,
+  AkselShadowToken,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { useRenameCSS } from "../../theme/Theme";
@@ -28,13 +28,15 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
    * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
    */
-  background?: StaticDefaultBgKeys | StaticBgKeys;
+  background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
   /**
    * CSS `border-color` property.
    * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
    * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
    */
-  borderColor?: Exclude<BorderColorKeys, "focus"> | BorderColorWithRoleKeys;
+  borderColor?:
+    | Exclude<AkselRootBorderToken, "focus">
+    | AkselColoredBorderToken;
   /**
    * CSS `border-radius` property.
    * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
@@ -60,7 +62,7 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
    * shadow='small'
    * @see {@link ShadowKeys}
    */
-  shadow?: ShadowKeys;
+  shadow?: AkselShadowToken;
 } & PrimitiveProps &
   PrimitiveAsChildProps;