Search Top
This section displays the most searched terms by customers.
This section displays the most searched terms by customers. This component is part of the Search feature.
Import
Import the component from @faststore/ui
_10import { 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:
_10@import '@faststore/ui/src/components/molecules/SearchTop/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<SearchTop title="Top Search">_10 <SearchTopTerm value="Notebooks" linkProps={{ href: '#' }} index={0} />_10 <SearchTopTerm value="Laser Printer" linkProps={{ href: '#' }} index={1} />_10 <SearchTopTerm_10 value="Bluetooth Keyboard"_10 linkProps={{ href: '#' }}_10 index={2}_10 />_10</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