@searchstax-inc/searchstudio-ux-js 2.0.0 → 4.1.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# Change Log
+
+All notable changes to the "searchstudio-ux-js" project will be documented in this file.
+
+## [1.0.3] - 2024-10-08
+### ⚠️ BREAKING CHANGES
+- Result template needs to be updated to print variables as HTML because they now will contain html <em> tags if highlighting is enabled
+### Features
+- Added support for highlighting controlled via studio UI
+- Results per page are now configured through studio UI
+### Bug Fixes
+- Tracking calls now use unmodified title of the result
+
+## [1.0.10] - 2024-12-05
+### Bug Fixes
+- fix & and + symbols causing issues in facet values
+
+## [1.0.11] - 2024-12-26
+### Bug Fixes
+- fix order of non mapped fields
+- fix styling of grid view for accelerator
+
+## [1.0.24]
+### Features
+- added answer widget
+
+## [2.0.0]
+### Features
+- Readme updated to give more information on how widgets work
+### Bug Fixes
+- NVDA facet groups now announce state
+- NVDA added ability to jump from facets to results section
+
+## [4.1.0]
+### Bug Fixes
+- stopped making unnecessary calls on blank search page load
+- accessibility: template modified to only read result title for accessibility
+- accessibility: leave feedback button state change is now announced
+- accessibility: focus persistance added for feedback rating
+- added support for react 19

package/README.md

@@ -134,14 +134,14 @@ The SearchstaxAnswerWidget component for JS provides an AI answer widget for you
 
 ```
 searchstax.addAnswerWidget("searchstax-answer-container", {
-  showShowMoreAfterWordCount: 100,
+  showMoreAfterWordCount: 100,
   feedbackwidget: feedbackConfig
 });
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
 - feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
 - templates - template override. look at examples below
 
@@ -191,7 +191,7 @@ This example is based on [sitesearch-ux-js](https://www.npmjs.com/package/@searc
 ```
 
 searchstax.addAnswerWidget("searchstax-answer-container", {
-    showShowMoreAfterWordCount: 100,
+    showMoreAfterWordCount: 100,
     templates: {
       main: {
           template: `
@@ -356,6 +356,7 @@ function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
 
 - hooks.locationDecode - callback function to override location decoding
 - hooks.locationDecodeCoordinatesToAddress - callback function to override location decoding
+- templates - see examples below
 
 **Template Override**
 
@@ -413,6 +414,13 @@ The SearchStax Site Search solution’s Results Widget for UX-JS displays the se
 searchstax.addSearchResultsWidget("searchstax-results-container", {});
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- hooks.afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+- templates - see examples below
+
 **Main Template Override**
 
 The template prop allows customizing the result UI.
@@ -473,7 +481,7 @@ It receives following props:
       },
       searchResultTemplate: {
         template: `
-    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
+    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0" aria-labelledby="title-{{uniqueId}}">
     <div class="searchstax-search-result searchstax-search-result-wrapping {{#thumbnail}} has-thumbnail {{/thumbnail}}">
         {{#promoted}}
             <div class="searchstax-search-result-promoted" data-test-id="searchstax-search-result-promoted"></div>
@@ -489,7 +497,7 @@ It receives following props:
             <img alt="" src="{{thumbnail}}" alt="image" class="searchstax-thumbnail" data-test-id="searchstax-thumbnail">
         {{/thumbnail}}
         <div class="searchstax-search-result-title-container" data-test-id="searchstax-search-result-title-container">
-            <h3 class="searchstax-search-result-title">{{{title}}}</h3>
+            <h3 class="searchstax-search-result-title" id="title-{{uniqueId}}">{{{title}}}</h3>
         </div>
 
         {{#paths}}
@@ -573,7 +581,7 @@ It receives following props:
       },
       searchResultTemplate: {
         template: `
-    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0">
+    <a href="{{url}}" data-searchstax-unique-result-id="{{uniqueId}}" data-test-id="searchstax-result-item-link" class="searchstax-result-item-link searchstax-result-item-link-wrapping" tabindex="0" aria-labelledby="title-{{uniqueId}}">
     <div class="searchstax-search-result searchstax-search-result-wrapping {{#thumbnail}} has-thumbnail {{/thumbnail}}">
         {{#promoted}}
             <div class="searchstax-search-result-promoted" data-test-id="searchstax-search-result-promoted"></div>
@@ -589,7 +597,7 @@ It receives following props:
             <img alt="" src="{{thumbnail}}" alt="image" class="searchstax-thumbnail" data-test-id="searchstax-thumbnail">
         {{/thumbnail}}
         <div class="searchstax-search-result-title-container" data-test-id="searchstax-search-result-title-container">
-            <h3 class="searchstax-search-result-title">{{{title}}}</h3>
+            <h3 class="searchstax-search-result-title" id="title-{{uniqueId}}">{{{title}}}</h3>
         </div>
 
         {{#paths}}
@@ -647,6 +655,7 @@ It receives following props:
       }
     },
     renderMethod: 'infiniteScroll',
+    resultsPerPage: 10,
     hooks: {
       afterLinkClick: function (result: ISearchstaxParsedResult) {
         // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
@@ -668,6 +677,10 @@ The SearchStax Site Search solution’s Pagination Widget displays a pagination
 searchstax.addPaginationWidget("searchstax-pagination-container", {});
 ```
 
+**Props**
+- templates - see examples below
+
+
 **Multiple Instances**
 
 Multiple instances of the Pagination widget can be added by calling the addPaginationWidget method multiple times with different target containers:
@@ -978,6 +991,8 @@ searchstax.addSearchFeedbackWidget('container2', options2);
 
 Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.
 
+**Props**
+- templates - see examples below
 
 **Main Template Override**
 
@@ -1031,6 +1046,12 @@ The SearchStax Site Search solution’s Related Searches Widget displays related
   })
 ```
 
+**Props**
+
+- relatedSearchesURL: // : An endpoint from the Discovery tab of the App Settings > All APls screen.
+- relatedSearchesAPIKey: The Discovery API key from the Discovery tab of the App Settings > All
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for related searches.
@@ -1094,6 +1115,9 @@ SearchStax Site Search solution’s External Promotions Widget displays external
   searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-container", {})
 ```
 
+**Props**
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for external promotions.
@@ -1165,6 +1189,9 @@ The SearchStax Site Search solution’s Sorting Widget allows sorting of search
   searchstax.addSearchSortingWidget("search-sorting-container", {});
 ```
 
+**Props**
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for sorting widget.

package/README.mustache

@@ -134,14 +134,14 @@ The SearchstaxAnswerWidget component for JS provides an AI answer widget for you
 
 ```
 searchstax.addAnswerWidget("searchstax-answer-container", {
-  showShowMoreAfterWordCount: 100,
+  showMoreAfterWordCount: 100,
   feedbackwidget: feedbackConfig
 });
 ```
 
 **Props**
 
-- showShowMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
+- showMoreAfterWordCount - number(default 100) determining after how many symbols UI will show “Read More” view.
 - feedbackWidget – an optional object that configures thumbs-up and thumbs-down feedback functionality.
 - templates - template override. look at examples below
 
@@ -176,7 +176,7 @@ This example is based on [sitesearch-ux-js](https://www.npmjs.com/package/@searc
 ```
 
 searchstax.addAnswerWidget("searchstax-answer-container", {
-    showShowMoreAfterWordCount: 100,
+    showMoreAfterWordCount: 100,
     templates: {
       main: {
           template: `{{&answer.main.template}}`,
@@ -294,6 +294,7 @@ function locationDecodeFunction(term: string): Promise<ISearchstaxLocation>{
 
 - hooks.locationDecode - callback function to override location decoding
 - hooks.locationDecodeCoordinatesToAddress - callback function to override location decoding
+- templates - see examples below
 
 **Template Override**
 
@@ -333,6 +334,13 @@ The SearchStax Site Search solution’s Results Widget for UX-JS displays the se
 searchstax.addSearchResultsWidget("searchstax-results-container", {});
 ```
 
+**Props**
+
+- renderMethod – either “pagination” or “infiniteScroll”.
+- resultsPerPage – number of results on a page.
+- hooks.afterLinkClick – Callback function invoked when a result link is clicked. Allows modifying the result object.
+- templates - see examples below
+
 **Main Template Override**
 
 The template prop allows customizing the result UI.
@@ -421,6 +429,7 @@ It receives following props:
       }
     },
     renderMethod: 'infiniteScroll',
+    resultsPerPage: 10,
     hooks: {
       afterLinkClick: function (result: ISearchstaxParsedResult) {
         // gets result that was clicked, if passed along further functions will execute, if null then event gets canceled
@@ -442,6 +451,10 @@ The SearchStax Site Search solution’s Pagination Widget displays a pagination
 searchstax.addPaginationWidget("searchstax-pagination-container", {});
 ```
 
+**Props**
+- templates - see examples below
+
+
 **Multiple Instances**
 
 Multiple instances of the Pagination widget can be added by calling the addPaginationWidget method multiple times with different target containers:
@@ -670,6 +683,8 @@ searchstax.addSearchFeedbackWidget('container2', options2);
 
 Each instance can be configured separately via its options object. This allows for the widget to be added to different locations on the page as needed.
 
+**Props**
+- templates - see examples below
 
 **Main Template Override**
 
@@ -709,6 +724,12 @@ The SearchStax Site Search solution’s Related Searches Widget displays related
   })
 ```
 
+**Props**
+
+- relatedSearchesURL: // : An endpoint from the Discovery tab of the App Settings > All APls screen.
+- relatedSearchesAPIKey: The Discovery API key from the Discovery tab of the App Settings > All
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for related searches.
@@ -757,6 +778,9 @@ SearchStax Site Search solution’s External Promotions Widget displays external
   searchstax.addExternalPromotionsWidget("searchstax-external-promotions-layout-container", {})
 ```
 
+**Props**
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for external promotions.
@@ -802,6 +826,9 @@ The SearchStax Site Search solution’s Sorting Widget allows sorting of search
   searchstax.addSearchSortingWidget("search-sorting-container", {});
 ```
 
+**Props**
+- templates - see examples below
+
 **Main Template Override**
 
 Main template for sorting widget.