Progressbar demo-fixes (#2887)

aksel.nav.no/website/pages/eksempler/progress-bar/indeterminate.tsx

@@ -4,8 +4,8 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <div>
-      <p>6 sec duration (and 4 sec default delay)</p>
-      <ProgressBar duration={6} aria-label="6 sec indeterminate state" />
+      <p id="indeterminate">Laster opp fil</p>
+      <ProgressBar duration={6} aria-labelledby="indeterminate" />
     </div>
   );
 };
@@ -20,4 +20,5 @@ export const Demo = {
 
 export const args = {
   index: 3,
+  desc: "Med duration-propen kan man legge inn et anslag i sekunder, så simulerer komponenten progresjon.",
 };

aksel.nav.no/website/pages/eksempler/progress-bar/interactive.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BodyShort, Button, ProgressBar } from "@navikt/ds-react";
+import { BodyShort, Button, HStack, ProgressBar } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const starWarsQuotes = [
@@ -22,28 +22,35 @@ const Example = () => {
   return (
     <div>
       <div>
-        <ProgressBar value={value} valueMax={12} aria-label="interactive" />
+        <ProgressBar
+          value={value}
+          valueMax={11}
+          aria-label="fremdrift i Star Wars-sitatvisning"
+        />
 
-        <BodyShort style={{ margin: "3rem 0", textAlign: "center" }}>
+        <BodyShort align="center" style={{ margin: "3rem 0" }}>
           {starWarsQuotes[value]}
         </BodyShort>
       </div>
-      <div style={{ display: "flex", justifyContent: "space-around" }}>
+      <HStack gap="20">
         <Button
           onClick={() =>
-            setValue((oldValue) => (oldValue === 0 ? 0 : oldValue - 1))
+            setValue(
+              (oldValue) =>
+                (oldValue - 1 + starWarsQuotes.length) % starWarsQuotes.length,
+            )
           }
         >
           Forrige sitat
         </Button>
         <Button
           onClick={() =>
-            setValue((oldValue) => (oldValue === 12 ? 12 : oldValue + 1))
+            setValue((oldValue) => (oldValue + 1) % starWarsQuotes.length)
           }
         >
           Neste sitat
         </Button>
-      </div>
+      </HStack>
     </div>
   );
 };
@@ -57,5 +64,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 0,
+  index: 2,
 };

aksel.nav.no/website/pages/eksempler/progress-bar/loading.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { ProgressBar } from "@navikt/ds-react";
+import { withDsExample } from "@/web/examples/withDsExample";
+
+const Example = () => {
+  const [value, setValue] = React.useState(3);
+
+  // This useEffect is used to simulate loading
+  React.useEffect(() => {
+    const setRandomInterval = (callback: () => void) => {
+      const interval = Math.random() * 4000 + 500;
+      return setTimeout(() => {
+        callback();
+        setRandomInterval(callback);
+      }, interval);
+    };
+    const intervalId = setRandomInterval(() => {
+      setValue((oldValue) => {
+        if (oldValue === 100) return 3;
+        const increment = Math.random() * 25 + 5;
+        return oldValue + increment > 100 ? 100 : oldValue + increment;
+      });
+    });
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div style={{ width: "300px" }}>
+      <div id="loading">Laster innhold</div>
+      <ProgressBar value={value} aria-labelledby="loading" />
+    </div>
+  );
+};
+
+// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};

aksel.nav.no/website/pages/eksempler/progress-bar/sizes.tsx

@@ -42,5 +42,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 2,
+  index: 0,
 };