Skip to content

Commit

Permalink
chore: apply patch from vtex-sites/nextjs.store#189
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasfp13
lucasfp13 committed Aug 12, 2022
1 parent 70753fe commit 7ada5da
Show file tree
Hide file tree
Showing 7 changed files with 324 additions and 141 deletions.
10 changes: 5 additions & 5 deletions src/components/common/Navbar/navbar.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
border-bottom: var(--fs-navbar-border-bottom-width) solid var(--fs-navbar-border-bottom-color);
box-shadow: var(--fs-navbar-box-shadow);

[data-store-search-input-wrapper] {
[data-fs-search-input-wrapper] {
flex: 1 0 100%;
order: 2;

Expand Down Expand Up @@ -102,7 +102,7 @@
}
}

[data-store-search-input-wrapper] {
[data-fs-search-input-wrapper] {
display: none;
transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);

Expand All @@ -113,7 +113,7 @@
order: 0;
width: min-content;

&[data-store-search-input-dropdown-open="false"] [data-store-input] {
&[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input] {
width: 0;
padding: 0;
border-width: 0;
Expand All @@ -139,12 +139,12 @@
&[data-fs-navbar-search-expanded="true"] {
width: 100%;

[data-store-search-input-wrapper] {
[data-fs-search-input-wrapper] {
flex: 1 1;
margin-right: var(--fs-navbar-search-expanded-input-wrapper-margin-right);
margin-left: var(--fs-navbar-search-expanded-input-wrapper-margin-left);

[data-store-input] {
[data-fs-search-input] {
width: var(--fs-navbar-search-expanded-input-width);
}

Expand Down
148 changes: 148 additions & 0 deletions src/components/search/SearchInput/SearchInput.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,3 +55,151 @@ Responsible to receive, search and display suggestions.
</Canvas>

<ArgsTable story="default" />

<TokenTable>
<TokenRow
token="--fs-search-input-padding"
value="var(--fs-spacing-1) var(--fs-spacing-7) var(--fs-spacing-1) var(--fs-spacing-2)"
/>
<TokenRow
isColor
token="--fs-search-input-bkg-color"
value="var(--fs-color-body-bkg)"
/>
<TokenRow
token="--fs-search-input-box-shadow"
value="0 0 0 var(--fs-border-width) var(--fs-border-color-active)"
/>
<TokenDivider />
<TokenRow
token="--fs-search-input-height-mobile"
value="var(--fs-control-tap-size)"
/>
<TokenRow
token="--fs-search-input-height-desktop"
value="var(--fs-spacing-6)"
/>
<TokenDivider />
<TokenRow
token="--fs-search-input-border-width"
value="var(--fs-border-width)"
/>
<TokenRow
token="--fs-search-input-border-radius"
value="var(--fs-border-radius)"
/>
<TokenRow
isColor
token="--fs-search-input-border-color"
value="var(--fs-border-color)"
/>
<TokenRow
isColor
token="--fs-search-input-border-color-hover"
value="var(--fs-border-color-active)"
/>
<TokenDivider />
<TokenRow
token="--fs-search-input-transition-timing"
value="var(--fs-transition-timing)"
/>
<TokenRow token="--fs-search-input-transition-function" value="ease" />
</TokenTable>

### Button

<TokenTable>
<TokenRow
token="--fs-search-input-button-width"
value="var(--fs-spacing-7)"
/>
<TokenRow
token="--fs-search-input-button-min-height"
value="var(--fs-search-input-height-desktop)"
/>
<TokenRow
isColor
token="--fs-search-input-button-bkg-color"
value="transparent"
/>
<TokenDivider />
<TokenRow
token="--fs-search-input-button-height-mobile"
value="var(--fs-search-input-button-width)"
/>
<TokenRow
token="--fs-search-input-button-height-desktop"
value="var(--fs-search-input-height-desktop)"
/>
</TokenTable>

### Icon

<TokenTable>
<TokenRow token="--fs-search-input-icon-width" value="var(--fs-spacing-4)" />
<TokenRow
token="--fs-search-input-icon-height"
value="var(--fs-search-input-icon-width)"
/>
<TokenRow
isColor
token="--fs-search-input-icon-color"
value="var(--fs-color-neutral-7)"
/>
</TokenTable>

### Dropdown

<TokenTable>
<TokenRow
token="--fs-search-input-dropdown-padding"
value="var(--fs-spacing-3)"
/>
<TokenRow
isColor
token="--fs-search-input-dropdown-bkg-color"
value="var(--fs-color-neutral-0)"
/>
<TokenRow
token="--fs-search-input-dropdown-box-shadow"
value="var(--fs-shadow)"
/>
<TokenDivider />
<TokenRow token="--fs-search-input-dropdown-width-mobile" value="100vw" />
<TokenRow token="--fs-search-input-dropdown-width-desktop" value="100%" />
<TokenDivider />
<TokenRow
token="--fs-search-input-dropdown-border-width"
value="var(--fs-border-width)"
/>
<TokenRow
isColor
token="--fs-search-input-dropdown-border-color"
value="var(--fs-border-color)"
/>
<TokenRow
token="--fs-search-input-dropdown-border-radius"
value="0 0 var(--fs-border-radius) var(--fs-border-radius)"
/>
<TokenDivider />
<TokenRow
token="--fs-search-input-dropdown-position-left-mobile"
value="calc(-1 * var(--fs-control-tap-size))"
/>
<TokenRow
token="--fs-search-input-dropdown-position-left-tablet"
value="calc(var(--fs-search-input-dropdown-position-left-mobile) - var(--fs-spacing-1))"
/>
<TokenRow
token="--fs-search-input-dropdown-position-top-tablet"
value="calc(var(--fs-control-tap-size) + var(--fs-spacing-2) + var(--fs-border-width))"
/>
<TokenRow
token="--fs-search-input-dropdown-position-top-mobile"
value="calc(var(--fs-search-input-dropdown-position-top-tablet) + 1px)"
/>
<TokenRow
token="--fs-search-input-dropdown-position-top-desktop"
value="var(--fs-search-input-height-desktop)"
/>
</TokenTable>
30 changes: 18 additions & 12 deletions src/components/search/SearchInput/SearchInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import { sendAnalyticsEvent } from '@faststore/sdk'
import { SearchInput as UISearchInput } from '@faststore/ui'
import { navigate } from 'gatsby'
import type { CSSProperties } from 'react'
import {
forwardRef,
lazy,
Expand All @@ -11,7 +7,11 @@ import {
useDeferredValue,
useImperativeHandle,
} from 'react'
import type { CSSProperties } from 'react'
import { navigate } from 'gatsby'
import { sendAnalyticsEvent } from '@faststore/sdk'
import type { SearchEvent } from '@faststore/sdk'
import { SearchInput as UISearchInput } from '@faststore/ui'
import type {
SearchInputProps as UISearchInputProps,
SearchInputRef as UISearchInputRef,
Expand All @@ -25,6 +25,8 @@ import {
import type { SearchInputContextValue } from 'src/sdk/search/useSearchInput'
import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'

import styles from './search-input.module.scss'

const SearchDropdown = lazy(
() => import('src/components/search/SearchDropdown')
)
Expand Down Expand Up @@ -56,7 +58,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
) {
const [searchQuery, setSearchQuery] = useState<string>('')
const searchQueryDeferred = useDeferredValue(searchQuery)
const [searchDropdownOpen, setSearchDropdownOpen] = useState<boolean>(false)
const [searchDropdownVisible, setSearchDropdownVisible] =
useState<boolean>(false)

const searchRef = useRef<HTMLDivElement>(null)
const { addToSearchHistory } = useSearchHistory()

Expand All @@ -68,21 +72,23 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
(term, path) => {
addToSearchHistory({ term, path })
sendAnalytics(term)
setSearchDropdownOpen(false)
setSearchDropdownVisible(false)
setSearchQuery(term)
}

useOnClickOutside(searchRef, () => setSearchDropdownOpen(false))
useOnClickOutside(searchRef, () => setSearchDropdownVisible(false))

return (
<div
ref={searchRef}
data-store-search-input-wrapper
data-store-search-input-dropdown-open={searchDropdownOpen}
data-fs-search-input-wrapper
className={styles.fsSearchInput}
data-fs-search-input-dropdown-visible={searchDropdownVisible}
style={containerStyle}
>
<SearchInputProvider onSearchInputSelection={onSearchInputSelection}>
<UISearchInput
data-fs-search-input
ref={ref}
icon={
<Icon
Expand All @@ -99,13 +105,13 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
onSearchInputSelection(term, path)
navigate(path)
}}
onFocus={() => setSearchDropdownOpen(true)}
onFocus={() => setSearchDropdownVisible(true)}
value={searchQuery}
{...otherProps}
/>
{searchDropdownOpen && (
{searchDropdownVisible && (
<Suspense fallback={null}>
<div data-store-search-input-dropdown-wrapper>
<div data-fs-search-input-dropdown-wrapper>
<SearchDropdown term={searchQueryDeferred} />
</div>
</Suspense>
Expand Down
Loading

0 comments on commit 7ada5da

Please sign in to comment.