@navikt/ds-react 5.5.0 → 5.6.0

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";