From fb6cbb8cd73c4c9c966e2831d01ca22488a05421 Mon Sep 17 00:00:00 2001 From: Sara Nicoly Date: Fri, 18 Mar 2022 16:57:57 -0300 Subject: [PATCH] Create history component (#391) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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ó * Add links to the products Co-authored-by: Israel Costa * 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 * Adjust padding Co-Authored-By: Sara Nicoly * rename scss file * add target blank Co-authored-by: Filipe W. Lima Co-authored-by: Lucas Feijó Co-authored-by: Israel Costa Co-authored-by: Sérgio Fontes Co-authored-by: Filipe W. Lima --- CHANGELOG.md | 1 + .../search/History/SearchHistory.tsx | 58 +++++++++++++++++++ src/components/search/History/index.tsx | 1 + .../search/History/search-history.scss | 45 ++++++++++++++ static/icons.svg | 2 + 5 files changed, 107 insertions(+) create mode 100644 src/components/search/History/SearchHistory.tsx create mode 100644 src/components/search/History/index.tsx create mode 100644 src/components/search/History/search-history.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 62381d5da..a30c6c46c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/search/History/SearchHistory.tsx b/src/components/search/History/SearchHistory.tsx new file mode 100644 index 000000000..67ae65f9f --- /dev/null +++ b/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 ( +
+
+

History

+ +
+ + {searchHistory.map((item, index) => ( +
  • + + } + /> + {item} + + } + /> + +
    • + ))} +     +
    + ) +} + +export default SearchHistory diff --git a/src/components/search/History/index.tsx b/src/components/search/History/index.tsx new file mode 100644 index 000000000..08e2ee333 --- /dev/null +++ b/src/components/search/History/index.tsx @@ -0,0 +1 @@ +export { default as SearchHistory } from './SearchHistory' diff --git a/src/components/search/History/search-history.scss b/src/components/search/History/search-history.scss new file mode 100644 index 000000000..cb34b750f --- /dev/null +++ b/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; +} diff --git a/static/icons.svg b/static/icons.svg index b88896fda..88351ca34 100644 --- a/static/icons.svg +++ b/static/icons.svg @@ -9,6 +9,7 @@ + @@ -40,4 +41,5 @@ +