feat(atomic): migrate atomic-smart-snippet to Lit with Tailwind styles

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

@@ -81,6 +81,7 @@ import {
   AtomicSearchLayout as LitAtomicSearchLayout,
   AtomicSegmentedFacet as LitAtomicSegmentedFacet,
   AtomicSegmentedFacetScrollable as LitAtomicSegmentedFacetScrollable,
+  AtomicSmartSnippet as LitAtomicSmartSnippet,
   AtomicSmartSnippetFeedbackModal as LitAtomicSmartSnippetFeedbackModal,
   AtomicSmartSnippetSuggestions as LitAtomicSmartSnippetSuggestions,
   AtomicSortDropdown as LitAtomicSortDropdown,
@@ -586,6 +587,12 @@ export const AtomicSegmentedFacetScrollable = createComponent({
   elementClass: LitAtomicSegmentedFacetScrollable,
 });
 
+export const AtomicSmartSnippet = createComponent({
+  tagName: 'atomic-smart-snippet',
+  react: React,
+  elementClass: LitAtomicSmartSnippet,
+});
+
 export const AtomicSmartSnippetFeedbackModal = createComponent({
   tagName: 'atomic-smart-snippet-feedback-modal',
   react: React,

packages/atomic/src/components.d.ts

@@ -747,49 +747,6 @@ export namespace Components {
          */
         "store"?: RecsStore;
     }
-    /**
-     * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.
-     * You can style the snippet by inserting a template element as follows:
-     * ```html
-     * <atomic-smart-snippet>
-     *   <template>
-     *     <style>
-     *       b {
-     *         color: blue;
-     *       }
-     *     </style>
-     *   </template>
-     * </atomic-smart-snippet>
-     * ```
-     */
-    interface AtomicSmartSnippet {
-        /**
-          * When the answer is partly hidden, how much of its height (in pixels) should be visible.
-         */
-        "collapsedHeight": number;
-        /**
-          * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the question at the top of the snippet, from 1 to 5.
-         */
-        "headingLevel": number;
-        /**
-          * The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.
-         */
-        "maximumHeight": number;
-        "snippetCollapsedHeight"?: number;
-        "snippetMaximumHeight"?: number;
-        /**
-          * Sets the style of the snippet.  Example: ```ts smartSnippet.snippetStyle = `   b {     color: blue;   } `; ```
-         */
-        "snippetStyle"?: string;
-        /**
-          * The tabs on which this smart snippet must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, for example: ```html  <atomic-smart-snippet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-smart-snippet> ``` If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet won't be displayed on any of the specified tabs.
-         */
-        "tabsExcluded": string[] | string;
-        /**
-          * The tabs on which the smart snippet can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, for example: ```html  <atomic-smart-snippet tabs-included='["tabIDA", "tabIDB"]'></atomic-smart-snippet snippet> ``` If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet can only be displayed on the specified tabs.
-         */
-        "tabsIncluded": string[] | string;
-    }
     /**
      * @deprecated Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.
      * Internal component made to be integrated in a TimeframeFacet.
@@ -1277,27 +1234,6 @@ declare global {
         prototype: HTMLAtomicRecsResultElement;
         new (): HTMLAtomicRecsResultElement;
     };
-    /**
-     * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.
-     * You can style the snippet by inserting a template element as follows:
-     * ```html
-     * <atomic-smart-snippet>
-     *   <template>
-     *     <style>
-     *       b {
-     *         color: blue;
-     *       }
-     *     </style>
-     *   </template>
-     * </atomic-smart-snippet>
-     * ```
-     */
-    interface HTMLAtomicSmartSnippetElement extends Components.AtomicSmartSnippet, HTMLStencilElement {
-    }
-    var HTMLAtomicSmartSnippetElement: {
-        prototype: HTMLAtomicSmartSnippetElement;
-        new (): HTMLAtomicSmartSnippetElement;
-    };
     interface HTMLAtomicStencilFacetDateInputElementEventMap {
         "atomic/dateInputApply": any;
     }
@@ -1380,7 +1316,6 @@ declare global {
         "atomic-quickview-modal": HTMLAtomicQuickviewModalElement;
         "atomic-recs-list": HTMLAtomicRecsListElement;
         "atomic-recs-result": HTMLAtomicRecsResultElement;
-        "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
         "atomic-stencil-facet-date-input": HTMLAtomicStencilFacetDateInputElement;
         "atomic-suggestion-renderer": HTMLAtomicSuggestionRendererElement;
         "atomic-timeframe-facet": HTMLAtomicTimeframeFacetElement;
@@ -2072,49 +2007,6 @@ declare namespace LocalJSX {
          */
         "store"?: RecsStore;
     }
-    /**
-     * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.
-     * You can style the snippet by inserting a template element as follows:
-     * ```html
-     * <atomic-smart-snippet>
-     *   <template>
-     *     <style>
-     *       b {
-     *         color: blue;
-     *       }
-     *     </style>
-     *   </template>
-     * </atomic-smart-snippet>
-     * ```
-     */
-    interface AtomicSmartSnippet {
-        /**
-          * When the answer is partly hidden, how much of its height (in pixels) should be visible.
-         */
-        "collapsedHeight"?: number;
-        /**
-          * The [heading level](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) to use for the question at the top of the snippet, from 1 to 5.
-         */
-        "headingLevel"?: number;
-        /**
-          * The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.
-         */
-        "maximumHeight"?: number;
-        "snippetCollapsedHeight"?: number;
-        "snippetMaximumHeight"?: number;
-        /**
-          * Sets the style of the snippet.  Example: ```ts smartSnippet.snippetStyle = `   b {     color: blue;   } `; ```
-         */
-        "snippetStyle"?: string;
-        /**
-          * The tabs on which this smart snippet must not be displayed. This property should not be used at the same time as `tabs-included`.  Set this property as a stringified JSON array, for example: ```html  <atomic-smart-snippet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-smart-snippet> ``` If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet won't be displayed on any of the specified tabs.
-         */
-        "tabsExcluded"?: string[] | string;
-        /**
-          * The tabs on which the smart snippet can be displayed. This property should not be used at the same time as `tabs-excluded`.  Set this property as a stringified JSON array, for example: ```html  <atomic-smart-snippet tabs-included='["tabIDA", "tabIDB"]'></atomic-smart-snippet snippet> ``` If you don't set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet can only be displayed on the specified tabs.
-         */
-        "tabsIncluded"?: string[] | string;
-    }
     /**
      * @deprecated Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.
      * Internal component made to be integrated in a TimeframeFacet.
@@ -2248,7 +2140,6 @@ declare namespace LocalJSX {
         "atomic-quickview-modal": AtomicQuickviewModal;
         "atomic-recs-list": AtomicRecsList;
         "atomic-recs-result": AtomicRecsResult;
-        "atomic-smart-snippet": AtomicSmartSnippet;
         "atomic-stencil-facet-date-input": AtomicStencilFacetDateInput;
         "atomic-suggestion-renderer": AtomicSuggestionRenderer;
         "atomic-timeframe-facet": AtomicTimeframeFacet;
@@ -2334,22 +2225,6 @@ declare module "@stencil/core" {
              * The `atomic-recs-result` component is used internally by the `atomic-recs-list` component.
              */
             "atomic-recs-result": LocalJSX.AtomicRecsResult & JSXBase.HTMLAttributes<HTMLAtomicRecsResultElement>;
-            /**
-             * The `atomic-smart-snippet` component displays the excerpt of a document that would be most likely to answer a particular query.
-             * You can style the snippet by inserting a template element as follows:
-             * ```html
-             * <atomic-smart-snippet>
-             *   <template>
-             *     <style>
-             *       b {
-             *         color: blue;
-             *       }
-             *     </style>
-             *   </template>
-             * </atomic-smart-snippet>
-             * ```
-             */
-            "atomic-smart-snippet": LocalJSX.AtomicSmartSnippet & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetElement>;
             /**
              * @deprecated Use `atomic-facet-date-input` instead. This component is meant to be used with Stencil components only.
              * Internal component made to be integrated in a TimeframeFacet.

packages/atomic/src/components/common/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.spec.ts

@@ -1,7 +1,6 @@
 import type {i18n} from 'i18next';
 import {html} from 'lit';
 import {beforeEach, describe, expect, it} from 'vitest';
-import {page} from 'vitest/browser';
 import {fixture} from '@/vitest-utils/testing-helpers/fixture';
 import {createTestI18n} from '@/vitest-utils/testing-helpers/i18n-utils';
 import {AtomicSmartSnippetExpandableAnswer} from './atomic-smart-snippet-expandable-answer';
@@ -202,7 +201,7 @@ describe('atomic-smart-snippet-expandable-answer', () => {
 
   describe('events', () => {
     it('should emit expand event when show-more button is clicked', async () => {
-      const {element} = await renderComponent({expanded: false});
+      const {element, parts} = await renderComponent({expanded: false});
 
       await setElementHeight(element, 300);
       await element.requestUpdate();
@@ -213,14 +212,14 @@ describe('atomic-smart-snippet-expandable-answer', () => {
         expandEventFired = true;
       });
 
-      const button = page.getByRole('button');
-      await button.click();
+      const showMoreButton = parts(element).showMoreButton as HTMLElement;
+      showMoreButton.click();
 
       expect(expandEventFired).toBe(true);
     });
 
     it('should emit collapse event when show-less button is clicked', async () => {
-      const {element} = await renderComponent({expanded: true});
+      const {element, parts} = await renderComponent({expanded: true});
 
       await setElementHeight(element, 300);
       await element.requestUpdate();
@@ -231,8 +230,8 @@ describe('atomic-smart-snippet-expandable-answer', () => {
         collapseEventFired = true;
       });
 
-      const button = page.getByRole('button');
-      await button.click();
+      const showLessButton = parts(element).showLessButton as HTMLElement;
+      showLessButton.click();
 
       expect(collapseEventFired).toBe(true);
     });

packages/atomic/src/components/common/atomic-smart-snippet-expandable-answer/atomic-smart-snippet-expandable-answer.ts

@@ -13,6 +13,7 @@ import ArrowDown from '@/src/images/arrow-down.svg';
 import {listenOnce} from '@/src/utils/event-utils.js';
 import styles from './atomic-smart-snippet-expandable-answer.tw.css.js';
 import '@/src/components/common/atomic-icon/atomic-icon.js';
+import '@/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.js';
 // TODO: uncomment when PR #6781 is merged
 // import '@/src/components/common/smart-snippets/atomic-smart-snippet-answer/atomic-smart-snippet-answer.js';
 

packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet/snippet-truncated-answer.ts

@@ -1,6 +1,7 @@
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import type {FunctionalComponent} from '@/src/utils/functional-component-utils';
+import '@/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.js';
 
 export interface SnippetTruncatedAnswerProps {
   answer: string;

packages/atomic/src/components/search/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.new.stories.tsx

@@ -162,7 +162,7 @@ const {decorator, play} = wrapInSearchInterface({
 
 const meta: Meta = {
   component: 'atomic-smart-snippet-suggestions',
-  title: 'Search/SmartSnippet/SmartSnippetSuggestions',
+  title: 'Search/Smart Snippet Suggestions',
   id: 'atomic-smart-snippet-suggestions',
   render: (args) => template(args),
   decorators: [decorator],

packages/atomic/src/components/search/atomic-smart-snippet-suggestions/atomic-smart-snippet-suggestions.ts

@@ -28,6 +28,7 @@ import ArrowDown from '@/src/images/arrow-down.svg';
 import ArrowRight from '@/src/images/arrow-right.svg';
 import {randomID} from '@/src/utils/utils';
 import '@/src/components/common/atomic-icon/atomic-icon';
+import '@/src/components/common/atomic-smart-snippet-answer/atomic-smart-snippet-answer.js';
 import styles from './atomic-smart-snippet-suggestions.tw.css';
 
 /**