@faststore/core 22.42.6

package/src/components/product/ProductCard/product-card.module.scss

@@ -0,0 +1,254 @@
+@import "src/styles/scaffold";
+
+.fs-product-card {
+  // --------------------------------------------------------
+  // Design Tokens for Product Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-card-padding                  : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1);
+  --fs-product-card-gap                      : var(--fs-grid-gap-2);
+  --fs-product-card-min-width                : 10rem;
+
+  --fs-product-card-shadow                   : var(--fs-shadow);
+  --fs-product-card-shadow-hover             : var(--fs-shadow-hover);
+
+  --fs-product-card-bkg-color                : var(--fs-color-body-bkg);
+  --fs-product-card-bkg-color-hover          : var(--fs-product-card-bkg-color);
+  --fs-product-card-bkg-color-focus          : var(--fs-product-card-bkg-color-hover);
+
+  --fs-product-card-border-radius            : var(--fs-border-radius);
+  --fs-product-card-border-width             : var(--fs-border-width);
+  --fs-product-card-border-color             : var(--fs-border-color-light);
+  --fs-product-card-border-color-hover       : var(--fs-border-color-hover);
+
+  --fs-product-card-transition-function      : var(--fs-transition-function);
+  --fs-product-card-transition-property      : var(--fs-transition-property);
+  --fs-product-card-transition-timing        : var(--fs-transition-timing);
+
+  // Content
+  --fs-product-card-content-padding          : var(--fs-spacing-2) 0 0 0;
+
+  // Image
+  --fs-product-card-img-radius               : var(--fs-product-card-border-radius);
+  --fs-product-card-img-scale-hover          : 1;
+
+  // Title
+  --fs-product-card-title-color              : var(--fs-color-text);
+  --fs-product-card-title-size               : var(--fs-text-size-base);
+  --fs-product-card-title-weight             : var(--fs-text-weight-regular);
+  --fs-product-card-title-max-lines          : var(--fs-text-max-lines);
+
+  // Price
+  --fs-product-card-price-color              : var(--fs-color-text);
+  --fs-product-card-price-size               : var(--fs-text-size-base);
+  --fs-product-card-price-listing-color      : var(--fs-color-text-light);
+  --fs-product-card-price-listing-size       : var(--fs-text-size-legend);
+
+  // Description
+  --fs-product-card-description-color        : var(--fs-color-text);
+  --fs-product-card-description-size         : var(--fs-text-size-legend);
+
+  // Subtitle
+  --fs-product-card-subtitle-color           : var(--fs-color-text-light);
+  --fs-product-card-subtitle-size            : var(--fs-text-size-tiny);
+
+  // Wide
+  --fs-product-card-wide-padding             : 0;
+  --fs-product-card-wide-content-padding     : var(--fs-spacing-2);
+  --fs-product-card-wide-bkg-color           : var(--fs-color-neutral-bkg);
+  --fs-product-card-wide-min-width           : 9rem;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, max-content);
+  grid-auto-flow: row;
+  min-width: var(--fs-product-card-min-width);
+  height: 100%;
+  padding: var(--fs-product-card-padding);
+  background-color: var(--fs-product-card-bkg-color);
+  border: var(--fs-product-card-border-width) solid transparent;
+  border-radius: var(--fs-product-card-border-radius);
+  box-shadow: var(--fs-product-card-shadow);
+  transition: var(--fs-product-card-transition-property) var(--fs-product-card-transition-timing) var(--fs-product-card-transition-function);
+
+  &:focus-within {
+    @include focus-ring;
+
+    background-color: var(--fs-product-card-bkg-color-focus);
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--fs-product-card-bkg-color-hover);
+      border-color: var(--fs-product-card-border-color-hover);
+      box-shadow: var(--fs-product-card-shadow-hover);
+      [data-fs-product-card-image] img { transform: scale(var(--fs-product-card-img-scale-hover)); }
+    }
+  }
+
+  [data-fs-product-card-image] {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: var(--fs-product-card-img-radius);
+
+    img {
+      transition: var(--fs-product-card-transition-property) var(--fs-product-card-transition-timing) var(--fs-product-card-transition-function);
+    }
+  }
+
+  [data-fs-product-card-content] {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    padding: var(--fs-product-card-content-padding);
+
+    [data-fs-link] {
+      min-height: 100%;
+      padding: 0;
+      color: var(--fs-product-card-title-color);
+      text-decoration: none;
+      outline: none;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: block;
+        content: "";
+      }
+    }
+
+    [data-fs-badge],
+    [data-fs-product-card-actions] { margin-top: var(--fs-spacing-2); }
+  }
+
+  [data-fs-product-card-actions] {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  [data-fs-product-card-title] {
+    font-size: var(--fs-product-card-title-size);
+    font-weight: var(--fs-product-card-title-weight);
+    line-height: 1.25;
+    color: var(--fs-product-card-title-color);
+
+    @include truncate-title(var(--fs-product-card-title-max-lines));
+  }
+
+  [data-fs-product-card-prices] {
+    display: inline-flex;
+    align-content: center;
+
+    [data-variant="spot"] {
+      font-size: var(--fs-product-card-price-size);
+      color: var(--fs-product-card-price-color);
+    }
+
+    [data-variant="listing"] {
+      font-size: var(--fs-product-card-price-listing-size);
+      color: var(--fs-product-card-price-listing-color);
+    }
+  }
+
+  [data-fs-product-card-footer] {
+    display: flex;
+    gap: var(--fs-product-card-gap);
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--fs-product-card-gap);
+
+    small {
+      display: block;
+      font-size: var(--fs-product-card-subtitle-size);
+      color: var(--fs-product-card-subtitle-color);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-card-bordered="true"] {
+    border: var(--fs-product-card-border-width) solid var(--fs-product-card-border-color);
+
+    @media (hover: hover) {
+      &:hover {
+        border-color: var(--fs-product-card-border-color-hover);
+      }
+    }
+  }
+
+  &[data-fs-product-card-variant="wide"] {
+    --fs-product-card-padding         : var(--fs-product-card-wide-padding);
+    --fs-product-card-content-padding : var(--fs-product-card-wide-content-padding);
+    --fs-product-card-bkg-color       : var(--fs-product-card-wide-bkg-color);
+    --fs-product-card-min-width       : var(--fs-product-card-wide-min-width);
+
+    grid-template-rows: 1fr auto;
+
+    @include media(">=tablet") {
+      grid-template-rows: 5fr 2fr;
+
+      &[data-fs-product-card-actionable="true"] {
+        grid-template-rows: 10fr 7fr;
+      }
+    }
+
+    @include media(">=notebook") {
+      &[data-fs-product-card-actionable="true"] {
+        grid-template-rows: 6fr 3fr;
+      }
+
+      grid-template-rows: 4fr 1fr;
+    }
+
+    [data-fs-product-card-content] {
+      @include media(">=notebook") {
+        display: grid;
+        grid-template-rows: auto;
+        grid-template-columns: 1fr auto;
+        gap: var(--fs-product-card-gap);
+      }
+    }
+
+    [data-product-card-image] {
+      border-radius: 0;
+    }
+
+    [data-fs-badge] {
+      @include media(">=notebook") {
+        grid-row: 1;
+        grid-column: 2;
+        margin-top: 0;
+      }
+    }
+  }
+
+  &[data-fs-product-card-variant="horizontal"] {
+    grid-template-rows: auto;
+    grid-template-columns: 40% 1fr;
+    grid-auto-flow: column;
+    gap: var(--fs-product-card-gap);
+    min-width: calc(var(--fs-product-card-min-width) * 1.5);
+
+    [data-product-card-image] { grid-row: span 2; }
+
+    [data-fs-product-card-content] {
+      display: grid;
+      grid-row: 1;
+      gap: calc(var(--fs-product-card-gap) / 2);
+    }
+
+    [data-fs-badge] { align-self: end; }
+    [data-fs-product-card-prices] { margin-bottom: 0; }
+  }
+}

package/src/components/product/ProductGrid/ProductGrid.stories.mdx

@@ -0,0 +1,97 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { SearchProvider } from '@faststore/sdk'
+import storeConfig from 'store.config'
+import Sentinel from 'src/sdk/search/Sentinel'
+import { productGridItems } from 'src/../.storybook/mocks'
+
+import { useProducts } from '../../sections/ProductGallery/usePageProducts'
+
+import ProductGrid from '.'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  BestPractices,
+  BestPracticesRule,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Organisms/ProductGrid"
+  component={ProductGrid}
+  argTypes={{
+    /* TODO: Enable these after items per page is fixed */
+    page: {
+      table: {
+        disable: true,
+      },
+    },
+    pageSize: {
+      table: {
+        disable: true,
+      },
+    },
+  }}
+/>
+
+export const Template = (args) => {
+  return (
+    <ProductGrid {...args} />
+  )
+}
+
+<header>
+
+# ProductGrid
+
+It's a section generally used on PLP pages to list the products available in the store.
+
+</header>
+
+## Usage
+
+`import ProductGrid from '../components/product/ProductGrid'`
+
+<Canvas isColumn>
+  <Story
+    name="default"
+    args={{
+      products: productGridItems,
+      page: 0,
+      pageSize: 4,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow token="--fs-product-grid-gap-mobile" value="var(--fs-grid-gap-0)" />
+  <TokenRow
+    token="--fs-product-grid-gap-desktop"
+    value="var(--fs-grid-gap-2)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-product-grid-columns-mobile" value="2" />
+  <TokenRow token="--fs-product-grid-columns-desktop" value="4" />
+</TokenTable>
+
+---
+
+<BestPractices>
+  <BestPracticesRule
+    recommendedDescription={
+      <>
+        Respect <code>ProductCard</code> content's width considering the space
+        available on the page.
+      </>
+    }
+    discouragedDescription={
+      <>
+        Avoid using a lot of <code>ProductCards</code> on the same row, this
+        could lead to unwanted horizontal scroll.
+      </>
+    }
+  />
+</BestPractices>

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -0,0 +1,37 @@
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import styles from 'src/components/product/ProductGrid/product-grid.module.scss'
+
+import ProductCard from '../ProductCard'
+
+interface Props {
+  /**
+   * Products listed on the grid.
+   */
+  products: Array<{ node: ProductSummary_ProductFragment }>
+  page: number
+  /**
+   * Quantity of products listed.
+   */
+  pageSize: number
+}
+
+function ProductGrid({ products, page, pageSize }: Props) {
+  return (
+    <ProductGridSkeleton loading={products.length === 0}>
+      <ul data-fs-product-grid className={styles.fsProductGrid}>
+        {products.map(({ node: product }, idx) => (
+          <li key={`${product.id}`}>
+            <ProductCard
+              product={product}
+              index={pageSize * page + idx + 1}
+              bordered
+            />
+          </li>
+        ))}
+      </ul>
+    </ProductGridSkeleton>
+  )
+}
+
+export default ProductGrid

package/src/components/product/ProductGrid/index.ts

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

package/src/components/product/ProductGrid/product-grid.module.scss

@@ -0,0 +1,39 @@
+@import "src/styles/scaffold";
+
+.fs-product-grid {
+  // --------------------------------------------------------
+  // Design Tokens for ProductGrid
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-grid-gap-mobile        : var(--fs-grid-gap-0);
+  --fs-product-grid-gap-tablet        : var(--fs-product-grid-gap-mobile);
+  --fs-product-grid-gap-desktop       : var(--fs-grid-gap-2);
+
+  --fs-product-grid-columns-mobile    : 2;
+  --fs-product-grid-columns-tablet    : 4;
+  --fs-product-grid-columns-desktop   : var(--fs-product-grid-columns-tablet);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: grid;
+  grid-template-columns: repeat(var(--fs-product-grid-columns-mobile), 1fr);
+  grid-gap: var(--fs-product-grid-gap-mobile);
+
+  @include media(">=tablet") {
+    $pagination-start-index: 2;
+
+    grid-template-columns: repeat(var(--fs-product-grid-columns-desktop), 1fr);
+    grid-gap: var(--fs-product-grid-gap-tablet);
+
+    &:nth-of-type(n + #{$pagination-start-index}) {
+      margin-top: var(--fs-product-grid-gap-desktop);
+    }
+  }
+
+  @include media(">=notebook") {
+    grid-gap: var(--fs-product-grid-gap-desktop);
+  }
+}

package/src/components/regionalization/Regionalization.stories.mdx

@@ -0,0 +1,182 @@
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import RegionalizationButton from './RegionalizationButton'
+import ButtonLink from '../ui/Button/ButtonLink'
+import RegionalizationInput from './RegionalizationInput'
+import RegionalizationBar from './RegionalizationBar'
+import RegionalizationModal, {
+  RegionalizationModalContent,
+} from './RegionalizationModal'
+import Icon from '../ui/Icon'
+
+<Meta title="Features/Regionalization/Overview" />
+
+export const TemplateRegionalizationModal = () => {
+  const { modal, openModal } = useUI()
+  return <>{modal && <RegionalizationModal />}</>
+}
+
+export const TemplateButtonWithProvider = () => {
+  return (
+    <UIProvider>
+      <div
+        style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
+      >
+        <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
+        <RegionalizationButton />
+        <TemplateRegionalizationModal />
+      </div>
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Regionalization
+
+This feature enables customers to set a location using a valid Postal Code.
+
+</header>
+
+## Overview
+
+Regionalization is a feature of [VTEX Intelligent Search](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/3qgT47zY08biLP3d5os3DG) that allows for the optimization of search results according to the availability of sellers in the customer's region.
+
+Regionalization uses a behavior from VTEX Intelligent Search called [Availability](https://help.vtex.com/en/tracks/vtex-intelligent-search--19wrbB7nEQcmwzDPl1l4Cb/7LMQbWK5nElIkXo0NK8Kux). It searches for products available in the inventory of sellers that serve a particular region.
+
+Stores that have more than one registered white label seller usually have specific inventories for each region. This is the case for supermarkets, for example.
+
+With the Regionalization feature enabled, if a customer enters their Postal Code while browsing the store (before checkout), only products available in the corresponding region will be displayed in the search results.
+
+### Steps
+
+1. Intentionally, a user Sets its location using a Postal Code
+2. Updates Product Catalog
+3. Gets notified if there's product conflict at minicart
+
+---
+
+## Components
+
+<section className="sbdocs-list">
+  <ul className="sbdocs-ul-row">
+    <li>
+      <div>
+        <UIProvider>
+          <RegionalizationButton />
+          <TemplateRegionalizationModal />
+        </UIProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationButton</h3>
+        <p>
+          Using a{' '}
+          <a href="../?path=/docs/atoms-button--button#tertiary">
+            Tertiary Button
+          </a>{' '}
+          as base, this component is usually placed on the <code>Navbar</code>{' '}
+          and triggers
+          <code>RegionalizationModal</code>.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <UIProvider>
+          <RegionalizationBar />
+          <TemplateRegionalizationModal />
+        </UIProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationBar</h3>
+        <p>
+          The Bar has a similar proposal for the button, usually used on mobile
+          devices only. It also triggers <code>RegionalizationModal</code>.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationbar--bar"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+    <li>
+      <div>
+        <UIProvider>
+          <RegionalizationInput />
+        </UIProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationInput</h3>
+        <p>
+          An actionable{' '}
+          <a href="../?path=/docs/atoms-inputtext--actionable">InputText</a>{' '}
+          able to check the Postal Code authenticity.
+        </p>
+      </article>
+    </li>
+    <li>
+      <div>
+        <UIProvider>
+          <RegionalizationModalContent onClose={() => {}} />
+        </UIProvider>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>RegionalizationModal</h3>
+        <p>
+          It's the modal that, trigged by <code>RegionalizationButton</code> or{' '}
+          <code>RegionalizationBar</code>, shows the user the{' '}
+          <code>RegionalizationInput</code> search.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/features-regionalization-regionalizationmodal--overview"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+  </ul>
+</section>
+
+---
+
+## Usage
+
+On your `Layout.tsx` file:
+
+```jsx
+import RegionalizationModal from '../components/regionalization/RegionalizationModal'
+import { useUI } from 'src/sdk/ui/Provider'
+```
+
+and inside your `Layout` component:
+
+```jsx
+const { modal: displayModal } = useUI()
+
+return (
+  <>
+    {OtherLayoutComponents}
+    {displayModal && <RegionalizationModal />}
+  </>
+)
+```
+
+Then, you can add your `<RegionalizationButton />` or `<RegionalizationBar />` whenever it's needed.
+
+It's suggested to add it on `Navbar`.
+
+<Canvas
+  className="no-code"
+  style={{ display: 'flex', justifyContent: 'center' }}
+>
+  <Story name="default-button">{TemplateButtonWithProvider.bind({})}</Story>
+</Canvas>