Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
remko48 committed Nov 28, 2023
1 parent ef2dcf1 commit 9a1def0
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 2 deletions.
5 changes: 5 additions & 0 deletions pwa/src/layout/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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[];
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 9a1def0

Please sign in to comment.