fix(searchInput): Add a propertie in the cms for searchProductsTitle …

packages/core/cms/faststore/components/cms_component__navbar.jsonc

@@ -50,6 +50,21 @@
       "type": "object",
       "required": ["sort"],
       "properties": {
+        "searchHistoryTitle": {
+          "title": "Search History Title for Search Results Dropdown",
+          "type": "string",
+          "default": "History"
+        },
+        "searchTopTitle": {
+          "title": "Search Top Title for Search Results Dropdown",
+          "type": "string",
+          "default": "Top search"
+        },
+        "searchProductsTitle": {
+          "title": "Search Products Title for Search Results Dropdown",
+          "type": "string",
+          "default": "Suggested products"
+        },
         "placeholder": {
           "title": "Placeholder for Search Bar",
           "type": "string",

packages/core/cms/faststore/sections.json

@@ -192,6 +192,21 @@
           "type": "object",
           "required": ["sort"],
           "properties": {
+            "searchHistoryTitle": {
+              "title": "Search History Title for Search Results Dropdown",
+              "type": "string",
+              "default": "History"
+            },
+            "searchTopTitle": {
+              "title": "Search Top Title for Search Results Dropdown",
+              "type": "string",
+              "default": "Top search"
+            },
+            "searchProductsTitle": {
+              "title": "Search Products Title for Search Results Dropdown",
+              "type": "string",
+              "default": "Suggested products"
+            },
             "placeholder": {
               "title": "Placeholder for Search Bar",
               "type": "string",

packages/core/src/components/navigation/Navbar/Navbar.tsx

@@ -154,6 +154,9 @@ function Navbar({
               placeholder={searchInput?.placeholder}
               sort={searchInput?.sort}
               quickOrderSettings={searchInput?.quickOrderSettings}
+              searchHistoryTitle={searchInput?.searchHistoryTitle}
+              searchTopTitle={searchInput?.searchTopTitle}
+              searchProductsTitle={searchInput?.searchProductsTitle}
             />
           )}
 
@@ -184,6 +187,9 @@ function Navbar({
                 quickOrderSettings={searchInput?.quickOrderSettings}
                 hidden={!searchExpanded}
                 aria-hidden={!searchExpanded}
+                searchHistoryTitle={searchInput?.searchHistoryTitle}
+                searchTopTitle={searchInput?.searchTopTitle}
+                searchProductsTitle={searchInput?.searchProductsTitle}
               />
             )}
             {isDesktop &&

packages/core/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -21,6 +21,9 @@ import type {
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 
 interface SearchDropdownProps {
+  searchHistoryTitle?: string
+  searchTopTitle?: string
+  searchProductsTitle?: string
   sort: SearchState['sort']
   quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
   [key: string]: any
@@ -45,6 +48,9 @@ function SearchDropdown({
   sort,
   quickOrderSettings,
   onChangeCustomSearchDropdownVisible,
+  searchProductsTitle,
+  searchHistoryTitle,
+  searchTopTitle,
   ...otherProps
 }: SearchDropdownProps) {
   const {
@@ -53,8 +59,8 @@ function SearchDropdown({
 
   return (
     <UISearchDropdown {...otherProps}>
-      <SearchHistory sort={sort} />
-      <SearchTop sort={sort} />
+      <SearchHistory title={searchHistoryTitle} sort={sort} />
+      <SearchTop title={searchTopTitle} sort={sort} />
       <UISearchAutoComplete>
         {terms?.map(({ value: suggestion }) => (
           <UISearchAutoCompleteTerm
@@ -96,6 +102,7 @@ function SearchDropdown({
         data-af-element={searchId && 'search-autocomplete'}
         data-af-onimpression={!!searchId}
         data-af-search-id={searchId}
+        title={searchProductsTitle}
       >
         {products.map((product, index) => {
           const productParsed = product as ProductSummary_ProductFragment

packages/core/src/components/search/SearchHistory/SearchHistory.tsx

@@ -1,11 +1,19 @@
 import {
   SearchHistory as UISearchHistory,
   SearchHistoryTerm as UISearchHistoryTerm,
+  type SearchHistoryProps as UISearchHistoryProps,
   useSearch,
 } from '@faststore/ui'
+
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
 
-const SearchHistory = ({ ...props }) => {
+export interface SearchHistoryProps
+  extends Omit<UISearchHistoryProps, 'title'> {
+  title?: string
+  sort?: string
+}
+
+const SearchHistory = ({ title = 'History', ...props }: SearchHistoryProps) => {
   const {
     values: { onSearchSelection },
   } = useSearch()
@@ -16,7 +24,7 @@ const SearchHistory = ({ ...props }) => {
   }
 
   return (
-    <UISearchHistory title="History" onClear={clearSearchHistory} {...props}>
+    <UISearchHistory title={title} onClear={clearSearchHistory} {...props}>
       {searchHistory.map((item) => (
         <UISearchHistoryTerm
           key={item.term}

packages/core/src/components/search/SearchInput/SearchInput.tsx

@@ -70,6 +70,9 @@ export type SearchInputProps = {
   placeholder?: string
   quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
   sort?: string
+  searchHistoryTitle?: string
+  searchTopTitle?: string
+  searchProductsTitle?: string
   /**
    * Called when the user clicks Search in the file upload card, with the parsed CSV data.
    * Use this to run bulk search, add to cart, or analytics.
@@ -99,6 +102,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       sort,
       placeholder,
       quickOrderSettings,
+      searchHistoryTitle,
+      searchTopTitle,
+      searchProductsTitle,
       onFileSearch,
       ...otherProps
     },
@@ -578,6 +584,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
                   onChangeCustomSearchDropdownVisible={
                     setCustomSearchDropdownVisibleCondition
                   }
+                  searchHistoryTitle={searchHistoryTitle}
+                  searchTopTitle={searchTopTitle}
+                  searchProductsTitle={searchProductsTitle}
                 />
               </Suspense>
             )}

packages/core/src/components/search/SearchTop/SearchTop.tsx

@@ -1,9 +1,9 @@
 import {
   SearchTop as UISearchTop,
   SearchTopTerm as UISearchTopTerm,
+  type SearchTopProps as UISearchTopProps,
   useSearch,
 } from '@faststore/ui'
-import type { HTMLAttributes } from 'react'
 
 import type { SearchState } from '@faststore/sdk'
 import type { StoreSuggestionTerm } from '@generated/graphql'
@@ -12,7 +12,7 @@ import useTopSearch from 'src/sdk/search/useTopSearch'
 
 const MAX_TOP_SEARCH_TERMS = 5
 
-export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
+export interface SearchTopProps extends Omit<UISearchTopProps, 'title'> {
   /**
    * List of top searched items
    */
@@ -21,9 +21,15 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * Default sort by value
    */
   sort?: string
+  title?: string
 }
 
-function SearchTop({ topTerms = [], sort, ...otherProps }: SearchTopProps) {
+function SearchTop({
+  topTerms = [],
+  sort,
+  title = 'Top Search',
+  ...otherProps
+}: SearchTopProps) {
   const {
     values: { onSearchSelection },
   } = useSearch()
@@ -38,7 +44,7 @@ function SearchTop({ topTerms = [], sort, ...otherProps }: SearchTopProps) {
   }
 
   return (
-    <UISearchTop title="Top Search" {...otherProps}>
+    <UISearchTop title={title} {...otherProps}>
       {terms.map((term, index) => (
         <UISearchTopTerm
           key={index}

packages/core/src/components/sections/Navbar/Navbar.tsx

@@ -23,6 +23,9 @@ export interface NavbarProps {
   searchInput: {
     placeholder?: string
     sort: string
+    searchHistoryTitle?: string
+    searchTopTitle?: string
+    searchProductsTitle?: string
     quickOrderSettings?: {
       quickOrder: boolean
       attachmentButton?: {

packages/ui/src/components/molecules/FileUploadCard/styles.scss

@@ -3,21 +3,21 @@
   // Design Tokens for File Upload Card
   // --------------------------------------------------------
 
-  --fs-file-upload-card-padding:                var(--fs-spacing-3);
-  --fs-file-upload-card-bkg-color:              var(--fs-color-neutral-0);
-  --fs-file-upload-card-border-width:           var(--fs-border-width);
-  --fs-file-upload-card-border-color:           var(--fs-border-color-light);
-  --fs-file-upload-card-border-radius:          var(--fs-border-radius-medium);
-  --fs-file-upload-card-dropzone-padding:       var(--fs-spacing-3) var(--fs-spacing-4);
-  --fs-file-upload-card-dropzone-border-width:  var(--fs-border-width-thick);
-  --fs-file-upload-card-dropzone-border-color:  var(--fs-border-color-light);
+  --fs-file-upload-card-padding: var(--fs-spacing-3);
+  --fs-file-upload-card-bkg-color: var(--fs-color-neutral-0);
+  --fs-file-upload-card-border-width: var(--fs-border-width);
+  --fs-file-upload-card-border-color: var(--fs-border-color-light);
+  --fs-file-upload-card-border-radius: var(--fs-border-radius-medium);
+  --fs-file-upload-card-dropzone-padding: var(--fs-spacing-3) var(--fs-spacing-4);
+  --fs-file-upload-card-dropzone-border-width: var(--fs-border-width-thick);
+  --fs-file-upload-card-dropzone-border-color: var(--fs-border-color-light);
   --fs-file-upload-card-dropzone-border-radius: var(--fs-border-radius);
-  --fs-file-upload-card-icon-size:              3rem;
-  --fs-file-upload-card-badge-size:             1.5rem;
-  --fs-file-upload-card-badge-bg-color:         #0366dd;
-  --fs-file-upload-card-shadow-color:           #bfdbfe;
-  --fs-file-upload-card-title-color:            var(--fs-color-text);
-  --fs-file-upload-card-link-color:             var(--fs-color-link);
+  --fs-file-upload-card-icon-size: 3rem;
+  --fs-file-upload-card-badge-size: 1.5rem;
+  --fs-file-upload-card-badge-bg-color: #0366dd;
+  --fs-file-upload-card-shadow-color: #bfdbfe;
+  --fs-file-upload-card-title-color: var(--fs-color-text);
+  --fs-file-upload-card-link-color: var(--fs-color-link);
 
   // --------------------------------------------------------
   // Structural Styles