From a509e0a0da3dc5b526e7ae1a6092bd8c6b1fd285 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <mail@d-koppenhagen.de>
Date: Tue, 26 Oct 2021 19:58:50 +0200
Subject: [PATCH] feat(PageItem): make PageItem back to quadrant overview text
 configurable

---
 messages_example.json                 | 3 +++
 public/messages.json                  | 3 +++
 src/components/PageItem/PageItem.tsx  | 6 +++++-
 src/context/MessagesContext/index.tsx | 5 +++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/messages_example.json b/messages_example.json
index 641fb94..2697702 100644
--- a/messages_example.json
+++ b/messages_example.json
@@ -87,6 +87,9 @@
   "pageOverview": {
     "title": "Technologies Overview"
   },
+  "pageItem": {
+    "quadrantOverview": "Quadrant Overview"
+  },
   "legalInformationLink": "https://www.aoe.com/en/imprint.html",
   "search": "What are you looking for?"
 }
diff --git a/public/messages.json b/public/messages.json
index 641fb94..2697702 100644
--- a/public/messages.json
+++ b/public/messages.json
@@ -87,6 +87,9 @@
   "pageOverview": {
     "title": "Technologies Overview"
   },
+  "pageItem": {
+    "quadrantOverview": "Quadrant Overview"
+  },
   "legalInformationLink": "https://www.aoe.com/en/imprint.html",
   "search": "What are you looking for?"
 }
diff --git a/src/components/PageItem/PageItem.tsx b/src/components/PageItem/PageItem.tsx
index c88721a..b47c293 100644
--- a/src/components/PageItem/PageItem.tsx
+++ b/src/components/PageItem/PageItem.tsx
@@ -12,6 +12,7 @@ import {
   groupByQuadrants,
   Item,
 } from "../../model";
+import { useMessages } from "../../context/MessagesContext";
 
 const getItem = (pageName: string, items: Item[]) => {
   const [quadrantName, itemName] = pageName.split("/");
@@ -33,6 +34,9 @@ type Props = {
 };
 
 const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
+  const { pageItem } = useMessages();
+  const quadrantOverview = pageItem?.quadrantOverview || 'Quadrant Overview';
+
   const itemsInRing = getItemsInRing(pageName, items);
 
   const { getAnimationState, getAnimationStates } = useAnimations({
@@ -70,7 +74,7 @@ const PageItem: React.FC<Props> = ({ pageName, items, leaving, onLeave }) => {
                 <div className="split__right">
                   <Link className="icon-link" pageName={item.quadrant}>
                     <span className="icon icon--pie icon-link__icon" />
-                    Quadrant Overview
+                    {quadrantOverview}
                   </Link>
                 </div>
               </div>
diff --git a/src/context/MessagesContext/index.tsx b/src/context/MessagesContext/index.tsx
index dba9b3b..7fad2e1 100644
--- a/src/context/MessagesContext/index.tsx
+++ b/src/context/MessagesContext/index.tsx
@@ -31,12 +31,17 @@ interface PageOverview {
   title: string;
 }
 
+interface PageItem {
+  quadrantOverview: string;
+}
+
 export interface Messages {
   footerFootnote?: string;
   socialLinks?: SocialLink[];
   legalInformationLink?: string;
   pageHelp?: PageHelp;
   pageOverview?: PageOverview;
+  pageItem?: PageItem;
   searchPlaceholder?: string;
 }