Version Packages (#2248)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 5.3.3
+
 ## 5.3.2
 
 ## 5.3.1

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint
 
+## 5.3.3
+
 ## 5.3.2
 
 ## 5.3.1

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -35,8 +35,8 @@
     "dev": "yarn watch:lint"
   },
   "devDependencies": {
-    "@navikt/ds-css": "^5.3.2",
-    "@navikt/ds-tokens": "^5.3.2",
+    "@navikt/ds-css": "^5.3.3",
+    "@navikt/ds-tokens": "^5.3.3",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @navikt/aksel
 
+## 5.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`6f2325bbb`](https://github.com/navikt/aksel/commit/6f2325bbb32de87d649a476a8c58e5f352e1d016)]:
+  - @navikt/ds-css@5.3.3
+
 ## 5.3.2
 
 ### Patch Changes

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "5.3.2",
+    "@navikt/ds-css": "5.3.3",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 5.3.3
+
+### Patch Changes
+
+- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
+
 ## 5.3.2
 
 ### Patch Changes

@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/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.2",
+    "@navikt/ds-tokens": "^5.3.3",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @navikt/ds-react
 
+## 5.3.3
+
+### Patch Changes
+
+- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@5.3.3
+
 ## 5.3.2
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^5.3.2",
+    "@navikt/aksel-icons": "^5.3.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@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",
       }}

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 5.3.3
+
 ## 5.3.2
 
 ## 5.3.1

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.2",
+    "@navikt/ds-tokens": "^5.3.3",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 5.3.3
+
 ## 5.3.2
 
 ## 5.3.1

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "5.3.2",
+  "version": "5.3.3",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 5.3.3
+
+### @navikt/ds-react
+
+- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
+
+### @navikt/ds-css
+
+- HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))
+
 ## 5.3.2
 
 ### @navikt/ds-react

aksel.nav.no/package.json

@@ -15,11 +15,11 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^5.3.2",
-    "@navikt/ds-css": "^5.3.2",
-    "@navikt/ds-react": "^5.3.2",
-    "@navikt/ds-tailwind": "^5.3.2",
-    "@navikt/ds-tokens": "^5.3.2"
+    "@navikt/aksel-icons": "^5.3.3",
+    "@navikt/ds-css": "^5.3.3",
+    "@navikt/ds-react": "^5.3.3",
+    "@navikt/ds-tailwind": "^5.3.3",
+    "@navikt/ds-tokens": "^5.3.3"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

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.",
+};

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "5.3.2",
-    "@navikt/ds-react": "5.3.2",
+    "@navikt/ds-css": "5.3.3",
+    "@navikt/ds-react": "5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },