@gnist/design-system 5.2.1 → 5.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.2.1...@gnist/design-system@5.3.0) (2025-12-12)
+
+### Features
+
+* add loading bar component ([0ba84f1](https://github.com/mollerdigital/design-system-design-system/commit/0ba84f1cbbc895b9627b702b0124453b92e3e065))
+
 ## [5.2.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.2.0...@gnist/design-system@5.2.1) (2025-12-11)
 
 **Note:** Version bump only for package @gnist/design-system

package/dist/components/feedback/index.cjs

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const AlertBanner = require("./alerts/AlertBanner.cjs");
 const LoadingSpinner = require("./loaders/LoadingSpinner.cjs");
+const LoadingBar = require("./loaders/LoadingBar.cjs");
 const Lozenge = require("./notifications/Lozenge.cjs");
 const ProgressBar = require("./progress/ProgressBar.cjs");
 exports.AlertBanner = AlertBanner.AlertBanner;
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.LoadingBar = LoadingBar.LoadingBar;
+exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;
 exports.Lozenge = Lozenge.Lozenge;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;

package/dist/components/feedback/index.js

@@ -1,10 +1,13 @@
 "use client";
 import { AlertBanner } from "./alerts/AlertBanner.js";
 import { LoadingSpinner } from "./loaders/LoadingSpinner.js";
+import { LoadingBar, LoadingBarComponent } from "./loaders/LoadingBar.js";
 import { Lozenge } from "./notifications/Lozenge.js";
 import { ProgressBar, ProgressBarComponent } from "./progress/ProgressBar.js";
 export {
   AlertBanner,
+  LoadingBar,
+  LoadingBarComponent,
   LoadingSpinner,
   Lozenge,
   ProgressBar,

package/dist/components/feedback/loaders/LoadingBar.cjs

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const componentUtils = require("@gnist/component-utils");
+const loadingBar_css = require("./loadingBar.css.cjs");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
+  const barHeight = {
+    s: tokens_css_js.tokens.size.xxs,
+    m: tokens_css_js.tokens.size.xs,
+    l: tokens_css_js.tokens.size.s
+  };
+  return jsxRuntime.jsxs("div", { className: loadingBar_css.loadingBarStyles, children: [children, isLoading && maxDuration <= 30 && jsxRuntime.jsx("div", { className: loadingBar_css.loadingBar, role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, style: {
+    animationDuration: `${maxDuration}s`,
+    minHeight: barHeight[size]
+  } })] });
+};
+const LoadingBar = componentUtils.component("Loading Bar", loadingBar_css.loadingBarStyles, LoadingBarComponent);
+exports.LoadingBar = LoadingBar;
+exports.LoadingBarComponent = LoadingBarComponent;

package/dist/components/feedback/loaders/LoadingBar.d.ts

@@ -0,0 +1,18 @@
+interface LoadingBarProps {
+    className?: string;
+    isLoading: boolean;
+    maxDuration: number;
+    size?: "s" | "m" | "l";
+    children?: React.ReactNode;
+    ariaLabel?: string;
+}
+export declare const LoadingBarComponent: React.FC<LoadingBarProps>;
+/**
+ * Loading bars are used to show the progress of a task or process.
+ * They are used to show the user how far along they are in a process.
+ *
+ * Documentation: [LoadingBar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-feedback-loaders-loadingbar--docs)
+ */
+export declare const LoadingBar: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, import("react").FC<LoadingBarProps>>;
+export {};
+//# sourceMappingURL=LoadingBar.d.ts.map

package/dist/components/feedback/loaders/LoadingBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingBar.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/LoadingBar.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+BzD,CAAC;AAEF;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,qHAItB,CAAC"}

package/dist/components/feedback/loaders/LoadingBar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { component } from "@gnist/component-utils";
+import { loadingBarStyles, loadingBar } from "./loadingBar.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+const LoadingBarComponent = ({ isLoading, maxDuration = 30, size = "s", children, ariaLabel = "Laster innhold" }) => {
+  const barHeight = {
+    s: tokens.size.xxs,
+    m: tokens.size.xs,
+    l: tokens.size.s
+  };
+  return jsxs("div", { className: loadingBarStyles, children: [children, isLoading && maxDuration <= 30 && jsx("div", { className: loadingBar, role: "progressbar", "aria-label": ariaLabel, "aria-valuemin": 0, "aria-valuemax": 100, style: {
+    animationDuration: `${maxDuration}s`,
+    minHeight: barHeight[size]
+  } })] });
+};
+const LoadingBar = component("Loading Bar", loadingBarStyles, LoadingBarComponent);
+export {
+  LoadingBar,
+  LoadingBarComponent
+};

package/dist/components/feedback/loaders/index.cjs

@@ -2,4 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const LoadingSpinner = require("./LoadingSpinner.cjs");
+const LoadingBar = require("./LoadingBar.cjs");
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.LoadingBar = LoadingBar.LoadingBar;
+exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;

package/dist/components/feedback/loaders/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./LoadingSpinner.js";
+export * from "./LoadingBar.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/loaders/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/index.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC"}

package/dist/components/feedback/loaders/index.js

@@ -1,5 +1,8 @@
 "use client";
 import { LoadingSpinner } from "./LoadingSpinner.js";
+import { LoadingBar, LoadingBarComponent } from "./LoadingBar.js";
 export {
+  LoadingBar,
+  LoadingBarComponent,
   LoadingSpinner
 };

package/dist/components/feedback/loaders/loadingBar.css.cjs

@@ -0,0 +1,36 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const css = require("@vanilla-extract/css");
+const loadingBarStyles = css.style([
+  {
+    overflow: "hidden",
+    display: "flex",
+    backgroundColor: tokens_css_js.tokens.palette.neutral[20],
+    width: "100%"
+  },
+  atoms_css_js.atoms({
+    borderRadius: "medium"
+  })
+]);
+const loadingAnimation = css.keyframes({
+  "0%": {
+    width: "0%"
+  },
+  "100%": {
+    width: "100%"
+  }
+});
+const loadingBar = css.style([
+  {
+    backgroundColor: tokens_css_js.tokens.palette.tertiary[40],
+    animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
+  },
+  atoms_css_js.atoms({
+    borderRadius: "medium"
+  })
+]);
+exports.loadingBar = loadingBar;
+exports.loadingBarStyles = loadingBarStyles;

package/dist/components/feedback/loaders/loadingBar.css.d.ts

@@ -0,0 +1,3 @@
+export declare const loadingBarStyles: string;
+export declare const loadingBar: string;
+//# sourceMappingURL=loadingBar.css.d.ts.map

package/dist/components/feedback/loaders/loadingBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadingBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loaders/loadingBar.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAU3B,CAAC;AAWH,eAAO,MAAM,UAAU,QAQrB,CAAC"}

package/dist/components/feedback/loaders/loadingBar.css.js

@@ -0,0 +1,36 @@
+"use client";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import { tokens } from "@gnist/themes/tokens.css.js";
+import { style, keyframes } from "@vanilla-extract/css";
+const loadingBarStyles = style([
+  {
+    overflow: "hidden",
+    display: "flex",
+    backgroundColor: tokens.palette.neutral[20],
+    width: "100%"
+  },
+  atoms({
+    borderRadius: "medium"
+  })
+]);
+const loadingAnimation = keyframes({
+  "0%": {
+    width: "0%"
+  },
+  "100%": {
+    width: "100%"
+  }
+});
+const loadingBar = style([
+  {
+    backgroundColor: tokens.palette.tertiary[40],
+    animation: `${loadingAnimation} 20s cubic-bezier(0.17, 0.68, 0.36, 0.91) forwards`
+  },
+  atoms({
+    borderRadius: "medium"
+  })
+]);
+export {
+  loadingBar,
+  loadingBarStyles
+};

package/dist/components/index.cjs

@@ -17,6 +17,7 @@ const FilterChip = require("./actions/chips/FilterChip.cjs");
 const TagChip = require("./actions/chips/TagChip.cjs");
 const AlertBanner = require("./feedback/alerts/AlertBanner.cjs");
 const LoadingSpinner = require("./feedback/loaders/LoadingSpinner.cjs");
+const LoadingBar = require("./feedback/loaders/LoadingBar.cjs");
 const Lozenge = require("./feedback/notifications/Lozenge.cjs");
 const ProgressBar = require("./feedback/progress/ProgressBar.cjs");
 const MultiSelect = require("./inputs/dropdowns/MultiSelect.cjs");
@@ -48,6 +49,8 @@ exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;
 exports.AlertBanner = AlertBanner.AlertBanner;
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.LoadingBar = LoadingBar.LoadingBar;
+exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;
 exports.Lozenge = Lozenge.Lozenge;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;

package/dist/components/index.js

@@ -15,6 +15,7 @@ import { FilterChip } from "./actions/chips/FilterChip.js";
 import { TagChip } from "./actions/chips/TagChip.js";
 import { AlertBanner } from "./feedback/alerts/AlertBanner.js";
 import { LoadingSpinner } from "./feedback/loaders/LoadingSpinner.js";
+import { LoadingBar, LoadingBarComponent } from "./feedback/loaders/LoadingBar.js";
 import { Lozenge } from "./feedback/notifications/Lozenge.js";
 import { ProgressBar, ProgressBarComponent } from "./feedback/progress/ProgressBar.js";
 import { MultiSelect } from "./inputs/dropdowns/MultiSelect.js";
@@ -44,6 +45,8 @@ export {
   IconButton,
   InfoCard,
   LinkCard,
+  LoadingBar,
+  LoadingBarComponent,
   LoadingSpinner,
   Lozenge,
   Modal,

package/dist/index.cjs

@@ -18,6 +18,7 @@ const FilterChip = require("./components/actions/chips/FilterChip.cjs");
 const TagChip = require("./components/actions/chips/TagChip.cjs");
 const AlertBanner = require("./components/feedback/alerts/AlertBanner.cjs");
 const LoadingSpinner = require("./components/feedback/loaders/LoadingSpinner.cjs");
+const LoadingBar = require("./components/feedback/loaders/LoadingBar.cjs");
 const Lozenge = require("./components/feedback/notifications/Lozenge.cjs");
 const ProgressBar = require("./components/feedback/progress/ProgressBar.cjs");
 const MultiSelect = require("./components/inputs/dropdowns/MultiSelect.cjs");
@@ -69,6 +70,8 @@ exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;
 exports.AlertBanner = AlertBanner.AlertBanner;
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.LoadingBar = LoadingBar.LoadingBar;
+exports.LoadingBarComponent = LoadingBar.LoadingBarComponent;
 exports.Lozenge = Lozenge.Lozenge;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.ProgressBarComponent = ProgressBar.ProgressBarComponent;

package/dist/index.js

@@ -16,6 +16,7 @@ import { FilterChip } from "./components/actions/chips/FilterChip.js";
 import { TagChip } from "./components/actions/chips/TagChip.js";
 import { AlertBanner } from "./components/feedback/alerts/AlertBanner.js";
 import { LoadingSpinner } from "./components/feedback/loaders/LoadingSpinner.js";
+import { LoadingBar, LoadingBarComponent } from "./components/feedback/loaders/LoadingBar.js";
 import { Lozenge } from "./components/feedback/notifications/Lozenge.js";
 import { ProgressBar, ProgressBarComponent } from "./components/feedback/progress/ProgressBar.js";
 import { MultiSelect } from "./components/inputs/dropdowns/MultiSelect.js";
@@ -84,6 +85,8 @@ export {
   LeadText,
   Link,
   LinkCard,
+  LoadingBar,
+  LoadingBarComponent,
   LoadingSpinner,
   LocalizationProvider,
   Logo,

package/package.json

@@ -1,106 +1,106 @@
 {
-  "name": "@gnist/design-system",
-  "version": "5.2.1",
-  "license": "UNLICENSED",
-  "type": "module",
-  "main": "dist/index.cjs",
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "name": "@gnist/design-system",
+    "version": "5.3.0",
+    "license": "UNLICENSED",
+    "type": "module",
+    "main": "dist/index.cjs",
+    "types": "dist/index.d.ts",
+    "module": "dist/index.js",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.cjs"
+        },
+        "./*": {
+            "types": "./dist/*/index.d.ts",
+            "import": "./dist/*/index.js",
+            "require": "./dist/*/index.cjs"
+        },
+        "./*.js": {
+            "types": "./dist/*.d.ts",
+            "import": "./dist/*.js",
+            "require": "./dist/*.cjs"
+        },
+        "./*.json": "./dist/*.json",
+        "./*.css": "./dist/*.css",
+        "./*internal/*": null
     },
-    "./*": {
-      "types": "./dist/*/index.d.ts",
-      "import": "./dist/*/index.js",
-      "require": "./dist/*/index.cjs"
+    "files": [
+        "CHANGELOG.md",
+        "dist/*"
+    ],
+    "scripts": {
+        "optimize-icons": "svgo -r -f ./src/foundation/iconography/svg --precision 2",
+        "make-icon-index": "tsx ./build-utils/generateIconIndex.ts ./src/foundation/iconography/svg",
+        "build-icons": "pnpm run optimize-icons && pnpm run make-icon-index",
+        "watch": "vite build --watch",
+        "clean": "shx rm -rf dist",
+        "build": "vite build",
+        "serve": "vite preview",
+        "lint": "tsc && pnpm run detect-cycles && pnpm run eslint",
+        "eslint": "eslint --max-warnings 0",
+        "detect-cycles": "pnpm madge --extensions ts,tsx ./src --circular",
+        "prettier:base": "prettier \"src/**/*.{ts,tsx,json,scss}\"",
+        "prettier": "pnpm run prettier:base --check",
+        "format": "pnpm run prettier:base --write",
+        "build-storybook": "cd docs && pnpm run build"
     },
-    "./*.js": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*.js",
-      "require": "./dist/*.cjs"
+    "dependencies": {
+        "@base-ui-components/react": "1.0.0-beta.2",
+        "@formkit/auto-animate": "^0.8.2",
+        "@gnist/component-utils": "3.0.13",
+        "@gnist/themes": "^3.24.2",
+        "@vanilla-extract/css": "^1.17.4",
+        "@vanilla-extract/css-utils": "^0.1.6",
+        "@vanilla-extract/dynamic": "^2.1.5",
+        "@vanilla-extract/recipes": "^0.5.7",
+        "classnames": "^2.5.1",
+        "fp-ts": "^2.16.10",
+        "immer": "^10.1.1",
+        "react-content-loader": "^7.1.1"
     },
-    "./*.json": "./dist/*.json",
-    "./*.css": "./dist/*.css",
-    "./*internal/*": null
-  },
-  "files": [
-    "CHANGELOG.md",
-    "dist/*"
-  ],
-  "scripts": {
-    "optimize-icons": "svgo -r -f ./src/foundation/iconography/svg --precision 2",
-    "make-icon-index": "tsx ./build-utils/generateIconIndex.ts ./src/foundation/iconography/svg",
-    "build-icons": "pnpm run optimize-icons && pnpm run make-icon-index",
-    "watch": "vite build --watch",
-    "clean": "shx rm -rf dist",
-    "build": "vite build",
-    "serve": "vite preview",
-    "lint": "tsc && pnpm run detect-cycles && pnpm run eslint",
-    "eslint": "eslint --max-warnings 0",
-    "detect-cycles": "pnpm madge --extensions ts,tsx ./src --circular",
-    "prettier:base": "prettier \"src/**/*.{ts,tsx,json,scss}\"",
-    "prettier": "pnpm run prettier:base --check",
-    "format": "pnpm run prettier:base --write",
-    "build-storybook": "cd docs && pnpm run build"
-  },
-  "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.2",
-    "@formkit/auto-animate": "^0.8.2",
-    "@gnist/component-utils": "3.0.12",
-    "@gnist/themes": "^3.24.1",
-    "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/css-utils": "^0.1.6",
-    "@vanilla-extract/dynamic": "^2.1.5",
-    "@vanilla-extract/recipes": "^0.5.7",
-    "classnames": "^2.5.1",
-    "fp-ts": "^2.16.10",
-    "immer": "^10.1.1",
-    "react-content-loader": "^7.1.1"
-  },
-  "peerDependencies": {
-    "@types/react": "^18.0.0 || ^19.0.0",
-    "@types/react-dom": "^18.0.0 || ^19.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@gnist/eslint-config": "",
-    "@gnist/ts-config": "",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.14.0",
-    "@types/react": "19.2.1",
-    "@types/react-dom": "19.2.1",
-    "@types/semver": "^7.7.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
-    "eslint": "^9.33.0",
-    "eslint-plugin-storybook": "^9.1.2",
-    "globby": "^14.1.0",
-    "madge": "^8.0.0",
-    "prettier": "^3.6.2",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
-    "rollup-plugin-copy": "^3.5.0",
-    "semver": "^7.7.2",
-    "svgo": "^3.3.2",
-    "svgo-autocrop": "^1.1.2",
-    "tslib": "^2.8.1",
-    "tsx": "^4.20.4",
-    "typescript-transform-paths": "^3.5.5",
-    "vite": "7.1.12",
-    "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.4"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
+    "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
     },
-    "@types/react-dom": {
-      "optional": true
-    }
-  },
-  "gitHead": "b3edc3c3c55302fdffbe7aaa8723d1ac0b89c6a3"
+    "devDependencies": {
+        "@gnist/eslint-config": "",
+        "@gnist/ts-config": "",
+        "@rollup/plugin-typescript": "^12.1.4",
+        "@tsconfig/node22": "^22.0.2",
+        "@types/node": "^22.14.0",
+        "@types/react": "catalog:",
+        "@types/react-dom": "catalog:",
+        "@types/semver": "^7.7.0",
+        "@vitejs/plugin-react-swc": "^3.10.2",
+        "eslint": "^9.33.0",
+        "eslint-plugin-storybook": "^9.1.2",
+        "globby": "^14.1.0",
+        "madge": "^8.0.0",
+        "prettier": "^3.6.2",
+        "react": "catalog:",
+        "react-dom": "catalog:",
+        "rollup-plugin-copy": "^3.5.0",
+        "semver": "^7.7.2",
+        "svgo": "^3.3.2",
+        "svgo-autocrop": "^1.1.2",
+        "tslib": "^2.8.1",
+        "tsx": "^4.20.4",
+        "typescript-transform-paths": "^3.5.5",
+        "vite": "7.1.12",
+        "vite-plugin-svgr": "^4.3.0",
+        "vite-tsconfig-paths": "^5.1.4"
+    },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        },
+        "@types/react-dom": {
+            "optional": true
+        }
+    },
+    "gitHead": "7caed621c0c988e754d814fba32408a951fc5335"
 }