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.

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

Top Search


_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

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.

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