Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add new tokens to SearchInput [FS-496] #189

Merged
merged 6 commits into from
Aug 8, 2022
Merged

feat: Add new tokens to SearchInput [FS-496] #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6c48fbd
Adds new tokens to `SearchInput`
lucasfp13 Aug 2, 2022
7fb280d
Fixes `SearchInput` data attribute references
lucasfp13 Aug 2, 2022
9143f52
Removes scss imports
lucasfp13 Aug 2, 2022
ca6efb6
Adds `SearchInput` tokens to the story
lucasfp13 Aug 3, 2022
348cdf2
Fixes transition token names
lucasfp13 Aug 4, 2022
3e9bbe4
Fixes token spacing
lucasfp13 Aug 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/common/Navbar/navbar.module.scss
View file
Open in desktop
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
Open in desktop
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>
31 changes: 19 additions & 12 deletions src/components/search/SearchInput/SearchInput.tsx
View file
Open in desktop
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 { useRouter } from 'next/router'
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 { useRouter } from 'next/router'
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 @@ -26,6 +26,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 @@ -57,7 +59,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()
const router = useRouter()
Expand All @@ -70,21 +74,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 @@ -101,13 +107,14 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
onSearchInputSelection(term, path)
router.push(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