Make search input placeholder configurable

eea · Nov 14, 2022 · 18f3f53 · 18f3f53
1 parent 8f2b0d0
commit 18f3f53
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/searchlib/components/SearchBox/SearchBoxView.jsx b/searchlib/components/SearchBox/SearchBoxView.jsx
@@ -3,14 +3,13 @@ import PropTypes from 'prop-types';
 import Downshift from 'downshift';
 import cx from 'classnames';
 import { Result } from '@elastic/react-search-ui-views';
+import { useAppConfig } from '@eeacms/search/lib/hocs';
 import Autocomplete from './Autocomplete';
 
-// import { useAppConfig } from '@eeacms/search/lib/hocs';
-
 import SearchInput from '../SearchInput/SearchInput';
 
 function SearchBoxView(props) {
-  // const { appConfig } = useAppConfig();
+  const { appConfig } = useAppConfig();
   const {
     className,
     allAutocompletedItemsCount,
@@ -65,30 +64,22 @@ function SearchBoxView(props) {
         let autocompleteClass = isOpen === true ? ' autocomplete' : '';
         return (
           <div className="header-content">
+            {appConfig.headline ? (
+              <h2 className="searchApp-headline">{appConfig.headline}</h2>
+            ) : (
+              ''
+            )}
+            {appConfig.subheadline ? (
+              <p className="searchApp-subheadline">{appConfig.subheadline}</p>
+            ) : (
+              ''
+            )}
             <form
               onSubmit={(e) => {
                 closeMenu();
                 onSubmit(e);
               }}
             >
-              {/*{appConfig.title ? (
-                  <h2 className="searchApp-headline">
-                    {appConfig.titleIsLink ? (
-                      <a href={homeURL}>{appConfig.title}</a>
-                    ) : (
-                      <>{appConfig.title}</>
-                    )}
-                  </h2>
-                ) : (
-                  ''
-                )}
-                {appConfig.subheadline ? (
-                  <h3 className="searchApp-subheadline">
-                    {appConfig.subheadline}
-                  </h3>
-                ) : (
-                  ''
-                )}*/}
               <div
                 className={cx('sui-search-box', className, autocompleteClass)}
               >
@@ -104,7 +95,9 @@ function SearchBoxView(props) {
                   getInputProps={(additionalProps) => {
                     const { className, ...rest } = additionalProps || {};
                     return getInputProps({
-                      placeholder: 'Search with a question or keyword...',
+                      placeholder:
+                        appConfig.searchInputPlaceholder ||
+                        'Search with a question or keyword...',
                       ...inputProps,
                       className: cx(
                         'sui-search-box__text-input',

diff --git a/searchlib/registry.js b/searchlib/registry.js
@@ -243,7 +243,9 @@ const config = {
       host: 'http://localhost:9200',
       elastic_index: '_all',
       title: 'Search catalogue', // the main search app headline
+      headline: '', // main headline
       subheadline: '', // text under the headline
+      searchInputPlaceholder: '', // search input placeholder
       demoquestion: '', // Question used as example under the search input
       // debug: true,
       hasA11yNotifications: true,

diff --git a/src/SearchBlock/schema.js b/src/SearchBlock/schema.js
@@ -7,14 +7,12 @@ export const SearchBlockSchema = ({ formData = {} }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['appName'],
+      fields: ['appName', 'headline', 'subheadline', 'searchInputPlaceholder'],
     },
     {
       id: 'general',
       title: 'General settings',
       fields: [
-        'headline',
-        'subheadline',
         'promptQueries',
         'promptQueryInterval',
         'debugQuery',
@@ -80,12 +78,17 @@ export const SearchBlockSchema = ({ formData = {} }) => ({
 
     headline: {
       title: 'Main headline',
-      configPath: 'title',
+      configPath: 'headline',
     },
     subheadline: {
       title: 'Text below headline',
       configPath: 'subheadline',
     },
+    searchInputPlaceholder: {
+      title: 'Search input placeholder',
+      default: 'Search with a question or keyword...',
+      configPath: 'searchInputPlaceholder',
+    },
     promptQueries: {
       title: 'Prompt queries',
       configPath: 'promptQueries',