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

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

Props

Search History

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-history`
title	`string`	Title attribute for the <section> tag rendered by this component.	`History`
clearLabel	`string`	Defines the text displayed in clear history button.	`Clear History`
onClear	`() => void`	Event handler for click on clear history button.

Search History Term

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-history-term`
value*	`string`	Defines the text displayed in history term item.
linkProps	`Partial<LinkProps<LinkElementType>>`	Props for the link from term component.
icon	`string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon.	`<Icon name="ClockClockwise" width={18} height={18} />`

Design Tokens

Local token	Default value/Global token linked
`--fs-search-history-padding-top`	`var(--fs-spacing-2)`
`--fs-search-history-padding-right`	`var(--fs-spacing-3)`
`--fs-search-history-padding-bottom`	`var(--fs-search-history-padding-top)`
`--fs-search-history-padding-left`	`var(--fs-search-history-padding-right)`

`--fs-search-history-transition-property`	`var(--fs-transition-property)`
`--fs-search-history-transition-function`	`var(--fs-transition-function)`
`--fs-search-history-transition-timing`	`var(--fs-transition-timing)`

Nested Elements

Header

Local token	Default value/Global token linked
`--fs-search-history-header-padding-top`	`var(--fs-spacing-1)`
`--fs-search-history-header-padding-bottom`	`var(--fs-search-history-header-padding-top)`

Title

Local token	Default value/Global token linked
`--fs-search-history-title-size`	`var(--fs-text-size-lead)`
`--fs-search-history-title-line-height`	`1.5`

Item

Local token	Default value/Global token linked
`--fs-search-history-item-column-gap`	`var(--fs-spacing-1)`
`--fs-search-history-item-text-size`	`var(--fs-text-size-2)`
`--fs-search-history-item-line-height`	`1.25`
`--fs-search-history-item-bkg-color-hover`	`var(--fs-color-tertiary-bkg-hover)`

Icon

Local token	Default value/Global token linked
`--fs-search-history-item-icon-color`	`var(--fs-color-neutral-4)`
`--fs-search-history-item-icon-size`	`1.125rem`

Variants

Other Icons

History

<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

Search Dropdown Search Input Field