updated package.lock and added HorizontalOverflowWrapper to TableResu…

…ltsTemplate
ConductionNL · Oct 17, 2023 · 3356e0b · 3356e0b
1 parent f946269
commit 3356e0b
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 42 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -11,6 +11,7 @@ import {
 import { navigate } from "gatsby";
 import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
+import { HorizontalOverflowWrapper } from "@conduction/components";
 
 interface TableResultsTemplateProps {
   requests: any[];
@@ -20,35 +21,42 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
   const { t, i18n } = useTranslation();
 
   return (
-    <Table className={styles.table}>
-      <TableHeader className={styles.tableHeader}>
-        <TableRow>
-          <TableHeaderCell>{t("Subject")}</TableHeaderCell>
-          <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
-          <TableHeaderCell>{t("Summary")}</TableHeaderCell>
-        </TableRow>
-      </TableHeader>
-      <TableBody className={styles.tableBody}>
-        {requests.map((request) => (
-          <TableRow
-            className={styles.tableRow}
-            key={request.id}
-            onClick={() => navigate(request.id)}
-            tabIndex={0}
-            aria-label={`${request.Titel},  ${
-              request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
-            }, ${request.Samenvatting}`}
-          >
-            <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
-            <TableCell>
-              {request.Publicatiedatum
-                ? translateDate(i18n.language, request.Publicatiedatum)
-                : t("No publication date available")}
-            </TableCell>
-            <TableCell>{request.Samenvatting ?? t("No summary available")}</TableCell>
+    <HorizontalOverflowWrapper
+      ariaLabels={{
+        scrollLeftButton: t("Scroll table to the left"),
+        scrollRightButton: t("Scroll table to the right"),
+      }}
+    >
+      <Table className={styles.table}>
+        <TableHeader className={styles.tableHeader}>
+          <TableRow>
+            <TableHeaderCell>{t("Subject")}</TableHeaderCell>
+            <TableHeaderCell>{t("Publication date")}</TableHeaderCell>
+            <TableHeaderCell>{t("Summary")}</TableHeaderCell>
           </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+        </TableHeader>
+        <TableBody className={styles.tableBody}>
+          {requests.map((request) => (
+            <TableRow
+              className={styles.tableRow}
+              key={request.id}
+              onClick={() => navigate(request.id)}
+              tabIndex={0}
+              aria-label={`${request.Titel},  ${
+                request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")
+              }, ${request.Samenvatting}`}
+            >
+              <TableCell>{request.Titel ?? t("No subject available")}</TableCell>
+              <TableCell>
+                {request.Publicatiedatum
+                  ? translateDate(i18n.language, request.Publicatiedatum)
+                  : t("No publication date available")}
+              </TableCell>
+              <TableCell>{request.Samenvatting ?? t("No summary available")}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </HorizontalOverflowWrapper>
   );
 };
diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
@@ -54,4 +54,6 @@ export const en = {
   "Enter search query": "Enter search query",
   "Results per page": "Results per page",
   "Select result limit": "Select result limit",
+  "Scroll table to the left": "Scroll table to the left",
+  "Scroll table to the right": "Scroll table to the right",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
@@ -54,4 +54,6 @@ export const nl = {
   "Enter search query": "Voer zoekopdracht in",
   "Results per page": "Resultaten per pagina",
   "Select result limit": "Selecteer resultaten limiet",
+  "Scroll table to the left": "Scroll tabel naar links",
+  "Scroll table to the right": "Scroll tabel naar rechts",
 };