@navikt/ds-react 5.6.0-beta.0 → 5.6.0

package/src/date/utils/labels.ts

@@ -82,3 +82,54 @@ export const labels: Partial<Labels> = {
   labelNext,
   labelPrevious,
 };
+
+export const labelWeekNumber = ({
+  localeCode,
+  week,
+}: {
+  localeCode?: string;
+  week: number;
+}): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Uke ${week}`;
+    case "nn":
+      return `Veke ${week}`;
+    case "en-GB":
+      return `Week ${week}`;
+    default:
+      return `Uke ${week}`;
+  }
+};
+
+export const labelWeekNumberButton = ({
+  localeCode,
+  week,
+}: {
+  localeCode?: string;
+  week: number;
+}): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg uke ${week}`;
+    case "nn":
+      return `Vel veke ${week}`;
+    case "en-GB":
+      return `Pick week ${week}`;
+    default:
+      return `Velg uke ${week}`;
+  }
+};
+
+export const labelWeek = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Uke:`;
+    case "nn":
+      return `Veke:`;
+    case "en-GB":
+      return `Week:`;
+    default:
+      return `Uke:`;
+  }
+};

package/src/index.ts

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";

package/src/layout/bleed/Bleed.stories.tsx

@@ -0,0 +1,381 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { BodyLong } from "../../typography";
+import { Bleed } from "./Bleed";
+import { Box, HStack, VStack } from "../..";
+
+export default {
+  title: "ds-react/Primitives/Bleed",
+  component: Bleed,
+} satisfies Meta<typeof Bleed>;
+
+export const Default = {
+  render: () => (
+    <>
+      <VStack gap="2">
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="10 0">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
+                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="0 10">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
+                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="10 0">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
+                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="0 10">
+              <Box
+                padding="3"
+                className="p"
+                background="surface-success-subtle"
+              >
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const AsChild = {
+  render: () => (
+    <>
+      <VStack gap="2">
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="10 0" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginInline="0 10" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="10 0" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginBlock=&quot;10 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding="5">
+          <Box background="surface-alt-2-subtle" padding="5">
+            <Bleed marginBlock="0 10" asChild>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>marginBlock=&quot;0 10&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const Breakpoints = {
+  render: () => (
+    <>
+      <VStack gap="2">
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginInline={{ xs: "10 0", md: "20 0" }}>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>
+                  {'marginInline={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginInline={{ xs: "0 10", md: "0 20" }}>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>
+                  {'marginInline={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginBlock={{ xs: "10 0", md: "20 0" }}>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>
+                  {'marginBlock={{ xs: "10 0", md: "20 0" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box background="surface-alt-1-subtle" padding={{ xs: "5", md: "10" }}>
+          <Box
+            background="surface-alt-2-subtle"
+            padding={{ xs: "5", md: "10" }}
+          >
+            <Bleed marginBlock={{ xs: "0 10", md: "0 20" }}>
+              <Box padding="3" background="surface-success-subtle">
+                <BodyLong>
+                  {'marginBlock={{ xs: "0 10", md: "0 20" }}'}
+                </BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const Px = {
+  render: () => (
+    <>
+      <style>
+        {`
+      .circle {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .scale {
+        transform: scale(5);
+      }
+      `}
+      </style>
+      <Box padding="32">
+        <HStack className="" gap="32">
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            L
+          </Box>
+          <Box
+            className="circle scale"
+            background="surface-success-subtle"
+            borderRadius="full"
+          >
+            <Bleed marginInline="0 px">L</Bleed>
+          </Box>
+        </HStack>
+      </Box>
+    </>
+  ),
+};
+
+export const Full = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: () => (
+    <>
+      <style>
+        {`
+        .maxWidth {
+          max-width: 300px;
+        }
+        `}
+      </style>
+      <VStack gap="2" align="center">
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;full&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full 0">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;full 0&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="0 full">
+              <Box background="surface-success-subtle">
+                <BodyLong>marginInline=&quot;0 full&quot;</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const ReflectivePadding = {
+  render: () => (
+    <>
+      <style>
+        {`
+      .navds-bleed {
+        background-color: var(--a-surface-success-subtle);
+        width: fit-content;
+      }
+      `}
+      </style>
+      <HStack gap="3">
+        <VStack gap="2">
+          <p>CSS string</p>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed asChild>
+                <BodyLong>before Bleed</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed marginInline="10 0" asChild>
+                <BodyLong>without reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box background="surface-alt-1-subtle" padding="5">
+            <Box background="surface-alt-2-subtle" padding="5">
+              <Bleed marginInline="10 0" reflectivePadding asChild>
+                <BodyLong>with reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+        </VStack>
+
+        <VStack gap="2">
+          <p>breakpoints</p>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed asChild>
+                <BodyLong>before Bleed</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed
+                marginInline={{
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
+                }}
+                asChild
+              >
+                <BodyLong>without reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+          <Box
+            background="surface-alt-1-subtle"
+            padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+          >
+            <Box
+              background="surface-alt-2-subtle"
+              padding={{ xs: "2", sm: "4", md: "6", lg: "8", xl: "10" }}
+            >
+              <Bleed
+                marginInline={{
+                  xs: "4 0",
+                  sm: "8 0",
+                  md: "12 0",
+                  lg: "16 0",
+                  xl: "20 0",
+                }}
+                reflectivePadding
+                asChild
+              >
+                <BodyLong>with reflectivePadding</BodyLong>
+              </Bleed>
+            </Box>
+          </Box>
+        </VStack>
+      </HStack>
+    </>
+  ),
+};

package/src/layout/bleed/Bleed.tsx

@@ -0,0 +1,130 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import {
+  ResponsiveProp,
+  SpacingScale,
+  getResponsiveProps,
+} from "../utilities/css";
+import { Slot } from "../../util/Slot";
+
+export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
+export type BleedSpacingBlock = "0" | "px" | SpacingScale;
+
+export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** **Negative** horizontal margin around children.
+   *  Accepts a spacing token 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<
+    BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
+  >;
+  /** **Negative** vertical margin around children.
+   *  Accepts a spacing token 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<
+    BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`
+  >;
+  /**
+   * When true, set the padding to mirror the margin.
+   * This maintains the apparent width of the element prior to adding Bleed.
+   * When this is used with `asChild`, it will overwrite the padding of the child.
+   */
+  reflectivePadding?: boolean;
+
+  /**
+   * When true, the Bleed will render as its child. This merges classes, styles and event handlers.
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/Bleed)
+ * @see 🏷️ {@link BleedProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <Bleed marginInline="4" marginBlock="4">
+ *     <BodyLong>Some content</BodyLong>
+ *   </Bleed>
+ * </Box>
+ */
+export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
+  (
+    {
+      className,
+      marginInline,
+      marginBlock,
+      reflectivePadding,
+      style: _style,
+      asChild,
+      ...rest
+    },
+    ref
+  ) => {
+    let style: React.CSSProperties = {
+      ..._style,
+      ...getResponsiveProps(
+        "bleed",
+        "margin-inline",
+        "spacing",
+        marginInline,
+        true,
+        ["0", "full", "px"]
+      ),
+
+      ...getResponsiveProps(
+        "bleed",
+        "margin-block",
+        "spacing",
+        marginBlock,
+        true,
+        ["0", "px"]
+      ),
+    };
+
+    if (reflectivePadding) {
+      style = {
+        ...style,
+        ...getResponsiveProps(
+          "bleed",
+          "padding-inline",
+          "spacing",
+          marginInline,
+          false,
+          ["0", "full", "px"]
+        ),
+        ...getResponsiveProps(
+          "bleed",
+          "padding-block",
+          "spacing",
+          marginBlock,
+          false,
+          ["0", "px"]
+        ),
+      };
+    }
+
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        {...rest}
+        className={cl("navds-bleed", className, {
+          "navds-bleed--padding": reflectivePadding,
+        })}
+        ref={ref}
+        style={style}
+      />
+    );
+  }
+);

package/src/layout/bleed/index.ts

@@ -0,0 +1 @@
+export { Bleed, type BleedProps } from "./Bleed";

package/src/layout/box/Box.tsx

@@ -129,6 +129,7 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         "border-radius",
         "border-radius",
         borderRadius,
+        false,
         ["0"]
       ),
       ...getResponsiveProps("box", "padding", "spacing", padding),

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import { BreakpointsAlias } from "../utilities/css";
+import { Slot } from "../../util/Slot";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -19,6 +20,10 @@ export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
    * @default "div"
    */
   as?: "div" | "span";
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   */
+  asChild?: boolean;
 }
 
 const Responsive = forwardRef<
@@ -26,14 +31,24 @@ const Responsive = forwardRef<
   ResponsiveProps & { variant: "show" | "hide" }
 >(
   (
-    { as: Component = "div", className, above, below, variant, ...rest },
+    {
+      as: Component = "div",
+      className,
+      above,
+      below,
+      variant,
+      asChild,
+      ...rest
+    },
     ref
   ) => {
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
 
+    const Comp = asChild ? Slot : Component;
+
     return (
-      <Component
+      <Comp
         {...rest}
         ref={ref}
         className={cl("navds-responsive", className, {
@@ -54,14 +69,14 @@ const Responsive = forwardRef<
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide below="md">
+ *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide above="md">
+ *   <Hide above="md" asChild>
  *      // Only visible below "md"
  *   </Hide>
  * </HGrid>
@@ -79,14 +94,14 @@ export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show below="md">
+ *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show above="md">
+ *   <Show above="md" asChild>
  *      // Only visible above "md"
  *   </Show>
  * </HGrid>