Merge branch 'KIT-4060-4' of https://github.com/coveo/ui-kit into KIT-4060-4

https://coveord.atlassian.net/browse/KIT-4060

Author: alexprudhomme

packages/atomic/src/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.ts

@@ -12,6 +12,7 @@ import {
   StorageItems,
 } from '@/src/utils/local-storage-utils';
 import {updateBreakpoints} from '@/src/utils/replace-breakpoint';
+import {isNullOrUndefined} from '@coveo/bueno';
 import {
   buildSearchBox,
   buildStandaloneSearchBox,
@@ -33,28 +34,70 @@ import {
   spreadProperties,
 } from '../../../utils/stencil-utils';
 import {RedirectionPayload} from '../../common/search-box/redirection-payload';
+import {searchBoxTextArea} from '../../common/search-box/search-box-text-area';
 import {
   buttonSearchSuggestion,
   simpleSearchSuggestion,
 } from '../../common/search-box/search-suggestion';
 import {submitButton} from '../../common/search-box/submit-button';
-import {textArea} from '../../common/search-box/text-area';
 import {wrapper} from '../../common/search-box/wrapper';
+import {SuggestionManager} from '../../common/suggestions/suggestion-manager';
 import {
   elementHasQuery,
   SearchBoxSuggestionElement,
   SearchBoxSuggestionsBindings,
   SearchBoxSuggestionsEvent,
-} from '../../common/suggestions/stencil-suggestions-common';
-import {SuggestionManager} from '../../common/suggestions/suggestion-manager';
+} from '../../common/suggestions/suggestions-common';
 import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 import {SelectChildProductEventArgs} from '../product-template-components/atomic-product-children/select-child-product-event';
 import styles from './atomic-commerce-search-box.tw.css';
 
 /**
  * The atomic-commerce-search-box is a component that does something.
  *
- * @event redirect - TODO
+ * @slot default - The default slot where you can add child components to the search box.
+ *
+ * @part wrapper - The search box wrapper.
+ * @part input - The search box input.
+ * @part loading - The search box loading animation.
+ * @part clear-button - The button to clear the search box of input.
+ * @part clear-icon - The clear button's icon.
+ * @part submit-button - The search box submit button.
+ * @part submit-icon - The search box submit button's icon.
+ * @part suggestions - A list of suggested query corrections on each panel.
+ * @part suggestions-left - A list of suggested query corrections on the left panel.
+ * @part suggestions-right - A list of suggested query corrections on the right panel.
+ * @part suggestions-wrapper - The wrapper that contains suggestion panels.
+ * @part suggestions-single-list - The wrapper that contains 1 suggestion list.
+ * @part suggestions-double-list - The wrapper that contains 2 suggestion lists.
+ * @part suggestion - A suggested query correction.
+ * @part active-suggestion - The currently active suggestion.
+ * @part suggestion-divider - An item in the list that separates groups of suggestions.
+ * @part suggestion-with-query - An item in the list that will update the search box query.
+ *
+ * @part query-suggestion-item - A suggestion from the `atomic-commerce-search-box-query-suggestions` component.
+ * @part query-suggestion-content - The contents of a suggestion from the `atomic-commerce-search-box-query-suggestions` component.
+ * @part query-suggestion-icon - The icon of a suggestion from the `atomic-commerce-search-box-query-suggestions` component.
+ * @part query-suggestion-text - The text of a suggestion from the `atomic-commerce-search-box-query-suggestions` component.
+ *
+ * @part recent-query-item - A suggestion from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-content - The contents of a suggestion from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-icon - The icon of a suggestion from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-text - The text of a suggestion from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-text-highlight - The highlighted portion of the text of a suggestion from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-title-item - The clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-title-content - The contents of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-title - The "recent searches" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
+ * @part recent-query-clear - The "clear" text of the clear button above suggestions from the `atomic-commerce-search-box-recent-queries` component.
+ *
+ * @part instant-results-item - An instant result rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-show-all - The clickable suggestion to show all items for the current instant results search rendered by an `atomic-commerce-search-box-instant-products` component.
+ * @part instant-results-show-all-button - The button inside the clickable suggestion from the `atomic-commerce-search-box-instant-products` component.
+ *
+ * @event redirect - Event that is emitted when a standalone search box redirection is triggered. By default, the search box will directly change the URL and redirect accordingly, so if you want to handle the redirection differently, use this event.
+
+ *
+ * @alpha
  */
 @customElement('atomic-commerce-search-box')
 @withTailwindStyles
@@ -223,7 +266,6 @@ export class AtomicCommerceSearchBox
   }
 
   willUpdate() {
-    //added this
     if (!this.searchBoxState || !this.searchBox) {
       return;
     }
@@ -248,7 +290,6 @@ export class AtomicCommerceSearchBox
 
     this.searchBox.afterRedirection();
 
-    //Does this work ?
     const event = new CustomEvent<RedirectionPayload>('redirect');
     this.dispatchEvent(event);
     if (!event.defaultPrevented) {
@@ -513,7 +554,6 @@ export class AtomicCommerceSearchBox
       return null;
     }
 
-    //Does ref work here ?
     return html`<div
       part="suggestions suggestions-${side}"
       ${ref(setRef as RefOrCallback<Element>)}
@@ -609,7 +649,7 @@ export class AtomicCommerceSearchBox
       },
     };
 
-    return html`${textArea({
+    return html`${searchBoxTextArea({
       props: {
         textAreaRef: this.textAreaRef,
         ref: (el) => {
@@ -711,12 +751,6 @@ export class AtomicCommerceSearchBox
       this.registerSearchboxSuggestionEvents();
     }
 
-    //Needs to add more conditions here
-    console.log(
-      this.suggestionManager.suggestions.length === 0,
-      'should render the slots'
-    );
-
     return html`
       ${this.renderAbsolutePositionSpacer()}
       ${wrapper({

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.ts

@@ -15,11 +15,9 @@ import {
   SearchBoxSuggestions,
   SearchBoxSuggestionsBindings,
 } from '@/src/components/common/suggestions/suggestions-common';
-import {bindingGuard} from '@/src/decorators/binding-guard';
 import {errorGuard} from '@/src/decorators/error-guard';
 import {InitializableComponent} from '@/src/decorators/types';
 import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles.js';
-import {InitializeBindingsMixin} from '@/src/mixins/bindings-mixin';
 import {encodeForDomAttribute} from '@/src/utils/string-utils';
 import {
   buildInstantProducts,
@@ -44,7 +42,7 @@ export type AriaLabelGenerator = (
 @customElement('atomic-commerce-search-box-instant-products')
 @withTailwindStyles
 export class AtomicCommerceSearchBoxInstantProducts
-  extends InitializeBindingsMixin(LitElement)
+  extends LitElement
   implements InitializableComponent<CommerceBindings>
 {
   public bindings!: SearchBoxSuggestionsBindings<SearchBox, CommerceBindings>;
@@ -257,10 +255,9 @@ export class AtomicCommerceSearchBoxInstantProducts
     });
   }
 
-  @bindingGuard()
   @errorGuard()
   render() {
-    return html`TODO`;
+    return html``;
   }
 }
 

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-query-suggestions/atomic-commerce-search-box-query-suggestions.ts

@@ -10,7 +10,6 @@ import {
   SearchBoxSuggestions,
   SearchBoxSuggestionsBindings,
 } from '@/src/components/common/suggestions/suggestions-common';
-import {bindingGuard} from '@/src/decorators/binding-guard';
 import {errorGuard} from '@/src/decorators/error-guard';
 import {InitializableComponent} from '@/src/decorators/types';
 import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles.js';
@@ -131,10 +130,9 @@ export class AtomicCommerceSearchBoxQuerySuggestions
     };
   }
 
-  @bindingGuard()
   @errorGuard()
   render() {
-    return html`TODO`;
+    return html``;
   }
 }
 

packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-recent-queries/atomic-commerce-search-box-recent-queries.ts

@@ -12,7 +12,6 @@ import {
   SearchBoxSuggestions,
   SearchBoxSuggestionsBindings,
 } from '@/src/components/common/suggestions/suggestions-common';
-import {bindingGuard} from '@/src/decorators/binding-guard';
 import {errorGuard} from '@/src/decorators/error-guard';
 import {InitializableComponent} from '@/src/decorators/types';
 import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles.js';
@@ -191,10 +190,9 @@ export class AtomicCommerceSearchBoxRecentQueries
     };
   }
 
-  @bindingGuard()
   @errorGuard()
   render() {
-    return html`TODO, make nothing work here`;
+    return html``;
   }
 }