⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Search History

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

import { SearchHistory, SearchHistoryTerm } 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:

@import '@faststore/ui/src/components/molecules/SearchHistory/styles.scss'
  @import '@faststore/ui/src/components/atoms/Button/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage

History

  1. Headphone
  2. Audio & Video
  3. mh-7000
<SearchHistory title="History">
  <SearchHistoryTerm value="Headphone" linkProps={{ href: '#' }} />
  <SearchHistoryTerm value="Audio & Video" linkProps={{ href: '#' }} />
  <SearchHistoryTerm value="mh-7000" linkProps={{ href: '#' }} />
</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
<SearchHistory title="History">
  <SearchHistoryTerm
    value="Headphone"
    linkProps={{ href: '#' }}
    icon={<Icon name="Star" />}
  />
  <SearchHistoryTerm
    value="Audio & Video"
    linkProps={{ href: '#' }}
    icon={<Icon name="Heart" />}
  />
</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