@folkehelseinstituttet/designsystem 0.32.0 → 0.33.0

package/custom-elements.json

@@ -1155,6 +1155,16 @@
               "default": "'medium'",
               "description": "Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.",
               "attribute": "gap"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the number of rows in the grid layout.",
+              "attribute": "rows"
             }
           ],
           "attributes": [
@@ -1175,6 +1185,15 @@
               "default": "'medium'",
               "description": "Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.",
               "fieldName": "gap"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the number of rows in the grid layout.",
+              "fieldName": "rows"
             }
           ],
           "superclass": {

package/fhi-grid.js

@@ -1,16 +1,16 @@
-import { i as n, n as l, a as o, b as d, t as u } from "./property-DGdAXcEz.js";
-var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, m = (a, i, t, r) => {
-  for (var s = r > 1 ? void 0 : r ? c(i, t) : i, p = a.length - 1, g; p >= 0; p--)
-    (g = a[p]) && (s = (r ? g(i, t, s) : g(s)) || s);
-  return r && s && h(i, t, s), s;
+import { i as l, n as m, a as n, b as d, t as u } from "./property-DGdAXcEz.js";
+var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, t = (s, a, p, r) => {
+  for (var i = r > 1 ? void 0 : r ? c(a, p) : a, g = s.length - 1, o; g >= 0; g--)
+    (o = s[g]) && (i = (r ? o(a, p, i) : o(i)) || i);
+  return r && i && h(a, p, i), i;
 };
 const f = "fhi-grid";
-let e = class extends o {
+let e = class extends n {
   constructor() {
-    super(...arguments), this.gap = "medium", this.columns = 12;
+    super(...arguments), this.gap = "medium", this.columns = 12, this.rows = 1;
   }
-  updated(a) {
-    if (super.updated(a), a.has("columns") && (this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`), a.has("gap"))
+  updated(s) {
+    if (super.updated(s), s.has("columns") && (this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`), s.has("rows") && (this.style.gridTemplateRows = `repeat( ${this.rows}, 1fr )`), s.has("gap"))
       switch (this.gap) {
         case "large":
         case "medium":
@@ -18,8 +18,8 @@ let e = class extends o {
           this.style.gap = "";
           return;
         default:
-          const i = Number(this.gap) ? `${this.gap}px` : this.gap;
-          this.style.gap = i;
+          const a = Number(this.gap) ? `${this.gap}px` : this.gap;
+          this.style.gap = a;
           return;
       }
   }
@@ -27,7 +27,7 @@ let e = class extends o {
     return d`<slot></slot>`;
   }
 };
-e.styles = n`
+e.styles = l`
     :host {
       --dimension-grid-gap-small: var(--fhi-spacing-100);
       --dimension-grid-gap-medium: var(--fhi-spacing-200);
@@ -49,13 +49,16 @@ e.styles = n`
       gap: var(--dimension-grid-gap-large);
     }
   `;
-m([
-  l({ type: String })
+t([
+  m({ type: String })
 ], e.prototype, "gap", 2);
-m([
-  l({ type: Number })
+t([
+  m({ type: Number })
 ], e.prototype, "columns", 2);
-e = m([
+t([
+  m({ type: Number })
+], e.prototype, "rows", 2);
+e = t([
   u(f)
 ], e);
 export {

package/fhi-grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-grid.js","sources":["../../src/components/fhi-grid/fhi-grid.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiGridSelector = 'fhi-grid';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n/**\n * ## FHI Grid\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-grid--docs}\n *\n * The `<fhi-grid>` component is a grid container that uses CSS Grid Layout to organize its child elements into a structured grid format.\n * It allows for easy control over the number of columns and the spacing between grid items.\n *\n * @tag fhi-grid\n * @element fhi-grid\n *\n */\n@customElement(FhiGridSelector)\nexport class FhiGrid extends LitElement {\n  /**\n   * Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\n   * If you give a number, it will be treated as pixels.\n   * @type {'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String }) gap:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | FhiGapWidthUnit = 'medium';\n\n  /**\n   * Sets the number of columns in the grid layout.\n   * @type {number}\n   */\n  @property({ type: Number }) columns = 12;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('columns')) {\n      this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`;\n    }\n\n    if (changedProperties.has('gap')) {\n      switch (this.gap) {\n        case 'large':\n        case 'medium':\n        case 'small':\n          this.style.gap = '';\n          return;\n        default:\n          const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n          this.style.gap = gapValue as string;\n          return;\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-grid-gap-small: var(--fhi-spacing-100);\n      --dimension-grid-gap-medium: var(--fhi-spacing-200);\n      --dimension-grid-gap-large: var(--fhi-spacing-300);\n    }\n    :host {\n      display: grid;\n      gap: var(--dimension-grid-gap-medium);\n    }\n    :host([gap='small']) {\n      gap: var(--dimension-grid-gap-small);\n    }\n\n    :host([gap='medium']) {\n      gap: var(--dimension-grid-gap-medium);\n    }\n\n    :host([gap='large']) {\n      gap: var(--dimension-grid-gap-large);\n    }\n  `;\n}\n"],"names":["FhiGridSelector","FhiGrid","LitElement","changedProperties","gapValue","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAiBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuB,KAAA,MAIN,UAMM,KAAA,UAAU;AAAA,EAAA;AAAA,EAEtC,QAAQC,GAAyC;AAO/C,QANA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,SAAS,MACjC,KAAK,MAAM,sBAAsB,WAAW,KAAK,OAAO,YAGtDA,EAAkB,IAAI,KAAK;AAC7B,cAAQ,KAAK,KAAA;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACH,eAAK,MAAM,MAAM;AACjB;AAAA,QACF;AACE,gBAAMC,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK;AAC3D,eAAK,MAAM,MAAMA;AACjB;AAAA,MAAA;AAAA,EAGR;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,EACT;AAwBF;AAlEaJ,EA4CJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtCYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfP,EAMiB,WAAA,OAAA,CAAA;AAUAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfP,EAgBiB,WAAA,WAAA,CAAA;AAhBjBA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAe;AAAA,GACjBC,CAAA;"}
+{"version":3,"file":"fhi-grid.js","sources":["../../src/components/fhi-grid/fhi-grid.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiGridSelector = 'fhi-grid';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n/**\n * ## FHI Grid\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-grid--docs}\n *\n * The `<fhi-grid>` component is a grid container that uses CSS Grid Layout to organize its child elements into a structured grid format.\n * It allows for easy control over the number of columns and the spacing between grid items.\n *\n * @tag fhi-grid\n * @element fhi-grid\n *\n */\n@customElement(FhiGridSelector)\nexport class FhiGrid extends LitElement {\n  /**\n   * Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\n   * If you give a number, it will be treated as pixels.\n   * @type {'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String }) gap:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | FhiGapWidthUnit = 'medium';\n\n  /**\n   * Sets the number of columns in the grid layout.\n   * @type {number}\n   */\n  @property({ type: Number }) columns = 12;\n\n  /**\n   * Sets the number of rows in the grid layout.\n   * @type {number}\n   */\n  @property({ type: Number }) rows = 1;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('columns')) {\n      this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`;\n    }\n\n    if (changedProperties.has('rows')) {\n      this.style.gridTemplateRows = `repeat( ${this.rows}, 1fr )`;\n    }\n\n    if (changedProperties.has('gap')) {\n      switch (this.gap) {\n        case 'large':\n        case 'medium':\n        case 'small':\n          this.style.gap = '';\n          return;\n        default:\n          const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n          this.style.gap = gapValue as string;\n          return;\n      }\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-grid-gap-small: var(--fhi-spacing-100);\n      --dimension-grid-gap-medium: var(--fhi-spacing-200);\n      --dimension-grid-gap-large: var(--fhi-spacing-300);\n    }\n    :host {\n      display: grid;\n      gap: var(--dimension-grid-gap-medium);\n    }\n    :host([gap='small']) {\n      gap: var(--dimension-grid-gap-small);\n    }\n\n    :host([gap='medium']) {\n      gap: var(--dimension-grid-gap-medium);\n    }\n\n    :host([gap='large']) {\n      gap: var(--dimension-grid-gap-large);\n    }\n  `;\n}\n"],"names":["FhiGridSelector","FhiGrid","LitElement","changedProperties","gapValue","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAiBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMuB,KAAA,MAIN,UAMM,KAAA,UAAU,IAMV,KAAA,OAAO;AAAA,EAAA;AAAA,EAEnC,QAAQC,GAAyC;AAW/C,QAVA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,SAAS,MACjC,KAAK,MAAM,sBAAsB,WAAW,KAAK,OAAO,YAGtDA,EAAkB,IAAI,MAAM,MAC9B,KAAK,MAAM,mBAAmB,WAAW,KAAK,IAAI,YAGhDA,EAAkB,IAAI,KAAK;AAC7B,cAAQ,KAAK,KAAA;AAAA,QACX,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AACH,eAAK,MAAM,MAAM;AACjB;AAAA,QACF;AACE,gBAAMC,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK;AAC3D,eAAK,MAAM,MAAMA;AACjB;AAAA,MAAA;AAAA,EAGR;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,EACT;AAwBF;AA5EaJ,EAsDJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAhDYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfP,EAMiB,WAAA,OAAA,CAAA;AAUAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfP,EAgBiB,WAAA,WAAA,CAAA;AAMAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBfP,EAsBiB,WAAA,QAAA,CAAA;AAtBjBA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAe;AAAA,GACjBC,CAAA;"}

package/package.json

@@ -2,7 +2,7 @@
   "title": "FHI Designsystem",
   "author": "FHI Designsystem team",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
   "keywords": [
     "fhi",
@@ -71,6 +71,7 @@
     "@storybook/web-components-vite": "^10.2.8",
     "@types/mocha": "~10.0.10",
     "@types/node": "~22.5.5",
+    "@types/react": "^19.2.14",
     "@wc-toolkit/cem-sorter": "^1.0.1",
     "@wc-toolkit/type-parser": "^1.2.0",
     "@web/dev-server": "~0.4.6",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -434,6 +434,11 @@
                 "type": "'small' | 'medium' | 'large' | number | string",
                 "default": "'medium'"
               }
+            },
+            {
+              "name": "rows",
+              "description": "Sets the number of rows in the grid layout.",
+              "value": { "type": "number", "default": "1" }
             }
           ],
           "events": [],
@@ -448,6 +453,11 @@
                 "name": "gap",
                 "description": "Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.",
                 "type": "'small' | 'medium' | 'large' | number | string"
+              },
+              {
+                "name": "rows",
+                "description": "Sets the number of rows in the grid layout.",
+                "type": "number"
               }
             ],
             "events": []