Search Top
This section displays the most searched terms by customers. This component is part of the Search feature.
Import
Import the component from @faststore/ui
import { SearchTop, SearchTopTerm } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/molecules/SearchTop/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<SearchTop title="Top Search">
<SearchTopTerm value="Notebooks" linkProps={{ href: '#' }} index={0} />
<SearchTopTerm value="Laser Printer" linkProps={{ href: '#' }} index={1} />
<SearchTopTerm
value="Bluetooth Keyboard"
linkProps={{ href: '#' }}
index={2}
/>
</SearchTop>Props
Search Top
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-top-search |
| title | string | Title attribute for the <section> tag rendered by this component. | Top Search |
Search Top Term
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-top-search-term |
| value* | string | Search term to be shown. | |
| linkProps | Partial<LinkProps<LinkElementType>> | Props for the `<Link>` rendered by this component. | |
| index* | number | Current term's position in a list of search terms. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-search-top-padding-top | var(--fs-spacing-2) |
--fs-search-top-padding-right | var(--fs-spacing-3) |
--fs-search-top-padding-bottom | var(--fs-search-top-padding-top) |
--fs-search-top-padding-left | var(--fs-search-top-padding-right) |
--fs-search-top-transition-property | var(--fs-transition-property) |
--fs-search-top-transition-function | var(--fs-transition-function) |
--fs-search-top-transition-timing | var(--fs-transition-timing) |
Nested Elements
Header
| Local token | Default value/Global token linked |
|---|---|
--fs-search-top-header-padding-top | var(--fs-spacing-1) |
--fs-search-top-header-padding-bottom | var(--fs-search-top-header-padding-top) |
Title
| Local token | Default value/Global token linked |
|---|---|
--fs-search-top-title-size | var(--fs-text-size-lead) |
--fs-search-top-title-line-height | 1.5 |
Item
| Local token | Default value/Global token linked |
|---|---|
--fs-search-top-item-column-gap | var(--fs-spacing-1) |
--fs-search-top-item-text-size | var(--fs-text-size-2) |
--fs-search-top-item-line-height | 1.25 |
--fs-search-top-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover) |
Customization
For further customization, you can use the following data attributes:
data-fs-search-top
data-fs-search-top-header
data-fs-search-top-title
data-fs-search-top-item
data-fs-search-top-item-link
data-fs-search-top-item-badge