From 7ada5da12c18ce566310468283ef2a9a883b6dc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 11 Aug 2022 22:18:02 -0300 Subject: [PATCH] chore: apply patch from vtex-sites/nextjs.store#189 --- .../common/Navbar/navbar.module.scss | 10 +- .../SearchInput/SearchInput.stories.mdx | 148 +++++++++++++++++ .../search/SearchInput/SearchInput.tsx | 30 ++-- .../SearchInput/search-input.module.scss | 153 ++++++++++++++++++ .../search/SearchInput/search-input.scss | 118 -------------- src/styles/global/storybook-components.scss | 3 - src/styles/pages/layout.scss | 3 - 7 files changed, 324 insertions(+), 141 deletions(-) create mode 100644 src/components/search/SearchInput/search-input.module.scss delete mode 100644 src/components/search/SearchInput/search-input.scss diff --git a/src/components/common/Navbar/navbar.module.scss b/src/components/common/Navbar/navbar.module.scss index 813f38538..873132264 100644 --- a/src/components/common/Navbar/navbar.module.scss +++ b/src/components/common/Navbar/navbar.module.scss @@ -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; @@ -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); @@ -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; @@ -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); } diff --git a/src/components/search/SearchInput/SearchInput.stories.mdx b/src/components/search/SearchInput/SearchInput.stories.mdx index 4193bc826..923b6a2a6 100644 --- a/src/components/search/SearchInput/SearchInput.stories.mdx +++ b/src/components/search/SearchInput/SearchInput.stories.mdx @@ -55,3 +55,151 @@ Responsible to receive, search and display suggestions. + + + + + + + + + + + + + + + + + + +### Button + + + + + + + + + + +### Icon + + + + + + + +### Dropdown + + + + + + + + + + + + + + + + + + + diff --git a/src/components/search/SearchInput/SearchInput.tsx b/src/components/search/SearchInput/SearchInput.tsx index 01d1036b7..17455a52f 100644 --- a/src/components/search/SearchInput/SearchInput.tsx +++ b/src/components/search/SearchInput/SearchInput.tsx @@ -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, @@ -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, @@ -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') ) @@ -56,7 +58,9 @@ const SearchInput = forwardRef( ) { const [searchQuery, setSearchQuery] = useState('') const searchQueryDeferred = useDeferredValue(searchQuery) - const [searchDropdownOpen, setSearchDropdownOpen] = useState(false) + const [searchDropdownVisible, setSearchDropdownVisible] = + useState(false) + const searchRef = useRef(null) const { addToSearchHistory } = useSearchHistory() @@ -68,21 +72,23 @@ const SearchInput = forwardRef( (term, path) => { addToSearchHistory({ term, path }) sendAnalytics(term) - setSearchDropdownOpen(false) + setSearchDropdownVisible(false) setSearchQuery(term) } - useOnClickOutside(searchRef, () => setSearchDropdownOpen(false)) + useOnClickOutside(searchRef, () => setSearchDropdownVisible(false)) return (
( onSearchInputSelection(term, path) navigate(path) }} - onFocus={() => setSearchDropdownOpen(true)} + onFocus={() => setSearchDropdownVisible(true)} value={searchQuery} {...otherProps} /> - {searchDropdownOpen && ( + {searchDropdownVisible && ( -
+
diff --git a/src/components/search/SearchInput/search-input.module.scss b/src/components/search/SearchInput/search-input.module.scss new file mode 100644 index 000000000..00b3db858 --- /dev/null +++ b/src/components/search/SearchInput/search-input.module.scss @@ -0,0 +1,153 @@ +@import "src/styles/scaffold"; + +.fs-search-input { + // -------------------------------------------------------- + // Design Tokens for Search Input + // -------------------------------------------------------- + + // Default properties + --fs-search-input-padding : var(--fs-spacing-1) var(--fs-spacing-7) var(--fs-spacing-1) var(--fs-spacing-2); + --fs-search-input-bkg-color : var(--fs-color-body-bkg); + --fs-search-input-box-shadow : 0 0 0 var(--fs-border-width) var(--fs-border-color-active); + + --fs-search-input-height-mobile : var(--fs-control-tap-size); + --fs-search-input-height-desktop : var(--fs-spacing-6); + + --fs-search-input-border-width : var(--fs-border-width); + --fs-search-input-border-radius : var(--fs-border-radius); + --fs-search-input-border-color : var(--fs-border-color); + --fs-search-input-border-color-hover : var(--fs-border-color-active); + + --fs-search-input-transition-timing : var(--fs-transition-timing); + --fs-search-input-transition-function : ease; + + // Button + --fs-search-input-button-width : var(--fs-spacing-7); + --fs-search-input-button-min-height : var(--fs-search-input-height-desktop); + --fs-search-input-button-bkg-color : transparent; + + --fs-search-input-button-height-mobile : var(--fs-search-input-button-width); + --fs-search-input-button-height-desktop : var(--fs-search-input-height-desktop); + + // Icon + --fs-search-input-icon-width : var(--fs-spacing-4); + --fs-search-input-icon-height : var(--fs-search-input-icon-width); + --fs-search-input-icon-color : var(--fs-color-neutral-7); + + // Dropdown + --fs-search-input-dropdown-padding : var(--fs-spacing-3); + --fs-search-input-dropdown-bkg-color : var(--fs-color-neutral-0); + --fs-search-input-dropdown-box-shadow : var(--fs-shadow); + + --fs-search-input-dropdown-width-mobile : 100vw; + --fs-search-input-dropdown-width-desktop : 100%; + + --fs-search-input-dropdown-border-width : var(--fs-border-width); + --fs-search-input-dropdown-border-color : var(--fs-border-color); + --fs-search-input-dropdown-border-radius : 0 0 var(--fs-border-radius) var(--fs-border-radius); + + --fs-search-input-dropdown-position-left-mobile : calc(-1 * var(--fs-control-tap-size)); + --fs-search-input-dropdown-position-left-tablet : calc(var(--fs-search-input-dropdown-position-left-mobile) - var(--fs-spacing-1)); + --fs-search-input-dropdown-position-top-tablet : calc(var(--fs-control-tap-size) + var(--fs-spacing-2) + var(--fs-border-width)); + --fs-search-input-dropdown-position-top-mobile : calc(var(--fs-search-input-dropdown-position-top-tablet) + 1px); + --fs-search-input-dropdown-position-top-desktop : var(--fs-search-input-height-desktop); + + // -------------------------------------------------------- + // Structural Styles + // -------------------------------------------------------- + + position: relative; + + [data-store-search-input] { + position: relative; + display: inline-flex; + width: 100%; + height: var(--fs-search-input-height-mobile); + + @include media(">=notebook") { height: var(--fs-search-input-height-desktop); } + + [data-fs-search-input] { + width: 100%; + padding: var(--fs-search-input-padding); + background-color: var(--fs-search-input-bkg-color); + border: var(--fs-search-input-border-width) solid var(--fs-search-input-border-color); + border-radius: var(--fs-search-input-border-radius); + transition: box-shadow var(--fs-search-input-transition-timing) var(--fs-search-input-transition-timing), border var(--fs-search-input-transition-timing) var(--fs-search-input-transition-function); + + &:hover { + border-color: var(--fs-search-input-border-color-hover); + box-shadow: var(--fs-search-input-box-shadow); + } + + @include input-focus-ring; + + [data-fs-search-input-dropdown-visible="true"] & { + @include media(">=notebook") { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + } + + [data-store-button] { + position: absolute; + right: 0; + width: var(--fs-search-input-button-width); + height: var(--fs-search-input-button-height-mobile); + padding: 0; + background-color: var(--fs-search-input-button-bkg-color); + border: 0; + + @include media(">=notebook") { + height: var(--fs-search-input-button-height-desktop); + min-height: var(--fs-search-input-button-min-height); + } + } + + [data-store-icon] { display: block; } + + [data-store-button] svg { + width: var(--fs-search-input-icon-width); + height: var(--fs-search-input-icon-height); + color: var(--fs-search-input-icon-color); + } + } + + [data-fs-search-product-card-link] { + color: var(--fs-color-neutral-7); + text-decoration: none; + + &:hover { text-decoration: none; } + } + + [data-fs-search-input-dropdown-wrapper] { + position: absolute; + top: var(--fs-search-input-dropdown-position-top-mobile); + left: var(--fs-search-input-dropdown-position-left-mobile); + z-index: 1; + width: var(--fs-search-input-dropdown-width-mobile); + padding: var(--fs-search-input-dropdown-padding); + padding-top: 0; + background-color: var(--fs-search-input-dropdown-bkg-color); + + &:empty { display: none; } + + @include media(">=tablet") { + top: var(--fs-search-input-dropdown-position-top-tablet); + left: var(--fs-search-input-dropdown-position-left-tablet); + } + + @include media(">=notebook") { + top: var(--fs-search-input-dropdown-position-top-desktop); + left: 0; + width: var(--fs-search-input-dropdown-width-desktop); + overflow: hidden; + border: var(--fs-search-input-dropdown-border-width) solid var(--fs-search-input-dropdown-border-color); + border-top: none; + border-radius: var(--fs-search-input-dropdown-border-radius); + box-shadow: var(--fs-search-input-dropdown-box-shadow); + } + + [data-fs-search-input-loading-text] { padding-top: var(--fs-spacing-3); } + } +} diff --git a/src/components/search/SearchInput/search-input.scss b/src/components/search/SearchInput/search-input.scss deleted file mode 100644 index fcb0bbe30..000000000 --- a/src/components/search/SearchInput/search-input.scss +++ /dev/null @@ -1,118 +0,0 @@ -@import "src/styles/scaffold"; - -[data-store-search-input] { - position: relative; - display: inline-flex; - width: 100%; - height: var(--fs-control-tap-size); - - @include media(">=notebook") { height: var(--fs-spacing-6); } - - [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; - - &:hover { - border-color: var(--fs-border-color-active); - box-shadow: 0 0 0 var(--fs-border-width) var(--fs-border-color-active); - } - - @include input-focus-ring; - - [data-store-search-input-dropdown-open="true"] & { - @include media(">=notebook") { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - } - } - - [data-store-icon] { display: block; } - - [data-store-button] { - position: absolute; - right: 0; - width: var(--fs-spacing-7); - height: var(--fs-spacing-7); - padding: 0; - background-color: transparent; - border: 0; - - @include media(">=notebook") { - height: var(--fs-spacing-6); - min-height: var(--fs-spacing-6); - } - } - - [data-store-button] svg { - width: var(--fs-spacing-4); - height: var(--fs-spacing-4); - color: var(--fs-color-neutral-7); - } -} - -.suggestion-product-card [data-fs-link] { - color: var(--fs-color-neutral-7); - text-decoration: none; - - &:hover { - text-decoration: none; - } -} - -[data-store-search-input-wrapper] { - position: relative; -} - -[data-store-search-input-dropdown-wrapper] { - --navbar-header-padding-bottom: var(--fs-spacing-2); - --navbar-bottom-border: var(--fs-border-width); - --collapse-search-bar-width: var(--fs-control-tap-size); - /* stylelint-disable scss/operator-no-newline-after */ - --top: - calc( - var(--collapse-search-bar-width) + - var(--navbar-header-padding-bottom) + - var(--navbar-bottom-border) + - 1px - ); - /* stylelint-enable scss/operator-no-newline-after */ - --left: calc(-1 * var(--collapse-search-bar-width)); - - position: absolute; - top: var(--top); - left: var(--left); - z-index: 1; - width: 100vw; - padding: var(--fs-spacing-3); - padding-top: 0; - background-color: var(--fs-color-neutral-0); - - &:empty { - display: none; - } - - @include media(">=tablet") { - top: calc(var(--top) - 1px); - left: calc(var(--left) - var(--fs-spacing-1)); - } - - @include media(">=notebook") { - top: 40px; - left: 0; - width: 100%; - overflow: hidden; - border: var(--fs-border-width) solid var(--fs-border-color); - border-top: none; - 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/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 5811a50f0..a51bb71e6 100644 --- a/src/styles/global/storybook-components.scss +++ b/src/styles/global/storybook-components.scss @@ -2,9 +2,6 @@ @import "src/components/cart/CartToggle/cart-toggle.scss"; @import "src/components/cart/OrderSummary/order-summary.scss"; -// Search -@import "src/components/search/SearchInput/search-input.scss"; - // Sections @import "src/components/sections/BannerText/banner-text.scss"; @import "src/components/sections/Breadcrumb/breadcrumb.scss"; diff --git a/src/styles/pages/layout.scss b/src/styles/pages/layout.scss index 4d4c12391..3aa42e2e3 100644 --- a/src/styles/pages/layout.scss +++ b/src/styles/pages/layout.scss @@ -2,9 +2,6 @@ @import "src/components/cart/CartToggle/cart-toggle.scss"; @import "src/components/cart/OrderSummary/order-summary.scss"; -// Search -@import "src/components/search/SearchInput/search-input.scss"; - // UI @import "src/components/ui/Badge/badge.scss"; @import "src/components/ui/InputText/input-text.scss";