feat(Header): make Header texts configurable

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:"
 }

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:"
 }

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

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 && (

src/context/MessagesContext/index.tsx

@@ -50,6 +50,7 @@ export interface Messages {
   pageOverview?: PageOverview;
   pageItem?: PageItem;
   pageIndex?: PageIndex;
+  searchLabel?: string;
   searchPlaceholder?: string;
   revisionsText?: string;
 }