Documentation
Feedback
Guides
Storefront Development

Storefront Development
Search History

Responsible for showing the latest terms searched by a user.

Responsible for showing the latest terms searched by a user. This component is part of the Search feature.## Import
Import the component from @faststore/ui

_10
import { SearchHistory, SearchHistoryTerm } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/SearchHistory/styles.scss'


Usage

History

  1. Headphone
  2. Audio & Video
  3. mh-7000

_10
<SearchHistory title="History">
_10
<SearchHistoryTerm value="Headphone" linkProps={{ href: '#' }} />
_10
<SearchHistoryTerm value="Audio & Video" linkProps={{ href: '#' }} />
_10
<SearchHistoryTerm value="mh-7000" linkProps={{ href: '#' }} />
_10
</SearchHistory>


Props

Search History

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-history
titlestringTitle attribute for the <section> tag rendered by this component.History
clearLabelstringDefines the text displayed in clear history button.Clear History
onClear() => voidEvent handler for click on clear history button.

Search History Term

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-history-term
value*stringDefines the text displayed in history term item.
linkPropsPartial<LinkProps<LinkElementType>>Props for the link from term component.
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA React component that will be rendered as an icon.<Icon name="ClockClockwise" width={18} height={18} />

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-history-padding-topvar(--fs-spacing-2)
--fs-search-history-padding-rightvar(--fs-spacing-3)
--fs-search-history-padding-bottomvar(--fs-search-history-padding-top)
--fs-search-history-padding-leftvar(--fs-search-history-padding-right)
--fs-search-history-transition-propertyvar(--fs-transition-property)
--fs-search-history-transition-functionvar(--fs-transition-function)
--fs-search-history-transition-timingvar(--fs-transition-timing)

Nested Elements

Header

Local tokenDefault value/Global token linked
--fs-search-history-header-padding-topvar(--fs-spacing-1)
--fs-search-history-header-padding-bottomvar(--fs-search-history-header-padding-top)

Title

Local tokenDefault value/Global token linked
--fs-search-history-title-sizevar(--fs-text-size-lead)
--fs-search-history-title-line-height1.5

Item

Local tokenDefault value/Global token linked
--fs-search-history-item-column-gapvar(--fs-spacing-1)
--fs-search-history-item-text-sizevar(--fs-text-size-2)
--fs-search-history-item-line-height1.25
--fs-search-history-item-bkg-color-hover
var(--fs-color-tertiary-bkg-hover)

Icon

Local tokenDefault value/Global token linked
--fs-search-history-item-icon-color
var(--fs-color-neutral-4)
--fs-search-history-item-icon-size1.125rem

Variants

Other Icons

History

  1. Headphone
  2. Audio & Video

_12
<SearchHistory title="History">
_12
<SearchHistoryTerm
_12
value="Headphone"
_12
linkProps={{ href: '#' }}
_12
icon={<Icon name="Star" />}
_12
/>
_12
<SearchHistoryTerm
_12
value="Audio & Video"
_12
linkProps={{ href: '#' }}
_12
icon={<Icon name="Heart" />}
_12
/>
_12
</SearchHistory>


Customization

For further customization, you can use the following data attributes:
data-fs-search-history
data-fs-search-history-header
data-fs-search-history-title
data-fs-search-history-item
data-fs-search-history-item-link
data-fs-search-history-item-icon
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page