feat(Header): make Header texts configurable

medic · Nov 10, 2021 · 887d4cd · 887d4cd
1 parent 9d2efc1
commit 887d4cd
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -50,6 +50,7 @@ export interface Messages {
  pageOverview?: PageOverview;
  pageItem?: PageItem;
  pageIndex?: PageIndex;
+ searchLabel?: string;
  searchPlaceholder?: string;
  revisionsText?: string;
 }