chore(atomic): migrate atomic-icon

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -6,6 +6,7 @@ import {APP_INITIALIZER, ModuleWithProviders, NgModule, Provider} from '@angular
 
 import {
 AtomicComponentError,
+AtomicIcon,
 AtomicAriaLive,
 AtomicAutomaticFacet,
 AtomicAutomaticFacetGenerator,
@@ -50,7 +51,6 @@ AtomicFormatNumber,
 AtomicFormatUnit,
 AtomicGeneratedAnswer,
 AtomicHtml,
-AtomicIcon,
 AtomicLayoutSection,
 AtomicLoadMoreResults,
 AtomicNoResults,
@@ -152,6 +152,7 @@ defineCustomElements(window);
 
 const DECLARATIONS = [
 AtomicComponentError,
+AtomicIcon,
 AtomicAriaLive,
 AtomicAutomaticFacet,
 AtomicAutomaticFacetGenerator,
@@ -196,7 +197,6 @@ AtomicFormatNumber,
 AtomicFormatUnit,
 AtomicGeneratedAnswer,
 AtomicHtml,
-AtomicIcon,
 AtomicLayoutSection,
 AtomicLoadMoreResults,
 AtomicNoResults,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -1005,28 +1005,6 @@ export class AtomicHtml {
 export declare interface AtomicHtml extends Components.AtomicHtml {}
 
 
-@ProxyCmp({
-  inputs: ['icon']
-})
-@Component({
-  selector: 'atomic-icon',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['icon'],
-})
-export class AtomicIcon {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface AtomicIcon extends Components.AtomicIcon {}
-
-
 @ProxyCmp({
   inputs: ['maxWidth', 'minWidth', 'section']
 })
@@ -3108,5 +3086,28 @@ export declare interface AtomicComponentError extends LitAtomicComponentError {
 
 }
 
-import type {AtomicComponentError as LitAtomicComponentError} from '@coveo/atomic/components';
+@ProxyCmp({
+  inputs: ['icon']
+})
+@Component({
+  selector: 'atomic-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['icon']
+})
+export class AtomicIcon {
+  protected readonly el: HTMLElement;
+  constructor(c: ChangeDetectorRef, el: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = el.nativeElement;
+    proxyOutputs(this, this.el, []);
+  }
+}
+
+export declare interface AtomicIcon extends LitAtomicIcon {
+
+}
+
+import type {AtomicComponentError as LitAtomicComponentError, AtomicIcon as LitAtomicIcon} from '@coveo/atomic/components';
 //#endregion Lit Declarations

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

@@ -1 +1,18 @@
-export {};
+import {
+  AtomicComponentError as LitAtomicComponentError,
+  AtomicIcon as LitAtomicIcon,
+} from '@coveo/atomic/components';
+import {createComponent} from '@lit/react';
+import React from 'react';
+
+export const AtomicComponentError = createComponent({
+  tagName: 'atomic-component-error',
+  react: React,
+  elementClass: LitAtomicComponentError,
+});
+
+export const AtomicIcon = createComponent({
+  tagName: 'atomic-icon',
+  react: React,
+  elementClass: LitAtomicIcon,
+});

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

@@ -1 +1,18 @@
-export {};
+import {
+  AtomicComponentError as LitAtomicComponentError,
+  AtomicIcon as LitAtomicIcon,
+} from '@coveo/atomic/components';
+import {createComponent} from '@lit/react';
+import React from 'react';
+
+export const AtomicComponentError = createComponent({
+  tagName: 'atomic-component-error',
+  react: React,
+  elementClass: LitAtomicComponentError,
+});
+
+export const AtomicIcon = createComponent({
+  tagName: 'atomic-icon',
+  react: React,
+  elementClass: LitAtomicIcon,
+});

packages/atomic-react/src/components/stencil-generated/commerce/index.ts

@@ -35,7 +35,6 @@ export const AtomicCommerceSearchBoxRecentQueries = /*@__PURE__*/createReactComp
 export const AtomicCommerceSortDropdown = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceSortDropdown, HTMLAtomicCommerceSortDropdownElement>('atomic-commerce-sort-dropdown');
 export const AtomicCommerceText = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceText, HTMLAtomicCommerceTextElement>('atomic-commerce-text');
 export const AtomicCommerceTimeframeFacet = /*@__PURE__*/createReactComponent<JSX.AtomicCommerceTimeframeFacet, HTMLAtomicCommerceTimeframeFacetElement>('atomic-commerce-timeframe-facet');
-export const AtomicIcon = /*@__PURE__*/createReactComponent<JSX.AtomicIcon, HTMLAtomicIconElement>('atomic-icon');
 export const AtomicLayoutSection = /*@__PURE__*/createReactComponent<JSX.AtomicLayoutSection, HTMLAtomicLayoutSectionElement>('atomic-layout-section');
 export const AtomicNumericRange = /*@__PURE__*/createReactComponent<JSX.AtomicNumericRange, HTMLAtomicNumericRangeElement>('atomic-numeric-range');
 export const AtomicProduct = /*@__PURE__*/createReactComponent<JSX.AtomicProduct, HTMLAtomicProductElement>('atomic-product');

packages/atomic-react/src/components/stencil-generated/search/index.ts

@@ -24,7 +24,6 @@ export const AtomicFormatNumber = /*@__PURE__*/createReactComponent<JSX.AtomicFo
 export const AtomicFormatUnit = /*@__PURE__*/createReactComponent<JSX.AtomicFormatUnit, HTMLAtomicFormatUnitElement>('atomic-format-unit');
 export const AtomicGeneratedAnswer = /*@__PURE__*/createReactComponent<JSX.AtomicGeneratedAnswer, HTMLAtomicGeneratedAnswerElement>('atomic-generated-answer');
 export const AtomicHtml = /*@__PURE__*/createReactComponent<JSX.AtomicHtml, HTMLAtomicHtmlElement>('atomic-html');
-export const AtomicIcon = /*@__PURE__*/createReactComponent<JSX.AtomicIcon, HTMLAtomicIconElement>('atomic-icon');
 export const AtomicLayoutSection = /*@__PURE__*/createReactComponent<JSX.AtomicLayoutSection, HTMLAtomicLayoutSectionElement>('atomic-layout-section');
 export const AtomicLoadMoreResults = /*@__PURE__*/createReactComponent<JSX.AtomicLoadMoreResults, HTMLAtomicLoadMoreResultsElement>('atomic-load-more-results');
 export const AtomicNoResults = /*@__PURE__*/createReactComponent<JSX.AtomicNoResults, HTMLAtomicNoResultsElement>('atomic-no-results');

packages/atomic/src/components.d.ts

@@ -1126,16 +1126,6 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * The `atomic-icon` component displays an SVG icon with a 1:1 aspect ratio.
-     * This component can display an icon from those available in the Atomic package, from a specific location, or as an inline SVG element.
-     */
-    interface AtomicIcon {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon": string;
-    }
     interface AtomicInsightEditToggle {
         "clickCallback": () => void;
         "tooltip": string;
@@ -4476,16 +4466,6 @@ declare global {
         prototype: HTMLAtomicHtmlElement;
         new (): HTMLAtomicHtmlElement;
     };
-    /**
-     * The `atomic-icon` component displays an SVG icon with a 1:1 aspect ratio.
-     * This component can display an icon from those available in the Atomic package, from a specific location, or as an inline SVG element.
-     */
-    interface HTMLAtomicIconElement extends Components.AtomicIcon, HTMLStencilElement {
-    }
-    var HTMLAtomicIconElement: {
-        prototype: HTMLAtomicIconElement;
-        new (): HTMLAtomicIconElement;
-    };
     interface HTMLAtomicInsightEditToggleElement extends Components.AtomicInsightEditToggle, HTMLStencilElement {
     }
     var HTMLAtomicInsightEditToggleElement: {
@@ -6128,7 +6108,6 @@ declare global {
         "atomic-generated-answer": HTMLAtomicGeneratedAnswerElement;
         "atomic-generated-answer-feedback-modal": HTMLAtomicGeneratedAnswerFeedbackModalElement;
         "atomic-html": HTMLAtomicHtmlElement;
-        "atomic-icon": HTMLAtomicIconElement;
         "atomic-insight-edit-toggle": HTMLAtomicInsightEditToggleElement;
         "atomic-insight-facet": HTMLAtomicInsightFacetElement;
         "atomic-insight-folded-result-list": HTMLAtomicInsightFoldedResultListElement;
@@ -7305,16 +7284,6 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
-    /**
-     * The `atomic-icon` component displays an SVG icon with a 1:1 aspect ratio.
-     * This component can display an icon from those available in the Atomic package, from a specific location, or as an inline SVG element.
-     */
-    interface AtomicIcon {
-        /**
-          * The SVG icon to display.  - Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. - Use a value that starts with `assets://`, to display an icon from the Atomic package. - Use a stringified SVG to display it directly.
-         */
-        "icon": string;
-    }
     interface AtomicInsightEditToggle {
         "clickCallback"?: () => void;
         "tooltip"?: string;
@@ -9944,7 +9913,6 @@ declare namespace LocalJSX {
         "atomic-generated-answer": AtomicGeneratedAnswer;
         "atomic-generated-answer-feedback-modal": AtomicGeneratedAnswerFeedbackModal;
         "atomic-html": AtomicHtml;
-        "atomic-icon": AtomicIcon;
         "atomic-insight-edit-toggle": AtomicInsightEditToggle;
         "atomic-insight-facet": AtomicInsightFacet;
         "atomic-insight-folded-result-list": AtomicInsightFoldedResultList;
@@ -10339,11 +10307,6 @@ declare module "@stencil/core" {
              * Use only with values for which you are certain the content is harmless.
              */
             "atomic-html": LocalJSX.AtomicHtml & JSXBase.HTMLAttributes<HTMLAtomicHtmlElement>;
-            /**
-             * The `atomic-icon` component displays an SVG icon with a 1:1 aspect ratio.
-             * This component can display an icon from those available in the Atomic package, from a specific location, or as an inline SVG element.
-             */
-            "atomic-icon": LocalJSX.AtomicIcon & JSXBase.HTMLAttributes<HTMLAtomicIconElement>;
             "atomic-insight-edit-toggle": LocalJSX.AtomicInsightEditToggle & JSXBase.HTMLAttributes<HTMLAtomicInsightEditToggleElement>;
             "atomic-insight-facet": LocalJSX.AtomicInsightFacet & JSXBase.HTMLAttributes<HTMLAtomicInsightFacetElement>;
             "atomic-insight-folded-result-list": LocalJSX.AtomicInsightFoldedResultList & JSXBase.HTMLAttributes<HTMLAtomicInsightFoldedResultListElement>;

packages/atomic/src/components/commerce/index.ts

@@ -1,2 +1,3 @@
 // Export the class of the components migrated to Lit here, like this:
 export {AtomicComponentError} from '../common/atomic-component-error/atomic-component-error';
+export {AtomicIcon} from '../common/atomic-icon/atomic-icon';

packages/atomic/src/components/commerce/lazy-index.ts

@@ -1,5 +1,6 @@
 export default {
   // Add entries as such when new components are added/moved to Lit.
+  'atomic-icon': async () => await import('../common/atomic-icon/atomic-icon'),
   'atomic-component-error': async () =>
     await import('../common/atomic-component-error/atomic-component-error'),
 } as Record<string, () => Promise<unknown>>;

packages/atomic/src/components/common/atomic-icon/atomic-icon.mdx

@@ -0,0 +1,16 @@
+import {Canvas, ArgTypes, Meta, Title, Description} from '@storybook/blocks';
+import * as AtomicIconStories from './atomic-icon.new.stories';
+
+{/* Storybook provides a number of blocs to construct documentation pages */}
+{/* https://storybook.js.org/docs/writing-docs/doc-blocks#available-blocks */}
+
+<Meta of={ AtomicIconStories } />
+
+<Title />
+<Description />
+
+<Canvas of={ AtomicIconStories.Default } />
+
+## Properties
+<ArgTypes />
+

packages/atomic/src/components/common/atomic-icon/atomic-icon.new.stories.tsx

@@ -18,7 +18,7 @@ const {decorator, play} = wrapInSearchInterface();
 
 const meta: Meta = {
   component: 'atomic-icon',
-  title: 'Atomic/Icon',
+  title: 'Atomic/Common',
   id: 'atomic-icon',
 
   render: renderComponent,