Stack-direction ved brekkpunkt

.changeset/rich-squids-shout.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+Stack: Kan nå endre direction, justify og align ved brekkpunkt. `Stack` er også nå en egen komponent sammen med `HStack` og `VStack`.

@navikt/core/css/primitives/stack.css

@@ -1,14 +1,29 @@
 .navds-stack {
-  --__ac-stack-align: initial;
-  --__ac-stack-justify: initial;
-  --__ac-stack-direction: initial;
   --__ac-stack-wrap: initial;
   --__ac-stack-gap-xs: initial;
-  --__ac-stack-gap-sm: initial;
-  --__ac-stack-gap-md: initial;
-  --__ac-stack-gap-lg: initial;
-  --__ac-stack-gap-xl: initial;
+  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
+  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
+  --__ac-stack-gap-lg: var(--__ac-stack-gap-md);
+  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
   --__ac-stack-gap: var(--__ac-stack-gap-xs);
+  --__ac-stack-justify-xs: initial;
+  --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
+  --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
+  --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
+  --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
+  --__ac-stack-justify: var(--__ac-stack-justify-xs);
+  --__ac-stack-align-xs: initial;
+  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
+  --__ac-stack-align-md: var(--__ac-stack-align-sm);
+  --__ac-stack-align-lg: var(--__ac-stack-align-md);
+  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
+  --__ac-stack-align: var(--__ac-stack-align-xs);
+  --__ac-stack-direction-xs: initial;
+  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
+  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
+  --__ac-stack-direction-lg: var(--__ac-stack-direction-md);
+  --__ac-stack-direction-xl: var(--__ac-stack-direction-lg);
+  --__ac-stack-direction: var(--__ac-stack-direction-xs);
 
   gap: var(--__ac-stack-gap);
   display: flex;
@@ -25,35 +40,41 @@
 
 .navds-stack > .navds-stack__spacer {
   margin-block-start: calc(var(--__ac-stack-gap) * -1);
-}
-
-.navds-hstack > .navds-stack__spacer {
   margin-inline-start: calc(var(--__ac-stack-gap) * -1);
 }
 
 @media (min-width: 480px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs));
+    --__ac-stack-gap: var(--__ac-stack-gap-sm);
+    --__ac-stack-align: var(--__ac-stack-align-sm);
+    --__ac-stack-justify: var(--__ac-stack-justify-sm);
+    --__ac-stack-direction: var(--__ac-stack-direction-sm);
   }
 }
 
 @media (min-width: 768px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs)));
+    --__ac-stack-gap: var(--__ac-stack-gap-md);
+    --__ac-stack-align: var(--__ac-stack-align-md);
+    --__ac-stack-justify: var(--__ac-stack-justify-md);
+    --__ac-stack-direction: var(--__ac-stack-direction-md);
   }
 }
 
 @media (min-width: 1024px) {
   .navds-stack {
-    --__ac-stack-gap: var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))));
+    --__ac-stack-gap: var(--__ac-stack-gap-lg);
+    --__ac-stack-align: var(--__ac-stack-align-lg);
+    --__ac-stack-justify: var(--__ac-stack-justify-lg);
+    --__ac-stack-direction: var(--__ac-stack-direction-lg);
   }
 }
 
 @media (min-width: 1280px) {
   .navds-stack {
-    --__ac-stack-gap: var(
-      --__ac-stack-gap-xl,
-      var(--__ac-stack-gap-lg, var(--__ac-stack-gap-md, var(--__ac-stack-gap-sm, var(--__ac-stack-gap-xs))))
-    );
+    --__ac-stack-gap: var(--__ac-stack-gap-xl);
+    --__ac-stack-align: var(--__ac-stack-align-xl);
+    --__ac-stack-justify: var(--__ac-stack-justify-xl);
+    --__ac-stack-direction: var(--__ac-stack-direction-xl);
   }
 }

@navikt/core/react/src/layout/stack/Stack.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
 import {
   getResponsiveProps,
+  getResponsiveValue,
   ResponsiveProp,
   SpacingScale,
 } from "../utilities/css";
@@ -12,17 +13,18 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Justify-content
    */
-  justify?:
+  justify?: ResponsiveProp<
     | "start"
     | "center"
     | "end"
     | "space-around"
     | "space-between"
-    | "space-evenly";
+    | "space-evenly"
+  >;
   /**
    * Align-items
    */
-  align?: "start" | "center" | "end" | "baseline" | "stretch";
+  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
   /**
    * flex-wrap
    */
@@ -33,7 +35,11 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   gap?: ResponsiveProp<SpacingScale>;
-  direction: "row" | "column";
+  /**
+   * flex-direction
+   * @default "row"
+   */
+  direction?: ResponsiveProp<"row" | "column">;
 }
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
@@ -47,18 +53,18 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         wrap = true,
         gap,
         style: _style,
-        direction,
+        direction = "row",
         ...rest
       },
       ref
     ) => {
       const style: React.CSSProperties = {
         ..._style,
-        "--__ac-stack-direction": direction,
-        "--__ac-stack-align": align,
-        "--__ac-stack-justify": justify,
         "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
         ...getResponsiveProps(`stack`, "gap", "spacing", gap),
+        ...getResponsiveValue(`stack`, "direction", direction),
+        ...getResponsiveValue(`stack`, "align", align),
+        ...getResponsiveValue(`stack`, "justify", justify),
       };
 
       return (

@navikt/core/react/src/layout/stack/index.ts

@@ -1,3 +1,4 @@
 export { HStack, type HStackProps } from "./HStack";
 export { VStack, type VStackProps } from "./VStack";
+export { Stack, type StackProps } from "./Stack";
 export { Spacer } from "./Spacer";

@navikt/core/react/src/layout/stack/stack.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
-import { HStack, VStack, Spacer } from ".";
+import { HStack, VStack, Spacer, Stack } from ".";
+import { Box } from "../box";
 
 export default {
   title: "ds-react/Primitives/Stack",
@@ -133,6 +134,27 @@ export const DividerDemo = {
   ),
 };
 
+export const ResponsiveDirection = {
+  render: () => (
+    <Box
+      background="surface-alt-3-subtle"
+      padding="12"
+      style={{ minWidth: "20rem", aspectRatio: "1/1" }}
+    >
+      <Stack
+        align={{ xs: "center", md: "start" }}
+        gap="2"
+        direction={{ xs: "column", lg: "row" }}
+      >
+        <Box padding="6" background="surface-action" />
+        <Box padding="2" background="surface-action" />
+        <Box padding="6" background="surface-action" />
+        <Box padding="4" background="surface-action" />
+      </Stack>
+    </Box>
+  ),
+};
+
 function Placeholders({
   count,
   children,

aksel.nav.no/website/pages/eksempler/h-stack/responsive-direction.tsx

@@ -0,0 +1,36 @@
+import { Stack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Stack
+      gap="4"
+      direction={{ xs: "column", md: "row" }}
+      align={{ xs: "center", md: "start" }}
+    >
+      <Placeholder />
+      <Placeholder />
+      <Placeholder />
+      <Placeholder />
+    </Stack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+  variant: "full",
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 7,
+  desc: "Ønsker du å endre fra 'row' til 'column' ved et brekkpunkt kan du bruke 'Stack'-komponenten. Husk å også oppdatere 'align' og 'justify' samtidig.",
+};
+
+const Placeholder = () => {
+  return <div className="aspect-square h-12 rounded bg-teal-500 even:h-8" />;
+};

aksel.nav.no/website/pages/eksempler/h-stack/spacer.tsx

@@ -24,7 +24,7 @@ export const Demo = {
 };
 
 export const args = {
-  index: 7,
+  index: 99,
   desc: "Spacer lar deg lett legge inn automatisk stretch mellom elementer. Dette kan komme inn nyttig når man f.eks skal plassere knapper i 'InternalHeader'.",
 };