diff --git a/packages/atomic/src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.tsx b/packages/atomic/src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.tsx index d85dcf0488b..c67f71052aa 100644 --- a/packages/atomic/src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.tsx +++ b/packages/atomic/src/components/commerce/atomic-commerce-load-more-products/atomic-commerce-load-more-products.tsx @@ -14,10 +14,10 @@ import { InitializeBindings, } from '../../../utils/initialization-utils'; import {createAppLoadedListener} from '../../common/interface/store'; -import {LoadMoreButton} from '../../common/load-more/button'; import {LoadMoreContainer} from '../../common/load-more/container'; import {LoadMoreGuard} from '../../common/load-more/guard'; import {LoadMoreProgressBar} from '../../common/load-more/progress-bar'; +import {LoadMoreButton} from '../../common/load-more/stencil-button'; import {LoadMoreSummary} from '../../common/load-more/summary'; import {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface'; diff --git a/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx b/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx index c121a2a65c4..b3084e5e672 100644 --- a/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx +++ b/packages/atomic/src/components/commerce/facets/facet-number-input/atomic-commerce-facet-number-input.tsx @@ -1,7 +1,7 @@ import {isUndefined} from '@coveo/bueno'; import {NumericFacet} from '@coveo/headless/commerce'; import {Component, h, Prop, Event, EventEmitter, State} from '@stencil/core'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {CommerceBindings as Bindings} from '../../atomic-commerce-interface/atomic-commerce-interface'; export type Range = {start: number; end: number}; diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx index aa62e5724fc..8d7a7bd4426 100644 --- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx +++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-children/atomic-product-children.tsx @@ -19,7 +19,7 @@ import { InitializeBindings, } from '../../../../utils/initialization-utils'; import {filterProtocol} from '../../../../utils/xss-utils'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {CommerceBindings} from '../../atomic-commerce-interface/atomic-commerce-interface'; import {ProductContext} from '../product-template-decorators'; diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-button.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-button.tsx index 05d45a8ffd9..d9de33e566d 100644 --- a/packages/atomic/src/components/common/breadbox/breadcrumb-button.tsx +++ b/packages/atomic/src/components/common/breadbox/breadcrumb-button.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; import {Breadcrumb} from './breadcrumb-types'; import { joinBreadcrumbValues, diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx index daaa5bd8585..0312dc32593 100644 --- a/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx +++ b/packages/atomic/src/components/common/breadbox/breadcrumb-clear-all.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; export interface BreadcrumbClearAllProps { setRef: (el: HTMLButtonElement) => void; diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx index b122086a5ec..e01c0e4792a 100644 --- a/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx +++ b/packages/atomic/src/components/common/breadbox/breadcrumb-show-less.tsx @@ -1,6 +1,6 @@ import {h, FunctionalComponent} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; export interface BreadcrumbShowLessProps { onShowLess: () => void; diff --git a/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx b/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx index 667732ffabd..fc81ed7c033 100644 --- a/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx +++ b/packages/atomic/src/components/common/breadbox/breadcrumb-show-more.tsx @@ -1,6 +1,6 @@ import {h, FunctionalComponent} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; export interface BreadcrumbShowMoreProps { setRef: (el: HTMLButtonElement) => void; diff --git a/packages/atomic/src/components/common/button.spec.ts b/packages/atomic/src/components/common/button.spec.ts new file mode 100644 index 00000000000..fe1098176c1 --- /dev/null +++ b/packages/atomic/src/components/common/button.spec.ts @@ -0,0 +1,185 @@ +import {createRipple} from '@/src/utils/ripple'; +import {fireEvent, within} from '@storybook/test'; +import {html, render} from 'lit'; +import {vi} from 'vitest'; +import {button, ButtonProps} from './button'; + +vi.mock('@/src/utils/ripple', () => ({ + createRipple: vi.fn(), +})); + +describe('button', () => { + let container: HTMLElement; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + }); + + const renderButton = (props: Partial): HTMLButtonElement => { + render( + html`${button({ + props: { + ...props, + style: props.style ?? 'primary', + }, + children: html``, + })}`, + container + ); + return within(container).getByRole('button') as HTMLButtonElement; + }; + + it('should render a button in the document', () => { + const props = {}; + const button = renderButton(props); + expect(button).toBeInTheDocument(); + }); + + it('should render a button with the correct style', () => { + const props: Partial = { + style: 'outline-error', + }; + + const button = renderButton(props); + + expect(button).toHaveClass('btn-outline-error'); + }); + + it('should render a button with the correct text', () => { + const props = { + text: 'Click me', + }; + + const button = renderButton(props); + + expect(button.querySelector('span')?.textContent).toBe('Click me'); + }); + + it('should wrap the button text with a truncate class', () => { + const props = { + text: 'Click me', + }; + + const button = renderButton(props); + + expect(button.querySelector('span')).toHaveClass('truncate'); + }); + + it('should handle click event', async () => { + const handleClick = vi.fn(); + const props = { + onClick: handleClick, + }; + + const button = renderButton(props); + + await fireEvent.click(button); + + expect(handleClick).toHaveBeenCalled(); + }); + + it('should apply disabled attribute', () => { + const props = { + disabled: true, + }; + + const button = renderButton(props); + + expect(button.hasAttribute('disabled')).toBe(true); + }); + + it('should apply aria attributes', () => { + const props: Partial = { + ariaLabel: 'button', + ariaPressed: 'true', + }; + + const button = renderButton(props); + + expect(button.getAttribute('aria-label')).toBe('button'); + expect(button.getAttribute('aria-pressed')).toBe('true'); + }); + + it('should apply custom class', () => { + const props = { + class: 'custom-class', + }; + + const button = renderButton(props); + + expect(button).toHaveClass('custom-class'); + expect(button).toHaveClass('btn-primary'); + }); + + it('should apply part attribute', () => { + const props = { + part: 'button-part', + }; + + const button = renderButton(props); + + expect(button.getAttribute('part')).toBe('button-part'); + }); + + it('should apply title attribute', () => { + const props = { + title: 'Button Title', + }; + + const button = renderButton(props); + + expect(button.getAttribute('title')).toBe('Button Title'); + }); + + it('should apply tabindex attribute', () => { + const props = { + tabIndex: 1, + }; + + const button = renderButton(props); + + expect(button.getAttribute('tabindex')).toBe('1'); + }); + + it('should apply role attribute', () => { + const props: Partial = { + role: 'button', + }; + + const button = renderButton(props); + + expect(button.getAttribute('role')).toBe('button'); + }); + + it('should call onMouseDown when the mousedown event is fired on the button', async () => { + const props: Partial = {}; + const button = renderButton(props); + await fireEvent.mouseDown(button); + expect(createRipple).toHaveBeenCalled(); + }); + + it('should apply form attribute', () => { + const props = { + form: 'form-id', + }; + + const button = renderButton(props); + + expect(button.getAttribute('form')).toBe('form-id'); + }); + + it('should apply type attribute', () => { + const props: Partial = { + type: 'submit', + }; + + const button = renderButton(props); + + expect(button.getAttribute('type')).toBe('submit'); + }); +}); diff --git a/packages/atomic/src/components/common/button.ts b/packages/atomic/src/components/common/button.ts new file mode 100644 index 00000000000..6cf9f260a64 --- /dev/null +++ b/packages/atomic/src/components/common/button.ts @@ -0,0 +1,74 @@ +import {html} from 'lit-html'; +import {ifDefined} from 'lit-html/directives/if-defined.js'; +import {createRipple} from '../../utils/ripple'; +import { + getRippleColorForButtonStyle, + getClassNameForButtonStyle, + ButtonStyle, +} from './button-style'; + +export interface ButtonProps { + style: ButtonStyle; + onClick?(event?: MouseEvent): void; + class?: string; + text?: string; + part?: string; + type?: 'button' | 'submit' | 'reset' | 'menu'; + form?: string; + role?: + | 'status' + | 'application' + | 'checkbox' + | 'button' + | 'dialog' + | 'img' + | 'radiogroup' + | 'toolbar' + | 'listitem' + | 'list' + | 'separator'; + disabled?: boolean; + ariaLabel?: string; + ariaExpanded?: 'true' | 'false'; + ariaPressed?: 'true' | 'false' | 'mixed'; + ariaChecked?: 'true' | 'false' | 'mixed'; + ariaCurrent?: 'page' | 'false'; + ariaControls?: string; + ariaHidden?: 'true' | 'false'; + tabIndex?: number; + title?: string; +} + +export const button = ({ + props, + children, +}: { + props: ButtonProps; + children: T; +}) => { + const rippleColor = getRippleColorForButtonStyle(props.style); + const className = getClassNameForButtonStyle(props.style); + + return html` `; +}; diff --git a/packages/atomic/src/components/common/carousel.tsx b/packages/atomic/src/components/common/carousel.tsx index 75ea99141ee..9e7f7a29450 100644 --- a/packages/atomic/src/components/common/carousel.tsx +++ b/packages/atomic/src/components/common/carousel.tsx @@ -1,8 +1,8 @@ import {h, FunctionalComponent, Fragment} from '@stencil/core'; import {JSXBase} from '@stencil/core/internal'; import ArrowRight from '../../images/arrow-right.svg'; -import {Button} from './button'; import {AnyBindings} from './interface/bindings'; +import {Button} from './stencil-button'; export interface CarouselProps { bindings: AnyBindings; diff --git a/packages/atomic/src/components/common/expandable-text/expandable-text.tsx b/packages/atomic/src/components/common/expandable-text/expandable-text.tsx index 707120cc8eb..637396ce7e8 100644 --- a/packages/atomic/src/components/common/expandable-text/expandable-text.tsx +++ b/packages/atomic/src/components/common/expandable-text/expandable-text.tsx @@ -1,7 +1,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import MinusIcon from '../../../images/minus.svg'; import PlusIcon from '../../../images/plus.svg'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; export type TruncateAfter = 'none' | '1' | '2' | '3' | '4'; diff --git a/packages/atomic/src/components/common/facets/category-facet/all-categories-button.tsx b/packages/atomic/src/components/common/facets/category-facet/all-categories-button.tsx index 2c3cb32b8c7..32fd1806454 100644 --- a/packages/atomic/src/components/common/facets/category-facet/all-categories-button.tsx +++ b/packages/atomic/src/components/common/facets/category-facet/all-categories-button.tsx @@ -1,7 +1,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import LeftArrow from '../../../../images/arrow-left-rounded.svg'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; interface CategoryFacetAllCategoryButtonProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/facets/category-facet/parent-button.tsx b/packages/atomic/src/components/common/facets/category-facet/parent-button.tsx index 8808c93ddfb..2207eef427d 100644 --- a/packages/atomic/src/components/common/facets/category-facet/parent-button.tsx +++ b/packages/atomic/src/components/common/facets/category-facet/parent-button.tsx @@ -2,7 +2,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import LeftArrow from '../../../../images/arrow-left-rounded.svg'; import {getFieldValueCaption} from '../../../../utils/field-utils'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; interface CategoryFacetParentButtonProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/facets/category-facet/search-value.tsx b/packages/atomic/src/components/common/facets/category-facet/search-value.tsx index d98a1e25a8e..9b4ac3a1a5f 100644 --- a/packages/atomic/src/components/common/facets/category-facet/search-value.tsx +++ b/packages/atomic/src/components/common/facets/category-facet/search-value.tsx @@ -1,7 +1,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import {getFieldValueCaption} from '../../../../utils/field-utils'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; import {FacetValueLabelHighlight} from '../facet-value-label-highlight/facet-value-label-highlight'; interface CategoryFacetSearchValueProps { diff --git a/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx b/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx index ee1c390c31a..e42212f9751 100644 --- a/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx +++ b/packages/atomic/src/components/common/facets/facet-date-input/facet-date-input.tsx @@ -5,7 +5,7 @@ import { } from '@coveo/headless'; import {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core'; import {parseDate} from '../../../../utils/date-utils'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {AnyBindings} from '../../interface/bindings'; /** diff --git a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx index f03482ff6da..136453e81f5 100644 --- a/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx +++ b/packages/atomic/src/components/common/facets/facet-header/facet-header.tsx @@ -3,8 +3,8 @@ import {i18n} from 'i18next'; import ArrowBottomIcon from '../../../../images/arrow-bottom-rounded.svg'; import ArrowTopIcon from '../../../../images/arrow-top-rounded.svg'; import CloseIcon from '../../../../images/close.svg'; -import {Button} from '../../button'; import {Heading} from '../../heading'; +import {Button} from '../../stencil-button'; export interface FacetHeaderProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx b/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx index 15b1de295fc..f703f4029a6 100644 --- a/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx +++ b/packages/atomic/src/components/common/facets/facet-number-input/facet-number-input.tsx @@ -1,6 +1,6 @@ import {Component, h, State, Prop, Event, EventEmitter} from '@stencil/core'; -import {Button} from '../../button'; import {AnyBindings} from '../../interface/bindings'; +import {Button} from '../../stencil-button'; import {NumericFilter, NumericFilterState} from '../../types'; import {NumberInputType} from './number-input-type'; diff --git a/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx b/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx index e037745f547..2781f3839aa 100644 --- a/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx +++ b/packages/atomic/src/components/common/facets/facet-search/facet-search-input.tsx @@ -2,7 +2,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import CloseIcon from '../../../../images/close.svg'; import SearchIcon from '../../../../images/search.svg'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; interface FacetSearchInputProps { label: string; diff --git a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx index 9a71526569f..4435532e8f9 100644 --- a/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx +++ b/packages/atomic/src/components/common/facets/facet-search/facet-search-matches.tsx @@ -1,7 +1,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import escape from 'escape-html'; import {i18n} from 'i18next'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; interface FacetSearchMatchesProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/facets/facet-show-more-less/facet-show-more-less.tsx b/packages/atomic/src/components/common/facets/facet-show-more-less/facet-show-more-less.tsx index cc902fe8465..63aef06b36e 100644 --- a/packages/atomic/src/components/common/facets/facet-show-more-less/facet-show-more-less.tsx +++ b/packages/atomic/src/components/common/facets/facet-show-more-less/facet-show-more-less.tsx @@ -2,7 +2,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import MinusIcon from '../../../../images/minus.svg'; import PlusIcon from '../../../../images/plus.svg'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; interface FacetShowMoreProps { label: string; diff --git a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx index 537c1ccf229..1321ecb7c7c 100644 --- a/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx +++ b/packages/atomic/src/components/common/facets/facet-value-box/facet-value-box.tsx @@ -1,5 +1,5 @@ import {FunctionalComponent, h} from '@stencil/core'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; import {FacetValueProps} from '../facet-common'; export const FacetValueBox: FunctionalComponent = ( diff --git a/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx b/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx index 31c8f79f09c..296a2c6b0f2 100644 --- a/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx +++ b/packages/atomic/src/components/common/facets/facet-value-link/facet-value-link.tsx @@ -1,5 +1,5 @@ import {FunctionalComponent, h, VNode} from '@stencil/core'; -import {Button} from '../../button'; +import {Button} from '../../stencil-button'; import {FacetValueProps} from '../facet-common'; export interface FacetValueLinkProps extends FacetValueProps { diff --git a/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx b/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx index 37e9d2db577..b988c06e76f 100644 --- a/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx +++ b/packages/atomic/src/components/common/generated-answer/atomic-generated-answer-feedback/atomic-generated-answer-feedback-modal.tsx @@ -21,10 +21,10 @@ import { } from '../../../../utils/initialization-utils'; import {updateBreakpoints} from '../../../../utils/replace-breakpoint'; import {once, randomID} from '../../../../utils/utils'; -import {Button} from '../../button'; import {FieldsetGroup} from '../../fieldset-group'; import {IconButton} from '../../iconButton'; import {AnyBindings} from '../../interface/bindings'; +import {Button} from '../../stencil-button'; import {RadioButton} from '../../stencil-radio-button'; /** diff --git a/packages/atomic/src/components/common/generated-answer/copy-button.tsx b/packages/atomic/src/components/common/generated-answer/copy-button.tsx index df3736b610d..9a17947da95 100644 --- a/packages/atomic/src/components/common/generated-answer/copy-button.tsx +++ b/packages/atomic/src/components/common/generated-answer/copy-button.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import CopyIcon from '../../../images/copy.svg'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface CopyButtonProps { title: string; diff --git a/packages/atomic/src/components/common/generated-answer/feedback-button.tsx b/packages/atomic/src/components/common/generated-answer/feedback-button.tsx index a2dfd1b8048..f01f93a53bf 100644 --- a/packages/atomic/src/components/common/generated-answer/feedback-button.tsx +++ b/packages/atomic/src/components/common/generated-answer/feedback-button.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import Thumbs from '../../../images/thumbs.svg'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; type FeedbackVariant = 'like' | 'dislike'; diff --git a/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx b/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx index 27e4998059f..366e6727f81 100644 --- a/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx +++ b/packages/atomic/src/components/common/generated-answer/retry-prompt.tsx @@ -1,5 +1,5 @@ import {FunctionalComponent, h} from '@stencil/core'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface RetryPromptProps { message: string; diff --git a/packages/atomic/src/components/common/generated-answer/show-button.tsx b/packages/atomic/src/components/common/generated-answer/show-button.tsx index 3533cf21ae4..0f108e74814 100644 --- a/packages/atomic/src/components/common/generated-answer/show-button.tsx +++ b/packages/atomic/src/components/common/generated-answer/show-button.tsx @@ -2,7 +2,7 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import ArrowBottomIcon from '../../../images/arrow-bottom-rounded.svg'; import ArrowTopIcon from '../../../images/arrow-top-rounded.svg'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface ShowButtonProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/iconButton.tsx b/packages/atomic/src/components/common/iconButton.tsx index af599260c56..6b22c7ae5cf 100644 --- a/packages/atomic/src/components/common/iconButton.tsx +++ b/packages/atomic/src/components/common/iconButton.tsx @@ -1,7 +1,7 @@ import {FunctionalComponent, h, VNode} from '@stencil/core'; -import {Button, ButtonProps} from './button'; +import {Button, StencilButtonProps} from './stencil-button'; -export interface IconButtonProps extends ButtonProps { +export interface IconButtonProps extends StencilButtonProps { badge?: VNode; buttonRef?: (el?: HTMLButtonElement) => void; icon: string; diff --git a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx index 6a812afccdc..d02004d09d6 100644 --- a/packages/atomic/src/components/common/image-carousel/image-carousel.tsx +++ b/packages/atomic/src/components/common/image-carousel/image-carousel.tsx @@ -1,8 +1,8 @@ import {h, FunctionalComponent, Fragment} from '@stencil/core'; import {JSXBase} from '@stencil/core/internal'; import ArrowRight from '../../../images/arrow-right.svg'; -import {Button} from '../button'; import {AnyBindings} from '../interface/bindings'; +import {Button} from '../stencil-button'; import CarouselIndicator from './image-carousel-indicators'; export interface CarouselProps { diff --git a/packages/atomic/src/components/common/load-more/button.ts b/packages/atomic/src/components/common/load-more/button.ts new file mode 100644 index 00000000000..98b88a3eaa9 --- /dev/null +++ b/packages/atomic/src/components/common/load-more/button.ts @@ -0,0 +1,27 @@ +import {i18n} from 'i18next'; +import {button, ButtonProps} from '../button'; + +interface LoadMoreButtonProps { + i18n: i18n; + onClick: () => void; + moreAvailable: boolean; + label?: 'load-more-results' | 'load-more-products'; +} + +export function loadMoreButton({ + i18n, + onClick, + moreAvailable, + label, +}: LoadMoreButtonProps) { + if (!moreAvailable) { + return; + } + const props: ButtonProps = { + style: 'primary', + part: 'load-more-results-button', + class: 'my-2 p-3 font-bold', + onClick: () => onClick(), + }; + return button({props, children: i18n.t(label || 'load-more-results')}); +} diff --git a/packages/atomic/src/components/common/load-more/button.tsx b/packages/atomic/src/components/common/load-more/stencil-button.tsx similarity index 50% rename from packages/atomic/src/components/common/load-more/button.tsx rename to packages/atomic/src/components/common/load-more/stencil-button.tsx index 7c1699f80db..e738f0b4fd6 100644 --- a/packages/atomic/src/components/common/load-more/button.tsx +++ b/packages/atomic/src/components/common/load-more/stencil-button.tsx @@ -1,20 +1,23 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; -interface LoadMoreButtonProps { +/** + * @deprecated Should only be used for Stencil components; for Lit components, use LoadMoreButtonProps interface instead + */ +interface StencilLoadMoreButtonProps { i18n: i18n; onClick: () => void; moreAvailable: boolean; label?: 'load-more-results' | 'load-more-products'; } -export const LoadMoreButton: FunctionalComponent = ({ - i18n, - onClick, - moreAvailable, - label, -}) => { +/** + * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead + */ +export const LoadMoreButton: FunctionalComponent< + StencilLoadMoreButtonProps +> = ({i18n, onClick, moreAvailable, label}) => { if (!moreAvailable) { return; } diff --git a/packages/atomic/src/components/common/no-items/cancel.tsx b/packages/atomic/src/components/common/no-items/cancel.tsx index 386e1f26f83..de7f0b8a6a7 100644 --- a/packages/atomic/src/components/common/no-items/cancel.tsx +++ b/packages/atomic/src/components/common/no-items/cancel.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface CancelProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/pager/pager-buttons.tsx b/packages/atomic/src/components/common/pager/pager-buttons.tsx index 4852fb64624..7f184c3cd00 100644 --- a/packages/atomic/src/components/common/pager/pager-buttons.tsx +++ b/packages/atomic/src/components/common/pager/pager-buttons.tsx @@ -1,10 +1,10 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button, ButtonProps} from '../button'; +import {Button, StencilButtonProps} from '../stencil-button'; import {RadioButton, StencilRadioButtonProps} from '../stencil-radio-button'; export interface PagerNavigationButtonProps - extends Omit { + extends Omit { icon: string; i18n: i18n; } diff --git a/packages/atomic/src/components/common/query-error/show-more.tsx b/packages/atomic/src/components/common/query-error/show-more.tsx index b12066e3a6b..964b2dfd292 100644 --- a/packages/atomic/src/components/common/query-error/show-more.tsx +++ b/packages/atomic/src/components/common/query-error/show-more.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; import {QueryErrorLink} from './link'; interface QueryErrorShowMoreProps { diff --git a/packages/atomic/src/components/common/refine-modal/button.tsx b/packages/atomic/src/components/common/refine-modal/button.tsx index ea39dd1b7c7..ffdce2c2f0c 100644 --- a/packages/atomic/src/components/common/refine-modal/button.tsx +++ b/packages/atomic/src/components/common/refine-modal/button.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface RefineToggleButtonProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/refine-modal/filters.tsx b/packages/atomic/src/components/common/refine-modal/filters.tsx index f216399df73..21e3729c176 100644 --- a/packages/atomic/src/components/common/refine-modal/filters.tsx +++ b/packages/atomic/src/components/common/refine-modal/filters.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, Fragment, h} from '@stencil/core'; import {i18n} from 'i18next'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface RefineModalFiltersSectionProps { i18n: i18n; diff --git a/packages/atomic/src/components/common/refine-modal/modal.tsx b/packages/atomic/src/components/common/refine-modal/modal.tsx index 3d8e80a0667..a94abfceab7 100644 --- a/packages/atomic/src/components/common/refine-modal/modal.tsx +++ b/packages/atomic/src/components/common/refine-modal/modal.tsx @@ -1,10 +1,10 @@ import {FunctionalComponent, h} from '@stencil/core'; import {i18n} from 'i18next'; import CloseIcon from '../../../images/close.svg'; -import {Button} from '../button'; import {BaseFacetElement} from '../facets/facet-common'; import {popoverClass} from '../facets/popover/popover-type'; import {isRefineModalFacet} from '../interface/store'; +import {Button} from '../stencil-button'; interface RefineModalProps { host: HTMLElement; diff --git a/packages/atomic/src/components/common/result-children/show-hide-button.tsx b/packages/atomic/src/components/common/result-children/show-hide-button.tsx index 7c7a4078cb7..41a1bf1756c 100644 --- a/packages/atomic/src/components/common/result-children/show-hide-button.tsx +++ b/packages/atomic/src/components/common/result-children/show-hide-button.tsx @@ -1,5 +1,5 @@ import {FunctionalComponent, h} from '@stencil/core'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; interface ShowHideButtonProps { moreResultsAvailable: boolean; diff --git a/packages/atomic/src/components/common/search-box/clear-button.tsx b/packages/atomic/src/components/common/search-box/clear-button.tsx index bfc61e4309f..cf60f9146cf 100644 --- a/packages/atomic/src/components/common/search-box/clear-button.tsx +++ b/packages/atomic/src/components/common/search-box/clear-button.tsx @@ -1,9 +1,9 @@ import {FunctionalComponent, h} from '@stencil/core'; import ClearIcon from '../../../images/clear.svg'; -import {Button, ButtonProps} from '../button'; import {AnyBindings} from '../interface/bindings'; +import {Button, StencilButtonProps} from '../stencil-button'; -interface Props extends Partial { +interface Props extends Partial { bindings: AnyBindings; inputRef: HTMLInputElement | HTMLTextAreaElement | null; } diff --git a/packages/atomic/src/components/common/search-box/submit-button.tsx b/packages/atomic/src/components/common/search-box/submit-button.tsx index 4074bf8acdf..e6be2dda636 100644 --- a/packages/atomic/src/components/common/search-box/submit-button.tsx +++ b/packages/atomic/src/components/common/search-box/submit-button.tsx @@ -1,9 +1,9 @@ import {FunctionalComponent, h} from '@stencil/core'; import SearchSlimIcon from '../../../images/search-slim.svg'; -import {Button, ButtonProps} from '../button'; import {AnyBindings} from '../interface/bindings'; +import {Button, StencilButtonProps} from '../stencil-button'; -interface Props extends Partial { +interface Props extends Partial { bindings: AnyBindings; } diff --git a/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx index 33f38493558..e1e0692e1a1 100644 --- a/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx +++ b/packages/atomic/src/components/common/search-box/text-area-clear-button.tsx @@ -1,9 +1,9 @@ import {FunctionalComponent, h} from '@stencil/core'; import ClearSlim from '../../../images/clear-slim.svg'; -import {Button, ButtonProps} from '../button'; import {AnyBindings} from '../interface/bindings'; +import {Button, StencilButtonProps} from '../stencil-button'; -interface Props extends Partial { +interface Props extends Partial { bindings: AnyBindings; inputRef: HTMLInputElement | HTMLTextAreaElement | null; } diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx index ac4edf4380a..297d4ae3e9f 100644 --- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx +++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-banner.tsx @@ -2,7 +2,7 @@ import {h, FunctionalComponent} from '@stencil/core'; import {i18n} from 'i18next'; import Checkmark from '../../../images/checkmark.svg'; import Cross from '../../../images/cross.svg'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; import {RadioButton} from '../stencil-radio-button'; interface SmartSnippetFeedbackBannerProps { diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx index 9308d5147a5..a88f6944aaa 100644 --- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx +++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-feedback-modal/smart-snippet-feedback-modal-common.tsx @@ -2,8 +2,8 @@ import {SmartSnippet, SmartSnippetFeedback} from '@coveo/headless'; import {EventEmitter, h} from '@stencil/core'; import {updateBreakpoints} from '../../../../utils/replace-breakpoint'; import {once} from '../../../../utils/utils'; -import {Button} from '../../button'; import {AnyBindings} from '../../interface/bindings'; +import {Button} from '../../stencil-button'; interface SmartSnippetFeedbackModalProps { formId: string; diff --git a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx index 30e3907d70d..0a729dce799 100644 --- a/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx +++ b/packages/atomic/src/components/common/smart-snippets/atomic-smart-snippet-suggestions/smart-snippet-suggestions-common.tsx @@ -6,10 +6,10 @@ import { import {h} from '@stencil/core'; import ArrowDown from '../../../../images/arrow-down.svg'; import ArrowRight from '../../../../images/arrow-right.svg'; -import {Button} from '../../button'; import {Heading} from '../../heading'; import {Hidden} from '../../hidden'; import {AnyBindings} from '../../interface/bindings'; +import {Button} from '../../stencil-button'; interface SmartSnippetSuggestionProps { id: string; diff --git a/packages/atomic/src/components/common/button.tsx b/packages/atomic/src/components/common/stencil-button.tsx similarity index 82% rename from packages/atomic/src/components/common/button.tsx rename to packages/atomic/src/components/common/stencil-button.tsx index 2096ae2a1b9..e6c927dda7c 100644 --- a/packages/atomic/src/components/common/button.tsx +++ b/packages/atomic/src/components/common/stencil-button.tsx @@ -4,9 +4,12 @@ import { ButtonStyle, getRippleColorForButtonStyle, getClassNameForButtonStyle, -} from './button-style'; +} from './stencil-button-style'; -export interface ButtonProps { +/** + * @deprecated Should only be used for Stencil components; for Lit components, use ButtonProps interface instead + */ +export interface StencilButtonProps { style: ButtonStyle; onClick?(event?: MouseEvent): void; class?: string; @@ -28,7 +31,13 @@ export interface ButtonProps { ref?(element?: HTMLButtonElement): void; } -export const Button: FunctionalComponent = (props, children) => { +/** + * @deprecated Should only be used for Stencil components; for Lit components, use the button.ts file instead + */ +export const Button: FunctionalComponent = ( + props, + children +) => { const rippleColor = getRippleColorForButtonStyle(props.style); const className = getClassNameForButtonStyle(props.style); diff --git a/packages/atomic/src/components/common/tab-manager/tab-button.tsx b/packages/atomic/src/components/common/tab-manager/tab-button.tsx index c62eab2668e..4dc1a42cb6a 100644 --- a/packages/atomic/src/components/common/tab-manager/tab-button.tsx +++ b/packages/atomic/src/components/common/tab-manager/tab-button.tsx @@ -1,5 +1,5 @@ import {Component, Host, Prop, h} from '@stencil/core'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; /** * @internal diff --git a/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx b/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx index 2fa15bc4909..f71a20a2963 100644 --- a/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx +++ b/packages/atomic/src/components/common/tab-manager/tab-manager-bar.tsx @@ -1,5 +1,5 @@ import {h, Component, Element, Host, State} from '@stencil/core'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; import {TabCommonElement} from '../tabs/tab-common'; /** diff --git a/packages/atomic/src/components/common/tabs/tab-bar.tsx b/packages/atomic/src/components/common/tabs/tab-bar.tsx index 9add1af2e43..e0227f07993 100644 --- a/packages/atomic/src/components/common/tabs/tab-bar.tsx +++ b/packages/atomic/src/components/common/tabs/tab-bar.tsx @@ -1,5 +1,5 @@ import {h, Component, Element, Host, State, Listen} from '@stencil/core'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; import {TabCommonElement} from './tab-common'; /** diff --git a/packages/atomic/src/components/common/tabs/tab-popover.tsx b/packages/atomic/src/components/common/tabs/tab-popover.tsx index 2ce8ce7bca6..c2d69beedba 100644 --- a/packages/atomic/src/components/common/tabs/tab-popover.tsx +++ b/packages/atomic/src/components/common/tabs/tab-popover.tsx @@ -18,7 +18,7 @@ import { InitializeBindings, } from '../../../utils/initialization-utils'; import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface'; -import {Button} from '../button'; +import {Button} from '../stencil-button'; /** * @internal diff --git a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx index b01c0582b8a..c31e6e59c67 100644 --- a/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-refine-modal/atomic-insight-refine-modal.tsx @@ -13,12 +13,12 @@ import { InitializableComponent, InitializeBindings, } from '../../../utils/initialization-utils'; -import {Button} from '../../common/button'; import {Hidden} from '../../common/hidden'; import { getClonedFacetElements, RefineModal, } from '../../common/refine-modal/modal'; +import {Button} from '../../common/stencil-button'; import {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface'; /** diff --git a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx index 8fcb4e2966e..d5c69f3be35 100644 --- a/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx +++ b/packages/atomic/src/components/insight/atomic-insight-tab/atomic-insight-tab.tsx @@ -11,8 +11,8 @@ import { InitializeBindings, } from '../../../utils/initialization-utils'; import {randomID} from '../../../utils/utils'; -import {Button} from '../../common/button'; import {createAppLoadedListener} from '../../common/interface/store'; +import {Button} from '../../common/stencil-button'; import {dispatchTabLoaded, TabCommon} from '../../common/tabs/tab-common'; import {InsightBindings} from '../atomic-insight-interface/atomic-insight-interface'; diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx index d808a7ad521..d72c179d7fb 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx +++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-modal/atomic-insight-user-actions-modal.tsx @@ -5,7 +5,7 @@ import { InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-interface'; const exportparts = diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/atomic-insight-user-actions-session.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/atomic-insight-user-actions-session.tsx index 79663e3fdc2..2b385b68c7a 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/atomic-insight-user-actions-session.tsx +++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-session/atomic-insight-user-actions-session.tsx @@ -4,7 +4,7 @@ import Flag from '../../../../images/flag.svg'; import ThreeDotsIcon from '../../../../images/three-dots.svg'; import {parseTimestampToDateDetails} from '../../../../utils/date-utils'; import {InitializeBindings} from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-interface'; import {UserAction} from './user-action'; diff --git a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx index 4019c701b46..66e324631e9 100644 --- a/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx +++ b/packages/atomic/src/components/insight/user-actions/atomic-insight-user-actions-timeline/atomic-insight-user-actions-timeline.tsx @@ -12,9 +12,9 @@ import { InitializeBindings, BindStateToController, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; import {NoItemsContainer} from '../../../common/no-items/container'; import {MagnifyingGlass} from '../../../common/no-items/magnifying-glass'; +import {Button} from '../../../common/stencil-button'; import {InsightBindings} from '../../atomic-insight-interface/atomic-insight-interface'; /** diff --git a/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.tsx b/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.tsx index 413c1fc257b..b2fdb28a478 100644 --- a/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.tsx +++ b/packages/atomic/src/components/ipx/atomic-ipx-button/atomic-ipx-button.tsx @@ -6,7 +6,7 @@ import { InitializableComponent, InitializeBindings, } from '../../../utils/initialization-utils'; -import {Button} from '../../common/button'; +import {Button} from '../../common/stencil-button'; import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface'; const numberOrPixelValuePattern = new RegExp(/^(?=.*(?:\d+|px)$).*$/); diff --git a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx index 1583d7aadf3..2673982788c 100644 --- a/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx +++ b/packages/atomic/src/components/ipx/atomic-ipx-refine-modal/atomic-ipx-refine-modal.tsx @@ -12,12 +12,12 @@ import { InitializableComponent, InitializeBindings, } from '../../../utils/initialization-utils'; -import {Button} from '../../common/button'; import {Hidden} from '../../common/hidden'; import { getClonedFacetElements, RefineModal, } from '../../common/refine-modal/modal'; +import {Button} from '../../common/stencil-button'; import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface'; /** diff --git a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx index c483dbdc0e6..bd74b8215f2 100644 --- a/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx +++ b/packages/atomic/src/components/ipx/atomic-ipx-tab/atomic-ipx-tab.tsx @@ -5,8 +5,8 @@ import { InitializableComponent, InitializeBindings, } from '../../../utils/initialization-utils'; -import {Button} from '../../common/button'; import {createAppLoadedListener} from '../../common/interface/store'; +import {Button} from '../../common/stencil-button'; import {dispatchTabLoaded} from '../../common/tabs/tab-common'; import {Bindings} from '../../search/atomic-search-interface/atomic-search-interface'; diff --git a/packages/atomic/src/components/search/atomic-load-more-results/atomic-load-more-results.tsx b/packages/atomic/src/components/search/atomic-load-more-results/atomic-load-more-results.tsx index 92e135b18dc..0f0c8c6e5c3 100644 --- a/packages/atomic/src/components/search/atomic-load-more-results/atomic-load-more-results.tsx +++ b/packages/atomic/src/components/search/atomic-load-more-results/atomic-load-more-results.tsx @@ -12,10 +12,10 @@ import { InitializeBindings, } from '../../../utils/initialization-utils'; import {createAppLoadedListener} from '../../common/interface/store'; -import {LoadMoreButton} from '../../common/load-more/button'; import {LoadMoreContainer} from '../../common/load-more/container'; import {LoadMoreGuard} from '../../common/load-more/guard'; import {LoadMoreProgressBar} from '../../common/load-more/progress-bar'; +import {LoadMoreButton} from '../../common/load-more/stencil-button'; import {LoadMoreSummary} from '../../common/load-more/summary'; import {Bindings} from '../atomic-search-interface/atomic-search-interface'; diff --git a/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx b/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx index bedd02f0124..486c6950640 100644 --- a/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx +++ b/packages/atomic/src/components/search/atomic-relevance-inspector/atomic-relevance-inspector.tsx @@ -1,6 +1,6 @@ import {getOrganizationEndpoint} from '@coveo/headless'; import {Component, h, Prop, Event, EventEmitter} from '@stencil/core'; -import {Button} from '../../common/button'; +import {Button} from '../../common/stencil-button'; import {Bindings} from '../atomic-search-interface/atomic-search-interface'; /** diff --git a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx index fb77cfa8877..ad803b080ec 100644 --- a/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx +++ b/packages/atomic/src/components/search/facets/atomic-popover/atomic-popover.tsx @@ -16,12 +16,12 @@ import { InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; import { PopoverChildFacet, popoverClass, } from '../../../common/facets/popover/popover-type'; import {Hidden} from '../../../common/hidden'; +import {Button} from '../../../common/stencil-button'; import {Bindings} from '../../atomic-search-interface/atomic-search-interface'; /** diff --git a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx index dd5a7e24285..41f010ad3ee 100644 --- a/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx +++ b/packages/atomic/src/components/search/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx @@ -12,8 +12,8 @@ import { InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; import {Hidden} from '../../../common/hidden'; +import {Button} from '../../../common/stencil-button'; type ArrowDirection = 'right' | 'left'; diff --git a/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx b/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx index cbf7d28f39d..b1853c6214a 100644 --- a/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx +++ b/packages/atomic/src/components/search/facets/facet-segmented-value/facet-segmented-value.tsx @@ -1,6 +1,6 @@ import {FunctionalComponent, h} from '@stencil/core'; -import {Button} from '../../../common/button'; import {FacetValueProps} from '../../../common/facets/facet-common'; +import {Button} from '../../../common/stencil-button'; export const FacetSegmentedValue: FunctionalComponent = ( props diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx index 557b006cd31..22838d31587 100644 --- a/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx +++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview-modal/atomic-quickview-modal.tsx @@ -21,9 +21,9 @@ import { InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; import {IconButton} from '../../../common/iconButton'; import {LinkWithItemAnalytics} from '../../../common/item-link/item-link'; +import {Button} from '../../../common/stencil-button'; import {Bindings} from '../../atomic-search-interface/atomic-search-interface'; import {QuickviewSidebar} from '../atomic-quickview-sidebar/atomic-quickview-sidebar'; import {QuickviewIframe} from '../quickview-iframe/quickview-iframe'; diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx index 145ca3fd6ea..6f6da390314 100644 --- a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx +++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx @@ -16,7 +16,7 @@ import { InitializableComponent, InitializeBindings, } from '../../../../utils/initialization-utils'; -import {Button} from '../../../common/button'; +import {Button} from '../../../common/stencil-button'; import {Bindings} from '../../atomic-search-interface/atomic-search-interface'; import {ResultContext} from '../result-template-decorators';