feat(atomic): migrate atomic-smart-snippet-expandable-answer to Lit

packages/atomic/cypress/e2e/smart-snippet.cypress.ts

@@ -83,25 +83,6 @@ describe('Smart Snippet Test Suites', () => {
     );
   });
 
-  it('when maximumHeight is smaller than collapsedHeight, it should display errors', () => {
-    const value = 50;
-    new TestFixture()
-      .with(
-        addSmartSnippet({
-          props: {
-            'maximum-height': value - 1,
-            'collapsed-height': value,
-          },
-        })
-      )
-      .init();
-    CommonAssertions.assertConsoleErrorWithoutIt(true);
-    CommonAssertions.assertContainsComponentErrorWithoutIt(
-      SmartSnippetSelectors,
-      true
-    );
-  });
-
   it('when snippetMaximumHeight is smaller than snippetCollapsedHeight, it should display errors', () => {
     const value = 50;
     new TestFixture()
@@ -164,46 +145,6 @@ describe('Smart Snippet Test Suites', () => {
     SmartSnippetAssertions.assertShowLess(false);
   });
 
-  it('when the snippet height is greater than maximumHeight', () => {
-    const height = 300;
-    const heightWhenCollapsed = 150;
-
-    new TestFixture()
-      .with(
-        addSmartSnippet({
-          snippet: {
-            ...defaultSnippet,
-            answer: buildAnswerWithHeight(height),
-          },
-          props: {
-            'maximum-height': height - 1,
-            'collapsed-height': heightWhenCollapsed,
-          },
-        })
-      )
-      .init();
-
-    // before expand
-    SmartSnippetAssertions.assertShowMore(true);
-    SmartSnippetAssertions.assertShowLess(false);
-    SmartSnippetAssertions.assertAnswerHeight(heightWhenCollapsed);
-    CommonAssertions.assertAccessibility(smartSnippetComponent);
-    SmartSnippetSelectors.showMoreButton().click();
-
-    // after expand
-    SmartSnippetSelectors.body().should('have.attr', 'expanded');
-    SmartSnippetAssertions.assertShowMore(false);
-    SmartSnippetAssertions.assertShowLess(true);
-    SmartSnippetAssertions.assertAnswerHeight(height);
-    SmartSnippetSelectors.showLessButton().click();
-
-    // after collapse
-    SmartSnippetSelectors.body().should('not.have.attr', 'expanded');
-    SmartSnippetAssertions.assertShowMore(true);
-    SmartSnippetAssertions.assertShowLess(false);
-    SmartSnippetAssertions.assertAnswerHeight(heightWhenCollapsed);
-  });
-
   it('when the snippet height is greater than snippetMaximumHeight', () => {
     const height = 300;
     const heightWhenCollapsed = 150;

packages/atomic/src/components.d.ts

@@ -1161,22 +1161,6 @@ export namespace Components {
         "collapsedHeight"?: number;
         "maximumHeight"?: number;
     }
-    interface AtomicSmartSnippetExpandableAnswer {
-        /**
-          * When the answer is partly hidden, how much of its height (in pixels) should be visible.
-         */
-        "collapsedHeight": number;
-        "expanded": boolean;
-        "htmlContent": string;
-        /**
-          * The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.
-         */
-        "maximumHeight": number;
-        /**
-          * Sets the style of the snippet.  Example: ```ts expandableAnswer.snippetStyle = `   b {     color: blue;   } `; ```
-         */
-        "snippetStyle"?: string;
-    }
     /**
      * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized.
      * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization.
@@ -1397,10 +1381,6 @@ export interface AtomicSmartSnippetAnswerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicSmartSnippetAnswerElement;
 }
-export interface AtomicSmartSnippetExpandableAnswerCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLAtomicSmartSnippetExpandableAnswerElement;
-}
 export interface AtomicSmartSnippetFeedbackModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomicSmartSnippetFeedbackModalElement;
@@ -2012,27 +1992,6 @@ declare global {
         prototype: HTMLAtomicSmartSnippetCollapseWrapperElement;
         new (): HTMLAtomicSmartSnippetCollapseWrapperElement;
     };
-    interface HTMLAtomicSmartSnippetExpandableAnswerElementEventMap {
-        "expand": any;
-        "collapse": any;
-        "selectInlineLink": InlineLink;
-        "beginDelayedSelectInlineLink": InlineLink;
-        "cancelPendingSelectInlineLink": InlineLink;
-    }
-    interface HTMLAtomicSmartSnippetExpandableAnswerElement extends Components.AtomicSmartSnippetExpandableAnswer, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLAtomicSmartSnippetExpandableAnswerElementEventMap>(type: K, listener: (this: HTMLAtomicSmartSnippetExpandableAnswerElement, ev: AtomicSmartSnippetExpandableAnswerCustomEvent<HTMLAtomicSmartSnippetExpandableAnswerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLAtomicSmartSnippetExpandableAnswerElementEventMap>(type: K, listener: (this: HTMLAtomicSmartSnippetExpandableAnswerElement, ev: AtomicSmartSnippetExpandableAnswerCustomEvent<HTMLAtomicSmartSnippetExpandableAnswerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLAtomicSmartSnippetExpandableAnswerElement: {
-        prototype: HTMLAtomicSmartSnippetExpandableAnswerElement;
-        new (): HTMLAtomicSmartSnippetExpandableAnswerElement;
-    };
     interface HTMLAtomicSmartSnippetFeedbackModalElementEventMap {
         "feedbackSent": any;
     }
@@ -2220,7 +2179,6 @@ declare global {
         "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
         "atomic-smart-snippet-answer": HTMLAtomicSmartSnippetAnswerElement;
         "atomic-smart-snippet-collapse-wrapper": HTMLAtomicSmartSnippetCollapseWrapperElement;
-        "atomic-smart-snippet-expandable-answer": HTMLAtomicSmartSnippetExpandableAnswerElement;
         "atomic-smart-snippet-feedback-modal": HTMLAtomicSmartSnippetFeedbackModalElement;
         "atomic-smart-snippet-source": HTMLAtomicSmartSnippetSourceElement;
         "atomic-smart-snippet-suggestions": HTMLAtomicSmartSnippetSuggestionsElement;
@@ -3331,27 +3289,6 @@ declare namespace LocalJSX {
         "collapsedHeight"?: number;
         "maximumHeight"?: number;
     }
-    interface AtomicSmartSnippetExpandableAnswer {
-        /**
-          * When the answer is partly hidden, how much of its height (in pixels) should be visible.
-         */
-        "collapsedHeight"?: number;
-        "expanded": boolean;
-        "htmlContent": string;
-        /**
-          * The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.
-         */
-        "maximumHeight"?: number;
-        "onBeginDelayedSelectInlineLink"?: (event: AtomicSmartSnippetExpandableAnswerCustomEvent<InlineLink>) => void;
-        "onCancelPendingSelectInlineLink"?: (event: AtomicSmartSnippetExpandableAnswerCustomEvent<InlineLink>) => void;
-        "onCollapse"?: (event: AtomicSmartSnippetExpandableAnswerCustomEvent<any>) => void;
-        "onExpand"?: (event: AtomicSmartSnippetExpandableAnswerCustomEvent<any>) => void;
-        "onSelectInlineLink"?: (event: AtomicSmartSnippetExpandableAnswerCustomEvent<InlineLink>) => void;
-        /**
-          * Sets the style of the snippet.  Example: ```ts expandableAnswer.snippetStyle = `   b {     color: blue;   } `; ```
-         */
-        "snippetStyle"?: string;
-    }
     /**
      * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized.
      * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization.
@@ -3586,7 +3523,6 @@ declare namespace LocalJSX {
         "atomic-smart-snippet": AtomicSmartSnippet;
         "atomic-smart-snippet-answer": AtomicSmartSnippetAnswer;
         "atomic-smart-snippet-collapse-wrapper": AtomicSmartSnippetCollapseWrapper;
-        "atomic-smart-snippet-expandable-answer": AtomicSmartSnippetExpandableAnswer;
         "atomic-smart-snippet-feedback-modal": AtomicSmartSnippetFeedbackModal;
         "atomic-smart-snippet-source": AtomicSmartSnippetSource;
         "atomic-smart-snippet-suggestions": AtomicSmartSnippetSuggestions;
@@ -3763,7 +3699,6 @@ declare module "@stencil/core" {
             "atomic-smart-snippet": LocalJSX.AtomicSmartSnippet & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetElement>;
             "atomic-smart-snippet-answer": LocalJSX.AtomicSmartSnippetAnswer & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetAnswerElement>;
             "atomic-smart-snippet-collapse-wrapper": LocalJSX.AtomicSmartSnippetCollapseWrapper & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetCollapseWrapperElement>;
-            "atomic-smart-snippet-expandable-answer": LocalJSX.AtomicSmartSnippetExpandableAnswer & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetExpandableAnswerElement>;
             /**
              * The `atomic-smart-snippet-feedback-modal` is automatically created as a child of the `atomic-search-interface` when the `atomic-smart-snippet` is initialized.
              * When the modal is opened, the class `atomic-modal-opened` is added to the body, allowing further customization.