SearchTop
Displays the most searched terms by customers.
This section displays the most searched terms by customers. This component is part of the Search feature.
Example
Code
Usage
Import the component
_10import { SearchTop, SearchTopTerm } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
For details, see Importing FastStore UI component styles.
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) |
Data attributes
You can target and override
SearchTop
styles using 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
Props
SearchTop
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 |
SearchTopTerm
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. |