refactor(atomic): migrate atomic-insight-search-box to Lit

packages/atomic/cypress/integration-insight-panel/insight-panel.cypress.ts

@@ -74,20 +74,6 @@ describe('Insight Panel test suites', () => {
         .should('have.attr', 'value', '2');
     });
 
-    it('should display a search box', () => {
-      InsightPanelsSelectors.searchbox()
-        .should('exist')
-        .shadow()
-        .find('textarea[part="textarea"]')
-        .should('exist')
-        .should('have.attr', 'placeholder', 'Search...');
-
-      InsightPanelsSelectors.searchbox()
-        .shadow()
-        .find('atomic-icon')
-        .should('have.attr', 'icon');
-    });
-
     it('should display edit toggle', () => {
       InsightPanelsSelectors.editToggle()
         .should('exist')

packages/atomic/src/components.d.ts

@@ -364,16 +364,6 @@ export namespace Components {
          */
         "sandbox": string;
     }
-    interface AtomicInsightSearchBox {
-        /**
-          * Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.
-         */
-        "disableSearch": boolean;
-        /**
-          * The number of query suggestions to display when interacting with the search box.
-         */
-        "numberOfSuggestions": number;
-    }
     interface AtomicInsightSmartSnippet {
         /**
           * When the answer is partly hidden, how much of its height (in pixels) should be visible.
@@ -990,12 +980,6 @@ declare global {
         prototype: HTMLAtomicInsightResultQuickviewActionElement;
         new (): HTMLAtomicInsightResultQuickviewActionElement;
     };
-    interface HTMLAtomicInsightSearchBoxElement extends Components.AtomicInsightSearchBox, HTMLStencilElement {
-    }
-    var HTMLAtomicInsightSearchBoxElement: {
-        prototype: HTMLAtomicInsightSearchBoxElement;
-        new (): HTMLAtomicInsightSearchBoxElement;
-    };
     interface HTMLAtomicInsightSmartSnippetElement extends Components.AtomicInsightSmartSnippet, HTMLStencilElement {
     }
     var HTMLAtomicInsightSmartSnippetElement: {
@@ -1248,7 +1232,6 @@ declare global {
         "atomic-insight-result-children-template": HTMLAtomicInsightResultChildrenTemplateElement;
         "atomic-insight-result-list": HTMLAtomicInsightResultListElement;
         "atomic-insight-result-quickview-action": HTMLAtomicInsightResultQuickviewActionElement;
-        "atomic-insight-search-box": HTMLAtomicInsightSearchBoxElement;
         "atomic-insight-smart-snippet": HTMLAtomicInsightSmartSnippetElement;
         "atomic-insight-smart-snippet-feedback-modal": HTMLAtomicInsightSmartSnippetFeedbackModalElement;
         "atomic-insight-smart-snippet-suggestions": HTMLAtomicInsightSmartSnippetSuggestionsElement;
@@ -1596,16 +1579,6 @@ declare namespace LocalJSX {
          */
         "sandbox"?: string;
     }
-    interface AtomicInsightSearchBox {
-        /**
-          * Whether to prevent the user from triggering a search from the component. Perfect for use cases where you need to disable the search conditionally, like when the input is empty.
-         */
-        "disableSearch"?: boolean;
-        /**
-          * The number of query suggestions to display when interacting with the search box.
-         */
-        "numberOfSuggestions"?: number;
-    }
     interface AtomicInsightSmartSnippet {
         /**
           * When the answer is partly hidden, how much of its height (in pixels) should be visible.
@@ -2045,7 +2018,6 @@ declare namespace LocalJSX {
         "atomic-insight-result-children-template": AtomicInsightResultChildrenTemplate;
         "atomic-insight-result-list": AtomicInsightResultList;
         "atomic-insight-result-quickview-action": AtomicInsightResultQuickviewAction;
-        "atomic-insight-search-box": AtomicInsightSearchBox;
         "atomic-insight-smart-snippet": AtomicInsightSmartSnippet;
         "atomic-insight-smart-snippet-feedback-modal": AtomicInsightSmartSnippetFeedbackModal;
         "atomic-insight-smart-snippet-suggestions": AtomicInsightSmartSnippetSuggestions;
@@ -2095,7 +2067,6 @@ declare module "@stencil/core" {
             "atomic-insight-result-children-template": LocalJSX.AtomicInsightResultChildrenTemplate & JSXBase.HTMLAttributes<HTMLAtomicInsightResultChildrenTemplateElement>;
             "atomic-insight-result-list": LocalJSX.AtomicInsightResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightResultListElement>;
             "atomic-insight-result-quickview-action": LocalJSX.AtomicInsightResultQuickviewAction & JSXBase.HTMLAttributes<HTMLAtomicInsightResultQuickviewActionElement>;
-            "atomic-insight-search-box": LocalJSX.AtomicInsightSearchBox & JSXBase.HTMLAttributes<HTMLAtomicInsightSearchBoxElement>;
             "atomic-insight-smart-snippet": LocalJSX.AtomicInsightSmartSnippet & JSXBase.HTMLAttributes<HTMLAtomicInsightSmartSnippetElement>;
             "atomic-insight-smart-snippet-feedback-modal": LocalJSX.AtomicInsightSmartSnippetFeedbackModal & JSXBase.HTMLAttributes<HTMLAtomicInsightSmartSnippetFeedbackModalElement>;
             "atomic-insight-smart-snippet-suggestions": LocalJSX.AtomicInsightSmartSnippetSuggestions & JSXBase.HTMLAttributes<HTMLAtomicInsightSmartSnippetSuggestionsElement>;

packages/atomic/src/components/common/suggestions/query-suggestions.spec.ts

@@ -94,6 +94,29 @@ describe('#renderQuerySuggestion', () => {
     expect(icon).not.toBeInTheDocument();
   });
 
+  it('should render the icon when alwaysShowIcon is true even if hasMultipleKindOfSuggestions is false', async () => {
+    const suggestion = await renderSuggestion({
+      hasMultipleKindOfSuggestions: false,
+      alwaysShowIcon: true,
+    });
+
+    const icon = suggestion.querySelector('atomic-icon');
+
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute('part', 'query-suggestion-icon');
+  });
+
+  it('should not render the icon when alwaysShowIcon is false and hasMultipleKindOfSuggestions is false', async () => {
+    const suggestion = await renderSuggestion({
+      hasMultipleKindOfSuggestions: false,
+      alwaysShowIcon: false,
+    });
+
+    const icon = suggestion.querySelector('atomic-icon');
+
+    expect(icon).not.toBeInTheDocument();
+  });
+
   it('should render the highlighted value if hasQuery is true', async () => {
     const suggestion = await renderSuggestion({hasQuery: true});
 

packages/atomic/src/components/common/suggestions/query-suggestions.ts

@@ -28,17 +28,24 @@ export interface RenderQuerySuggestionOptions {
   hasQuery: boolean;
   suggestion: Suggestion;
   hasMultipleKindOfSuggestions: boolean;
+  /**
+   * When true, the icon will always be displayed regardless of hasMultipleKindOfSuggestions.
+   * Used by the insight search box where icons should always be visible.
+   */
+  alwaysShowIcon?: boolean;
 }
 
 export const renderQuerySuggestion = ({
   icon,
   hasQuery,
   suggestion,
   hasMultipleKindOfSuggestions,
+  alwaysShowIcon = false,
 }: RenderQuerySuggestionOptions): HTMLElement => {
+  const shouldShowIcon = alwaysShowIcon || hasMultipleKindOfSuggestions;
   const template = html`
     <div part="query-suggestion-content" class="pointer-events-none flex items-center">${
-      hasMultipleKindOfSuggestions
+      shouldShowIcon
         ? html`<atomic-icon
           part="query-suggestion-icon"
           icon=${icon}

packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicInsightSearchBoxStories from './atomic-insight-search-box.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+<Meta of={AtomicInsightSearchBoxStories} />
+
+<AtomicDocTemplate
+  stories={AtomicInsightSearchBoxStories}
+  githubPath="insight/atomic-insight-search-box/atomic-insight-search-box.ts"
+  tagName="atomic-insight-search-box"
+  className="AtomicInsightSearchBox"
+>
+This component is used within the Insight interface to allow users to enter and submit search queries.
+It provides query suggestions as the user types.
+
+```html
+<atomic-insight-interface>
+  <atomic-insight-layout>
+    <atomic-layout-section section="search">
+      <atomic-insight-search-box></atomic-insight-search-box>
+    </atomic-layout-section>
+  </atomic-insight-layout>
+</atomic-insight-interface>
+```
+</AtomicDocTemplate>

packages/atomic/src/components/insight/atomic-insight-search-box/atomic-insight-search-box.new.stories.tsx

@@ -0,0 +1,53 @@
+import type {
+  Decorator,
+  Meta,
+  StoryObj as Story,
+} from '@storybook/web-components-vite';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import {html} from 'lit';
+import {MockInsightApi} from '@/storybook-utils/api/insight/mock';
+import {parameters} from '@/storybook-utils/common/common-meta-parameters';
+import {wrapInInsightInterface} from '@/storybook-utils/insight/insight-interface-wrapper';
+
+const {events, args, argTypes, template} = getStorybookHelpers(
+  'atomic-insight-search-box',
+  {excludeCategories: ['methods']}
+);
+const {decorator, play} = wrapInInsightInterface({}, true);
+
+const mockInsightApi = new MockInsightApi();
+
+const normalWidthDecorator: Decorator = (story) =>
+  html`<div style="min-width: 400px;" id="code-root">${story()}</div>`;
+
+const meta: Meta = {
+  component: 'atomic-insight-search-box',
+  title: 'Insight/Search Box',
+  id: 'atomic-insight-search-box',
+  render: (args) => template(args),
+  decorators: [normalWidthDecorator, decorator],
+  parameters: {
+    ...parameters,
+    actions: {
+      handles: events,
+    },
+    msw: {
+      handlers: [...mockInsightApi.handlers],
+    },
+  },
+  args,
+  argTypes,
+
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {};
+
+export const WithDisabledSearch: Story = {
+  name: 'With disabled search',
+  args: {
+    'disable-search': true,
+  },
+};