Feature/op 75/primary top nav refactor

pwa/README.md

@@ -16,6 +16,7 @@
     ```shell
     # create a new Gatsby site using the minimal TypeScript starter
     npm init gatsby
+
     ```
 
 2.  **Start developing.**

pwa/package.json

@@ -4,9 +4,7 @@
   "private": true,
   "description": "skeleton-pip",
   "author": "Conduction",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": ["gatsby"],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -25,7 +23,7 @@
     "prepare": "cd .. && husky install"
   },
   "dependencies": {
-    "@conduction/components": "2.2.15",
+    "@conduction/components": "2.2.19",
     "@conduction/theme": "1.0.50",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",

pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx

@@ -63,6 +63,7 @@ export const ApplicationsTemplate: React.FC = () => {
             totalPages={getApplications.data.pages}
             currentPage={getApplications.data.page}
             setCurrentPage={(page: any) => setFilters({ ...filters, applicationsCurrentPage: page })}
+            ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }}
           />
         </>
       )}

pwa/src/templates/components/ComponentsTemplate.tsx

@@ -96,6 +96,7 @@ export const ComponentsTemplate: React.FC = () => {
                     totalPages={getComponents.data.pages}
                     currentPage={getComponents.data.page}
                     setCurrentPage={(page: any) => setFilters({ ...filters, currentPage: page })}
+                    ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }}
                   />
                 </>
               )}

pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx

@@ -52,6 +52,7 @@ export const OrganizationsTemplate: React.FC = () => {
                   totalPages={getOrganisations.data.pages}
                   currentPage={getOrganisations.data.page}
                   setCurrentPage={(page: any) => setFilters({ ...filters, organizationCurrentPage: page })}
+                  ariaLabels={{ nextPage: t("Next page"), previousPage: t("Previous page"), page: t("Page") }}
                 />
               )}
             </>

pwa/src/templates/templateParts/header/HeaderTemplate.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import * as styles from "./HeaderTemplate.module.css";
 import clsx from "clsx";
-import _ from "lodash";
 import LogoRotterdam from "../../../assets/svgs/LogoRotterdam.svg";
 import { Paragraph, Heading } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
@@ -15,6 +14,7 @@ import { SearchComponentTemplate } from "../searchComponent/SearchComponentTempl
 import { PageHeader } from "@utrecht/component-library-react";
 import { isHomepage } from "../../../services/isHomepage";
 import { Breadcrumbs } from "../../../components/breadcrumbs/Breadcrumbs";
+import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav";
 
 interface HeaderTemplateProps {
   layoutClassName?: string;
@@ -33,7 +33,7 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
     screenSize,
   } = React.useContext(GatsbyContext);
 
-  const primaryTopNavItems = [
+  const primaryTopNavItems: ITopNavItem[] = [
     {
       label: "Home",
       current:
@@ -61,12 +61,9 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
     {
       label: t("Components"),
       current: pathname.includes("/components"),
-      handleClick: () => {
-        navigate("/components");
-      },
       subItems: [
         {
-          label: t("Components"),
+          label: t("All components"),
           current: pathname.includes("/components"),
           handleClick: () => {
             navigate("/components");
@@ -149,8 +146,6 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
 
   React.useEffect(() => {
     if (screenSize === "desktop") {
-      primaryTopNavItems[3].subItems?.splice(0, 1);
-
       setTopNavItems(primaryTopNavItems);
       return;
     }

pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx

@@ -16,11 +16,11 @@ import { IconArrowRight } from "@tabler/icons-react";
 import clsx from "clsx";
 import { getResultsUrl } from "../../../../services/getResultsUrl";
 import { getTypeFromSchemaRef } from "../../../../services/getTypeFromSchemaRef";
-import { TableWrapper } from "@conduction/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
 import { TOOLTIP_ID } from "../../../../layout/Layout";
 import { getStatusColor } from "../../../../services/getStatusColor";
+import { HorizontalOverflowWrapper } from "@conduction/components";
 
 interface TableResultTemplateProps {
   components: any[];
@@ -31,7 +31,9 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
   const { t } = useTranslation();
 
   return (
-    <TableWrapper>
+    <HorizontalOverflowWrapper
+      ariaLabels={{ scrollLeftButton: t("Scroll left"), scrollRightButton: t("Scroll right") }}
+    >
       <Table className={styles.table}>
         {!hideTableHead && (
           <TableHeader className={styles.tableHeader}>
@@ -165,6 +167,6 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
           )}
         </TableBody>
       </Table>
-    </TableWrapper>
+    </HorizontalOverflowWrapper>
   );
 };

pwa/src/translations/en.ts

@@ -124,4 +124,10 @@ export const en = {
   "Markdown file": "Markdown file",
   "No markdown file found, make sure that the query param link is filled":
     "No markdown file found, make sure that the query param link is filled",
+  "All components": "All components",
+  "Scroll left": "Scroll left",
+  "Scroll right": "Scroll right",
+  "Next page": "Next page",
+  "Previous page": "Previous page",
+  Page: "Page",
 };

pwa/src/translations/nl.ts

@@ -125,4 +125,10 @@ export const nl = {
   "Markdown file": "Markdown bestand",
   "No markdown file found, make sure that the query param link is filled":
     "Geen markdown bestand gevonden, zorg er voor dat de query parameter link is gevuld",
+  "All components": "Alle componenten",
+  "Scroll left": "Scroll naar links",
+  "Scroll right": "Scroll naar rechts",
+  "Next page": "Volgende pagina",
+  "Previous page": "Vorige pagina",
+  Page: "Pagina",
 };