From 887d4cd9c31736122b69d35656ad35e8d0ed58d4 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <mail@d-koppenhagen.de>
Date: Tue, 26 Oct 2021 20:24:24 +0200
Subject: [PATCH] feat(Header): make Header texts configurable

---
 messages_example.json                 | 3 ++-
 public/messages.json                  | 3 ++-
 src/components/Header/Header.tsx      | 8 ++++----
 src/components/Search/Search.tsx      | 4 ++--
 src/context/MessagesContext/index.tsx | 1 +
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/messages_example.json b/messages_example.json
index f3bd30a..f2592d7 100644
--- a/messages_example.json
+++ b/messages_example.json
@@ -97,6 +97,7 @@
     "publishedLabel": "Quadrant Overview"
   },
   "legalInformationLink": "https://www.aoe.com/en/imprint.html",
-  "search": "What are you looking for?",
+  "searchLabel": "Search",
+  "searchPlaceholder": "What are you looking for?",
   "revisionsText": "Revisions:"
 }
diff --git a/public/messages.json b/public/messages.json
index f3bd30a..f2592d7 100644
--- a/public/messages.json
+++ b/public/messages.json
@@ -97,6 +97,7 @@
     "publishedLabel": "Quadrant Overview"
   },
   "legalInformationLink": "https://www.aoe.com/en/imprint.html",
-  "search": "What are you looking for?",
+  "searchLabel": "Search",
+  "searchPlaceholder": "What are you looking for?",
   "revisionsText": "Revisions:"
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index fa5825f..8a68014 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -12,7 +12,7 @@ import { useMessages } from "../../context/MessagesContext";
 export default function Header({ pageName }: { pageName: string }) {
   const [searchOpen, setSearchOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const { pageHelp } = useMessages();
+  const { searchLabel, pageHelp, pageOverview } = useMessages();
   const history = useHistory();
   const searchRef = useRef<HTMLInputElement>(null);
 
@@ -55,20 +55,20 @@ export default function Header({ pageName }: { pageName: string }) {
           <div className="nav__item">
             <Link pageName="help-and-about-tech-radar" className="icon-link">
               <span className="icon icon--question icon-link__icon" />
-              How to Use {radarNameShort}?
+              {pageHelp.headlinePrefix || 'How to use' } {radarNameShort}?
             </Link>
           </div>
         )}
         <div className="nav__item">
           <Link pageName="overview" className="icon-link">
             <span className="icon icon--overview icon-link__icon" />
-            Technologies Overview
+            { pageOverview?.title || 'Technologies Overview' }
           </Link>
         </div>
         <div className="nav__item">
           <button className="icon-link" onClick={handleOpenClick}>
             <span className="icon icon--search icon-link__icon" />
-            Search
+            { searchLabel || 'Search' }
           </button>
           <div className={classNames("nav__search", { "is-open": searchOpen })}>
             <Search
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 5865793..66bdf9c 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -19,7 +19,7 @@ function Search(
   { value, onChange, onClose, open = false, onSubmit = () => {} }: SearchProps,
   ref: any
 ) {
-  const { searchPlaceholder } = useMessages();
+  const { searchLabel, searchPlaceholder } = useMessages();
   const closable = onClose !== undefined;
 
   const handleSubmit = (e: FormEvent) => {
@@ -52,7 +52,7 @@ function Search(
       <span className={classNames("search__button", { "is-open": open })}>
         <button type="submit" className="button">
           <span className="icon icon--search button__icon" />
-          Search
+          { searchLabel }
         </button>
       </span>
       {closable && (
diff --git a/src/context/MessagesContext/index.tsx b/src/context/MessagesContext/index.tsx
index c645a14..d1b5732 100644
--- a/src/context/MessagesContext/index.tsx
+++ b/src/context/MessagesContext/index.tsx
@@ -50,6 +50,7 @@ export interface Messages {
   pageOverview?: PageOverview;
   pageItem?: PageItem;
   pageIndex?: PageIndex;
+  searchLabel?: string;
   searchPlaceholder?: string;
   revisionsText?: string;
 }