@navikt/ds-react 4.7.3 → 4.8.0

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

@@ -0,0 +1,161 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { HStack, VStack, Spacer } from ".";
+
+export default {
+  title: "ds-react/Stack",
+  component: HStack,
+} satisfies Meta<typeof HStack>;
+
+export const Horizontal = {
+  render: () => (
+    <HStack gap="4">
+      <Placeholders count={4} />
+    </HStack>
+  ),
+};
+
+export const Spacing = {
+  render: () => (
+    <div style={{ height: "80vh", display: "flex" }}>
+      <VStack gap="8">
+        <Spacer />
+        <HStack gap="4">
+          <Placeholders count={1} />
+          <Spacer />
+          <Placeholders count={1} />
+        </HStack>
+        <HStack gap="4">
+          <Placeholders count={1} />
+          <Placeholders count={1} />
+        </HStack>
+        <HStack gap="4">
+          <Placeholders count={2} />
+        </HStack>
+      </VStack>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Vertical = {
+  render: () => (
+    <VStack gap="4">
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const VerticalDemo = {
+  render: () => (
+    <VStack gap="2">
+      <VStack>
+        <Placeholders count={4} />
+      </VStack>
+      <Placeholders count={4} />
+      <VStack>
+        <Placeholders count={4} />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const VerticalAlign = {
+  render: () => (
+    <VStack gap="4">
+      <VStack align="start">
+        <Placeholders count={2} />
+      </VStack>
+      <VStack align="center">
+        <Placeholders count={2} />
+      </VStack>
+      <VStack align="end">
+        <Placeholders count={2} />
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const OverrideComponent = {
+  render: () => (
+    <VStack gap="4" as="form" onSubmit={(e) => e.preventDefault()}>
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const Responsive = {
+  render: () => (
+    <VStack gap={{ xs: "1", sm: "3", md: "6", lg: "10", xl: "16" }}>
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const Nested = {
+  render: () => (
+    <VStack gap="16">
+      <Placeholders count={2}>
+        <VStack gap="4">
+          <Placeholders count={2} color="gray" />
+        </VStack>
+      </Placeholders>
+    </VStack>
+  ),
+};
+
+export const DividerDemo = {
+  render: () => (
+    <div style={{ height: "80vh", width: "40rem" }}>
+      <VStack gap={{ xs: "2", md: "6", lg: "12" }}>
+        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
+          <Placeholders count={1} />
+          <Spacer />
+          <Placeholders count={1} />
+        </HStack>
+        <hr
+          style={{
+            border: "none",
+            borderBottom: "1px solid var(--a-border-divider)",
+            margin: 0,
+          }}
+        />
+        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
+          <Placeholders count={2} />
+        </HStack>
+      </VStack>
+    </div>
+  ),
+};
+
+function Placeholders({
+  count,
+  children,
+  color,
+}: {
+  count: number;
+  children?: React.ReactNode;
+  color?: string;
+}) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, i) => (
+        <div
+          key={i}
+          style={{
+            backgroundColor: color ?? "var(--a-purple-200)",
+            height: children ? "" : "3rem",
+            width: children ? "" : "3rem",
+          }}
+        >
+          {children}
+        </div>
+      ))}
+    </>
+  );
+}

package/src/layout/utilities/css.ts

@@ -0,0 +1,56 @@
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpacingScale =
+  | "0"
+  | "05"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "14"
+  | "16"
+  | "18"
+  | "20"
+  | "24"
+  | "32";
+
+export type ResponsiveProp<T> =
+  | T
+  | {
+      // eslint-disable-next-line no-unused-vars
+      [Breakpoint in BreakpointsAlias]?: T;
+    };
+
+export function getResponsiveProps(
+  componentName: string,
+  componentProp: string,
+  tokenSubgroup: string,
+  responsiveProp?:
+    | string
+    | {
+        // eslint-disable-next-line no-unused-vars
+        [Breakpoint in BreakpointsAlias]?: string;
+      }
+) {
+  if (!responsiveProp) return {};
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+      `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+    ])
+  );
+}

package/esm/dropdown/Menu/GroupedList/Heading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../../src/dropdown/Menu/GroupedList/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAUtB,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAGtC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CACjC,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,8BAA8B,EAC9B,eAAe,EACf,uBAAuB,EACvB,SAAS,CACV,IACD,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/esm/dropdown/Menu/GroupedList/Item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/dropdown/Menu/GroupedList/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAUjD,MAAM,CAAC,MAAM,WAAW,GAGpB,UAAU,CAAC,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9C,mBAAgD,CAAF;IAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,OAAO,CACL,4BAAI,SAAS,EAAC,2BAA2B;QACvC,oBAAC,SAAS,oBACJ,IAAI,IACR,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,OAAO,EAAE,CAAC,KAAgD,EAAE,EAAE;;gBAC5D,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,wDAAG,KAAK,CAAC,CAAC;gBAC3B,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,KAAK,CAAC,CAAC;YACzB,CAAC,EACD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,kBAAkB,EAClB,yBAAyB,EACzB,SAAS,CACV,IACD,CACC,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC"}