@navikt/ds-react 5.3.2 → 5.3.4

package/_docs.json

@@ -16806,6 +16806,25 @@
           "name": "ResponsiveProp<SpacingScale>"
         }
       },
+      "align": {
+        "defaultValue": null,
+        "description": "Vertical alignment of children. Elements will by default stretch to the height of parent-element.",
+        "name": "align",
+        "parent": {
+          "fileName": "src/layout/grid/HGrid.tsx",
+          "name": "HGridProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/grid/HGrid.tsx",
+            "name": "HGridProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/layout/grid/HGrid.js

@@ -67,8 +67,8 @@ const css_1 = require("../utilities/css");
  * </HGrid>
  */
 exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
-    const styles = Object.assign(Object.assign(Object.assign({}, style), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
+    var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
+    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles })));
 });
 function formatGrid(props) {

package/esm/layout/grid/HGrid.d.ts

@@ -19,6 +19,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.

package/esm/layout/grid/HGrid.js

@@ -38,8 +38,8 @@ import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
  * </HGrid>
  */
 export const HGrid = forwardRef((_a, ref) => {
-    var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
-    const styles = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
+    var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
+    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-hgrid", className), style: styles })));
 });
 function formatGrid(props) {

package/esm/layout/grid/HGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AAsB1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzC,wCAA2C,CAAF;IACxC,MAAM,MAAM,iDACP,KAAK,GACL,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC1D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,UAAU,IAAI,mBAAmB,CAAC;KAC1C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA0B1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAkD,EAAE,GAAG,EAAE,EAAE;QAA3D,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhD,iDAAkD,CAAF;IAC/C,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC1D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,UAAU,IAAI,mBAAmB,CAAC;KAC1C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.3.2",
+  "version": "5.3.4",
   "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.4",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/alert/alert.stories.tsx

@@ -149,11 +149,22 @@ export const Links = () => {
   );
 };
 
-const AlertWithCloseButton = ({ children }: { children?: React.ReactNode }) => {
+const AlertWithCloseButton = ({
+  children,
+  size,
+}: {
+  size?: "medium" | "small";
+  children?: React.ReactNode;
+}) => {
   let [show, setShow] = React.useState(true);
 
   return show ? (
-    <Alert variant="success" closeButton onClose={() => setShow(false)}>
+    <Alert
+      variant="warning"
+      size={size}
+      closeButton
+      onClose={() => setShow(false)}
+    >
       {children || "Content"}
     </Alert>
   ) : null;
@@ -165,14 +176,22 @@ export const WithCloseButton: Story = {
       <div className="colgap">
         <AlertWithCloseButton />
         <AlertWithCloseButton>
+          <BodyLong>Ullamco ullamco laborum et commodo sint culpa</BodyLong>
+        </AlertWithCloseButton>
+        <AlertWithCloseButton>
+          <DsHeading spacing size="small" level="3">
+            Aliquip duis est in commodo pariatur
+          </DsHeading>
           <BodyLong>
             Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
             laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
             sint commodo consequat eu aute.
           </BodyLong>
-          <Link href="#">Id elit esse enim reprehenderit</Link>
         </AlertWithCloseButton>
-        <AlertWithCloseButton>
+        <AlertWithCloseButton size="small">
+          <BodyLong>Ullamco ullamco laborum et commodo</BodyLong>
+        </AlertWithCloseButton>
+        <AlertWithCloseButton size="small">
           <DsHeading spacing size="small" level="3">
             Aliquip duis est in commodo pariatur
           </DsHeading>
@@ -194,6 +213,6 @@ export const WithCloseButton: Story = {
     });
 
     const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(2);
+    expect(buttonsAfter.length).toBe(4);
   },
 };

package/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)),
     };

package/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",
       }}