✨ Ny komponent: ProgressBar

.changeset/fair-plums-join.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+:sparkles: Ny komponent: ProgressBar

@navikt/core/css/baseline/_utilities.css

@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader),
+  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
   ::before,
   ::after {
     animation-delay: -1ms !important;

@navikt/core/css/config/_mappings.js

@@ -159,6 +159,7 @@ const StyleMappings = {
     },
     { component: "Panel", main: "panel.css" },
     { component: "Popover", main: "popover.css" },
+    { component: "ProgressBar", main: "progress-bar.css" },
     { component: "Provider", main: "" },
     { component: "Radio", main: formCss, dependencies: [typoCss] },
     { component: "RadioGroup", main: formCss, dependencies: [typoCss] },

@navikt/core/css/index.css

@@ -26,6 +26,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "read-more.css";
+@import "progress-bar.css";
 @import "skeleton.css";
 @import "stepper.css";
 @import "table.css";

@navikt/core/css/progress-bar.css

@@ -0,0 +1,106 @@
+.navds-progress-bar {
+  background: var(--a-surface-neutral-subtle);
+  position: relative;
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
+    inset 0 0 1px 0 rgba(0 0 0 / 0.2);
+}
+
+.navds-progress-bar--small {
+  height: 12px;
+  min-width: 12px;
+}
+
+.navds-progress-bar--medium {
+  height: 16px;
+  min-width: 16px;
+}
+
+.navds-progress-bar--large {
+  height: 24px;
+  min-width: 24px;
+}
+
+.navds-progress-bar__foreground {
+  --__ac-progress-bar-translate: initial;
+
+  transform: translateX(var(--__ac-progress-bar-translate));
+  background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
+  transform-origin: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: inherit;
+  transition: transform 0.2s ease;
+}
+
+.navds-progress-bar__foreground--indeterminate {
+  --__ac-progress-bar-duration: initial;
+  --__ac-progress-bar-delay: initial;
+
+  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
+  animation-timing-function: ease-in-out, ease-in-out;
+  animation-duration: var(--__ac-progress-bar-duration), 2500ms;
+  animation-fill-mode: forwards, none;
+  animation-iteration-count: 1, infinite;
+  animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
+}
+
+/* navds-progress-bar-indeterminate wave animation */
+@keyframes navds-progress-bar-indeterminate {
+  0% {
+    left: -50%;
+    width: 50%;
+    transform: translateX(0%);
+  }
+
+  50% {
+    animation-direction: reverse;
+    left: 100%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+
+  100% {
+    left: -50%;
+    transform: translateX(0%);
+    width: 50%;
+  }
+}
+
+@keyframes navds-progress-bar-indeterminate-grow {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  20% {
+    transform: translateX(-80%);
+  }
+
+  30% {
+    transform: translateX(-40%);
+  }
+
+  40%,
+  50% {
+    transform: translateX(-20%);
+  }
+
+  100% {
+    transform: translateX(-10%);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-progress-bar__foreground {
+    background: Highlight;
+  }
+
+  .navds-progress-bar {
+    outline: 1px solid transparent;
+  }
+}

@navikt/core/css/tokens.json

@@ -217,6 +217,9 @@
     "--ac-popover-bg": "--a-surface-default",
     "--ac-popover-border": "--a-border-default"
   },
+  "progress-bar": {
+    "--ac-progress-bar-fg": "--a-surface-alt-3"
+  },
   "readmore": {
     "--ac-read-more-text": "--a-text-action",
     "--ac-read-more-hover-bg": "--a-surface-hover",

@navikt/core/react/package.json

@@ -310,6 +310,16 @@
         "default": "./cjs/popover/index.js"
       }
     },
+    "./ProgressBar": {
+      "import": {
+        "types": "./esm/progress-bar/index.d.ts",
+        "default": "./esm/progress-bar/index.js"
+      },
+      "require": {
+        "types": "./cjs/progress-bar/index.d.ts",
+        "default": "./cjs/progress-bar/index.js"
+      }
+    },
     "./Provider": {
       "import": {
         "types": "./esm/provider/index.d.ts",

@navikt/core/react/src/index.ts

@@ -59,6 +59,7 @@ export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
 export { Popover, type PopoverProps } from "./popover";
 export { Portal, type PortalProps } from "./portal";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar";
 export { Provider, type ProviderProps } from "./provider";
 export { ReadMore, type ReadMoreProps } from "./read-more";
 export { Skeleton, type SkeletonProps } from "./skeleton";

@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx

@@ -0,0 +1,153 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React from "react";
+import { ProgressBar } from ".";
+import { VStack } from "../layout/stack";
+
+export default {
+  title: "ds-react/ProgressBar",
+  component: ProgressBar,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof ProgressBar>;
+
+type Story = StoryObj<typeof ProgressBar>;
+
+export const Default: StoryFn = (args) => {
+  const [value, setValue] = React.useState(0);
+  React.useEffect(() => {
+    const withRandomIntervals = (callback: () => void) => {
+      const interval = Math.random() * 4000 + 500; // Random interval between 0.1-0.8 seconds
+      return setTimeout(() => {
+        callback();
+        withRandomIntervals(callback);
+      }, interval);
+    };
+
+    const intervalId = withRandomIntervals(() => {
+      setValue((oldValue) => {
+        if (oldValue === 100) return 0;
+        const increment = Math.random() * 25 + 5; // Increase value 5-30 of 100
+        return oldValue + increment > 100 ? 100 : oldValue + increment;
+      });
+    });
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <div style={{ width: "400px" }}>
+      {value < 100 ? (
+        <>
+          <p id="progress-bar-label">Laster</p>
+          <ProgressBar
+            valueMax={100}
+            size={args.size}
+            value={value}
+            aria-labelledby="progress-bar-label"
+            duration={args.indeterminate ? 0 : undefined}
+          />
+        </>
+      ) : (
+        <p>Success screen successfully loaded 🎉</p>
+      )}
+    </div>
+  );
+};
+Default.args = {
+  size: "medium",
+  indeterminate: false,
+};
+Default.argTypes = {
+  size: {
+    options: ["large", "medium", "small"],
+    control: { type: "radio" },
+  },
+  indeterminate: {
+    control: { type: "boolean" },
+  },
+};
+
+export const Sizes: StoryFn = (args) => {
+  return (
+    <div>
+      <p id="progress-bar-label-small">Fremdrift i søknaden (liten versjon)</p>
+      <ProgressBar
+        size="small"
+        value={0}
+        valueMax={args.valueMax}
+        aria-labelledby="progress-bar-label-small"
+      />
+      <p id="progress-bar-label-medium">
+        Fremdrift i søknaden (medium versjon)
+      </p>
+      <ProgressBar
+        value={6}
+        valueMax={args.valueMax}
+        aria-labelledby="progress-bar-label-medium"
+      />
+      <p id="progress-bar-label-large">Fremdrift i søknaden (stor versjon)</p>
+      <ProgressBar
+        size="large"
+        value={12}
+        valueMax={args.valueMax}
+        aria-labelledby="progress-bar-label-large"
+      />
+    </div>
+  );
+};
+
+Sizes.args = {
+  valueMax: 12,
+};
+
+export const IndeterminateState: Story = {
+  render: () => {
+    const values = [2, 5, 10, 20];
+    return (
+      <>
+        <p id="progress-bar-label-immediate-indeterminate">
+          Duration prop satt til 0 sek
+        </p>
+        <ProgressBar
+          valueMax={100}
+          duration={0}
+          size="medium"
+          value={50}
+          aria-labelledby="progress-bar-label-immediate-indeterminate"
+        />
+        {values.map((value) => (
+          <div key={value}>
+            <p id={`progress-bar-label-${value}`}>
+              duration-prop satt til {value} sek
+            </p>
+            <ProgressBar
+              valueMax={100}
+              duration={value}
+              size="medium"
+              value={value}
+              aria-labelledby={`progress-bar-label-${value}`}
+            />
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+export const Chromatic: Story = {
+  render: () => {
+    return (
+      <VStack gap="4">
+        <div>
+          <Sizes {...Sizes.args} />
+        </div>
+      </VStack>
+    );
+  },
+  parameters: {
+    chromatic: { disable: false },
+  },
+};