Skip to content

Commit 2d919b0

Browse files
remko48remko48
authored
Merge pull request #43 from ConductionNL/feature/WOO-413/dynamic-pages
Updated footer to use more values and updated header
2 parents a8532da + 179e5cc commit 2d919b0

File tree

3 files changed

+123
-67
lines changed

3 files changed

+123
-67
lines changed

‎pwa/src/templates/templateParts/footer/FooterTemplate.tsx‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,10 @@ type TDynamicContentItem = {
3333
multiRow?: string;
3434
label?: string;
3535
title?: string;
36+
name?: string;
37+
valueMode?: "value" | "title" | "multiRow";
3638
iconMode?: "standard" | "custom";
39+
linkMode?: "link" | "markdown";
3740
icon?: {
3841
icon: IconName;
3942
prefix: IconPrefix;
@@ -115,31 +118,34 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content })
115118

116119
{content.items.map((item, idx) => (
117120
<div key={idx} className={styles.dynamicSectionContent}>
118-
{item.title && (
121+
{item.valueMode === "title" && (
119122
<DynamicItemHeading
120123
heading={window.sessionStorage.getItem("FOOTER_CONTENT_HEADER") ?? ""}
121-
title={item.title}
124+
title={item.value ?? item.name}
122125
/>
123126
)}
124127
{item.label && <strong>{t(item.label)}</strong>}
128+
125129
{/* External Link */}
126-
{item.link && (/^https?:\/\//i.test(item.link) || /^www\./i.test(item.link)) && (
130+
{item.linkMode === "link" && item.link && (/^https?:\/\//i.test(item.link) || /^www\./i.test(item.link)) && (
127131
<ExternalLink {...{ item }} />
128132
)}
129133

130134
{/* Internal Link */}
131-
{item.link && !(/^https?:\/\//i.test(item.link) || /^www\./i.test(item.link)) && (
132-
<InternalLink {...{ item }} />
133-
)}
135+
{item.linkMode === "link" &&
136+
item.valueMode !== "multiRow" &&
137+
item.valueMode !== "title" &&
138+
item.link &&
139+
!(/^https?:\/\//i.test(item.link) || /^www\./i.test(item.link)) && <InternalLink {...{ item }} />}
134140

135141
{/* Internal Link Github/Markdown link */}
136-
{item.markdownLink && <MarkdownLink {...{ item }} />}
142+
{item.linkMode === "markdown" && item.link && <MarkdownLink {...{ item }} />}
137143

138144
{/* MultiRow */}
139-
{item.multiRow && <MultiRow {...{ item }} />}
145+
{item.valueMode === "multiRow" && <MultiRow {...{ item }} />}
140146

141147
{/* No Link */}
142-
{!item.link && !item.markdownLink && !item.multiRow && <NoLink {...{ item }} />}
148+
{!item.link && item.valueMode !== "multiRow" && <NoLink {...{ item }} />}
143149
</div>
144150
))}
145151
</section>
@@ -255,16 +261,24 @@ const renderIcon = (item: any, side: "left" | "right") => {
255261
const ExternalLink: React.FC<LinkComponentProps> = ({ item }) => {
256262
const { t } = useTranslation();
257263

264+
// Ensure www. links have https:// protocol
265+
const getFullUrl = (link: string) => {
266+
if (/^www\./i.test(link)) {
267+
return `https://${link}`;
268+
}
269+
return link;
270+
};
271+
258272
return (
259273
<Link
260274
className={styles.link}
261-
href={item.link}
275+
href={getFullUrl(item.link)}
262276
target="_blank"
263277
tabIndex={0}
264-
aria-label={`${t(item.ariaLabel)}, ${item.name}, ${t("Opens a new window")}`}
278+
aria-label={`${t(item.ariaLabel)}, ${item.value || item.name}, ${t("Opens a new window")}`}
265279
>
266280
{renderIcon(item, "left")}
267-
{t(item.name)}
281+
{t(item.value || item.name)}
268282
{renderIcon(item, "right")}
269283
</Link>
270284
);
@@ -277,15 +291,15 @@ const InternalLink: React.FC<LinkComponentProps> = ({ item }) => {
277291
<Link
278292
className={styles.link}
279293
onClick={(e: any) => {
280-
e.preventDefault(), navigate(item.link ?? "");
294+
(e.preventDefault(), navigate(item.link ?? ""));
281295
}}
282296
tabIndex={0}
283-
aria-label={`${t(item.ariaLabel)}, ${t(item.name)}`}
297+
aria-label={`${t(item.ariaLabel)}, ${t(item.value ?? item.name)}`}
284298
role="button"
285299
href={item.link}
286300
>
287301
{renderIcon(item, "left")}
288-
{t(item.name)}
302+
{t(item.value ?? item.name)}
289303
{renderIcon(item, "right")}
290304
</Link>
291305
);
@@ -298,25 +312,27 @@ const MarkdownLink: React.FC<LinkComponentProps> = ({ item }) => {
298312
<Link
299313
className={styles.link}
300314
onClick={(e: any) => {
301-
e.preventDefault(), navigate(`/markdown/${item.name.replaceAll(" ", "_")}/?link=${item.markdownLink}`);
315+
(e.preventDefault(), navigate(`/markdown/${item.name.replaceAll(" ", "_")}/?link=${item.link}`));
302316
}}
303317
tabIndex={0}
304-
aria-label={`${t(item.ariaLabel)}, ${t(item.markdownLink)}`}
318+
aria-label={`${t(item.ariaLabel)}, ${t(item.link)}`}
305319
role="button"
306-
href={item.markdownLink}
320+
href={item.link}
307321
>
308322
{renderIcon(item, "left")}
309-
{t(item.name)}
323+
{t(item.value ?? item.name)}
310324
{renderIcon(item, "right")}
311325
</Link>
312326
);
313327
};
314328

315329
const MultiRow: React.FC<LinkComponentProps> = ({ item }) => {
330+
console.log("multirow", item.value);
331+
316332
return (
317333
<span className={styles.multiRow}>
318334
{renderIcon(item, "left")}
319-
<div>{item.multiRow}</div>
335+
<div>{item.value ?? item.name}</div>
320336
{renderIcon(item, "right")}
321337
</span>
322338
);
@@ -328,7 +344,7 @@ const NoLink: React.FC<LinkComponentProps> = ({ item }) => {
328344
return (
329345
<span>
330346
{renderIcon(item, "left")}
331-
{t(item.name)}
347+
{t(item.value ?? item.name)}
332348
{renderIcon(item, "right")}
333349
</span>
334350
);

‎pwa/src/templates/templateParts/header/HeaderTemplate.module.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313
justify-content: space-between;
1414
}
1515

16+
.quickLinks {
17+
display: flex;
18+
gap: 5px;
19+
align-items: center;
20+
}
21+
1622
.image:hover {
1723
cursor: pointer;
1824
}

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

Lines changed: 80 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import * as React from "react";
22
import * as styles from "./HeaderTemplate.module.css";
33
import clsx from "clsx";
4-
import { PageHeader, SkipLink } from "@utrecht/component-library-react/dist/css-module";
4+
import { PageHeader, SkipLink, Button } from "@utrecht/component-library-react/dist/css-module";
55
import { useTranslation } from "react-i18next";
66
import { useGatsbyContext } from "../../../context/gatsby";
77
import { navigate } from "gatsby";
8-
import { Logo, PrimaryTopNav, SecondaryTopNav } from "@conduction/components";
9-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8+
import { Logo } from "@conduction/components";
109
import { useMenus } from "../../../hooks/menus";
11-
import { getMenuFromPosition, getTopRightMenu } from "../../../services/menuUtils";
10+
import { getMenuFromPosition } from "../../../services/menuUtils";
1211

1312
interface HeaderTemplateProps {
1413
layoutClassName: string;
@@ -24,7 +23,8 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
2423
return Array.isArray(data?.results) ? data.results : Array.isArray(data) ? data : [];
2524
}, [menusQuery?.data]);
2625

27-
const menuNavigation = React.useMemo(() => getMenuFromPosition(allMenus, 2), [allMenus]);
26+
const menuNavigation = React.useMemo(() => getMenuFromPosition(allMenus, 1), [allMenus]);
27+
const quickLinks: any[] = React.useMemo(() => (menuNavigation?.items ?? []).slice(0, 4), [menuNavigation?.items]);
2828

2929
return (
3030
<PageHeader className={clsx(layoutClassName && layoutClassName, "ac-header")}>
@@ -43,48 +43,82 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
4343
</div>
4444
<div className={styles.navContainer}>
4545
<Logo onClick={() => navigate("/")} />
46-
<nav role="navigation" aria-label={t("Language select")} className={styles.languageSelectContainer}>
47-
<span
48-
className={clsx(styles.languageSelect, i18n.language === "nl" && styles.languageSelectDisabled)}
49-
onClick={() => i18n.changeLanguage("nl")}
50-
onKeyDown={(e) => {
51-
if (e.key === "Enter") {
52-
i18n.changeLanguage("nl");
53-
}
54-
}}
55-
tabIndex={0}
56-
aria-label="Vertaal pagina naar het Nederlands"
57-
role="button"
58-
aria-pressed={i18n.language === "nl" ? true : false}
59-
aria-disabled={i18n.language === "nl" ? true : false}
60-
>
61-
NL
62-
</span>
63-
<span className={styles.languageSeperator} aria-hidden="true">
64-
{" "}
65-
/{" "}
66-
</span>
67-
<span
68-
className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
69-
onClick={() => i18n.changeLanguage("en")}
70-
onKeyDown={(e) => {
71-
if (e.key === "Enter") {
72-
i18n.changeLanguage("en");
73-
}
74-
}}
75-
tabIndex={0}
76-
aria-label="Translate page to English"
77-
role="button"
78-
aria-pressed={i18n.language === "en" ? true : false}
79-
aria-disabled={i18n.language === "en" ? true : false}
80-
>
81-
EN
82-
</span>
83-
</nav>
46+
<div className={styles.navRight}>
47+
{quickLinks?.length > 0 && (
48+
<nav role="navigation" aria-label={t("Quick links")} className={styles.quickLinks}>
49+
{quickLinks.map((item: any, idx: number) => {
50+
const isExternal =
51+
typeof item?.link === "string" && (/^https?:\/\//i.test(item.link) || /^www\./i.test(item.link));
52+
const href = isExternal && /^www\./i.test(item.link) ? `https://${item.link}` : item.link;
53+
54+
return isExternal ? (
55+
<Button
56+
key={idx}
57+
appearance="secondary"
58+
className={styles.quickLink}
59+
onClick={() => open(href, "_blank")}
60+
tabIndex={0}
61+
aria-label={`${t(item?.ariaLabel ?? item?.name ?? "Link")}, ${t("Opens a new window")}`}
62+
>
63+
{t(item?.name ?? "")}
64+
</Button>
65+
) : (
66+
<Button
67+
key={idx}
68+
appearance="secondary"
69+
className={styles.quickLink}
70+
onClick={() => navigate(item?.link ?? "/")}
71+
tabIndex={0}
72+
aria-label={t(item?.ariaLabel ?? item?.name ?? "Link")}
73+
>
74+
{t(item?.name ?? "")}
75+
</Button>
76+
);
77+
})}
78+
</nav>
79+
)}
80+
{quickLinks?.length === 0 && (
81+
<nav role="navigation" aria-label={t("Language select")} className={styles.languageSelectContainer}>
82+
<span
83+
className={clsx(styles.languageSelect, i18n.language === "nl" && styles.languageSelectDisabled)}
84+
onClick={() => i18n.changeLanguage("nl")}
85+
onKeyDown={(e) => {
86+
if (e.key === "Enter") {
87+
i18n.changeLanguage("nl");
88+
}
89+
}}
90+
tabIndex={0}
91+
aria-label="Vertaal pagina naar het Nederlands"
92+
role="button"
93+
aria-pressed={i18n.language === "nl" ? true : false}
94+
aria-disabled={i18n.language === "nl" ? true : false}
95+
>
96+
NL
97+
</span>
98+
<span className={styles.languageSeperator} aria-hidden="true">
99+
{" "}
100+
/{" "}
101+
</span>
102+
<span
103+
className={clsx(styles.languageSelect, i18n.language === "en" && styles.languageSelectDisabled)}
104+
onClick={() => i18n.changeLanguage("en")}
105+
onKeyDown={(e) => {
106+
if (e.key === "Enter") {
107+
i18n.changeLanguage("en");
108+
}
109+
}}
110+
tabIndex={0}
111+
aria-label="Translate page to English"
112+
role="button"
113+
aria-pressed={i18n.language === "en" ? true : false}
114+
aria-disabled={i18n.language === "en" ? true : false}
115+
>
116+
EN
117+
</span>
118+
</nav>
119+
)}
120+
</div>
84121
</div>
85-
{menuNavigation?.items?.length > 0 && (
86-
<PrimaryTopNav items={menuNavigation.items as any} />
87-
)}
88122
</div>
89123
</PageHeader>
90124
);

0 commit comments

Comments
 (0)