Create history component (#391)

* add changelog

* add basic files

* add clock svg

* create css file

* add arrow svg

* add mocked data

* add css to the list

* get data from searchHistory

* add alignment to css

* fix rebase problems

* change text color

* Call SuggestionsTopSearch

Co-authored-by: Lucas Feijó <lucasfjportela@gmail.com>

* Add links to the products

Co-authored-by: Israel Costa <israelswf@gmail.com>

* remove navbar changes

* remove comment

* Trigger CI

* move interface to the beginning of the file

* change css

* remove history__section css

* Lessen style specificity & simplify code

Co-Authored-By: Sara Nicoly <saranicoly0@gmail.com>

* Adjust padding

Co-Authored-By: Sara Nicoly <saranicoly0@gmail.com>

* rename scss file

* add target blank

Co-authored-by: Filipe W. Lima <fwl.ufpe@gmail.com>

Co-authored-by: Lucas Feijó <lucasfjportela@gmail.com>
Co-authored-by: Israel Costa <israelswf@gmail.com>
Co-authored-by: Sérgio Fontes <sergio@fontes.cc>
Co-authored-by: Filipe W. Lima <fwl.ufpe@gmail.com>

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `EmptyState` at the `ProductGallery` section.
 - `IconSVG` component to load SVG Icons.
 - `Suggestions` component.
+- `SearchHistory` component.
 
 ### Changed
 - Moved all icons to use Icon component

src/components/search/History/SearchHistory.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Icon as UIIcon, List as UIList } from '@faststore/ui'
+import Button from 'src/components/ui/Button'
+import './search-history.scss'
+import Link from 'src/components/ui/Link'
+import Icon from 'src/components/ui/Icon'
+import useSearchHistory from 'src/sdk/search/useSeachHistory'
+import { formatSearchState, initSearchState } from '@faststore/sdk'
+
+interface SearchHistoryProps {
+  onClear: () => void
+}
+
+const doSearch = (term: string) => {
+  const { pathname, search } = formatSearchState(
+    initSearchState({
+      term,
+      base: '/s',
+    })
+  )
+
+  return `${pathname}${search}`
+}
+
+const SearchHistory = ({ onClear }: SearchHistoryProps) => {
+  const { searchHistory } = useSearchHistory()
+
+  return (
+    <section data-store-search-history>
+      <div data-store-search-history-header>
+        <h4 data-store-search-history-title>History</h4>
+        <Button variant="tertiary" onClick={onClear}>
+          Clear
+        </Button>
+      </div>
+      <UIList variant="ordered">
+        {searchHistory.map((item, index) => (
+          <li data-store-search-history-item key={index}>
+            <Link variant="display" to={doSearch(item)} target="_blank">
+              <UIIcon
+                component={<Icon name="Clock" width={18} height={18} />}
+              />
+              {item}
+              <UIIcon
+                data-store-search-history-arrow
+                component={
+                  <Icon name="ArrowUpRight" width={13.5} height={13.5} />
+                }
+              />
+            </Link>
+          </li>
+        ))}
+      </UIList>
+    </section>
+  )
+}
+
+export default SearchHistory

src/components/search/History/index.tsx

@@ -0,0 +1 @@
+export { default as SearchHistory } from './SearchHistory'

src/components/search/History/search-history.scss

@@ -0,0 +1,45 @@
+@import "src/styles/scaffold";
+
+[data-store-search-history-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-1);
+  padding-right: var(--space-3);
+  padding-left: var(--space-3);
+}
+
+[data-store-search-history-title] {
+  font-size: var(--text-size-3);
+}
+
+[data-store-search-history] {
+  padding: var(--space-1) var(--space-3) var(--space-2);
+  background-color: var(--bg-neutral-lightest);
+}
+
+[data-store-search-history-item] {
+  [data-store-link] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: var(--space-3);
+    padding-left: var(--space-3);
+    color: var(--color-neutral-6);
+    font-size: var(--text-size-2);
+  }
+
+  [data-store-icon] {
+    display: flex;
+    &:first-of-type { margin-right: var(--space-1); }
+  }
+}
+
+[data-store-search-history-arrow] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-4);
+  height: var(--space-4);
+  margin-left: auto;
+}