feature/XW-83/Github-issues

pwa/gatsby-config.js

@@ -28,6 +28,12 @@ module.exports = {
           separator: ".",
         },
         autoGenHomeLabel: "Home",
+        crumbLabelUpdates: [
+          {
+            pathname: "/[id]",
+            crumbLabel: "Details page",
+          },
+        ],
       },
     },
   ],

pwa/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -23,7 +25,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.8",
-    "@conduction/theme": "1.0.36",
+    "@conduction/theme": "1.0.44",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",

pwa/src/components/resultsDisplaySwitch/ResultsDisplaySwitch.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGripVertical, faTable } from "@fortawesome/free-solid-svg-icons";
 import { useDisplayContext } from "../../context/displays";
 import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
+import { useTranslation } from "react-i18next";
 
 interface ResultsDisplaySwitchProps {
   displayKey: string; // should implement with an unique key
@@ -13,23 +14,26 @@ interface ResultsDisplaySwitchProps {
 
 const ResultsDisplaySwitch: React.FC<ResultsDisplaySwitchProps> = ({ layoutClassName, displayKey }) => {
   const { setDisplay, isActive } = useDisplayContext();
+  const { t } = useTranslation();
 
   return (
     <ButtonGroup className={clsx(styles.container, layoutClassName && layoutClassName)}>
       <Button
         appearance={isActive(displayKey, "cards") ? "primary-action-button" : "secondary-action-button"}
         className={styles.button}
         onClick={() => setDisplay({ [displayKey]: "cards" })}
+        discription={t("Show cards")}
       >
-        <FontAwesomeIcon icon={faGripVertical} /> Tegels
+        <FontAwesomeIcon icon={faGripVertical} /> {t("Cards")}
       </Button>
 
       <Button
         appearance={isActive(displayKey, "table") ? "primary-action-button" : "secondary-action-button"}
         className={styles.button}
         onClick={() => setDisplay({ [displayKey]: "table" })}
+        discription={t("Show table")}
       >
-        <FontAwesomeIcon icon={faTable} /> Tabel
+        <FontAwesomeIcon icon={faTable} /> {t("Table")}
       </Button>
     </ButtonGroup>
   );

pwa/src/layout/Head.tsx

@@ -4,19 +4,27 @@ import "../styling/index.css";
 import { Helmet } from "react-helmet";
 import { getPageTitle } from "../services/getPageTitle";
 import { useGatsbyContext } from "../context/gatsby";
+import { useTranslation } from "react-i18next";
 
 export const Head: React.FC = () => {
   const { gatsbyContext } = useGatsbyContext();
+  const { t, i18n } = useTranslation();
+
+  const translatedCrumbs = gatsbyContext.pageContext?.breadcrumb.crumbs.map((crumb: any) => ({
+    ...crumb,
+    crumbLabel: t(_.upperFirst(crumb.crumbLabel)),
+  }));
 
   return (
     <Helmet
+      htmlAttributes={{
+        lang: i18n.language,
+      }}
       bodyAttributes={{
         class: process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME,
       }}
     >
-      <title>{`Woo | ${
-        getPageTitle(gatsbyContext.pageContext?.breadcrumb.crumbs, gatsbyContext.location) ?? "Error"
-      }`}</title>
+      <title>{`Woo | ${getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error"}`}</title>
       <link rel="icon" type="svg" href={process.env.GATSBY_FAVICON_URL} />
     </Helmet>
   );

pwa/src/styling/global.css

@@ -9,3 +9,7 @@ html,
 body {
   margin: 0;
 }
+
+.utrecht-link > svg {
+  margin-inline-end: var(--utrecht-icon-gap);
+}

pwa/src/styling/index.css

@@ -11,6 +11,8 @@
 @import "../../node_modules/@conduction/theme/municipalities/noordwijk-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/noaberkracht-design-tokens/dist/index.css";
 @import "../../node_modules/@conduction/theme/municipalities/rotterdam-design-tokens/dist/index.css";
+@import "../../node_modules/@conduction/theme/municipalities/open-webconcept-design-tokens/dist/index.css";
+@import "../../node_modules/@conduction/theme/municipalities/dimpact-design-tokens/dist/index.css";
 
 /* Design Tokens maintained by Frameless */
 @import "../../node_modules/@utrecht/design-tokens/dist/theme.css";

pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx

@@ -2,18 +2,23 @@ import * as React from "react";
 import * as styles from "./JumbotronTemplate.module.css";
 import { Heading2, Paragraph, Page, PageContent } from "@utrecht/component-library-react/dist/css-module";
 import { CardWrapper } from "@conduction/components/lib/components/card";
+import { useTranslation } from "react-i18next";
 
 export const JumbotronTemplate: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <div style={{ backgroundImage: `url(${process.env.GATSBY_JUMBOTRON_IMAGE_URL})` }} className={styles.wrapper}>
       <Page>
         <PageContent>
           <div>
             <CardWrapper className={styles.card}>
-              <Heading2 className={styles.title}>Woo-publicaties van {process.env.GATSBY_ORGANISATION_NAME}</Heading2>
+              <Heading2 className={styles.title}>
+                {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}
+              </Heading2>
 
               <Paragraph className={styles.description}>
-                Op deze pagina vindt u de Woo-publicaties van {process.env.GATSBY_ORGANISATION_NAME}
+                {t("On this page you will find the Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}
               </Paragraph>
             </CardWrapper>
           </div>

pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
 import * as styles from "./CardsResultsTemplate.module.css";
 import { Heading2, Paragraph } from "@utrecht/component-library-react/dist/css-module";
-import { faClock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
@@ -13,7 +11,7 @@ interface CardsResultsTemplateProps {
 }
 
 export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requests }) => {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   return (
     <>
@@ -22,11 +20,10 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
           <CardWrapper key={request.id} className={styles.cardContainer} onClick={() => navigate(request.id)}>
             <CardHeader>
               <CardHeaderDate>
-                <FontAwesomeIcon icon={faClock} />{" "}
-                {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : "N.v.t."}
+                {request.Publicatiedatum ? translateDate(i18n.language, request.Publicatiedatum) : t("N/A")}
               </CardHeaderDate>
               <CardHeaderTitle className={styles.title}>
-                <Heading2>{request.Titel ?? "Geen titel beschikbaar"}</Heading2>
+                <Heading2>{request.Titel ?? t("No title available")}</Heading2>
               </CardHeaderTitle>
             </CardHeader>
 

pwa/src/templates/templateParts/filters/FiltersTemplate.tsx

@@ -9,13 +9,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMagnifyingGlass, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { generateYearsArray } from "../../../data/years";
 import { TEMP_PUBLICATION_TYPES } from "../../../data/PublicationType";
+import { useTranslation } from "react-i18next";
 
 interface FiltersTemplateProps {
   isLoading: boolean;
 }
 
 export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) => {
   const { filters, setFilters } = useFiltersContext();
+  const { t } = useTranslation();
   const filterTimeout = React.useRef<NodeJS.Timeout | null>(null);
 
   const {
@@ -49,27 +51,30 @@ export const FiltersTemplate: React.FC<FiltersTemplateProps> = ({ isLoading }) =
   return (
     <div className={styles.container}>
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-        <InputText name="title" placeholder="Zoeken.." defaultValue={filters._search} {...{ register, errors }} />
-
+        <InputText
+          name="title"
+          placeholder={`${t("Search")}..`}
+          defaultValue={filters._search}
+          {...{ register, errors }}
+        />
         <SelectSingle
           options={generateYearsArray(currentYear - 1995)}
           name="year"
-          placeholder="Jaar"
+          placeholder={t("Year")}
           isClearable
           {...{ register, errors, control }}
         />
-
         <SelectSingle
           options={TEMP_PUBLICATION_TYPES}
           name="category"
-          placeholder="Categorie"
+          placeholder={t("Category")}
           defaultValue={TEMP_PUBLICATION_TYPES.find((option) => option.value === filters.Categorie)}
           isClearable
           {...{ register, errors, control }}
         />
 
         <Button type="submit" className={styles.button} disabled={isLoading}>
-          <FontAwesomeIcon icon={!isLoading ? faMagnifyingGlass : faSpinner} /> {!isLoading && "Zoeken"}
+          <FontAwesomeIcon icon={!isLoading ? faMagnifyingGlass : faSpinner} /> {!isLoading && t("Search")}
         </Button>
       </form>