From 9a1def008a23d6f71c67fcc52a8a01d6576a9558 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Tue, 28 Nov 2023 12:38:18 +0100
Subject: [PATCH] WIP

---
 pwa/src/layout/Layout.tsx                     |  5 +++
 .../CardsResultsTemplate.module.css           |  9 ++++
 .../CardsResultsTemplate.tsx                  | 41 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx
index 5c1d643a..34544427 100644
--- a/pwa/src/layout/Layout.tsx
+++ b/pwa/src/layout/Layout.tsx
@@ -13,6 +13,9 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { IconPack, library } from "@fortawesome/fontawesome-svg-core";
 import { useEnvironment } from "../hooks/useEnvironment";
+import { ToolTip } from "@conduction/components";
+
+export const TOOLTIP_ID = "cb8f47c3-7151-4a46-954d-784a531b01e6";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -58,6 +61,8 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext, location }) => {
         <APIProvider value={API}>
           <Surface>
             <Document>
+              <ToolTip id={TOOLTIP_ID} />
+
               <Toaster position="bottom-right" />
 
               <div className={styles.container}>
diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
index b73b448a..1131d175 100644
--- a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
+++ b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.module.css
@@ -26,6 +26,15 @@
 
 .description {
   color: var(--conduction-card-wrapper-color) !important;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cardFooter {
+  margin-top: auto;
 }
 
 @media only screen and (max-width: 992px) {
diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
index e187b557..4a7b1e0d 100644
--- a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
+++ b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import * as styles from "./CardsResultsTemplate.module.css";
+import clsx from "clsx";
 import { Heading2, Paragraph } from "@utrecht/component-library-react/dist/css-module";
 import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
 import { CardHeader, CardHeaderDate, CardHeaderTitle, CardWrapper } from "@conduction/components";
+import { TOOLTIP_ID } from "../../../layout/Layout";
 
 interface CardsResultsTemplateProps {
   requests: any[];
@@ -13,6 +15,8 @@ interface CardsResultsTemplateProps {
 export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requests }) => {
   const { t, i18n } = useTranslation();
 
+  const themesWithBefore = ["epe-theme"];
+
   return (
     <>
       <div className={styles.componentsGrid}>
@@ -22,11 +26,24 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
             className={styles.cardContainer}
             onClick={() => navigate(request._self.id)}
             tabIndex={0}
-            aria-label={`${request.titel}, ${request.samenvatting}, ${
+            aria-label={`${
               request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
+            }, ${request.titel}, ${request.samenvatting} ${
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true"
+                ? `,${request.embedded?.behandelendBestuursorgaan?.naam}`
+                : ""
+            } ${
+              window.sessionStorage.getItem("SHOW_CATEGORY") === "true"
+                ? `, ${t("Category")}, ${request.categorie}`
+                : ""
             }`}
           >
-            <CardHeader className={styles.cardHeader}>
+            <CardHeader
+              className={clsx(
+                themesWithBefore.includes(window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") ?? "") &&
+                  styles.cardHeader,
+              )}
+            >
               <CardHeaderDate>
                 {request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")}
               </CardHeaderDate>
@@ -36,6 +53,26 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
             </CardHeader>
 
             <Paragraph className={styles.description}>{request.samenvatting}</Paragraph>
+
+            {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (
+              <div className={styles.cardFooter}>
+                {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
+                  <CardHeaderDate>
+                    <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Municipality")}>
+                      {request.embedded?.behandelendBestuursorgaan?.naam}
+                    </span>
+                  </CardHeaderDate>
+                )}
+                {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (
+                  <CardHeaderDate>
+                    <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Category")}>
+                      {request.categorie}
+                    </span>
+                  </CardHeaderDate>
+                )}
+              </div>
+            )}
           </CardWrapper>
         ))}
       </div>