@navikt/ds-react 7.6.0 → 7.7.0

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

@@ -0,0 +1,154 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { BorderKeys } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
+import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
+import { getResponsiveProps } from "../utilities/css";
+import {
+  BorderRadiiToken,
+  ResponsiveProp,
+  SemanticRoleBgDarkside,
+  SemanticShadowTokens,
+  SemanticStaticBgDarkside,
+  SemanticStaticBorderDarkside,
+  SpaceDelimitedAttribute,
+} from "../utilities/types";
+
+export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * CSS `background-color` property.
+   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   */
+  background?: SemanticStaticBgDarkside | SemanticRoleBgDarkside;
+  /**
+   * CSS `border-color` property.
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   */
+  borderColor?: BorderKeys | SemanticStaticBorderDarkside;
+  /**
+   * CSS `border-radius` property.
+   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+   * or an object of radius tokens for different breakpoints.
+   * @example
+   * borderRadius='full'
+   * borderRadius='0 full large small'
+   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   */
+  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  /**
+   * CSS `border-width` property. If this is not set there will be no border.
+   * @example
+   * borderWidth='2'
+   * borderWidth='1 2 3 4'
+   */
+  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+  /** Shadow on box. Accepts a shadow token.
+   * @example
+   * shadow='small'
+   */
+  shadow?: SemanticShadowTokens;
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
+
+/**
+ *
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
+ * @see 🏷️ {@link BoxProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        background,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        shadow,
+        style: _style,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const style: React.CSSProperties = {
+        ..._style,
+        "--__axc-box-background": background
+          ? `var(--ax-bg-${background})`
+          : undefined,
+        "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined,
+        "--__axc-box-border-color": borderColor
+          ? `var(--ax-border-${borderColor})`
+          : undefined,
+        "--__axc-box-border-width": borderWidth
+          ? borderWidth
+              .split(" ")
+              .map((x) => `${x}px`)
+              .join(" ")
+          : undefined,
+        ...getResponsiveProps(
+          "ax",
+          "box",
+          "border-radius",
+          "border-radius",
+          borderRadius,
+          false,
+          ["0"],
+        ),
+      };
+
+      const Comp = asChild ? Slot : Component;
+
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-box", className, {
+              "navds-box-bg": background,
+              "navds-box-border-color": borderColor,
+              "navds-box-border-width": borderWidth,
+              "navds-box-border-radius": borderRadius,
+              "navds-box-shadow": shadow,
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
+
+export default BoxNew;

package/src/layout/box/Box.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -18,6 +19,7 @@ import {
   SpaceDelimitedAttribute,
   SurfaceColorToken,
 } from "../utilities/types";
+import BoxNew from "./Box.darkside";
 
 export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
@@ -55,6 +57,11 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 
+interface BoxComponentType
+  extends OverridableComponent<BoxProps, HTMLDivElement> {
+  New: typeof BoxNew;
+}
+
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
  *
@@ -82,69 +89,91 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
  *  </Box>
  * </VStack>
  */
-export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
-  (
-    {
-      children,
-      className,
-      as: Component = "div",
-      background,
-      borderColor,
-      borderWidth,
-      borderRadius,
-      shadow,
-      style: _style,
-      asChild,
-      ...rest
-    },
-    ref,
-  ) => {
-    const style: React.CSSProperties = {
-      ..._style,
-      "--__ac-box-background": background
-        ? `var(--a-${background})`
-        : undefined,
-      "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
-      "--__ac-box-border-color": borderColor
-        ? `var(--a-${borderColor})`
-        : undefined,
-      "--__ac-box-border-width": borderWidth
-        ? borderWidth
-            .split(" ")
-            .map((x) => `${x}px`)
-            .join(" ")
-        : undefined,
-      ...getResponsiveProps(
-        "box",
-        "border-radius",
-        "border-radius",
+export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        background,
+        borderColor,
+        borderWidth,
         borderRadius,
-        false,
-        ["0"],
-      ),
-    };
+        shadow,
+        style: _style,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+
+      if (
+        process.env.NODE_ENV !== "production" &&
+        themeContext &&
+        (background || borderColor || shadow)
+      ) {
+        console.warn(
+          `<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with AkselTheme (darkmode-support). To continue using these properties, migrate to '<Box.New>'`,
+        );
+      }
+
+      const prefix = themeContext ? "ax" : "a";
+
+      const style: React.CSSProperties = {
+        ..._style,
+        [`--__${prefix}c-box-background`]: background
+          ? `var(--a-${background})`
+          : undefined,
+        [`--__${prefix}c-box-shadow`]: shadow
+          ? `var(--a-shadow-${shadow})`
+          : undefined,
+        [`--__${prefix}c-box-border-color`]: borderColor
+          ? `var(--a-${borderColor})`
+          : undefined,
+        [`--__${prefix}c-box-border-width`]: borderWidth
+          ? borderWidth
+              .split(" ")
+              .map((x) => `${x}px`)
+              .join(" ")
+          : undefined,
+        ...getResponsiveProps(
+          prefix,
+          "box",
+          "border-radius",
+          "border-radius",
+          borderRadius,
+          false,
+          ["0"],
+        ),
+      };
+
+      const Comp = asChild ? Slot : Component;
+
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-box", className, {
+              "navds-box-bg": background,
+              "navds-box-border-color": borderColor,
+              "navds-box-border-width": borderWidth,
+              "navds-box-border-radius": borderRadius,
+              "navds-box-shadow": shadow,
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
 
-    const Comp = asChild ? Slot : Component;
+export const Box = BoxComponent as BoxComponentType;
 
-    return (
-      <BasePrimitive {...rest}>
-        <Comp
-          {...omit(rest, PRIMITIVE_PROPS)}
-          ref={ref}
-          style={style}
-          className={cl("navds-box", className, {
-            "navds-box-bg": background,
-            "navds-box-border-color": borderColor,
-            "navds-box-border-width": borderWidth,
-            "navds-box-border-radius": borderRadius,
-            "navds-box-shadow": shadow,
-          })}
-        >
-          {children}
-        </Comp>
-      </BasePrimitive>
-    );
-  },
-);
+Box.New = BoxNew;
 
 export default Box;

package/src/layout/box/index.ts

@@ -1,2 +1,5 @@
 "use client";
 export { default as Box, type BoxProps } from "./Box";
+
+/* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
+/* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */

package/src/layout/grid/HGrid.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { OverridableComponent, omit } from "../../util";
 import BasePrimitive, {
@@ -77,11 +78,14 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+      const prefix = themeContext ? "ax" : "a";
+
       const styles: React.CSSProperties = {
         ...style,
-        "--__ac-hgrid-align": align,
-        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+        [`--__${prefix}c-hgrid-align`]: align,
+        ...getResponsiveProps(prefix, `hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(prefix, `hgrid`, "columns", formatGrid(columns)),
       };
 
       const Comp = asChild ? Slot : Component;

package/src/layout/page/Page.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { OverridableComponent } from "../../util";
 import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
@@ -14,6 +15,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * Background color.
    * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
    * @default "bg-default"
+   * @deprecated 'background'-prop will be removed in future major-versions. Use `<Box asChild background="...">` wrapped around `<Page>`.
    */
   background?: BackgroundColorToken;
   /**
@@ -52,6 +54,14 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+
+      if (process.env.NODE_ENV !== "production" && themeContext && background) {
+        console.warn(
+          `Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``,
+        );
+      }
+
       const style: React.CSSProperties = {
         ..._style,
         "--__ac-page-background": `var(--a-${background})`,

package/src/layout/stack/Stack.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { UNSAFE_useAkselTheme } from "../../provider";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
@@ -83,12 +84,15 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
+      const themeContext = UNSAFE_useAkselTheme(false);
+      const prefix = themeContext ? "ax" : "a";
+
       const style: React.CSSProperties = {
         ..._style,
-        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
-        ...getResponsiveValue(`stack`, "direction", direction),
-        ...getResponsiveValue(`stack`, "align", align),
-        ...getResponsiveValue(`stack`, "justify", justify),
+        ...getResponsiveProps(prefix, `stack`, "gap", "spacing", gap),
+        ...getResponsiveValue(prefix, `stack`, "direction", direction),
+        ...getResponsiveValue(prefix, `stack`, "align", align),
+        ...getResponsiveValue(prefix, `stack`, "justify", justify),
       };
 
       const Comp = asChild ? Slot : Component;

package/src/layout/utilities/css.ts

@@ -1,6 +1,7 @@
 import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
+  prefix: string,
   componentName: string,
   componentProp: string,
   responsiveProp?: ResponsiveProp<T>,
@@ -11,13 +12,13 @@ export function getResponsiveValue<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+      [`--__${prefix}c-${componentName}-${componentProp}-xs`]: responsiveProp,
     };
   }
 
   return Object.fromEntries(
     Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`,
       responsiveValue,
     ]),
   );
@@ -37,6 +38,7 @@ const translateTokenStringToCSS = (
   tokenSubgroup: string,
   tokenExceptions: string[],
   invert: boolean,
+  prefix: string,
 ) => {
   return tokenString
     .split(" ")
@@ -54,7 +56,7 @@ const translateTokenStringToCSS = (
         return "auto";
       }
 
-      let output = `var(--a-${tokenSubgroup}-${x})`;
+      let output = `var(--${prefix}-${tokenSubgroup}-${x})`;
       if (tokenExceptions.includes(x)) {
         output = translateExceptionToCSS(x);
       }
@@ -70,6 +72,7 @@ const translateTokenStringToCSS = (
 };
 
 export function getResponsiveProps<T extends string>(
+  prefix: string,
   componentName: string,
   componentProp: string,
   tokenSubgroup: string,
@@ -83,27 +86,30 @@ export function getResponsiveProps<T extends string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]:
+      [`--__${prefix}c-${componentName}-${componentProp}-xs`]:
         translateTokenStringToCSS(
           componentProp,
           responsiveProp,
           tokenSubgroup,
           tokenExceptions,
           invert,
+          prefix,
         ),
     };
   }
 
   const styleProps = {};
   Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
-    styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
-      translateTokenStringToCSS(
-        componentProp,
-        aliasOrScale,
-        tokenSubgroup,
-        tokenExceptions,
-        invert,
-      );
+    styleProps[
+      `--__${prefix}c-${componentName}-${componentProp}-${breakpointAlias}`
+    ] = translateTokenStringToCSS(
+      componentProp,
+      aliasOrScale,
+      tokenSubgroup,
+      tokenExceptions,
+      invert,
+      prefix,
+    );
   });
   return styleProps;
 }

package/src/layout/utilities/types.ts

@@ -1,3 +1,9 @@
+/* Darkside tokens */
+import { semanticTokenConfig } from "@navikt/ds-tokens/darkside/tokens/semantic";
+import { SemanticTokensForAllRolesConfigT } from "@navikt/ds-tokens/darkside/tokens/semantic-roles";
+import { shadowTokenConfig } from "@navikt/ds-tokens/darkside/tokens/shadow";
+
+/* Old */
 import borderRadii from "@navikt/ds-tokens/src/border.json";
 import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
@@ -27,3 +33,21 @@ type FixedResponsiveT<T> = {
 };
 
 export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+
+/**
+ * Darkside tokens
+ */
+export type SemanticShadowTokens = keyof ReturnType<
+  typeof shadowTokenConfig
+>["shadow"];
+
+export type SemanticStaticBgDarkside = keyof ReturnType<
+  typeof semanticTokenConfig
+>["bg"];
+
+export type SemanticRoleBgDarkside =
+  keyof SemanticTokensForAllRolesConfigT<"color">["bg"];
+
+export type SemanticStaticBorderDarkside = keyof ReturnType<
+  typeof semanticTokenConfig
+>["border"];

package/src/util/i18n/locales/en.ts

@@ -45,9 +45,16 @@ export default {
       labelSuffix: "delete",
     },
   },
+  CopyButton: {
+    title: "Copy",
+    activeText: "Copied!",
+  },
   ErrorSummary: {
     heading: "You must correct the following errors before you can continue:",
   },
+  FormSummary: {
+    editAnswer: "Edit answer",
+  },
   Loader: {
     title: "Waiting…",
   },
@@ -117,4 +124,16 @@ export default {
     closeDatePicker: "Close date picker",
     closeMonthPicker: "Close month picker",
   },
+  Combobox: {
+    addOption: "Add",
+    loading: "Searching…",
+    maxSelected: "{selected} of max {limit} are selected.",
+    clear: "Clear",
+  },
+  GuidePanel: {
+    illustrationLabel: "Illustration of advisor",
+  },
+  HelpText: {
+    title: "More information",
+  },
 } satisfies Translations;

package/src/util/i18n/locales/nb.ts

@@ -49,9 +49,16 @@ export default {
       labelSuffix: "slett",
     },
   },
+  CopyButton: {
+    title: "Kopier",
+    activeText: "Kopiert!",
+  },
   ErrorSummary: {
     heading: "Du må rette disse feilene før du kan fortsette:",
   },
+  FormSummary: {
+    editAnswer: "Endre svar",
+  },
   Loader: {
     title: "Venter…",
   },
@@ -122,4 +129,18 @@ export default {
     closeDatePicker: "Lukk datovelger",
     closeMonthPicker: "Lukk månedsvelger",
   },
+  Combobox: {
+    /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`. */
+    addOption: "Legg til",
+    /** Loader title */
+    loading: "Søker…",
+    maxSelected: "{selected} av maks {limit} er valgt.",
+    clear: "Tøm",
+  },
+  GuidePanel: {
+    illustrationLabel: "Illustrasjon av veileder",
+  },
+  HelpText: {
+    title: "Mer informasjon",
+  },
 } satisfies TranslationMap;

package/src/util/i18n/locales/nn.ts

@@ -45,9 +45,16 @@ export default {
       labelSuffix: "slett",
     },
   },
+  CopyButton: {
+    title: "Kopier",
+    activeText: "Kopiert!",
+  },
   ErrorSummary: {
     heading: "Du må rette desse feila før du kan halde fram:",
   },
+  FormSummary: {
+    editAnswer: "Endre svar",
+  },
   Loader: {
     title: "Ventar…",
   },
@@ -117,4 +124,16 @@ export default {
     closeDatePicker: "Lukk datoveljar",
     closeMonthPicker: "Lukk månadsveljar",
   },
+  Combobox: {
+    addOption: "Legg til",
+    loading: "Søker…",
+    maxSelected: "{selected} av maks {limit} er valt.",
+    clear: "Tøm",
+  },
+  GuidePanel: {
+    illustrationLabel: "Illustrasjon av rettleiar",
+  },
+  HelpText: {
+    title: "Meir informasjon",
+  },
 } satisfies Translations;