Migrate atomic-breadbox from Stencil to Lit (#6492)

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: jmazzah-coveo <[email protected]>
Co-authored-by: Jad Mazzah <[email protected]>
Co-authored-by: developer-experience-bot[bot] <91079284+developer-experience-bot[bot]@users.noreply.github.com>

Author: 3 people

packages/atomic-react/src/components/search/components.ts

@@ -1,6 +1,7 @@
 import {
   AtomicAriaLive as LitAtomicAriaLive,
   AtomicAutomaticFacet as LitAtomicAutomaticFacet,
+  AtomicBreadbox as LitAtomicBreadbox,
   AtomicComponentError as LitAtomicComponentError,
   AtomicExternal as LitAtomicExternal,
   AtomicFacet as LitAtomicFacet,
@@ -57,6 +58,12 @@ export const AtomicAutomaticFacet = createComponent({
   elementClass: LitAtomicAutomaticFacet,
 });
 
+export const AtomicBreadbox = createComponent({
+  tagName: 'atomic-breadbox',
+  react: React,
+  elementClass: LitAtomicBreadbox,
+});
+
 export const AtomicComponentError = createComponent({
   tagName: 'atomic-component-error',
   react: React,

packages/atomic/cypress/e2e/breadbox.cypress.ts

@@ -55,19 +55,6 @@ export namespace Components {
         "numberOfValues": number;
         "updateCollapseFacetsDependingOnFacetsVisibility": (collapseAfter: number, numberOfVisibleFacets: number) => Promise<void>;
     }
-    /**
-     * The `atomic-breadbox` component helps the user keep track of the navigational state of the currently active facet values, located in a single place on the search page.
-     * In most cases, these are on the top of a page between the search bar and the results.
-     * By default, the field name is displayed before the field value to clarify which facet the value is from.
-     * You can clear a single selection by clicking the `x` inside of each pill, or clear all selections by using the `Clear` button.
-     */
-    interface AtomicBreadbox {
-        /**
-          * This prop allows you to control the display depth of the path by specifying the number of parent or ancestor breadcrumbs links relative to the currently selected value.  If the path size is equal to or less than the pathLimit, all values in the path will be displayed without truncation.  If the path size exceeds the pathLimit, it will truncate the path by replacing the middle values with ellipses ('...').  Minimum: `1`
-          * @defaultValue `3`
-         */
-        "pathLimit": number;
-    }
     /**
      * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
      * An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
@@ -2123,18 +2110,6 @@ declare global {
         prototype: HTMLAtomicAutomaticFacetGeneratorElement;
         new (): HTMLAtomicAutomaticFacetGeneratorElement;
     };
-    /**
-     * The `atomic-breadbox` component helps the user keep track of the navigational state of the currently active facet values, located in a single place on the search page.
-     * In most cases, these are on the top of a page between the search bar and the results.
-     * By default, the field name is displayed before the field value to clarify which facet the value is from.
-     * You can clear a single selection by clicking the `x` inside of each pill, or clear all selections by using the `Clear` button.
-     */
-    interface HTMLAtomicBreadboxElement extends Components.AtomicBreadbox, HTMLStencilElement {
-    }
-    var HTMLAtomicBreadboxElement: {
-        prototype: HTMLAtomicBreadboxElement;
-        new (): HTMLAtomicBreadboxElement;
-    };
     /**
      * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
      * An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
@@ -3194,7 +3169,6 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "atomic-automatic-facet-generator": HTMLAtomicAutomaticFacetGeneratorElement;
-        "atomic-breadbox": HTMLAtomicBreadboxElement;
         "atomic-category-facet": HTMLAtomicCategoryFacetElement;
         "atomic-citation": HTMLAtomicCitationElement;
         "atomic-color-facet": HTMLAtomicColorFacetElement;
@@ -3322,19 +3296,6 @@ declare namespace LocalJSX {
          */
         "numberOfValues"?: number;
     }
-    /**
-     * The `atomic-breadbox` component helps the user keep track of the navigational state of the currently active facet values, located in a single place on the search page.
-     * In most cases, these are on the top of a page between the search bar and the results.
-     * By default, the field name is displayed before the field value to clarify which facet the value is from.
-     * You can clear a single selection by clicking the `x` inside of each pill, or clear all selections by using the `Clear` button.
-     */
-    interface AtomicBreadbox {
-        /**
-          * This prop allows you to control the display depth of the path by specifying the number of parent or ancestor breadcrumbs links relative to the currently selected value.  If the path size is equal to or less than the pathLimit, all values in the path will be displayed without truncation.  If the path size exceeds the pathLimit, it will truncate the path by replacing the middle values with ellipses ('...').  Minimum: `1`
-          * @defaultValue `3`
-         */
-        "pathLimit"?: number;
-    }
     /**
      * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
      * An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.
@@ -5279,7 +5240,6 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "atomic-automatic-facet-generator": AtomicAutomaticFacetGenerator;
-        "atomic-breadbox": AtomicBreadbox;
         "atomic-category-facet": AtomicCategoryFacet;
         "atomic-citation": AtomicCitation;
         "atomic-color-facet": AtomicColorFacet;
@@ -5399,13 +5359,6 @@ declare module "@stencil/core" {
              * To learn more about the automatic facet generator feature, see: [About the Facet Generator](https://docs.coveo.com/en/n9sd0159/).
              */
             "atomic-automatic-facet-generator": LocalJSX.AtomicAutomaticFacetGenerator & JSXBase.HTMLAttributes<HTMLAtomicAutomaticFacetGeneratorElement>;
-            /**
-             * The `atomic-breadbox` component helps the user keep track of the navigational state of the currently active facet values, located in a single place on the search page.
-             * In most cases, these are on the top of a page between the search bar and the results.
-             * By default, the field name is displayed before the field value to clarify which facet the value is from.
-             * You can clear a single selection by clicking the `x` inside of each pill, or clear all selections by using the `Clear` button.
-             */
-            "atomic-breadbox": LocalJSX.AtomicBreadbox & JSXBase.HTMLAttributes<HTMLAtomicBreadboxElement>;
             /**
              * A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
              * An `atomic-category-facet` displays a facet of values in a browsable, hierarchical fashion.