@navikt/ds-react 5.3.2 → 5.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/_docs.json +19 -0
  2. package/cjs/layout/grid/HGrid.js +2 -2
  3. package/esm/layout/grid/HGrid.d.ts +4 -0
  4. package/esm/layout/grid/HGrid.js +2 -2
  5. package/esm/layout/grid/HGrid.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/layout/grid/HGrid.tsx +6 -1
  8. package/src/layout/grid/h-grid.stories.tsx +22 -2
package/_docs.json CHANGED
@@ -16806,6 +16806,25 @@
16806
16806
  "name": "ResponsiveProp<SpacingScale>"
16807
16807
  }
16808
16808
  },
16809
+ "align": {
16810
+ "defaultValue": null,
16811
+ "description": "Vertical alignment of children. Elements will by default stretch to the height of parent-element.",
16812
+ "name": "align",
16813
+ "parent": {
16814
+ "fileName": "src/layout/grid/HGrid.tsx",
16815
+ "name": "HGridProps"
16816
+ },
16817
+ "declarations": [
16818
+ {
16819
+ "fileName": "src/layout/grid/HGrid.tsx",
16820
+ "name": "HGridProps"
16821
+ }
16822
+ ],
16823
+ "required": false,
16824
+ "type": {
16825
+ "name": "\"start\" | \"center\" | \"end\""
16826
+ }
16827
+ },
16809
16828
  "className": {
16810
16829
  "defaultValue": null,
16811
16830
  "description": "",
package/cjs/layout/grid/HGrid.js CHANGED
@@ -67,8 +67,8 @@ const css_1 = require("../utilities/css");
67
67
  * </HGrid>
68
68
  */
69
69
  exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
70
- var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
71
- 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)));
70
+ var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
71
+ 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)));
72
72
  return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles })));
73
73
  });
74
74
  function formatGrid(props) {
package/esm/layout/grid/HGrid.d.ts CHANGED
@@ -19,6 +19,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
19
19
  * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
20
20
  */
21
21
  gap?: ResponsiveProp<SpacingScale>;
22
+ /**
23
+ * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
24
+ */
25
+ align?: "start" | "center" | "end";
22
26
  }
23
27
  /**
24
28
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
package/esm/layout/grid/HGrid.js CHANGED
@@ -38,8 +38,8 @@ import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
38
38
  * </HGrid>
39
39
  */
40
40
  export const HGrid = forwardRef((_a, ref) => {
41
- var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
42
- const styles = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
41
+ var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
42
+ 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)));
43
43
  return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-hgrid", className), style: styles })));
44
44
  });
45
45
  function formatGrid(props) {
package/esm/layout/grid/HGrid.js.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "5.3.2",
3
+ "version": "5.3.3",
4
4
  "description": "Aksel react-components for NAV designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "license": "MIT",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "dependencies": {
40
40
  "@floating-ui/react": "0.24.1",
41
- "@navikt/aksel-icons": "^5.3.2",
41
+ "@navikt/aksel-icons": "^5.3.3",
42
42
  "@radix-ui/react-tabs": "1.0.0",
43
43
  "@radix-ui/react-toggle-group": "1.0.0",
44
44
  "clsx": "^1.2.1",
package/src/layout/grid/HGrid.tsx CHANGED
@@ -26,6 +26,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
26
26
  * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
27
27
  */
28
28
  gap?: ResponsiveProp<SpacingScale>;
29
+ /**
30
+ * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
31
+ */
32
+ align?: "start" | "center" | "end";
29
33
  }
30
34
  /**
31
35
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
@@ -53,9 +57,10 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
53
57
  * </HGrid>
54
58
  */
55
59
  export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
56
- ({ className, columns, gap, style, ...rest }, ref) => {
60
+ ({ className, columns, gap, style, align, ...rest }, ref) => {
57
61
  const styles: React.CSSProperties = {
58
62
  ...style,
63
+ "--__ac-hgrid-align": align,
59
64
  ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
60
65
  ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
61
66
  };
package/src/layout/grid/h-grid.stories.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { HGrid } from ".";
3
+ import { VStack } from "../stack";
3
4
 
4
5
  const columnsVariants = {
5
6
  Number: "columnNumber",
@@ -86,12 +87,31 @@ export const DynamicColumns = {
86
87
  ),
87
88
  };
88
89
 
89
- function Placeholder({ text }) {
90
+ export const AlignItems = {
91
+ render: () => (
92
+ <VStack gap="8">
93
+ <HGrid gap="4" columns={2} align="start">
94
+ <Placeholder text="start" height="8rem" />
95
+ <Placeholder text="auto" height="auto" />
96
+ </HGrid>
97
+ <HGrid gap="4" columns={2} align="center">
98
+ <Placeholder text="center" height="8rem" />
99
+ <Placeholder text="auto" height="auto" />
100
+ </HGrid>
101
+ <HGrid gap="4" columns={2} align="end">
102
+ <Placeholder text="end" height="8rem" />
103
+ <Placeholder text="auto" height="auto" />
104
+ </HGrid>
105
+ </VStack>
106
+ ),
107
+ };
108
+
109
+ function Placeholder({ text, height }: { text: string; height?: string }) {
90
110
  return (
91
111
  <div
92
112
  style={{
93
113
  background: "var(--a-deepblue-900)",
94
- height: "5rem",
114
+ height: height ?? "5rem",
95
115
  width: "auto",
96
116
  color: "white",
97
117
  }}