SearchTop

Displays the most searched terms by customers.

1 min read

This section displays the most searched terms by customers. This component is part of the Search feature.

Example

Code

Top Search

Usage


_10import { SearchTop, SearchTopTerm } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";

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)`

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)`

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`

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)`

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

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`

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.