diff --git a/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff index 87643b60b2..65276327bf 100644 --- a/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff +++ b/src/bundle/Resources/translations/ibexa_universal_discovery_widget.en.xliff @@ -286,6 +286,11 @@ Try more general keywords. key: search.no_results.hint.more_general + + No results found + No results found + key: search.no_results_without_query + Search... Search... diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js index db769e335f..a55cda6602 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js @@ -2,40 +2,51 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../../../common/icon/icon'; + import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; -const SearchNoResults = ({ searchText }) => { +import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names'; + +const SearchNoResults = ({ searchText, noResultsHints: noResultsHintsCustom, extraClasses }) => { const Translator = getTranslator(); - const noResultsLabel = Translator.trans( - /*@Desc("No results found for %query%")*/ 'search.no_results', - { query: searchText }, - 'ibexa_universal_discovery_widget', - ); - const noResultsHints = [ - Translator.trans( - /*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling', - {}, - 'ibexa_universal_discovery_widget', - ), - Translator.trans( - /*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general', - {}, - 'ibexa_universal_discovery_widget', - ), - Translator.trans( - /*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords', - {}, - 'ibexa_universal_discovery_widget', - ), - Translator.trans( - /*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords', - {}, - 'ibexa_universal_discovery_widget', - ), - ]; + const className = createCssClassNames({ + 'c-search-no-results': true, + [extraClasses]: true, + }); + const noResultsLabel = searchText + ? Translator.trans( + /*@Desc("No results found for %query%")*/ 'search.no_results', + { query: searchText }, + 'ibexa_universal_discovery_widget', + ) + : Translator.trans(/*@Desc("No results found")*/ 'search.no_results_without_query', {}, 'ibexa_universal_discovery_widget'); + const noResultsHints = noResultsHintsCustom + ? noResultsHintsCustom + : [ + Translator.trans( + /*@Desc("Check the spelling of keywords.")*/ 'search.no_results.hint.check_spelling', + {}, + 'ibexa_universal_discovery_widget', + ), + Translator.trans( + /*@Desc("Try more general keywords.")*/ 'search.no_results.hint.more_general', + {}, + 'ibexa_universal_discovery_widget', + ), + Translator.trans( + /*@Desc("Try different keywords.")*/ 'search.no_results.hint.different_kewords', + {}, + 'ibexa_universal_discovery_widget', + ), + Translator.trans( + /*@Desc("Try fewer keywords. Reducing keywords results in more matches.")*/ 'search.no_results.hint.fewer_keywords', + {}, + 'ibexa_universal_discovery_widget', + ), + ]; return ( -
+

{noResultsLabel}

@@ -56,7 +67,15 @@ const SearchNoResults = ({ searchText }) => { }; SearchNoResults.propTypes = { - searchText: PropTypes.string.isRequired, + extraClasses: PropTypes.string, + searchText: PropTypes.string, + noResultsHints: PropTypes.arrayOf(PropTypes.string), +}; + +SearchNoResults.defaultProps = { + extraClasses: '', + searchText: null, + noResultsHints: null, }; export default SearchNoResults;