diff --git a/pwa/README.md b/pwa/README.md index d517a18ea..b31836493 100644 --- a/pwa/README.md +++ b/pwa/README.md @@ -16,6 +16,7 @@ ```shell # create a new Gatsby site using the minimal TypeScript starter npm init gatsby + ``` 2. **Start developing.** diff --git a/pwa/package.json b/pwa/package.json index 729da845b..a2dcde0a2 100644 --- a/pwa/package.json +++ b/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", diff --git a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx b/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx index 39392c150..bcdaf58b4 100644 --- a/pwa/src/templates/applicationsTemplate/ApplicationsTemplate.tsx +++ b/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") }} /> )} diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx index 1a3f08f62..b2bffd74d 100644 --- a/pwa/src/templates/components/ComponentsTemplate.tsx +++ b/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") }} /> )} diff --git a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx b/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx index c9efe0317..efb152f59 100644 --- a/pwa/src/templates/organizationsTemplate/OrganizationsTemplate.tsx +++ b/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") }} /> )} diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx index da1fe1c57..98681c6e5 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/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 = ({ layoutClassName screenSize, } = React.useContext(GatsbyContext); - const primaryTopNavItems = [ + const primaryTopNavItems: ITopNavItem[] = [ { label: "Home", current: @@ -61,12 +61,9 @@ export const HeaderTemplate: React.FC = ({ 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 = ({ layoutClassName React.useEffect(() => { if (screenSize === "desktop") { - primaryTopNavItems[3].subItems?.splice(0, 1); - setTopNavItems(primaryTopNavItems); return; } diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx index acae32c8c..62adf59da 100644 --- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx +++ b/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 = ({ compon const { t } = useTranslation(); return ( - + {!hideTableHead && ( @@ -165,6 +167,6 @@ export const TableResultTemplate: React.FC = ({ compon )}
- + ); }; diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index f9705654b..3a4db5f45 100644 --- a/pwa/src/translations/en.ts +++ b/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", }; diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts index 1480f70f7..efd73b629 100644 --- a/pwa/src/translations/nl.ts +++ b/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", };