@navikt/ds-react 5.5.0 → 5.6.0

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

@@ -6,23 +6,22 @@ import { HGrid, HStack, VStack } from "../..";
 import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 
-export default {
+const meta: Meta<typeof Box> = {
   title: "ds-react/Primitives/Box",
   component: Box,
-} satisfies Meta<typeof Box>;
-
-export const Default = {
-  render: () => (
-    <Box>
-      <BodyLong>
-        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
-        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
-        Proident pariatur proident pariatur magna consequat velit id commodo
-        quis sunt tempor ullamco aliquip pariatur.
-      </BodyLong>
-    </Box>
-  ),
 };
+export default meta;
+
+export const Default = () => (
+  <Box>
+    <BodyLong>
+      This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+      nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+      Proident pariatur proident pariatur magna consequat velit id commodo quis
+      sunt tempor ullamco aliquip pariatur.
+    </BodyLong>
+  </Box>
+);
 
 const Card = ({
   background,
@@ -44,43 +43,38 @@ const Card = ({
   </Box>
 );
 
-export const AsCard = {
-  render: () => {
-    return (
-      <HStack gap="4" justify="center">
-        <Card>
-          <h1>Card one</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-        <Card>
-          <h1>Card two</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-        <Card>
-          <h1>Card three</h1>
-          <BodyLong>
-            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
-            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
-          </BodyLong>
-        </Card>
-      </HStack>
-    );
-  },
-};
+export const AsCard = () => (
+  <HStack gap="4" justify="center">
+    <Card>
+      <h1>Card one</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+    <Card>
+      <h1>Card two</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+    <Card>
+      <h1>Card three</h1>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+      </BodyLong>
+    </Card>
+  </HStack>
+);
 
-export const ThemingDemo = {
-  render: () => {
-    const LinkCard = () => {
-      return (
-        <>
-          <style>
-            {`
+export const ThemingDemo = () => {
+  const LinkCard = () => {
+    return (
+      <>
+        <style>
+          {`
             .link-card {
               color: var(--navds-color-text-primary);
               text-decoration: none;
@@ -103,99 +97,99 @@ export const ThemingDemo = {
               transition: transform 200ms;
             }
           `}
-          </style>
+        </style>
+        <Box
+          as="a"
+          href="#"
+          className="link-card"
+          borderRadius="small"
+          borderColor="border-default"
+          borderWidth="1"
+          padding="4"
+          onClick={() => alert("Clicked!")}
+        >
+          <HStack gap="4" align="center">
+            <VStack gap="2">
+              <Heading size="medium">
+                LinkCard som bruker Box, HStack og VStack
+              </Heading>
+              <BodyLong>This truly is inside a box!</BodyLong>
+            </VStack>
+            <ChevronRightIcon fontSize={24} className="link-card__chevron" />
+          </HStack>
+        </Box>
+      </>
+    );
+  };
+
+  const ChatBubble = () => {
+    return (
+      <>
+        <Box
+          background="surface-neutral-subtle"
+          shadow="xsmall"
+          padding="4"
+          borderRadius="xlarge xlarge xlarge 0"
+        >
+          <VStack gap="2">
+            <Detail>BOX • 01.01.21 14:00</Detail>
+            <BodyLong>
+              Hei! Dette er en chatbobble som bruker Box som base!
+            </BodyLong>
+          </VStack>
+        </Box>
+      </>
+    );
+  };
+
+  const PricePill = () => {
+    return (
+      <>
+        <style>
+          {`
+              .old-price {
+                text-decoration: line-through;
+              }
+            `}
+        </style>
+        <HStack>
           <Box
-            as="a"
-            href="#"
-            className="link-card"
-            borderRadius="small"
-            borderColor="border-default"
+            background="surface-success-subtle"
+            shadow="xsmall"
             padding="4"
-            onClick={() => alert("Clicked!")}
+            borderRadius="full 0 0 full"
           >
-            <HStack gap="4" align="center">
-              <VStack gap="2">
-                <Heading size="medium">
-                  LinkCard som bruker Box, HStack og VStack
-                </Heading>
-                <BodyLong>This truly is inside a box!</BodyLong>
-              </VStack>
-              <ChevronRightIcon fontSize={24} className="link-card__chevron" />
-            </HStack>
+            <VStack align="center">
+              <Detail>Episk ny pris</Detail>
+              <Heading size="medium">889.99 kr</Heading>
+            </VStack>
           </Box>
-        </>
-      );
-    };
-
-    const ChatBubble = () => {
-      return (
-        <>
           <Box
-            background="surface-neutral-subtle"
+            background="surface-danger-subtle"
             shadow="xsmall"
             padding="4"
-            borderRadius="xlarge xlarge xlarge 0"
+            borderRadius="0 full full 0"
           >
-            <VStack gap="2">
-              <Detail>BOX • 01.01.21 14:00</Detail>
-              <BodyLong>
-                Hei! Dette er en chatbobble som bruker Box som base!
-              </BodyLong>
+            <VStack align="center">
+              <Detail>Førpris</Detail>
+              <Heading className="old-price" size="medium">
+                399.99 kr
+              </Heading>
             </VStack>
           </Box>
-        </>
-      );
-    };
-
-    const PricePill = () => {
-      return (
-        <>
-          <style>
-            {`
-              .old-price {
-                text-decoration: line-through;
-              }
-            `}
-          </style>
-          <HStack>
-            <Box
-              background="surface-success-subtle"
-              shadow="xsmall"
-              padding="4"
-              borderRadius="full 0 0 full"
-            >
-              <VStack align="center">
-                <Detail>Episk ny pris</Detail>
-                <Heading size="medium">889.99 kr</Heading>
-              </VStack>
-            </Box>
-            <Box
-              background="surface-danger-subtle"
-              shadow="xsmall"
-              padding="4"
-              borderRadius="0 full full 0"
-            >
-              <VStack align="center">
-                <Detail>Førpris</Detail>
-                <Heading className="old-price" size="medium">
-                  399.99 kr
-                </Heading>
-              </VStack>
-            </Box>
-          </HStack>
-        </>
-      );
-    };
-
-    return (
-      <VStack gap="8">
-        <Card>Dette er et Card som bruker Box som base</Card>
-        <LinkCard />
-        <ChatBubble />
-        <PricePill />
-      </VStack>
+        </HStack>
+      </>
     );
-  },
+  };
+
+  return (
+    <VStack gap="8">
+      <Card>Dette er et Card som bruker Box som base</Card>
+      <LinkCard />
+      <ChatBubble />
+      <PricePill />
+    </VStack>
+  );
 };
 
 export const PaddingBreakpoints = {
@@ -203,14 +197,14 @@ export const PaddingBreakpoints = {
     <div>
       <Box
         padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
-        borderColor="border-default"
+        background="surface-neutral"
       >
-        <BodyLong>
+        <Box background="surface-alt-3-subtle">
           This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
           nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
           Proident pariatur proident pariatur magna consequat velit id commodo
           quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+        </Box>
       </Box>
     </div>
   ),
@@ -222,67 +216,74 @@ export const PaddingBreakpointsInherit1 = {
       <Box
         padding={{ xs: "2" }}
         paddingInline={{ md: "24 0" }}
-        borderColor="border-default"
+        background="surface-neutral"
       >
-        <BodyLong>
+        <Box background="surface-alt-3-subtle">
           This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
           nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
           Proident pariatur proident pariatur magna consequat velit id commodo
           quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+        </Box>
       </Box>
     </div>
   ),
 };
-export const PaddingBreakpointsInherit2 = {
-  render: () => (
-    <div>
-      <Box
-        padding={{ xs: "2", sm: "3" }}
-        paddingInline={{ sm: "4 0", md: "24 0" }}
-        borderColor="border-default"
-      >
-        <BodyLong>
-          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
-          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
-          Proident pariatur proident pariatur magna consequat velit id commodo
-          quis sunt tempor ullamco aliquip pariatur.
-        </BodyLong>
+export const PaddingBreakpointsInherit2 = () => (
+  <div>
+    <Box
+      padding={{ xs: "2", sm: "3" }}
+      paddingInline={{ sm: "4 0", md: "24 0" }}
+      background="surface-neutral"
+    >
+      <Box background="surface-alt-3-subtle">
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+        Proident pariatur proident pariatur magna consequat velit id commodo
+        quis sunt tempor ullamco aliquip pariatur.
       </Box>
-    </div>
-  ),
-};
+    </Box>
+  </div>
+);
 
-export const Padding = {
-  render: () => (
-    <>
-      <style>
-        {`
-          .navds-box {
-            width: fit-content;
-          }
-        `}
-      </style>
-      <VStack align="center">
-        <Box padding="20" borderColor="border-default">
-          <BodyLong>Padding all around</BodyLong>
-        </Box>
-        <Box padding="1" paddingBlock="20 0" borderColor="border-default">
-          <BodyLong>Padding to the North</BodyLong>
-        </Box>
-        <Box padding="1" paddingInline="0 20" borderColor="border-default">
-          <BodyLong>Padding to the East</BodyLong>
-        </Box>
-        <Box padding="1" paddingBlock="0 20" borderColor="border-default">
-          <BodyLong>Padding to the South</BodyLong>
-        </Box>
-        <Box padding="1" paddingInline="20 0" borderColor="border-default">
-          <BodyLong>Padding to the West</BodyLong>
+export const Padding = () => (
+  <VStack align="center" gap="2">
+    <Box padding="20" background="surface-alt-3-subtle">
+      <BodyLong>Padding all around</BodyLong>
+    </Box>
+    <Box padding="1" paddingBlock="20 0" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the North</BodyLong>
+    </Box>
+    <Box padding="1" paddingInline="0 20" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the East</BodyLong>
+    </Box>
+    <Box padding="1" paddingBlock="0 20" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the South</BodyLong>
+    </Box>
+    <Box padding="1" paddingInline="20 0" background="surface-alt-3-subtle">
+      <BodyLong>Padding to the West</BodyLong>
+    </Box>
+  </VStack>
+);
+
+export const BoxInBox = () => (
+  <div>
+    <Box
+      padding={{ xs: "2", sm: "3" }}
+      paddingInline={{ sm: "4 1" }}
+      background="surface-alt-1-moderate"
+      shadow="small"
+      borderWidth="2"
+      borderColor="border-alt-3"
+      borderRadius="large"
+    >
+      <Box padding="8" paddingInline={{ sm: "12" }} background="bg-default">
+        <Box background="surface-alt-3-subtle">
+          CSS variables on a Box should not be inherited by children.
         </Box>
-      </VStack>
-    </>
-  ),
-};
+      </Box>
+    </Box>
+  </div>
+);
 
 export const WithHGrid = () => {
   return (
@@ -308,77 +309,71 @@ export const WithHGrid = () => {
   );
 };
 
-export const BorderWidth = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="1 2 3 4"
-        borderColor="border-strong"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="5 2 4 1"
-        borderColor="border-strong"
-        borderRadius="large"
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const BorderWidth = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="1 2 3 4"
+      borderColor="border-strong"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="5 2 4 1"
+      borderColor="border-strong"
+      borderRadius="large"
+    >
+      Box
+    </Box>
+  </VStack>
+);
 
-export const BorderRadius = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-        borderRadius="small medium large xlarge"
-      >
-        Box
-      </Box>
-      <Box
-        background="bg-subtle"
-        padding="10"
-        borderWidth="2"
-        borderColor="border-strong"
-        borderRadius={{
-          xs: "small medium large xlarge",
-          md: "medium small large full",
-          lg: "xlarge large",
-        }}
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const BorderRadius = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+      borderRadius="small medium large xlarge"
+    >
+      Box
+    </Box>
+    <Box
+      background="bg-subtle"
+      padding="10"
+      borderWidth="2"
+      borderColor="border-strong"
+      borderRadius={{
+        xs: "small medium large xlarge",
+        md: "medium small large full",
+        lg: "xlarge large",
+      }}
+    >
+      Box
+    </Box>
+  </VStack>
+);
 
-export const PaddingDemo = () => {
-  return (
-    <VStack gap="4">
-      <Box
-        background="bg-subtle"
-        padding="0"
-        paddingInline={{ xs: "20", lg: "10" }}
-      >
-        Box
-      </Box>
-    </VStack>
-  );
-};
+export const PaddingDemo = () => (
+  <VStack gap="4">
+    <Box
+      background="bg-subtle"
+      padding="0"
+      paddingInline={{ xs: "20", lg: "10" }}
+    >
+      Box
+    </Box>
+  </VStack>
+);

package/src/layout/box/Box.tsx

@@ -1,7 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import { BorderRadiiToken } from "../utilities/types";
 import {
   SpaceDelimitedAttribute,
   ResponsiveProp,
@@ -12,6 +11,7 @@ import {
   BackgroundToken,
   BorderColorToken,
   ShadowToken,
+  BorderRadiiToken,
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -129,6 +129,7 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         "border-radius",
         "border-radius",
         borderRadius,
+        false,
         ["0"]
       ),
       ...getResponsiveProps("box", "padding", "spacing", padding),