List of
SearchProductItem to show details of the suggested products. This component is part of the
Search feature.
Usage
Import the component
_10 SearchProductItemImage,
_10 SearchProductItemContent,
_10} from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
Design tokens
| Local token | Default value/Global token linked |
|---|
--fs-search-products-padding-top | var(--fs-spacing-2) |
--fs-search-products-padding-right | var(--fs-spacing-3) |
--fs-search-products-padding-bottom | var(--fs-search-products-padding-top) |
--fs-search-products-padding-left | var(--fs-search-products-padding-right) |
| |
--fs-search-products-transition-property | var(--fs-transition-property) |
--fs-search-products-transition-function | var(--fs-transition-function) |
--fs-search-products-transition-timing | var(--fs-transition-timing) |
| Local token | Default value/Global token linked |
|---|
--fs-search-products-header-padding-top | var(--fs-spacing-1) |
--fs-search-products-header-padding-bottom | var(--fs-search-products-header-padding-top) |
Title
| Local token | Default value/Global token linked |
|---|
--fs-search-products-title-size | var(--fs-text-size-lead) |
--fs-search-products-title-line-height | 1.5 |
Item
| Local token | Default value/Global token linked |
|---|
--fs-search-product-item-padding-top | var(--fs-spacing-1) |
--fs-search-product-item-padding-right | var(--fs-search-product-item-padding-top) |
--fs-search-product-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover) |
Item control
| Local token | Default value/Global token linked |
|---|
--fs-search-product-item-control-actions-gap | var(--fs-spacing-1) |
--fs-search-product-item-control-input-width | 4.625rem |
Item image
| Local token | Default value/Global token linked |
|---|
--fs-search-product-item-image-border-radius | var(--fs-border-radius) |
--fs-search-product-item-image-margin-right | var(--fs-spacing-3) |
--fs-search-product-item-image-size | 3.5rem |
Item title
| Local token | Default value/Global token linked |
|---|
--fs-search-product-item-title-margin-bottom | var(--fs-spacing-0) |
--fs-search-product-item-title-size | var(--fs-text-size-2) |
--fs-search-product-item-title-line-height | 1.2 |
--fs-search-product-item-title-color | var(--fs-color-text) |
Item price
| Local token | Default value/Global token linked |
|---|
--fs-search-product-item-price-gap | var(--fs-spacing-1) |
--fs-search-product-item-price-size | var(--fs-text-size-base) |
Data attributes
You can target and override SearchProducts styles using the following data attributes:
data-fs-search-products
data-fs-search-products-header
data-fs-search-products-title
data-fs-search-product-item
data-fs-search-product-item-link
data-fs-search-product-item-image
data-fs-search-product-item-content
Props
All search product related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:
SearchProducts
| Name | Type | Description | Default |
|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-products |
| title | string | Title attribute for the <section> tag rendered by this component. | Suggested Products |
SearchProductItem
| Name | Type | Description | Default |
|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress,
testing-library, and jest). | fs-search-product-item |
| linkProps | Partial<LinkProps<LinkElementType>> | Props for the link from SearchProduct component. | |
SearchProductItemImage
| Name | Type | Description | Default |
|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-product-item-image |
SearchProductItemContent
| Name | Type | Description | Default |
|---|
| title* | string | Specifies the product's title. | |
| price* | PriceDefinition | Specifies product's prices. | |
| quickOrder | { enabled: boolean; outOfStockLabel: string; availability: boolean; hasVariants: boolean; skuMatrixControl: React.ReactNode; quantity: number; min?: number; max?: number; onChangeQuantity(value: number): void; buyProps?: { ...; }; } | Quick order settings. | |
| onValidateBlur | (min: number, maxValue: number, quantity: number) => void | Event emitted when value is out of the min and max bounds | |
Other Resources
PriceDefinition
| Name | Type | Description | Default |
|---|
| value | number | The raw price value. | |
| listPrice | number | Product's list price | |
| formatter | PriceFormatter | (price: number, variant: PriceVariant) => ReactNode | |
