feat(atomic): migrate atomic-popover from Stencil to Lit

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

@@ -14,6 +14,7 @@ import {
   AtomicNoResults as LitAtomicNoResults,
   AtomicNumericRange as LitAtomicNumericRange,
   AtomicPager as LitAtomicPager,
+  AtomicPopover as LitAtomicPopover,
   AtomicQueryError as LitAtomicQueryError,
   AtomicQuerySummary as LitAtomicQuerySummary,
   AtomicRecsInterface as LitAtomicRecsInterface,
@@ -135,6 +136,12 @@ export const AtomicPager = createComponent({
   elementClass: LitAtomicPager,
 });
 
+export const AtomicPopover = createComponent({
+  tagName: 'atomic-popover',
+  react: React,
+  elementClass: LitAtomicPopover,
+});
+
 export const AtomicQueryError = createComponent({
   tagName: 'atomic-query-error',
   react: React,

packages/atomic/src/components.d.ts

@@ -1158,11 +1158,6 @@ export namespace Components {
          */
         "withInput"?: NumberInputType;
     }
-    /**
-     * The `atomic-popover` component displays any facet as a popover menu.
-     */
-    interface AtomicPopover {
-    }
     /**
      * The `atomic-quickview` component renders a button which the end user can click to open a modal box containing a preview
      * about a result.
@@ -2660,15 +2655,6 @@ declare global {
         prototype: HTMLAtomicNumericFacetElement;
         new (): HTMLAtomicNumericFacetElement;
     };
-    /**
-     * The `atomic-popover` component displays any facet as a popover menu.
-     */
-    interface HTMLAtomicPopoverElement extends Components.AtomicPopover, HTMLStencilElement {
-    }
-    var HTMLAtomicPopoverElement: {
-        prototype: HTMLAtomicPopoverElement;
-        new (): HTMLAtomicPopoverElement;
-    };
     /**
      * The `atomic-quickview` component renders a button which the end user can click to open a modal box containing a preview
      * about a result.
@@ -3254,7 +3240,6 @@ declare global {
         "atomic-ipx-tabs": HTMLAtomicIpxTabsElement;
         "atomic-notifications": HTMLAtomicNotificationsElement;
         "atomic-numeric-facet": HTMLAtomicNumericFacetElement;
-        "atomic-popover": HTMLAtomicPopoverElement;
         "atomic-quickview": HTMLAtomicQuickviewElement;
         "atomic-quickview-modal": HTMLAtomicQuickviewModalElement;
         "atomic-rating-facet": HTMLAtomicRatingFacetElement;
@@ -4393,11 +4378,6 @@ declare namespace LocalJSX {
          */
         "withInput"?: NumberInputType;
     }
-    /**
-     * The `atomic-popover` component displays any facet as a popover menu.
-     */
-    interface AtomicPopover {
-    }
     /**
      * The `atomic-quickview` component renders a button which the end user can click to open a modal box containing a preview
      * about a result.
@@ -5339,7 +5319,6 @@ declare namespace LocalJSX {
         "atomic-ipx-tabs": AtomicIpxTabs;
         "atomic-notifications": AtomicNotifications;
         "atomic-numeric-facet": AtomicNumericFacet;
-        "atomic-popover": AtomicPopover;
         "atomic-quickview": AtomicQuickview;
         "atomic-quickview-modal": AtomicQuickviewModal;
         "atomic-rating-facet": AtomicRatingFacet;
@@ -5536,10 +5515,6 @@ declare module "@stencil/core" {
              * An `atomic-numeric-facet` displays a facet of the results for the current query as numeric ranges.
              */
             "atomic-numeric-facet": LocalJSX.AtomicNumericFacet & JSXBase.HTMLAttributes<HTMLAtomicNumericFacetElement>;
-            /**
-             * The `atomic-popover` component displays any facet as a popover menu.
-             */
-            "atomic-popover": LocalJSX.AtomicPopover & JSXBase.HTMLAttributes<HTMLAtomicPopoverElement>;
             /**
              * The `atomic-quickview` component renders a button which the end user can click to open a modal box containing a preview
              * about a result.

packages/atomic/src/components/search/atomic-popover/atomic-popover.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicPopoverStories from './atomic-popover.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+
+<Meta of={AtomicPopoverStories} />
+
+<AtomicDocTemplate
+  stories={AtomicPopoverStories}
+  githubPath="search/atomic-popover/atomic-popover.ts"
+  tagName="atomic-popover"
+  className="AtomicPopover"
+>
+
+The `atomic-popover` component displays a facet as a compact popover menu. When a user clicks the popover button, a backdrop appears along with a popover containing a single facet.
+
+```html
+<atomic-search-interface>
+  <atomic-search-layout>
+    <atomic-layout-section section="facets">
+      <atomic-popover>
+        <atomic-facet field="objecttype" label="Type"></atomic-facet>
+      </atomic-popover>
+    </atomic-layout-section>
+  </atomic-search-layout>
+</atomic-search-interface>
+```
+
+</AtomicDocTemplate>