🎨 HGrid align-prop

.changeset/dirty-toes-mate.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+HGrid: Har nå `align`-prop for bedre kontroll over child-elementer

@navikt/core/css/hgrid.css

@@ -11,10 +11,12 @@
   --__ac-hgrid-gap-lg: initial;
   --__ac-hgrid-gap-xl: initial;
   --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
+  --__ac-hgrid-align: initial;
 
   display: grid;
   grid-template-columns: var(--__ac-hgrid-columns);
   gap: var(--__ac-hgrid-gap);
+  align-items: var(--__ac-hgrid-align);
 }
 
 @media (min-width: 480px) {

@navikt/core/react/src/layout/grid/HGrid.tsx

@@ -26,6 +26,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
    * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
    */
   gap?: ResponsiveProp<SpacingScale>;
+  /**
+   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+   */
+  align?: "start" | "center" | "end";
 }
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
@@ -53,9 +57,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  * </HGrid>
  */
 export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, ...rest }, ref) => {
+  ({ className, columns, gap, style, align, ...rest }, ref) => {
     const styles: React.CSSProperties = {
       ...style,
+      "--__ac-hgrid-align": align,
       ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
       ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
     };

@navikt/core/react/src/layout/grid/h-grid.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { HGrid } from ".";
+import { VStack } from "../stack";
 
 const columnsVariants = {
   Number: "columnNumber",
@@ -86,12 +87,31 @@ export const DynamicColumns = {
   ),
 };
 
-function Placeholder({ text }) {
+export const AlignItems = {
+  render: () => (
+    <VStack gap="8">
+      <HGrid gap="4" columns={2} align="start">
+        <Placeholder text="start" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+      <HGrid gap="4" columns={2} align="center">
+        <Placeholder text="center" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+      <HGrid gap="4" columns={2} align="end">
+        <Placeholder text="end" height="8rem" />
+        <Placeholder text="auto" height="auto" />
+      </HGrid>
+    </VStack>
+  ),
+};
+
+function Placeholder({ text, height }: { text: string; height?: string }) {
   return (
     <div
       style={{
         background: "var(--a-deepblue-900)",
-        height: "5rem",
+        height: height ?? "5rem",
         width: "auto",
         color: "white",
       }}

aksel.nav.no/website/pages/eksempler/h-grid/align.tsx

@@ -0,0 +1,73 @@
+import { HGrid, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Background>
+      <VStack gap="12">
+        <HGrid gap="4" columns={2} align="start">
+          <Placeholder height="10rem">Start</Placeholder>
+          <Placeholder />
+        </HGrid>
+        <HGrid gap="4" columns={2} align="center">
+          <Placeholder height="10rem">Center</Placeholder>
+          <Placeholder />
+        </HGrid>
+        <HGrid gap="4" columns={2} align="end">
+          <Placeholder height="10rem">End</Placeholder>
+          <Placeholder />
+        </HGrid>
+      </VStack>
+    </Background>
+  );
+};
+
+const Placeholder = ({ height = "auto", width = "auto", ...props }) => {
+  return (
+    <div
+      {...props}
+      style={{
+        display: "grid",
+        placeContent: "center",
+        background: "var(--a-deepblue-500)",
+        height: height ?? undefined,
+        minHeight: "2rem",
+        width: width ?? undefined,
+        color: "var(--a-text-on-action)",
+      }}
+    />
+  );
+};
+
+const Background = ({
+  children,
+  width = "100%",
+}: {
+  children: React.ReactNode;
+  width?: string;
+}) => {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-100)",
+        width,
+        height: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  desc: "Align gir HGrid mer kontroll over hvordan child-elementer skal vises",
+};
+
+export const args = {
+  index: 3,
+  desc: "Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.",
+};