From 38d54e145fcb488d1d2a4de5b443d497c041383b Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Thu, 21 Jul 2022 17:33:36 -0300 Subject: [PATCH] Feat: Add css modules, tokens and refactor `Search` components (#150) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Natã Melo --- .storybook/components/SectionItem.tsx | 11 +- .storybook/mocks/index.ts | 2 + .storybook/mocks/searchHistory.ts | 6 + .storybook/mocks/searchTerms.ts | 5 + CHANGELOG.md | 2 + src/components/common/Navbar/Navbar.tsx | 2 +- src/components/common/SearchInput/index.tsx | 1 - .../search/History/SearchHistory.stories.tsx | 36 ---- src/components/search/Search.stories.mdx | 180 ++++++++++++++++++ .../SearchDropdown/SearchDropdown.stories.mdx | 69 +++++++ .../search/SearchDropdown/SearchDropdown.tsx | 46 +++++ src/components/search/SearchDropdown/index.ts | 2 + .../SearchHistory/SearchHistory.stories.mdx | 62 ++++++ .../SearchHistory.tsx | 24 ++- .../{History => SearchHistory}/index.tsx | 0 .../SearchInput/SearchInput.stories.mdx | 63 ++++++ .../SearchInput/SearchInput.tsx | 42 ++-- src/components/search/SearchInput/index.tsx | 2 + .../SearchInput/search-input.scss | 10 +- .../SearchProductCard.stories.mdx} | 22 +-- .../SearchProductCard.tsx} | 35 ++-- .../search/SearchProductCard/index.ts | 1 + .../search-product-card.module.scss | 54 ++++++ .../search/SearchSharedTokenTable.mdx | 98 ++++++++++ .../SearchSuggestions.stories.mdx | 67 +++++++ .../SearchSuggestions/SearchSuggestions.tsx} | 48 +++-- .../search/SearchSuggestions/index.ts | 2 + .../search/SearchTop/SearchTop.stories.mdx | 64 +++++++ src/components/search/SearchTop/SearchTop.tsx | 77 ++++++++ src/components/search/SearchTop/index.ts | 2 + .../search/SuggestionProductCard/index.ts | 1 - .../suggestion-product-card.module.scss | 53 ------ .../search/Suggestions/Suggestions.tsx | 38 ---- .../SuggestionsTopSearch.stories.tsx | 68 ------- .../Suggestions/SuggestionsTopSearch.tsx | 69 ------- src/components/search/Suggestions/index.ts | 4 - .../search/Suggestions/suggestions.scss | 70 ------- src/components/search/search.module.scss | 96 ++++++++++ src/components/search/searchMock.ts | 47 +++++ .../Suggestions/Suggestions.stories.tsx | 80 -------- src/components/ui/Search/Suggestions/index.ts | 2 - src/styles/global/storybook-components.scss | 5 +- src/styles/pages/layout.scss | 5 +- 43 files changed, 1069 insertions(+), 504 deletions(-) create mode 100644 .storybook/mocks/searchHistory.ts create mode 100644 .storybook/mocks/searchTerms.ts delete mode 100644 src/components/common/SearchInput/index.tsx delete mode 100644 src/components/search/History/SearchHistory.stories.tsx create mode 100644 src/components/search/Search.stories.mdx create mode 100644 src/components/search/SearchDropdown/SearchDropdown.stories.mdx create mode 100644 src/components/search/SearchDropdown/SearchDropdown.tsx create mode 100644 src/components/search/SearchDropdown/index.ts create mode 100644 src/components/search/SearchHistory/SearchHistory.stories.mdx rename src/components/search/{History => SearchHistory}/SearchHistory.tsx (66%) rename src/components/search/{History => SearchHistory}/index.tsx (100%) create mode 100644 src/components/search/SearchInput/SearchInput.stories.mdx rename src/components/{common => search}/SearchInput/SearchInput.tsx (76%) create mode 100644 src/components/search/SearchInput/index.tsx rename src/components/{common => search}/SearchInput/search-input.scss (96%) rename src/components/search/{SuggestionProductCard/SuggestionProductCard.stories.mdx => SearchProductCard/SearchProductCard.stories.mdx} (73%) rename src/components/search/{SuggestionProductCard/SuggestionProductCard.tsx => SearchProductCard/SearchProductCard.tsx} (72%) create mode 100644 src/components/search/SearchProductCard/index.ts create mode 100644 src/components/search/SearchProductCard/search-product-card.module.scss create mode 100644 src/components/search/SearchSharedTokenTable.mdx create mode 100644 src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx rename src/components/{ui/Search/Suggestions/Suggestions.tsx => search/SearchSuggestions/SearchSuggestions.tsx} (72%) create mode 100644 src/components/search/SearchSuggestions/index.ts create mode 100644 src/components/search/SearchTop/SearchTop.stories.mdx create mode 100644 src/components/search/SearchTop/SearchTop.tsx create mode 100644 src/components/search/SearchTop/index.ts delete mode 100644 src/components/search/SuggestionProductCard/index.ts delete mode 100644 src/components/search/SuggestionProductCard/suggestion-product-card.module.scss delete mode 100644 src/components/search/Suggestions/Suggestions.tsx delete mode 100644 src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx delete mode 100644 src/components/search/Suggestions/SuggestionsTopSearch.tsx delete mode 100644 src/components/search/Suggestions/index.ts delete mode 100644 src/components/search/Suggestions/suggestions.scss create mode 100644 src/components/search/search.module.scss create mode 100644 src/components/search/searchMock.ts delete mode 100644 src/components/ui/Search/Suggestions/Suggestions.stories.tsx delete mode 100644 src/components/ui/Search/Suggestions/index.ts diff --git a/.storybook/components/SectionItem.tsx b/.storybook/components/SectionItem.tsx index 6ead00e0..5abfc96e 100644 --- a/.storybook/components/SectionItem.tsx +++ b/.storybook/components/SectionItem.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, ReactNode } from 'react' +import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react' import ButtonLink from '../../src/components/ui/Button/ButtonLink' import Icon from '../../src/components/ui/Icon' @@ -7,6 +7,7 @@ type SectionItemProps = { title: string description: string | ReactNode actionPath?: string + containerStyle?: CSSProperties } const SectionItem = ({ @@ -14,10 +15,14 @@ const SectionItem = ({ description, children, actionPath, + containerStyle, + ...otherProps }: PropsWithChildren) => { return ( -
  • -
    {children}
    +
  • +
    + {children} +

    {title}

    {description}

    diff --git a/.storybook/mocks/index.ts b/.storybook/mocks/index.ts index f5e58d01..0e22f269 100644 --- a/.storybook/mocks/index.ts +++ b/.storybook/mocks/index.ts @@ -1,2 +1,4 @@ export { product } from './product' export { productGridItems } from './productGridItems' +export { searchTerms } from './searchTerms' +export { searchHistory } from './searchHistory' diff --git a/.storybook/mocks/searchHistory.ts b/.storybook/mocks/searchHistory.ts new file mode 100644 index 00000000..0f1ce4f6 --- /dev/null +++ b/.storybook/mocks/searchHistory.ts @@ -0,0 +1,6 @@ +export const searchHistory = [ + { term: 'headphone', path: '/' }, + { term: 'audio & video', path: '/' }, + { term: 'mh-7000', path: '/' }, + { term: 'jbl go', path: '/' }, +] diff --git a/.storybook/mocks/searchTerms.ts b/.storybook/mocks/searchTerms.ts new file mode 100644 index 00000000..d33c1845 --- /dev/null +++ b/.storybook/mocks/searchTerms.ts @@ -0,0 +1,5 @@ +export const searchTerms = [ + { value: 'Notebooks', count: 3 }, + { value: 'Laser Printer', count: 2 }, + { value: 'Bluetooth Keyboard', count: 1 }, +] diff --git a/CHANGELOG.md b/CHANGELOG.md index 331e89ba..b0f26643 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Applies new local tokens to `SearchHistory`, `SearchTop`, `SearchDropdown` and `SearchSuggestions` ([#150](https://github.com/vtex-sites/gatsby.store/pull/150)) - Applies CSS Modules to `Incentives` ([#147](https://github.com/vtex-sites/gatsby.store/pull/147)) - Applies new local tokens to `Footer` ([#147](https://github.com/vtex-sites/gatsby.store/pull/147)) - Applies new local tokens to `Breadcrumb` ([#146](https://github.com/vtex-sites/gatsby.store/pull/146)) @@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Renames and refactors the components of Search feature ([#150](https://github.com/vtex-sites/gatsby.store/pull/150)) - A flaky PLP infinite scroll test to be more stable ([#149](https://github.com/vtex-sites/gatsby.store/pull/149)) - Cypress version from 6.6.0 to 9.5.4 to match WebOps' ([#148](https://github.com/vtex-sites/gatsby.store/pull/148)) - Updates `IncentivesFooter` content ([#147](https://github.com/vtex-sites/gatsby.store/pull/147)) diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx index 5d69b2b0..e79973e1 100644 --- a/src/components/common/Navbar/Navbar.tsx +++ b/src/components/common/Navbar/Navbar.tsx @@ -1,7 +1,7 @@ import type { SearchInputRef } from '@faststore/ui' import { Suspense, useRef, useState } from 'react' import CartToggle from 'src/components/cart/CartToggle' -import SearchInput from 'src/components/common/SearchInput' +import SearchInput from 'src/components/search/SearchInput' import { ButtonIcon, ButtonSignIn, diff --git a/src/components/common/SearchInput/index.tsx b/src/components/common/SearchInput/index.tsx deleted file mode 100644 index 5c19d6eb..00000000 --- a/src/components/common/SearchInput/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SearchInput' diff --git a/src/components/search/History/SearchHistory.stories.tsx b/src/components/search/History/SearchHistory.stories.tsx deleted file mode 100644 index d11d88c4..00000000 --- a/src/components/search/History/SearchHistory.stories.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { SearchInputProvider } from 'src/sdk/search/useSearchInput' - -import { SearchHistory } from '.' -import type { SearchHistoryProps } from '.' - -export default { - component: SearchHistory, - title: 'Features/Search/History', -} - -const Template = (props: SearchHistoryProps) => { - return ( -
    - - - -
    - ) -} - -export const Default = Template.bind({}) - -Default.args = { - history: ['headphone', 'audio & video', 'mh-7000', 'jbl go'], -} - -Default.parameters = { - backgrounds: { default: 'dark' }, -} diff --git a/src/components/search/Search.stories.mdx b/src/components/search/Search.stories.mdx new file mode 100644 index 00000000..93b5d1b4 --- /dev/null +++ b/src/components/search/Search.stories.mdx @@ -0,0 +1,180 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { + SectionList, + SectionItem, + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' +import { SearchInputProvider } from 'src/sdk/search/useSearchInput' +import { rest } from 'msw' +import { SessionProvider } from '@faststore/sdk' +import SearchDropdown from './SearchDropdown' +import SearchInput from './SearchInput' +import SearchProductCard from './SearchProductCard' +import SearchSuggestions from './SearchSuggestions' +import { SearchTop } from './SearchTop' +import { SearchHistory } from './SearchHistory' +import { product, searchTerms, searchHistory } from 'src/../.storybook/mocks' +import { msw, products } from'./searchMock.ts' +import SearchSharedTokenTable from'./SearchSharedTokenTable.mdx' +import { LocationProvider } from '@reach/router' + + + +export const Template = (props) => ( +
    + + + +
    +) + + +
    + +# Search + +This feature permits customers to find their search easier. + +
    + +## Overview + +This Search feature is based on Autocomplete. +Autocomplete is the functionality that displays previous search results based on current and previous searches. These results are presented in four +different lists, which can be together or separated, depending on the customer's interaction. The existing sections are: + +- Last searches performed; + +- Search suggestion; + +- Product suggestion; + +- Most searched terms. + +To know more, visit [Autocomplete in VTEX Intelligent Search](https://help.vtex.com/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/4gXFsEWjF7QF7UtI2GAvhL). + +--- + +## Usage + +You can add your `` whenever it's needed. + +It's suggested to add it on `Navbar`. + +```jsx +import SearchInput from 'src/components/search/SearchInput' +``` + + + + {Template.bind({})} + + + + + +--- + +## Components + + + + + + Displays a set of navigation links that self-adapts on mobile{' '} + or desktop screens. + + } + containerStyle={{ overflowY: "scroll", alignItems: "flex-start" }} + > + + + + Card to show details of the product and suggestions in SearchDropdown. + + } + > + + + + This section displays the most searched terms by customers. + + } + > + + + + + + Responsible for showing the latest terms searched by the user. + + } + > + + + + Combine SearchHistory, SearchTop, and SearchSuggestions to show all options in SearchInput. + + } + containerStyle={{ display: "flex", flexDirection: "column", overflowY: "scroll", justifyContent: "start" }} + > + + + + Responsible to receive, search and display suggestions. + + } + containerStyle={{ overflowY: "scroll" }} + > + + + + + + diff --git a/src/components/search/SearchDropdown/SearchDropdown.stories.mdx b/src/components/search/SearchDropdown/SearchDropdown.stories.mdx new file mode 100644 index 00000000..4bd0079c --- /dev/null +++ b/src/components/search/SearchDropdown/SearchDropdown.stories.mdx @@ -0,0 +1,69 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { SessionProvider } from '@faststore/sdk' +import { rest } from 'msw' + +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' +import { productGridItems, searchTerms, searchHistory } from 'src/../.storybook/mocks' +import { SearchInputProvider } from 'src/sdk/search/useSearchInput' +import { msw, products } from'../searchMock' + +import SearchDropdown from '.' + + + +export const Template = (args) => ( +
    + + + + + +
    +) + +
    + +# Search Dropdown + +Combine [SearchHistory](?path=/docs/features-search-searchhistory--default-story), +[SearchTop](?path=/docs/features-search-searchtop--default-story) and +[SearchSuggestions](?path=/docs/features-search-searchsuggestions--default-story) +to show all options in [SearchInput](?path=/docs/features-search-searchinput--default-story). + +
    + +## Usage + +`import SearchDropdown from 'src/components/search/SearchDropdown'` + + + + {Template.bind({})} + + + + diff --git a/src/components/search/SearchDropdown/SearchDropdown.tsx b/src/components/search/SearchDropdown/SearchDropdown.tsx new file mode 100644 index 00000000..ca5aca81 --- /dev/null +++ b/src/components/search/SearchDropdown/SearchDropdown.tsx @@ -0,0 +1,46 @@ +import type { SearchSuggestionsProps } from 'src/components/search/SearchSuggestions' +import SearchSuggestions from 'src/components/search/SearchSuggestions' +import useSuggestions from 'src/sdk/search/useSuggestions' + +import type { SearchHistoryProps } from '../SearchHistory' +import { SearchHistory } from '../SearchHistory' +import { SearchTop } from '../SearchTop' + +export type SearchDropdownProps = SearchHistoryProps & SearchSuggestionsProps + +function SearchDropdown({ + term = '', + history, + style, + ...otherProps +}: SearchDropdownProps) { + const { terms, products, isLoading } = useSuggestions(term) + + if (term.length === 0 && !isLoading) { + return ( + <> + + + + ) + } + + if (isLoading) { + return

    Loading...

    + } + + if (terms.length === 0 && products.length === 0) { + return null + } + + return ( + + ) +} + +export default SearchDropdown diff --git a/src/components/search/SearchDropdown/index.ts b/src/components/search/SearchDropdown/index.ts new file mode 100644 index 00000000..5cb662d4 --- /dev/null +++ b/src/components/search/SearchDropdown/index.ts @@ -0,0 +1,2 @@ +export { default } from './SearchDropdown' +export type { SearchDropdownProps } from './SearchDropdown' diff --git a/src/components/search/SearchHistory/SearchHistory.stories.mdx b/src/components/search/SearchHistory/SearchHistory.stories.mdx new file mode 100644 index 00000000..6f9ced75 --- /dev/null +++ b/src/components/search/SearchHistory/SearchHistory.stories.mdx @@ -0,0 +1,62 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' + +import { SearchInputProvider } from 'src/sdk/search/useSearchInput' +import Button from 'src/components/ui/Button' + +import { SearchHistory } from '.' +import { searchHistory } from 'src/../.storybook/mocks' + + + +export const Template = (args) => { + return ( +
    + + + +
    + ) +} + +
    + +# Search History + +Responsible for showing the latest terms searched by the user. + +
    + +## Usage + +`import { SearchHistory } from 'src/components/search/SearchHistory` + + + + {Template.bind({})} + + + + diff --git a/src/components/search/History/SearchHistory.tsx b/src/components/search/SearchHistory/SearchHistory.tsx similarity index 66% rename from src/components/search/History/SearchHistory.tsx rename to src/components/search/SearchHistory/SearchHistory.tsx index f8e2208a..3c63550b 100644 --- a/src/components/search/History/SearchHistory.tsx +++ b/src/components/search/SearchHistory/SearchHistory.tsx @@ -6,30 +6,38 @@ import useSearchHistory from 'src/sdk/search/useSearchHistory' import useSearchInput from 'src/sdk/search/useSearchInput' import type { History } from 'src/sdk/search/useSearchHistory' +import styles from '../search.module.scss' + export interface SearchHistoryProps { + /** + * Array with history options. + */ history?: History[] } -const SearchHistory = ({ history = [] }: SearchHistoryProps) => { +const SearchHistory = ({ history = [], ...otherProps }: SearchHistoryProps) => { const { onSearchInputSelection } = useSearchInput() const { searchHistory, clearSearchHistory } = useSearchHistory(history) - if (!searchHistory.length) { + const historyMap = searchHistory.length ? searchHistory : history + + if (!historyMap.length) { return null } return ( -
    -
    -

    History

    +
    +
    +

    History

    - {searchHistory.map((item) => ( -
  • + {historyMap.map((item) => ( +
  • onSearchInputSelection?.(item.term, item.path)} @@ -38,7 +46,7 @@ const SearchHistory = ({ history = [] }: SearchHistoryProps) => { name="Clock" width={18} height={18} - data-fs-search-suggestion-item-icon + data-fs-search-item-icon /> {item.term} diff --git a/src/components/search/History/index.tsx b/src/components/search/SearchHistory/index.tsx similarity index 100% rename from src/components/search/History/index.tsx rename to src/components/search/SearchHistory/index.tsx diff --git a/src/components/search/SearchInput/SearchInput.stories.mdx b/src/components/search/SearchInput/SearchInput.stories.mdx new file mode 100644 index 00000000..f6522966 --- /dev/null +++ b/src/components/search/SearchInput/SearchInput.stories.mdx @@ -0,0 +1,63 @@ +import { SessionProvider } from '@faststore/sdk' +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { rest } from 'msw' + +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' +import { productGridItems, searchTerms } from 'src/../.storybook/mocks' +import { msw, products } from'../searchMock' + +import SearchInput from './SearchInput' + + + +export const Template = (props) => ( +
    + + + +
    +) + +
    + +# Search Input + +Responsible to receive, search and display suggestions. + +
    + +## Usage + +`import SearchInput from 'src/components/search/SearchInput'` + + + + {Template.bind({})} + + + + diff --git a/src/components/common/SearchInput/SearchInput.tsx b/src/components/search/SearchInput/SearchInput.tsx similarity index 76% rename from src/components/common/SearchInput/SearchInput.tsx rename to src/components/search/SearchInput/SearchInput.tsx index 66850b3f..3feee415 100644 --- a/src/components/common/SearchInput/SearchInput.tsx +++ b/src/components/search/SearchInput/SearchInput.tsx @@ -1,6 +1,7 @@ import { sendAnalyticsEvent } from '@faststore/sdk' import { SearchInput as UISearchInput } from '@faststore/ui' import { navigate } from 'gatsby' +import type { CSSProperties } from 'react' import { forwardRef, lazy, @@ -9,6 +10,11 @@ import { useState, useDeferredValue, } from 'react' +import type { SearchEvent } from '@faststore/sdk' +import type { + SearchInputProps as UISearchInputProps, + SearchInputRef, +} from '@faststore/ui' import Icon from 'src/components/ui/Icon' import useSearchHistory from 'src/sdk/search/useSearchHistory' import { @@ -17,17 +23,15 @@ import { } from 'src/sdk/search/useSearchInput' import type { SearchInputContextValue } from 'src/sdk/search/useSearchInput' import useOnClickOutside from 'src/sdk/ui/useOnClickOutside' -import type { SearchEvent } from '@faststore/sdk' -import type { - SearchInputProps as UISearchInputProps, - SearchInputRef, -} from '@faststore/ui' -const Suggestions = lazy(() => import('src/components/search/Suggestions')) +const SearchDropdown = lazy( + () => import('src/components/search/SearchDropdown') +) -declare type SearchInputProps = { +export type SearchInputProps = { onSearchClick?: () => void buttonTestId?: string + containerStyle?: CSSProperties } & Omit const sendAnalytics = async (term: string) => { @@ -39,12 +43,17 @@ const sendAnalytics = async (term: string) => { const SearchInput = forwardRef( function SearchInput( - { onSearchClick, buttonTestId = 'store-search-button', ...props }, + { + onSearchClick, + buttonTestId = 'store-search-button', + containerStyle, + ...otherProps + }, ref ) { const [searchQuery, setSearchQuery] = useState('') const searchQueryDeferred = useDeferredValue(searchQuery) - const [suggestionsOpen, setSuggestionsOpen] = useState(false) + const [searchDropdownOpen, setSearchDropdownOpen] = useState(false) const searchRef = useRef(null) const { addToSearchHistory } = useSearchHistory() @@ -52,17 +61,18 @@ const SearchInput = forwardRef( (term, path) => { addToSearchHistory({ term, path }) sendAnalytics(term) - setSuggestionsOpen(false) + setSearchDropdownOpen(false) setSearchQuery(term) } - useOnClickOutside(searchRef, () => setSuggestionsOpen(false)) + useOnClickOutside(searchRef, () => setSearchDropdownOpen(false)) return (
    ( onSearchInputSelection(term, path) navigate(path) }} - onFocus={() => setSuggestionsOpen(true)} + onFocus={() => setSearchDropdownOpen(true)} value={searchQuery} - {...props} + {...otherProps} /> - {suggestionsOpen && ( + {searchDropdownOpen && (
    - +
    )} diff --git a/src/components/search/SearchInput/index.tsx b/src/components/search/SearchInput/index.tsx new file mode 100644 index 00000000..2cbb4d21 --- /dev/null +++ b/src/components/search/SearchInput/index.tsx @@ -0,0 +1,2 @@ +export { default } from './SearchInput' +export type { SearchInputProps } from './SearchInput' diff --git a/src/components/common/SearchInput/search-input.scss b/src/components/search/SearchInput/search-input.scss similarity index 96% rename from src/components/common/SearchInput/search-input.scss rename to src/components/search/SearchInput/search-input.scss index 883d4630..fcb0bbe3 100644 --- a/src/components/common/SearchInput/search-input.scss +++ b/src/components/search/SearchInput/search-input.scss @@ -11,6 +11,7 @@ [data-store-input] { width: 100%; padding: var(--fs-spacing-1) var(--fs-spacing-7) var(--fs-spacing-1) var(--fs-spacing-2); + background-color: var(--fs-color-body-bkg); border: var(--fs-border-width) solid var(--fs-border-color); border-radius: var(--fs-border-radius); transition: box-shadow .2s ease, border .2s ease; @@ -65,10 +66,6 @@ [data-store-search-input-wrapper] { position: relative; - - [data-fs-search-suggestion-section] + [data-fs-search-input-loading-text] { - padding-top: var(--fs-spacing-3); - } } [data-store-search-input-dropdown-wrapper] { @@ -92,6 +89,7 @@ z-index: 1; width: 100vw; padding: var(--fs-spacing-3); + padding-top: 0; background-color: var(--fs-color-neutral-0); &:empty { @@ -113,4 +111,8 @@ border-radius: 0 0 var(--fs-border-radius) var(--fs-border-radius); box-shadow: var(--fs-shadow); } + + [data-fs-search-input-loading-text] { + padding-top: var(--fs-spacing-3); + } } diff --git a/src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx b/src/components/search/SearchProductCard/SearchProductCard.stories.mdx similarity index 73% rename from src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx rename to src/components/search/SearchProductCard/SearchProductCard.stories.mdx index 16f38aa4..c374fdce 100644 --- a/src/components/search/SuggestionProductCard/SuggestionProductCard.stories.mdx +++ b/src/components/search/SearchProductCard/SearchProductCard.stories.mdx @@ -1,7 +1,7 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs' import { SearchInputProvider } from 'src/sdk/search/useSearchInput' -import { SessionProvider } from '@faststore/sdk' import { LocationProvider } from '@reach/router' +import { SessionProvider } from '@faststore/sdk' import storeConfig from 'store.config' import { TokenTable, @@ -10,11 +10,11 @@ import { } from 'src/../.storybook/components' import { product } from 'src/../.storybook/mocks' -import SuggestionProductCard from '.' +import SearchProductCard from '.' ( - + @@ -33,27 +33,27 @@ export const Template = (args) => (
    -# Suggestion Product Card +# Search Product Card -Card to show details of the product and suggest in search dropdown. +Card to show details of the product and suggest in `SearchDropdown`.
    ## Overview -The `SuggestionProductCard` differs from `ProductCard` because it is used in the `Search` feature and is called by the `Suggestion` component. +The `SearchProductCard` differs from `ProductCard` because it is used in the `Search` feature and is called by the `SearchSuggestions` component. --- ## Usage -`import SuggestionProductCard from '../components/search/SuggestionProductCard'` +`import SearchProductCard from 'src/components/search/SearchProductCard'` - {Template.bind({})} + {Template.bind({})} - + ## Nested Elements diff --git a/src/components/search/SuggestionProductCard/SuggestionProductCard.tsx b/src/components/search/SearchProductCard/SearchProductCard.tsx similarity index 72% rename from src/components/search/SuggestionProductCard/SuggestionProductCard.tsx rename to src/components/search/SearchProductCard/SearchProductCard.tsx index 1e229090..9789a371 100644 --- a/src/components/search/SuggestionProductCard/SuggestionProductCard.tsx +++ b/src/components/search/SearchProductCard/SearchProductCard.tsx @@ -7,11 +7,11 @@ import { useProductLink } from 'src/sdk/product/useProductLink' import useSearchInput from 'src/sdk/search/useSearchInput' import type { ProductSummary_ProductFragment } from '@generated/graphql' -import styles from './suggestion-product-card.module.scss' +import styles from './search-product-card.module.scss' -type SuggestionProductCardProps = { +type SearchProductCardProps = { /** - * Product to be showed in `SuggestionProductCard`. + * Product to be showed in `SearchProductCard`. */ product: ProductSummary_ProductFragment /** @@ -20,7 +20,11 @@ type SuggestionProductCardProps = { index: number } -function SuggestionProductCard({ product, index }: SuggestionProductCardProps) { +function SearchProductCard({ + product, + index, + ...otherProps +}: SearchProductCardProps) { const { onSearchInputSelection } = useSearchInput() const { onClick, href, ...linkProps } = useProductLink({ product, @@ -39,12 +43,14 @@ function SuggestionProductCard({ product, index }: SuggestionProductCardProps) { return ( - - + + {img.alternateName} -
    -

    +

    +

    {name}

    - + + + + +### Title + + + + + +### Section + + + + + +### Link + + + + + + +### Item + + + + + + +### Icon + + + + + +### Badge + + + diff --git a/src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx b/src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx new file mode 100644 index 00000000..a480b1fa --- /dev/null +++ b/src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx @@ -0,0 +1,67 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { SessionProvider } from '@faststore/sdk' +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' +import { SearchInputProvider } from 'src/sdk/search/useSearchInput' +import { productGridItems, searchTerms } from 'src/../.storybook/mocks' +import { products } from'../searchMock' +import { LocationProvider } from '@reach/router' + +import SearchSuggestions from '.' + + + +export const Template = (args) => ( +
    + + + + + + + +
    +) + +
    + +# SearchSuggestions + +Displays a set of navigation links that self-adapts on mobile or desktop screens. + +
    + +## Usage + +`import SearchSuggestions from 'src/components/search/SearchSuggestions'` + + + + {Template.bind({})} + + + + diff --git a/src/components/ui/Search/Suggestions/Suggestions.tsx b/src/components/search/SearchSuggestions/SearchSuggestions.tsx similarity index 72% rename from src/components/ui/Search/Suggestions/Suggestions.tsx rename to src/components/search/SearchSuggestions/SearchSuggestions.tsx index 347af0a5..9d12b438 100644 --- a/src/components/ui/Search/Suggestions/Suggestions.tsx +++ b/src/components/search/SearchSuggestions/SearchSuggestions.tsx @@ -1,11 +1,13 @@ import { List as UIList } from '@faststore/ui' +import type { HTMLAttributes } from 'react' import { Fragment } from 'react' -import SuggestionProductCard from 'src/components/search/SuggestionProductCard' +import SearchProductCard from 'src/components/search/SearchProductCard' import Icon from 'src/components/ui/Icon' import Link from 'src/components/ui/Link' import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput' import type { ProductSummary_ProductFragment } from '@generated/graphql' -import type { HTMLAttributes } from 'react' + +import styles from '../search.module.scss' function formatSearchTerm( indexSubstring: number, @@ -36,7 +38,7 @@ function handleSuggestions(suggestion: string, searchTerm: string) { {suggestionSubstring.map((substring, indexSubstring) => ( {substring.length > 0 && ( - + {indexSubstring === 0 ? substring.charAt(0).toUpperCase() + substring.slice(1) : substring} @@ -50,35 +52,47 @@ function handleSuggestions(suggestion: string, searchTerm: string) { ) } -export interface SuggestionsProps extends HTMLAttributes { +export interface SearchSuggestionsProps extends HTMLAttributes { /** * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). */ testId?: string /** - * Search term + * Term researched. */ term?: string + /** + * Suggestion terms. + */ terms?: Array<{ value: string }> + /** + * Array with top search terms. + */ products?: ProductSummary_ProductFragment[] } -function Suggestions({ +function SearchSuggestions({ testId = 'suggestions', term = '', terms = [], products = [], ...otherProps -}: SuggestionsProps) { +}: SearchSuggestionsProps) { const { onSearchInputSelection } = useSearchInput() return ( -
    +
    {terms.length > 0 && ( - + {terms?.map(({ value: suggestion }) => ( -
  • +
  • { onSearchInputSelection?.( @@ -91,7 +105,7 @@ function Suggestions({ name="MagnifyingGlass" width={18} height={18} - data-fs-search-suggestion-item-icon + data-fs-search-item-icon /> {handleSuggestions(suggestion, term)} @@ -101,12 +115,14 @@ function Suggestions({ )} {products.length > 0 && ( -
    -

    Suggested Products

    +
    +
    +

    Suggested Products

    +
    {products.map((product, index) => ( -
  • - +
  • +
    • ))}     @@ -116,4 +132,4 @@ function Suggestions({ ) } -export default Suggestions +export default SearchSuggestions diff --git a/src/components/search/SearchSuggestions/index.ts b/src/components/search/SearchSuggestions/index.ts new file mode 100644 index 00000000..9c2e79be --- /dev/null +++ b/src/components/search/SearchSuggestions/index.ts @@ -0,0 +1,2 @@ +export { default } from './SearchSuggestions' +export type { SearchSuggestionsProps } from './SearchSuggestions' diff --git a/src/components/search/SearchTop/SearchTop.stories.mdx b/src/components/search/SearchTop/SearchTop.stories.mdx new file mode 100644 index 00000000..3306f362 --- /dev/null +++ b/src/components/search/SearchTop/SearchTop.stories.mdx @@ -0,0 +1,64 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' +import { SessionProvider } from '@faststore/sdk' +import { rest } from 'msw' + +import { SearchInputProvider } from 'src/sdk/search/useSearchInput' +import { searchTerms } from 'src/../.storybook/mocks' + +import SearchTop from './SearchTop' +import { msw } from'../searchMock' + + + +export const Template = (args) => ( +
    + + + + + +
    +) + +
    + +# Search Top + +This section displays the most searched terms by customers. + +
    + +## Usage + +`import SearchTop from 'src/components/search/SearchTop'` + + + + {Template.bind({})} + + + + diff --git a/src/components/search/SearchTop/SearchTop.tsx b/src/components/search/SearchTop/SearchTop.tsx new file mode 100644 index 00000000..a79f95e9 --- /dev/null +++ b/src/components/search/SearchTop/SearchTop.tsx @@ -0,0 +1,77 @@ +import { List as UIList } from '@faststore/ui' +import { forwardRef } from 'react' +import type { HTMLAttributes } from 'react' +import { Badge } from 'src/components/ui/Badge' +import Link from 'src/components/ui/Link' +import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput' +import useTopSearch from 'src/sdk/search/useTopSearch' +import type { StoreSuggestionTerm } from '@generated/graphql' + +import styles from '../search.module.scss' + +export interface SearchTopProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ + testId?: string + /** + * List of top searched items + */ + topTerms?: StoreSuggestionTerm[] +} + +const SearchTop = forwardRef(function SearchTop( + { testId = 'top-search', topTerms, ...otherProps }, + ref +) { + const { onSearchInputSelection } = useSearchInput() + const { terms, isLoading } = useTopSearch(topTerms) + + if (terms.length === 0) { + return null + } + + return ( +
    + {isLoading ? ( +

    Loading...

    + ) : ( + <> +
    +

    Top Search

    +
    + + {terms.map((term, index) => ( +
  • + + onSearchInputSelection?.( + term.value, + formatSearchPath(term.value) + ) + } + > + + {index + 1} + + {term.value} + +
    • + ))} +     + + )} +
    + ) +}) + +export default SearchTop diff --git a/src/components/search/SearchTop/index.ts b/src/components/search/SearchTop/index.ts new file mode 100644 index 00000000..63f7ba26 --- /dev/null +++ b/src/components/search/SearchTop/index.ts @@ -0,0 +1,2 @@ +export { default as SearchTop } from './SearchTop' +export type { SearchTopProps } from './SearchTop' diff --git a/src/components/search/SuggestionProductCard/index.ts b/src/components/search/SuggestionProductCard/index.ts deleted file mode 100644 index ef2484c9..00000000 --- a/src/components/search/SuggestionProductCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SuggestionProductCard' diff --git a/src/components/search/SuggestionProductCard/suggestion-product-card.module.scss b/src/components/search/SuggestionProductCard/suggestion-product-card.module.scss deleted file mode 100644 index a9318d42..00000000 --- a/src/components/search/SuggestionProductCard/suggestion-product-card.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@import "src/styles/scaffold"; - -.fs-suggestion-product-card { - // -------------------------------------------------------- - // Design Tokens for Suggestion Product Card - // -------------------------------------------------------- - - // Suggestion Product Card Link - --fs-suggestion-product-card-link-padding : var(--fs-spacing-1) var(--fs-spacing-3); - - // Suggestion Product Card Image - --fs-suggestion-product-card-image-border-radius : var(--fs-border-radius); - --fs-suggestion-product-card-image-margin-right : var(--fs-spacing-3); - --fs-suggestion-product-card-image-height : 3.5rem; - - // Suggestion Product Card Title - --fs-suggestion-product-card-title-margin-bottom : var(--fs-spacing-0); - --fs-suggestion-product-card-title-line-height : 1.2; - --fs-suggestion-product-card-title-color : var(--fs-color-text); - - [data-fs-suggestion-product-card-image] { - display: flex; - height: var(--fs-suggestion-product-card-image-height); - margin-right: var(--fs-suggestion-product-card-image-margin-right); - overflow: hidden; - border-radius: var(--fs-suggestion-product-card-image-border-radius); - } - - [data-fs-suggestion-product-card-content] { - display: flex; - align-items: center; - } - - [data-fs-suggestion-product-card-title] { - margin-bottom: var(--fs-suggestion-product-card-title-margin-bottom); - line-height: var(--fs-suggestion-product-card-title-line-height); - color: var(--fs-suggestion-product-card-title-color); - text-decoration: none; - outline: none; - - @include truncate-title; - } - - [data-fs-suggestion-product-card-prices] { - display: flex; - align-items: baseline; - } - - [data-fs-link] { - padding: var(--fs-suggestion-product-card-link-padding); - text-decoration: none; - } -} diff --git a/src/components/search/Suggestions/Suggestions.tsx b/src/components/search/Suggestions/Suggestions.tsx deleted file mode 100644 index 9f295616..00000000 --- a/src/components/search/Suggestions/Suggestions.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import UISuggestions from 'src/components/ui/Search/Suggestions' -import useSuggestions from 'src/sdk/search/useSuggestions' -import type { SuggestionsProps } from 'src/components/ui/Search/Suggestions' - -import { SearchHistory } from '../History' -import SuggestionsTopSearch from './SuggestionsTopSearch' - -function Suggestions({ term = '', ...otherProps }: SuggestionsProps) { - const { terms, products, isLoading } = useSuggestions(term) - - if (term.length === 0 && !isLoading) { - return ( - <> - - - - ) - } - - if (isLoading) { - return

    Loading...

    - } - - if (terms.length === 0 && products.length === 0) { - return null - } - - return ( - - ) -} - -export default Suggestions diff --git a/src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx b/src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx deleted file mode 100644 index bfcdcccd..00000000 --- a/src/components/search/Suggestions/SuggestionsTopSearch.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { SearchInputProvider } from 'src/sdk/search/useSearchInput' -import { SessionProvider } from '@faststore/sdk' -import { rest } from 'msw' - -import { SuggestionsTopSearch } from '.' -import type { SuggestionsTopSearchProps } from '.' - -export default { - component: SuggestionsTopSearch, - title: 'Features/Search/TopSearch', -} - -const Template = (props: SuggestionsTopSearchProps) => ( -
    - - - - - -
    -) - -export const Default = Template.bind({}) - -Default.args = { - topTerms: [ - { value: 'Office Supplies', count: 5 }, - { value: 'Headphones', count: 4 }, - { value: 'Notebooks', count: 3 }, - { value: 'Laser Printer', count: 2 }, - { value: 'Bluetooth Keyboard', count: 1 }, - ], -} - -Default.parameters = { - backgrounds: { default: 'dark' }, - msw: { - handlers: [ - rest.get('/api/graphql', (_, res, ctx) => { - return res( - ctx.json({ - data: { - search: { - suggestions: { - terms: [ - { - value: 'Option 1', - }, - { - value: 'Option 2', - }, - ], - }, - }, - }, - }) - ) - }), - ], - }, -} diff --git a/src/components/search/Suggestions/SuggestionsTopSearch.tsx b/src/components/search/Suggestions/SuggestionsTopSearch.tsx deleted file mode 100644 index be855418..00000000 --- a/src/components/search/Suggestions/SuggestionsTopSearch.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { List as UIList } from '@faststore/ui' -import { forwardRef } from 'react' -import { Badge } from 'src/components/ui/Badge' -import Link from 'src/components/ui/Link' -import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput' -import useTopSearch from 'src/sdk/search/useTopSearch' -import type { HTMLAttributes } from 'react' -import type { StoreSuggestionTerm } from '@generated/graphql' - -export interface SuggestionsTopSearchProps - extends HTMLAttributes { - /** - * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). - */ - testId?: string - /** - * List of top searched items - */ - topTerms?: StoreSuggestionTerm[] -} - -const SuggestionsTopSearch = forwardRef< - HTMLDivElement, - SuggestionsTopSearchProps ->(function SuggestionsTopSearch( - { testId = 'top-search', topTerms, ...otherProps }, - ref -) { - const { onSearchInputSelection } = useSearchInput() - const { terms, isLoading } = useTopSearch(topTerms) - - if (isLoading) { - return

    Loading...

    - } - - return ( -
    -
    -

    Top Search

    -
    - - {terms.map((term, index) => ( -
  • - - onSearchInputSelection?.( - term.value, - formatSearchPath(term.value) - ) - } - > - {index + 1} - {term.value} - -
    • - ))} -     -
    - ) -}) - -export default SuggestionsTopSearch diff --git a/src/components/search/Suggestions/index.ts b/src/components/search/Suggestions/index.ts deleted file mode 100644 index 91b744b9..00000000 --- a/src/components/search/Suggestions/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as SuggestionsTopSearch } from './SuggestionsTopSearch' -export type { SuggestionsTopSearchProps } from './SuggestionsTopSearch' - -export { default } from './Suggestions' diff --git a/src/components/search/Suggestions/suggestions.scss b/src/components/search/Suggestions/suggestions.scss deleted file mode 100644 index 42519a83..00000000 --- a/src/components/search/Suggestions/suggestions.scss +++ /dev/null @@ -1,70 +0,0 @@ -@import "src/styles/scaffold"; - -[data-fs-search-suggestion-header] { - display: flex; - align-items: center; - justify-content: space-between; - min-height: var(--fs-spacing-7); -} - -[data-fs-search-suggestion-title] { - font-size: var(--fs-text-size-3); - line-height: 1.5; -} - -[data-fs-search-suggestion-title="small"] { - margin-bottom: var(--fs-spacing-1); - font-size: var(--fs-text-size-2); - color: var(--fs-color-neutral-6); -} - -[data-fs-search-suggestion-section] { - padding: var(--fs-spacing-1) 0; - background-color: var(--fs-color-neutral-0); - - &:not(:last-child) { - border-bottom: var(--fs-border-width) solid var(--fs-border-color-light); - } -} - -[data-fs-search-suggestion-section="terms"] { - [data-fs-link] { - color: var(--fs-color-text-light); - } -} - -[data-fs-search-suggestion-item] { - margin-right: calc(-1 * var(--fs-spacing-3)); - margin-left: calc(-1 * var(--fs-spacing-3)); - font-size: var(--fs-text-size-2); - line-height: 1.25; - - &:hover { - background-color: var(--fs-color-main-0); - } - - [data-fs-link] { - display: flex; - align-items: center; - justify-content: flex-start; - width: 100%; - padding-right: var(--fs-spacing-3); - padding-left: var(--fs-spacing-3); - } - - [data-store-badge], - [data-fs-search-suggestion-item-icon] { - margin-right: var(--fs-spacing-1); - } - - [data-fs-search-suggestion-item-icon] { - color: var(--fs-color-neutral-4); - } -} - -[data-fs-search-suggestions] { - [data-fs-search-suggestion-item-bold] { - font-weight: var(--fs-text-weight-bold); - color: var(--fs-color-neutral-7); - } -} diff --git a/src/components/search/search.module.scss b/src/components/search/search.module.scss new file mode 100644 index 00000000..648ee4ac --- /dev/null +++ b/src/components/search/search.module.scss @@ -0,0 +1,96 @@ +@import "src/styles/scaffold"; + +.fs-search { + // -------------------------------------------------------- + // Design Tokens for Search + // -------------------------------------------------------- + --fs-search-min-height : var(--fs-spacing-7); + + // Title + --fs-search-title-size : var(--fs-text-size-lead); + --fs-search-title-line-height : 1.5; + + // Section + --fs-search-section-padding : var(--fs-spacing-1) 0; + --fs-search-section-bkg-color : var(--fs-color-neutral-0); + --fs-search-section-border-bottom : var(--fs-border-width) solid var(--fs-border-color-light); + + // Link + --fs-search-item-link-color : var(--fs-color-text-light); + --fs-search-item-link-padding-right : var(--fs-spacing-3); + --fs-search-item-link-padding-left : var(--fs-search-item-link-padding-right); + + // Item + --fs-search-item-text-size : var(--fs-text-size-2); + --fs-search-item-line-height : 1.25; + --fs-search-item-bkg-color-hover : var(--fs-color-tertiary-bkg-hover); + + // Icon + --fs-search-item-icon-color : var(--fs-color-neutral-4); + --fs-search-item-icon-margin-right : var(--fs-spacing-1); + + // Badge + --fs-search-badge-margin-right : var(--fs-spacing-1); + + // Default properties + [data-fs-search-header] { + display: flex; + align-items: center; + justify-content: space-between; + min-height: var(--fs-search-min-height); + } + + [data-fs-search-title] { + font-size: var(--fs-search-title-size); + line-height: var(--fs-search-title-line-height); + } + + [data-fs-search-section] { + padding: var(--fs-search-section-padding); + border-bottom: var(--fs-search-section-border-bottom); + + &:last-child { + border-bottom-width: 0; + } + } + + [data-fs-search-item-link] { + color: var(--fs-search-item-link-color); + } + + [data-fs-search-item] { + margin-right: calc(-1 * var(--fs-search-item-link-padding-right)); + margin-left: calc(-1 * var(--fs-search-item-link-padding-right)); + font-size: var(--fs-search-item-text-size); + line-height: var(--fs-search-item-line-height); + + &:hover { + background-color: var(--fs-search-item-bkg-color-hover); + } + + [data-fs-search-product-card-link], [data-fs-search-item-link] { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + padding-right: var(--fs-search-item-link-padding-right); + padding-left: var(--fs-search-item-link-padding-left); + } + + [data-fs-search-badge] { + margin-right: var(--fs-search-badge-margin-right); + } + + [data-fs-search-item-icon] { + margin-right: var(--fs-search-item-icon-margin-right); + color: var(--fs-search-item-icon-color); + } + } + + [data-fs-search] { + [data-fs-search-item-bold] { + font-weight: var(--fs-text-weight-bold); + color: var(--fs-color-neutral-7); + } + } +} diff --git a/src/components/search/searchMock.ts b/src/components/search/searchMock.ts new file mode 100644 index 00000000..8ae50633 --- /dev/null +++ b/src/components/search/searchMock.ts @@ -0,0 +1,47 @@ +import { rest } from 'msw' +import { productGridItems, searchTerms } from 'src/../.storybook/mocks' + +export const products = productGridItems.map((item) => item.node) + +export const msw = { + handlers: [ + rest.get('/api/graphql', (req, res, ctx) => { + const { + url: { searchParams }, + } = req + + const operationName = searchParams.get('operationName') + + if (operationName === 'TopSearchSuggestionsQuery') { + return res( + ctx.json({ + data: { + search: { + suggestions: { + terms: searchTerms, + }, + }, + }, + }) + ) + } + + if (operationName === 'SearchSuggestionsQuery') { + return res( + ctx.json({ + data: { + search: { + suggestions: { + terms: searchTerms, + products, + }, + }, + }, + }) + ) + } + + return res(ctx.status(400)) + }), + ], +} diff --git a/src/components/ui/Search/Suggestions/Suggestions.stories.tsx b/src/components/ui/Search/Suggestions/Suggestions.stories.tsx deleted file mode 100644 index a9c6ba4c..00000000 --- a/src/components/ui/Search/Suggestions/Suggestions.stories.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { SessionProvider } from '@faststore/sdk' -import { LocationProvider } from '@reach/router' -import { SearchInputProvider } from 'src/sdk/search/useSearchInput' - -import Suggestions from '.' -import type { SuggestionsProps } from '.' - -const product = ({ id = '1', name = 'Handmade Steel Towels Practical' }) => ({ - id, - slug: 'handmade-steel-towels-practical-15503951', - sku: '15503951', - brand: { brandName: 'Brand', name: 'Brand' }, - name: 'red', - gtin: '5595633577807', - isVariantOf: { - productGroupID: '130742', - name, - }, - image: [ - { - url: 'http://storeframework.vtexassets.com/arquivos/ids/190191/numquam.jpg?v=637755599170100000', - alternateName: 'est', - }, - ], - offers: { - lowPrice: 181.71, - offers: [ - { - availability: 'https://schema.org/InStock', - price: 181.71, - listPrice: 208.72, - quantity: 1, - seller: { identifier: '1' }, - }, - ], - }, -}) - -export default { - component: Suggestions, - title: 'Features/Search/Suggestions', -} - -const Template = (props: SuggestionsProps) => ( -
    - - - - - - - -
    -) - -export const Default = Template.bind({}) - -Default.args = { - term: 'Ste', - terms: [ - { value: 'Steel', count: 1 }, - { value: 'Stellar', count: 2 }, - ], - products: [ - product({ id: '1', name: 'Handmade Steel Towels Practical' }), - product({ id: '2', name: 'Steel Towels' }), - product({ id: '3', name: 'Steel Practical' }), - ], -} - -Default.parameters = { - backgrounds: { default: 'dark' }, -} diff --git a/src/components/ui/Search/Suggestions/index.ts b/src/components/ui/Search/Suggestions/index.ts deleted file mode 100644 index 34989a90..00000000 --- a/src/components/ui/Search/Suggestions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Suggestions' -export type { SuggestionsProps } from './Suggestions' diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 5fa7773a..da7001ec 100644 --- a/src/styles/global/storybook-components.scss +++ b/src/styles/global/storybook-components.scss @@ -2,11 +2,8 @@ @import "src/components/cart/CartToggle/cart-toggle.scss"; @import "src/components/cart/OrderSummary/order-summary.scss"; -// Common -@import "src/components/common/SearchInput/search-input.scss"; - // Search -@import "src/components/search/Suggestions/suggestions.scss"; +@import "src/components/search/SearchInput/search-input.scss"; // Sections @import "src/components/sections/BannerText/banner-text.scss"; diff --git a/src/styles/pages/layout.scss b/src/styles/pages/layout.scss index f476305e..4d4c1239 100644 --- a/src/styles/pages/layout.scss +++ b/src/styles/pages/layout.scss @@ -2,9 +2,8 @@ @import "src/components/cart/CartToggle/cart-toggle.scss"; @import "src/components/cart/OrderSummary/order-summary.scss"; -// Common -@import "src/components/common/SearchInput/search-input.scss"; -@import "src/components/search/Suggestions/suggestions.scss"; +// Search +@import "src/components/search/SearchInput/search-input.scss"; // UI @import "src/components/ui/Badge/badge.scss";