@faststore/core 22.42.6

package/src/components/search/SearchInput/SearchInput.tsx

@@ -0,0 +1,128 @@
+import {
+  forwardRef,
+  lazy,
+  Suspense,
+  useRef,
+  useState,
+  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,
+} from '@faststore/ui'
+
+import Icon from 'src/components/ui/Icon'
+import useSearchHistory from 'src/sdk/search/useSearchHistory'
+import {
+  formatSearchPath,
+  SearchInputProvider,
+} from 'src/sdk/search/useSearchInput'
+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')
+)
+
+export type SearchInputProps = {
+  onSearchClick?: () => void
+  buttonTestId?: string
+  containerStyle?: CSSProperties
+} & Omit<UISearchInputProps, 'onSubmit'>
+
+export type SearchInputRef = UISearchInputRef & { resetSearchInput: () => void }
+
+const sendAnalytics = async (term: string) => {
+  sendAnalyticsEvent<SearchEvent>({
+    name: 'search',
+    params: { search_term: term },
+  })
+}
+
+const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
+  function SearchInput(
+    {
+      onSearchClick,
+      buttonTestId = 'store-search-button',
+      containerStyle,
+      ...otherProps
+    },
+    ref
+  ) {
+    const [searchQuery, setSearchQuery] = useState<string>('')
+    const searchQueryDeferred = useDeferredValue(searchQuery)
+    const [searchDropdownVisible, setSearchDropdownVisible] =
+      useState<boolean>(false)
+
+    const searchRef = useRef<HTMLDivElement>(null)
+    const { addToSearchHistory } = useSearchHistory()
+    const router = useRouter()
+
+    useImperativeHandle(ref, () => ({
+      resetSearchInput: () => setSearchQuery(''),
+    }))
+
+    const onSearchInputSelection: SearchInputContextValue['onSearchInputSelection'] =
+      (term, path) => {
+        addToSearchHistory({ term, path })
+        sendAnalytics(term)
+        setSearchDropdownVisible(false)
+        setSearchQuery(term)
+      }
+
+    useOnClickOutside(searchRef, () => setSearchDropdownVisible(false))
+
+    return (
+      <div
+        ref={searchRef}
+        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
+                name="MagnifyingGlass"
+                onClick={onSearchClick}
+                data-testid={buttonTestId}
+              />
+            }
+            placeholder="Search everything at the store"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onSubmit={(term) => {
+              const path = formatSearchPath(term)
+
+              onSearchInputSelection(term, path)
+              router.push(path)
+            }}
+            onFocus={() => setSearchDropdownVisible(true)}
+            value={searchQuery}
+            {...otherProps}
+          />
+
+          {searchDropdownVisible && (
+            <Suspense fallback={null}>
+              <div data-fs-search-input-dropdown-wrapper>
+                <SearchDropdown term={searchQueryDeferred} />
+              </div>
+            </Suspense>
+          )}
+        </SearchInputProvider>
+      </div>
+    )
+  }
+)
+
+export default SearchInput

package/src/components/search/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchInput'
+export type { SearchInputProps, SearchInputRef } from './SearchInput'

package/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-fs-search-input-form] {
+    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-fs-button] {
+      position: absolute;
+      right: var(--fs-spacing-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-fs-icon] { display: block; }
+
+    [data-fs-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); }
+  }
+}

package/src/components/search/SearchProductCard/SearchProductCard.stories.mdx

@@ -0,0 +1,96 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
+import storeConfig from 'store.config'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import { product } from 'src/../.storybook/mocks'
+
+import SearchProductCard from '.'
+
+<Meta
+  title="Features/Search/SearchProductCard"
+  component={SearchProductCard}
+  args={{
+    product,
+    index: 1
+  }}
+/>
+
+export const Template = (args) => (
+  <SearchInputProvider>
+    <SuggestionProductCard {...args} />
+  </SearchInputProvider>
+)
+
+<header>
+
+# Search Product Card
+
+Card to show details of the product and suggest in `SearchDropdown`.
+
+</header>
+
+## Overview
+
+The `SearchProductCard` differs from `ProductCard` because it is used in the `Search` feature and is called by the `SearchSuggestions` component.
+
+---
+
+## Usage
+
+`import SearchProductCard from 'src/components/search/SearchProductCard'`
+
+<Canvas>
+  <Story name="SearchProductCard">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="SearchProductCard" />
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-link-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+### Image
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-image-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-image-margin-right"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-image-height"
+    value="3.5rem"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-suggestion-product-card-title-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-title-line-height"
+    value="1.2"
+  />
+  <TokenRow
+    token="--fs-suggestion-product-card-title-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>

package/src/components/search/SearchProductCard/SearchProductCard.tsx

@@ -0,0 +1,103 @@
+import { Card, CardContent, CardImage } from '@faststore/ui'
+
+import { Image } from 'src/components/ui/Image'
+import Link from 'src/components/ui/Link'
+import Price from 'src/components/ui/Price'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useProductLink } from 'src/sdk/product/useProductLink'
+import useSearchInput from 'src/sdk/search/useSearchInput'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import styles from './search-product-card.module.scss'
+
+type SearchProductCardProps = {
+  /**
+   * Product to be showed in `SearchProductCard`.
+   */
+  product: ProductSummary_ProductFragment
+  /**
+   * Index to generate product link.
+   */
+  index: number
+}
+
+function SearchProductCard({
+  product,
+  index,
+  ...otherProps
+}: SearchProductCardProps) {
+  const { onSearchInputSelection } = useSearchInput()
+  const { onClick, href, ...linkProps } = useProductLink({
+    product,
+    selectedOffer: 0,
+    index,
+  })
+
+  const {
+    isVariantOf: { name },
+    image: [img],
+    offers: {
+      lowPrice: spotPrice,
+      offers: [{ listPrice }],
+    },
+  } = product
+
+  return (
+    <Card
+      data-fs-search-product-card
+      className={styles.fsSearchProductCard}
+      data-testid="search-product-card"
+      {...otherProps}
+    >
+      <Link
+        {...linkProps}
+        data-fs-search-product-card-link
+        href={href}
+        title={name}
+        variant="display"
+        onClick={() => {
+          onClick()
+          onSearchInputSelection?.(name, href)
+        }}
+      >
+        <CardContent data-fs-search-product-card-content>
+          <CardImage data-fs-search-product-card-image>
+            <Image
+              src={img.url}
+              alt={img.alternateName}
+              width={56}
+              height={56}
+            />
+          </CardImage>
+          <div data-fs-search-product-card-summary>
+            <p className="text__title-mini" data-fs-search-product-card-title>
+              {name}
+            </p>
+            <span data-fs-search-product-card-prices>
+              <Price
+                value={listPrice}
+                formatter={useFormattedPrice}
+                testId="list-price"
+                data-value={listPrice}
+                variant="listing"
+                classes="text__legend"
+                SRText="Original price:"
+              />
+              <Price
+                value={spotPrice}
+                formatter={useFormattedPrice}
+                testId="price"
+                data-value={spotPrice}
+                variant="spot"
+                classes="text__title-mini"
+                SRText="Price:"
+              />
+            </span>
+          </div>
+        </CardContent>
+      </Link>
+    </Card>
+  )
+}
+
+export default SearchProductCard

package/src/components/search/SearchProductCard/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchProductCard'

package/src/components/search/SearchProductCard/search-product-card.module.scss

@@ -0,0 +1,54 @@
+@import "src/styles/scaffold";
+
+.fs-search-product-card {
+  // --------------------------------------------------------
+  // Design Tokens for Search Product Card
+  // --------------------------------------------------------
+
+  // Search Product Card Link
+  --fs-search-product-card-link-padding                   : var(--fs-spacing-1) var(--fs-spacing-3);
+
+  // Search Product Card Image
+  --fs-search-product-card-image-border-radius            : var(--fs-border-radius);
+  --fs-search-product-card-image-margin-right             : var(--fs-spacing-3);
+  --fs-search-product-card-image-size                     : 3.5rem;
+
+  // Search Product Card Title
+  --fs-search-product-card-title-margin-bottom            : var(--fs-spacing-0);
+  --fs-search-product-card-title-line-height              : 1.2;
+  --fs-search-product-card-title-color                    : var(--fs-color-text);
+
+  [data-fs-search-product-card-image] {
+    display: flex;
+    width: var(--fs-search-product-card-image-size);
+    height: var(--fs-search-product-card-image-size);
+    margin-right: var(--fs-search-product-card-image-margin-right);
+    overflow: hidden;
+    border-radius: var(--fs-search-product-card-image-border-radius);
+  }
+
+  [data-fs-search-product-card-content] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-fs-search-product-card-title] {
+    margin-bottom: var(--fs-search-product-card-title-margin-bottom);
+    line-height: var(--fs-search-product-card-title-line-height);
+    color: var(--fs-search-product-card-title-color);
+    text-decoration: none;
+    outline: none;
+
+    @include truncate-title;
+  }
+
+  [data-fs-search-product-card-prices] {
+    display: flex;
+    align-items: baseline;
+  }
+
+  [data-fs-search-product-card-link] {
+    padding: var(--fs-search-product-card-link-padding);
+    text-decoration: none;
+  }
+}

package/src/components/search/SearchSharedTokenTable.mdx

@@ -0,0 +1,98 @@
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+*These tokens are shared between
+[SearchDropdown](?path=/docs/features-search-searchdropdown--default-story),
+[SearchHistory](?path=/docs/features-search-searchhistory--default-story),
+[SearchInput](?path=/docs/features-search-searchinput--default-story),
+[SearchSuggestions](?path=/docs/features-search-searchsuggestions--default-story),
+[SearchTop](?path=/docs/features-search-searchtop--default-story).
+
+<TokenTable>
+  <TokenRow
+    token="--fs-search-min-height"
+    value="var(--fs-spacing-7)"
+  />
+</TokenTable>
+
+### Title
+<TokenTable>
+  <TokenRow
+    token="--fs-search-title-size"
+    value="var(--fs-text-size-lead)"
+  />
+  <TokenRow
+    token="--fs-search-title-line-height"
+    value="1.5"
+  />
+</TokenTable>
+
+### Section
+<TokenTable>
+  <TokenRow
+    token="--fs-search-section-padding"
+    value="var(--fs-spacing-1) 0"
+  />
+  <TokenRow
+    token="--fs-search-section-border-bottom"
+    value="var(--fs-border-width) solid var(--fs-border-color-light)"
+  />
+</TokenTable>
+
+### Link
+<TokenTable>
+  <TokenRow
+    token="--fs-search-item-link-color "
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-search-item-link-padding-right"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-search-item-link-padding-left"
+    value="var(--fs-search-item-link-padding-right)"
+  />
+</TokenTable>
+
+### Item
+<TokenTable>
+  <TokenRow
+    token="--fs-search-item-text-size"
+    value="var(--fs-text-size-2)"
+  />
+  <TokenRow
+    token="--fs-search-item-line-height"
+    value="1.25"
+  />
+  <TokenRow
+    token="--fs-search-item-bkg-color-hover"
+    value="var(--fs-color-tertiary-bkg-hover)"
+    isColor
+  />
+</TokenTable>
+
+### Icon
+<TokenTable>
+  <TokenRow
+    token="--fs-search-item-icon-color"
+    value="var(--fs-color-neutral-4)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-search-item-icon-margin-right"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Badge
+<TokenTable>
+  <TokenRow
+    token="--fs-search-badge-margin-right"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>

package/src/components/search/SearchSuggestions/SearchSuggestions.stories.mdx

@@ -0,0 +1,58 @@
+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 { productGridItems, searchTerms } from 'src/../.storybook/mocks'
+import { products } from '../searchMock'
+
+import SearchSuggestions from '.'
+
+<Meta component={SearchSuggestions} title="Features/Search/SearchSuggestions" />
+
+export const Template = (args) => (
+  <div
+    style={{
+      maxWidth: '600px',
+      margin: '0 auto',
+      padding: '0 16px',
+      background: 'white',
+    }}
+  >
+    <SearchInputProvider>
+      <SearchSuggestions {...args} />
+    </SearchInputProvider>
+  </div>
+)
+
+<header>
+
+# SearchSuggestions
+
+Displays a set of navigation links that self-adapts on mobile or desktop screens.
+
+</header>
+
+## Usage
+
+`import SearchSuggestions from 'src/components/search/SearchSuggestions'`
+
+<Canvas>
+  <Story
+    name="default"
+    parameters={{
+      backgrounds: { default: 'dark' },
+    }}
+    args={{
+      term: 'Ste',
+      terms: searchTerms,
+      products,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />