@navikt/ds-react 5.4.1 → 5.5.0

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

@@ -0,0 +1,384 @@
+import React, { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { BodyLong, Detail, Heading } from "../../typography";
+import { Box } from "./Box";
+import { HGrid, HStack, VStack } from "../..";
+import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+
+export default {
+  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>
+  ),
+};
+
+const Card = ({
+  background,
+  borderRadius = "xlarge",
+  children,
+}: {
+  background?: BackgroundToken;
+  borderRadius?: BorderRadiiToken;
+  children: ReactNode;
+}) => (
+  <Box
+    padding="4"
+    background={background}
+    borderColor="border-subtle"
+    borderRadius={borderRadius}
+    shadow="xsmall"
+  >
+    <div style={{ width: "20rem" }}>{children}</div>
+  </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 ThemingDemo = {
+  render: () => {
+    const LinkCard = () => {
+      return (
+        <>
+          <style>
+            {`
+            .link-card {
+              color: var(--navds-color-text-primary);
+              text-decoration: none;
+            }
+            .link-card:hover {
+              border-color: var(--a-border-action);
+              box-shadow: var(--a-shadow-small);
+            }
+            .link-card:hover .navds-heading {
+              color: var(--a-text-action);
+              text-decoration: underline;
+            }
+            .link-card:hover .link-card__chevron,
+            .link-card:focus-within .link-card__chevron {
+              transform: translateX(4px);
+            }
+            .link-card__chevron {
+              flex-shrink: 0;
+              font-size: 1.5rem;
+              transition: transform 200ms;
+            }
+          `}
+          </style>
+          <Box
+            as="a"
+            href="#"
+            className="link-card"
+            borderRadius="small"
+            borderColor="border-default"
+            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
+              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>
+    );
+  },
+};
+
+export const PaddingBreakpoints = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        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>
+      </Box>
+    </div>
+  ),
+};
+
+export const PaddingBreakpointsInherit1 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2" }}
+        paddingInline={{ 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>
+      </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>
+      </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>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const WithHGrid = () => {
+  return (
+    <Box background="bg-subtle" padding="10">
+      <HGrid
+        gap="6"
+        columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
+      >
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+      </HGrid>
+    </Box>
+  );
+};
+
+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 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 PaddingDemo = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="0"
+        paddingInline={{ xs: "20", lg: "10" }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};

package/src/layout/box/Box.tsx

@@ -0,0 +1,148 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { BorderRadiiToken } from "../utilities/types";
+import {
+  SpaceDelimitedAttribute,
+  ResponsiveProp,
+  SpacingScale,
+  getResponsiveProps,
+} from "../utilities/css";
+import {
+  BackgroundToken,
+  BorderColorToken,
+  ShadowToken,
+} from "../utilities/types";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Background color. Accepts a color token. */
+  background?: BackgroundToken;
+  /** Border color. Accepts a color token. */
+  borderColor?: BorderColorToken;
+  /** Border radius. Accepts a radius token, 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>>;
+  /**
+   * Border-width. 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">;
+  /** Spacing around children. Accepts a spacing token 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 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 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;
+}
+
+/**
+ * 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 Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      background,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      className,
+      padding,
+      paddingInline,
+      paddingBlock,
+      shadow,
+      style: _style,
+      ...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",
+        borderRadius,
+        ["0"]
+      ),
+      ...getResponsiveProps("box", "padding", "spacing", padding),
+      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
+      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
+    };
+
+    return (
+      <Component
+        {...rest}
+        className={cl("navds-box", className)}
+        ref={ref}
+        style={style}
+      />
+    );
+  }
+);

package/src/layout/box/index.ts

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";

package/src/layout/grid/h-grid.stories.tsx

@@ -9,7 +9,7 @@ const columnsVariants = {
 };
 
 export default {
-  title: "ds-react/HGrid",
+  title: "ds-react/Primitives/HGrid",
   component: HGrid,
   parameters: {
     layout: "fullscreen",

package/src/layout/responsive/hide.stories.tsx

@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";
 
 export default {
-  title: "ds-react/Responsive/Hide",
+  title: "ds-react/Primitives/Hide",
   component: Hide,
 } satisfies Meta<typeof Hide>;
 

package/src/layout/responsive/show.stories.tsx

@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";
 
 export default {
-  title: "ds-react/Responsive/Show",
+  title: "ds-react/Primitives/Show",
   component: Show,
 } satisfies Meta<typeof Show>;
 

package/src/layout/stack/stack.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react";
 import { HStack, VStack, Spacer } from ".";
 
 export default {
-  title: "ds-react/Stack",
+  title: "ds-react/Primitives/Stack",
   component: HStack,
 } satisfies Meta<typeof HStack>;
 

package/src/layout/utilities/css.ts

@@ -1,4 +1,5 @@
 export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
 export type SpacingScale =
   | "0"
   | "05"
@@ -21,19 +22,22 @@ export type SpacingScale =
   | "24"
   | "32";
 
-type ResponsivePropConfig<T = string> = {
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+
+type FixedResponsiveT<T> = {
   // eslint-disable-next-line no-unused-vars
   [Breakpoint in BreakpointsAlias]?: T;
 };
 
-export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
 
-export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
-
-export function getResponsiveProps<T = string>(
+export function getResponsiveValue<T = string>(
   componentName: string,
   componentProp: string,
-  tokenSubgroup: string,
   responsiveProp?: ResponsiveProp<T>
 ) {
   if (!responsiveProp) {
@@ -42,22 +46,24 @@ export function getResponsiveProps<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
     };
   }
 
   return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
       `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+      responsiveValue,
     ])
   );
 }
 
-export function getResponsiveValue<T = string>(
+export function getResponsiveProps<T extends string>(
   componentName: string,
   componentProp: string,
-  responsiveProp?: ResponsiveValue<T>
+  tokenSubgroup: string,
+  responsiveProp?: ResponsiveProp<T>,
+  tokenExceptions: string[] = []
 ) {
   if (!responsiveProp) {
     return {};
@@ -65,14 +71,26 @@ export function getResponsiveValue<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+        .split(" ")
+        .map((x) =>
+          tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+        )
+        .join(" "),
     };
   }
 
   return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      responsiveValue,
-    ])
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+      return [
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        aliasOrScale
+          .split(" ")
+          .map((x) =>
+            tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+          )
+          .join(" "),
+      ];
+    })
   );
 }

package/src/layout/utilities/types.ts

@@ -0,0 +1,14 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
+import borderColors from "@navikt/ds-tokens/src/colors-border.json";
+import borderRadii from "@navikt/ds-tokens/src/border.json";
+import shadows from "@navikt/ds-tokens/src/shadow.json";
+
+export type BackgroundToken =
+  | keyof typeof bgColors.a
+  | keyof typeof surfaceColors.a;
+export type BorderColorToken = keyof typeof borderColors.a;
+export type BorderRadiiToken =
+  | keyof (typeof borderRadii.a)["border-radius"]
+  | "0";
+export type ShadowToken = keyof typeof shadows.a.shadow;

package/src/skeleton/Skeleton.tsx

@@ -57,6 +57,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
             "navds-skeleton--has-children": Boolean(children),
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
           }
         )}
         style={{ ...style, width, height }}