@navikt/ds-react 6.11.0 → 6.12.0

package/src/alert/Alert.tsx

@@ -29,6 +29,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   fullWidth?: boolean;
+  /**
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
   /**
    * Removes background from Alert.
    * @default false
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       variant,
       size = "medium",
       fullWidth = false,
+      contentMaxWidth = true,
       inline = false,
       closeButton = false,
       onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
           {children}
         </BodyLong>
         {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
             />
           </div>
         )}

package/src/layout/base/BasePrimitive.tsx

@@ -4,8 +4,7 @@ import { Slot } from "../../slot/Slot";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface BasePrimitiveProps {
-  children: React.ReactElement;
+export type PrimitiveProps = {
   className?: string;
   /**
    * Padding around children.
@@ -40,6 +39,47 @@ export interface BasePrimitiveProps {
   paddingBlock?: ResponsiveProp<
     SpacingScale | `${SpacingScale} ${SpacingScale}`
   >;
+  /**
+   * Margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * margin='4'
+   * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  margin?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginInline='4'
+   * marginInline='4 5'
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  marginInline?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
+  /**
+   * Vertical margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginBlock='4'
+   * marginBlock='4 5'
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  marginBlock?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
   /**
    * CSS `width`
    */
@@ -140,6 +180,38 @@ export interface BasePrimitiveProps {
    * CSS `flex-grow`
    */
   flexGrow?: ResponsiveProp<string>;
+};
+
+export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
+  "className",
+  "padding",
+  "paddingInline",
+  "paddingBlock",
+  "margin",
+  "marginInline",
+  "marginBlock",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+];
+
+interface BasePrimitiveProps extends PrimitiveProps {
+  children: React.ReactElement;
 }
 
 export const BasePrimitive = ({
@@ -148,6 +220,9 @@ export const BasePrimitive = ({
   padding,
   paddingInline,
   paddingBlock,
+  margin,
+  marginInline,
+  marginBlock,
   width,
   minWidth,
   maxWidth,
@@ -172,6 +247,10 @@ export const BasePrimitive = ({
     ...getResponsiveProps("r", "p", "spacing", padding),
     ...getResponsiveProps("r", "pi", "spacing", paddingInline),
     ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Margin */
+    ...getResponsiveProps("r", "m", "spacing", margin),
+    ...getResponsiveProps("r", "mi", "spacing", marginInline),
+    ...getResponsiveProps("r", "mb", "spacing", marginBlock),
     /* Width & height */
     ...getResponsiveValue("r", "w", width),
     ...getResponsiveValue("r", "minw", minWidth),
@@ -203,6 +282,9 @@ export const BasePrimitive = ({
         "navds-r-p": padding,
         "navds-r-pi": paddingInline,
         "navds-r-pb": paddingBlock,
+        "navds-r-m": margin,
+        "navds-r-mi": marginInline,
+        "navds-r-mb": marginBlock,
         "navds-r-w": width,
         "navds-r-minw": minWidth,
         "navds-r-maxw": maxWidth,

package/src/layout/base/PrimitiveAsChildProps.ts

@@ -0,0 +1,42 @@
+export type PrimitiveAsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild: true;
+      /**
+       * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
+       *
+       * When using asChild, the prop is not allowed as it would have no effect.
+       */
+      as?: never;
+    }
+  | {
+      children?: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

package/src/layout/box/Box.tsx

@@ -1,6 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+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 {
   BackgroundColorToken,
@@ -9,77 +16,45 @@ import {
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
-  SpacingScale,
   SurfaceColorToken,
 } from "../utilities/types";
 
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * CSS `background-color` property.
-   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-   */
-  background?: BackgroundColorToken | SurfaceColorToken;
-  /**
-   * CSS `border-color` property.
-   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-   */
-  borderColor?: BorderColorToken;
-  /**
-   * 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">;
-  /**
-   * Padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * padding='4'
-   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  padding?: ResponsiveProp<SpacingScale>;
-  /**
-   * Horizontal padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingInline='4'
-   * paddingInline='4 5'
-   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
-   */
-  paddingInline?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /**
-   * Vertical padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingBlock='4'
-   * paddingBlock='4 5'
-   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  paddingBlock?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /** Shadow on box. Accepts a shadow token.
-   * @example
-   * shadow='small'
-   */
-  shadow?: ShadowToken;
-}
+export type BoxProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS `background-color` property.
+     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+     */
+    background?: BackgroundColorToken | SurfaceColorToken;
+    /**
+     * CSS `border-color` property.
+     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+     */
+    borderColor?: BorderColorToken;
+    /**
+     * 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?: ShadowToken;
+  };
 
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
@@ -111,17 +86,16 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
 export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
   (
     {
+      children,
+      className,
       as: Component = "div",
       background,
       borderColor,
       borderWidth,
       borderRadius,
-      className,
-      padding,
-      paddingInline,
-      paddingBlock,
       shadow,
       style: _style,
+      asChild,
       ...rest
     },
     ref,
@@ -149,18 +123,27 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         false,
         ["0"],
       ),
-      ...getResponsiveProps("box", "padding", "spacing", padding),
-      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
-      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
     };
 
+    const Comp = asChild ? Slot : Component;
+
     return (
-      <Component
-        {...rest}
-        className={cl("navds-box", className)}
-        ref={ref}
-        style={style}
-      />
+      <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>
     );
   },
 );

package/src/layout/grid/HGrid.tsx

@@ -1,34 +1,42 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { OverridableComponent, omit } from "../../util";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
-   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
-   * @example
-   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * columns={3}
-   * columns="repeat(3, minmax(0, 1fr))"
-   */
-  columns?: ResponsiveProp<number | string>;
-  /**
-   * Spacing between columns.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * gap="6"
-   * gap="8 4"
-   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
-   */
-  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-  /**
-   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
-   */
-  align?: "start" | "center" | "end";
-}
+export type HGridProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
+     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+     * @example
+     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+     * columns={3}
+     * columns="repeat(3, minmax(0, 1fr))"
+     */
+    columns?: ResponsiveProp<number | string>;
+    /**
+     * Spacing between columns.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * gap="6"
+     * gap="8 4"
+     * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+     */
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+     */
+    align?: "start" | "center" | "end";
+  };
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
@@ -54,25 +62,45 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  *   <div />
  * </HGrid>
  */
-export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, align, ...rest }, ref) => {
-    const styles: React.CSSProperties = {
-      ...style,
-      "--__ac-hgrid-align": align,
-      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
-    };
+export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        columns,
+        gap,
+        style,
+        align,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const styles: React.CSSProperties = {
+        ...style,
+        "--__ac-hgrid-align": align,
+        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+      };
+
+      const Comp = asChild ? Slot : Component;
 
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={cl("navds-hgrid", className)}
-        style={styles}
-      />
-    );
-  },
-);
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            className={cl("navds-hgrid", className)}
+            style={styles}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
 
 function formatGrid(
   props?: ResponsiveProp<number | string>,

package/src/layout/stack/HStack.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 
-export type HStackProps = Omit<StackProps, "direction">;
+export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
 
 /**
  * Layout-primitive for horizontal flexbox