@navikt/ds-react 7.21.1 → 7.22.0

package/src/layout/utilities/css.ts

@@ -1,4 +1,9 @@
-import type { LegacySpacingKeys, SpaceKeys } from "@navikt/ds-tokens/types";
+import type {
+  BorderRadiusKeys,
+  LegacyBorderRadiusKeys,
+  LegacySpacingKeys,
+  SpaceKeys,
+} from "@navikt/ds-tokens/types";
 import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
@@ -55,10 +60,21 @@ const legacySpacingTokenLookup: Record<
   "--ax-spacing-0": "--ax-space-0",
 };
 
+const legacyBorderRadiusNameTokenLookup: Record<
+  `${LegacyBorderRadiusKeys}`,
+  `${BorderRadiusKeys}`
+> = {
+  full: "full",
+  xlarge: "12",
+  large: "8",
+  medium: "4",
+  small: "2",
+};
+
 const translateTokenStringToCSS = (
   specialLayout: string,
   tokenString: string,
-  tokenSubgroup: "spacing" | "border-radius",
+  tokenSubgroup: "spacing" | "radius",
   tokenExceptions: string[],
   invert: boolean,
   prefix: string,
@@ -91,6 +107,9 @@ const translateTokenStringToCSS = (
         output = `var(${
           legacySpacingTokenLookup[spacingTokenName] ?? spacingTokenName
         })`;
+      } else if (tokenSubgroup === "radius") {
+        const name = legacyBorderRadiusNameTokenLookup[propValue] ?? propValue;
+        output = `var(--${prefix}-radius-${name})`;
       }
 
       // Handle inversion for negative values
@@ -107,7 +126,7 @@ export function getResponsiveProps<T extends string>(
   prefix: string,
   componentName: string,
   componentProp: string,
-  tokenSubgroup: "spacing" | "border-radius",
+  tokenSubgroup: "spacing" | "radius",
   responsiveProp?: ResponsiveProp<T>,
   invert = false,
   tokenExceptions: string[] = [],

package/src/layout/utilities/types.ts

@@ -1,7 +1,9 @@
 import type {
+  BorderRadiusKeys,
   BreakPointKeys,
   LegacyBgColorKeys,
   LegacyBorderColorKeys,
+  LegacyBorderRadiusKeys,
   LegacyShadowKeys,
   LegacySpacingKeys,
   LegacySurfaceColorKeys,
@@ -19,6 +21,7 @@ export type BreakpointsAlias = Extract<
 >;
 
 export type SpacingScale = LegacySpacingKeys | SpaceKeys;
+export type BorderRadiusScale = LegacyBorderRadiusKeys | BorderRadiusKeys;
 
 export type SpaceDelimitedAttribute<T extends string> =
   | T

package/src/loader/index.ts

@@ -1,3 +1,3 @@
 "use client";
 export { default as Loader } from "./Loader";
-export { type LoaderProps } from "./Loader";
+export type { LoaderProps } from "./Loader";

package/src/modal/index.ts

@@ -3,4 +3,4 @@ export { default as Modal } from "./Modal";
 export { default as ModalBody, type ModalBodyProps } from "./ModalBody";
 export { default as ModalFooter, type ModalFooterProps } from "./ModalFooter";
 export { default as ModalHeader, type ModalHeaderProps } from "./ModalHeader";
-export { type ModalProps } from "./types";
+export type { ModalProps } from "./types";

package/src/panel/index.ts

@@ -1,2 +1,2 @@
 export { default as Panel } from "./Panel";
-export { type PanelProps } from "./Panel";
+export type { PanelProps } from "./Panel";

package/src/table/index.ts

@@ -13,4 +13,4 @@ export { default as TableHeader, type HeaderProps } from "./Header";
 export { default as TableHeaderCell, type HeaderCellProps } from "./HeaderCell";
 export { default as TableRow, type RowProps } from "./Row";
 export { default as Table, type TableProps } from "./Table";
-export { type SortState } from "./types";
+export type { SortState } from "./types";

package/src/tabs/index.ts

@@ -1,6 +1,6 @@
 "use client";
 export { default as Tabs } from "./Tabs";
-export { type TabsProps } from "./Tabs.types";
+export type { TabsProps } from "./Tabs.types";
 export { default as TabsTab, type TabProps } from "./parts/tab/Tab";
 export {
   default as TabsList,

package/src/toggle-group/index.ts

@@ -1,6 +1,6 @@
 "use client";
 export { default as ToggleGroup } from "./ToggleGroup";
-export { type ToggleGroupProps } from "./ToggleGroup.types";
+export type { ToggleGroupProps } from "./ToggleGroup.types";
 export {
   default as ToggleGroupItem,
   type ToggleGroupItemProps,