@navikt/ds-react 0.18.6 → 0.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.18.6",
+  "version": "0.18.7",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.12",
+    "@navikt/ds-icons": "^0.8.13",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -74,5 +74,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "f14b5211dc8181b0b155c0e86c1652ce6854bca5"
+  "gitHead": "46b1186bb8614fd065e87c09b139a095b8993778"
 }

package/src/table/stories/table-async.stories.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { rest } from "msw";
 import useSWR from "swr";
 import people from "./people.json";
 import { Table } from "../index";
@@ -21,6 +20,42 @@ const queryString = (obj) =>
     .map((key) => key + "=" + obj[key])
     .join("&");
 
+const updateData = async (url: string) => {
+  const newUrl = new URL(`https://www.example.com/${url}`);
+  const comparator = (a, b, orderBy) => {
+    if (b[orderBy] < a[orderBy]) {
+      return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+      return 1;
+    }
+    return 0;
+  };
+
+  const page = Number(newUrl.searchParams.get("page"));
+  const sort = newUrl.searchParams.get("sort");
+
+  await new Promise((resolve) =>
+    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200))
+  );
+
+  return {
+    count: people.length,
+    results: people
+      .slice()
+      .sort((a, b) => {
+        if (sort) {
+          const [orderBy, direction] = sort.split(":");
+          return direction === "ascending"
+            ? comparator(b, a, orderBy)
+            : comparator(a, b, orderBy);
+        }
+        return 1;
+      })
+      .slice((page - 1) * rowsPerPage, page * rowsPerPage),
+  };
+};
+
 export const Async = () => {
   const [page, setPage] = useState(1);
   const [sort, setSort] = useState<SortState>();
@@ -30,7 +65,7 @@ export const Async = () => {
       page,
       sort: sort ? `${sort.orderBy}:${sort.direction}` : undefined,
     })}`,
-    (url) => fetch(url).then((res) => res.json())
+    (url) => updateData(url)
   );
 
   if (!data) {
@@ -128,42 +163,3 @@ export const Async = () => {
     </div>
   );
 };
-
-Async.parameters = {
-  msw: {
-    handlers: [
-      rest.get("/people", (req, res, ctx) => {
-        const comparator = (a, b, orderBy) => {
-          if (b[orderBy] < a[orderBy]) {
-            return -1;
-          }
-          if (b[orderBy] > a[orderBy]) {
-            return 1;
-          }
-          return 0;
-        };
-
-        const page = Number(req.url.searchParams.get("page"));
-        const sort = req.url.searchParams.get("sort");
-        return res(
-          //ctx.delay(),
-          ctx.json({
-            count: people.length,
-            results: people
-              .slice()
-              .sort((a, b) => {
-                if (sort) {
-                  const [orderBy, direction] = sort.split(":");
-                  return direction === "ascending"
-                    ? comparator(b, a, orderBy)
-                    : comparator(a, b, orderBy);
-                }
-                return 1;
-              })
-              .slice((page - 1) * rowsPerPage, page * rowsPerPage),
-          })
-        );
-      }),
-    ],
-  },
-};