@faststore/core 22.42.6

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
+import Tiles, { Tile } from 'src/components/ui/Tiles'
+import ProductCard from 'src/components/product/ProductCard'
+import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
+import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import type { ProductsQueryQueryVariables } from '@generated/graphql'
+
+import Section from '../Section'
+
+interface ProductTilesProps extends Partial<ProductsQueryQueryVariables> {
+  title: string
+}
+
+const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
+const NUMBER_ITEMS_TO_EXPAND_FIRST_TWO = 2
+
+const getRatio = (products: number, idx: number) => {
+  const expandsFirstTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST && idx === 0
+
+  const expandsFirstTwoTile =
+    products === NUMBER_ITEMS_TO_EXPAND_FIRST_TWO && (idx === 0 || idx === 1)
+
+  if (expandsFirstTile || expandsFirstTwoTile) {
+    return 4 / 3
+  }
+
+  return 3 / 4
+}
+
+const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
+  const viewedOnce = useRef(false)
+  const { ref, inView } = useInView()
+  const products = useProductsQuery(variables)
+  const productEdges = products?.edges ?? []
+
+  const { sendViewItemListEvent } = useViewItemListEvent({
+    products: productEdges,
+    title,
+    page: 0,
+    pageSize: 0,
+  })
+
+  useEffect(() => {
+    if (inView && !viewedOnce.current && productEdges.length) {
+      sendViewItemListEvent()
+
+      viewedOnce.current = true
+    }
+  }, [inView, productEdges.length, sendViewItemListEvent])
+
+  if (products?.edges.length === 0) {
+    return null
+  }
+
+  return (
+    <Section className="layout__section layout__content" ref={ref}>
+      <h2 className="text__title-section">{title}</h2>
+      <div>
+        <ProductTilesSkeleton variant="wide" loading={!products}>
+          <Tiles>
+            {productEdges.map((product, idx) => (
+              <Tile key={product.node.id}>
+                <ProductCard
+                  data-testid="tile-card"
+                  product={product.node}
+                  index={idx + 1}
+                  variant="wide"
+                  aspectRatio={getRatio(productEdges.length, idx)}
+                />
+              </Tile>
+            ))}
+          </Tiles>
+        </ProductTilesSkeleton>
+      </div>
+    </Section>
+  )
+}
+
+export default ProductTiles

package/src/components/sections/ProductTiles/index.ts

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

package/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx

@@ -0,0 +1,45 @@
+import Icon from 'src/components/ui/Icon'
+
+import Button from '../../ui/Button'
+import Section from '../Section'
+import type { ButtonProps } from '../../ui/Button'
+import styles from './scroll-to-top-button.module.scss'
+
+interface ScrollToTopButtonProps {
+  /**
+   * Button copy.
+   * @default 'Scroll to top'
+   */
+  text?: string
+  /**
+   * Button's icon.
+   * @default <Icon name="CaretUp" width={16} height={16} weight="bold" />
+   */
+  icon?: ButtonProps['icon']
+  /**
+   * Button icon's position.
+   * @default 'left'
+   */
+  iconPosition?: ButtonProps['iconPosition']
+}
+
+function ScrollToTopButton({
+  text = 'Scroll to top',
+  icon = <Icon name="CaretUp" width={16} height={16} weight="bold" />,
+  iconPosition = 'left',
+}: ScrollToTopButtonProps) {
+  return (
+    <Section className={styles.fsScrollToTopButton}>
+      <Button
+        variant="secondary"
+        icon={icon}
+        iconPosition={iconPosition}
+        onClick={() => window.scrollTo(0, 0)}
+      >
+        {text}
+      </Button>
+    </Section>
+  )
+}
+
+export default ScrollToTopButton

package/src/components/sections/ScrollToTopButton/index.ts

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

package/src/components/sections/ScrollToTopButton/scroll-to-top-button.module.scss

@@ -0,0 +1,12 @@
+@import "src/styles/scaffold";
+
+.fs-scroll-to-top-button {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-bottom: var(--fs-spacing-10);
+
+  @include media(">=notebook") {
+    padding-bottom: var(--fs-spacing-8);
+  }
+}

package/src/components/sections/Section/Section.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react'
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+
+type Props = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
+
+const Section = forwardRef<HTMLDivElement, Props>(function Section(
+  { className = '', ...otherProps },
+  ref
+) {
+  return (
+    <section ref={ref} className={`section ${className}`} {...otherProps} />
+  )
+})
+
+export default Section

package/src/components/sections/Section/index.ts

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

package/src/components/sections/Section/section.scss

@@ -0,0 +1,16 @@
+@import "src/styles/scaffold";
+
+.section {
+  width: 100%;
+
+  .text__title-section {
+    margin-bottom: var(--fs-spacing-3);
+  }
+}
+
+.section__divisor {
+  padding-top: var(--fs-spacing-5);
+  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
+
+  @include media(">=notebook") { padding-top: var(--fs-spacing-9); }
+}

package/src/components/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx

@@ -0,0 +1,97 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import FilterSkeleton from '.'
+
+<Meta
+  component={FilterSkeleton}
+  title="Features/Skeletons/FilterSkeleton"
+  argTypes={{
+    loading: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: true },
+    },
+  }}
+/>
+
+export const TemplateFilterSkeleton = ({ ...args }) => (
+  <FilterSkeleton {...args} />
+)
+
+<header>
+
+# Filter Skeleton
+
+The loading placeholder for the <code>Filter</code> component used in PLP.
+
+</header>
+
+## Overview
+
+The `FilterSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+
+---
+
+## Usage
+
+`import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'`
+
+<Canvas className="canvas-filter-skeleton">
+  <Story name="Usage" args={{ loading: true }}>
+    {TemplateFilterSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+---
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-margin-top"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-filter-skeleton-title-max-width" value="30%" />
+  <TokenRow
+    token="--fs-filter-skeleton-title-margin-bottom"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Content
+
+<TokenTable>
+  <TokenRow
+    token="--fs-filter-skeleton-content-min-height"
+    value="var(--fs-spacing-8)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-margin-bottom"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-filter-skeleton-content-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>

package/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react'
+
+import Shimmer from '../Shimmer'
+import Skeleton from '../Skeleton'
+import styles from './filter-skeleton.module.scss'
+
+interface FilterSkeletonProps {
+  /**
+   * Control whether skeleton should be visible or not.
+   */
+  loading?: boolean
+}
+
+function FilterSkeleton({
+  children,
+  loading = true,
+}: PropsWithChildren<FilterSkeletonProps>) {
+  return loading ? (
+    <div className={styles.fsFilterSkeleton} data-fs-filter-skeleton>
+      <Skeleton shimmer variant="text" />
+
+      <div data-fs-filter-skeleton-content>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Shimmer />
+      </div>
+    </div>
+  ) : (
+    <>{children}</>
+  )
+}
+
+export default FilterSkeleton

package/src/components/skeletons/FilterSkeleton/filter-skeleton.module.scss

@@ -0,0 +1,51 @@
+@import "src/styles/scaffold";
+
+.fs-filter-skeleton {
+  // --------------------------------------------------------
+  // Design Tokens for Filter Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-filter-skeleton-margin-top            : var(--fs-spacing-1);
+
+  // Title
+  --fs-filter-skeleton-title-max-width       : 30%;
+  --fs-filter-skeleton-title-margin-bottom   : var(--fs-spacing-2);
+
+  // Content
+  --fs-filter-skeleton-content-min-height    : var(--fs-spacing-8);
+  --fs-filter-skeleton-content-margin-bottom : var(--fs-spacing-0);
+  --fs-filter-skeleton-content-padding       : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);
+  --fs-filter-skeleton-content-border-color  : var(--fs-border-color-light);
+  --fs-filter-skeleton-content-border-width  : var(--fs-border-width);
+  --fs-filter-skeleton-content-border-radius : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  margin-top: var(--fs-filter-skeleton-margin-top);
+
+  @include media("<notebook") { display: none; }
+
+  [data-fs-skeleton-variant="text"] {
+    max-width: var(--fs-filter-skeleton-title-max-width);
+    margin-bottom: var(--fs-filter-skeleton-title-margin-bottom);
+  }
+
+  [data-fs-filter-skeleton-content] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--fs-filter-skeleton-content-padding);
+    overflow: hidden;
+    border: var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);
+    border-radius: var(--fs-filter-skeleton-content-border-radius);
+
+    [data-fs-skeleton-variant="text"] {
+      min-width: 100%;
+      min-height: var(--fs-filter-skeleton-content-min-height);
+      margin-bottom: var(--fs-filter-skeleton-content-margin-bottom);
+    }
+  }
+}

package/src/components/skeletons/FilterSkeleton/index.ts

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

package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.stories.mdx

@@ -0,0 +1,176 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+import ProductCardSkeleton from '.'
+
+<Meta
+  component={ProductCardSkeleton}
+  title="Features/Skeletons/ProductCardSkeleton"
+  argTypes={{
+    bordered: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+    sectioned: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+    displayButton: {
+      control: 'boolean',
+      table: { type: 'boolean' },
+    },
+  }}
+/>
+
+export const TemplateProductCardSkeleton = ({ ...args }) => (
+  <ProductCardSkeleton {...args} />
+)
+
+<header>
+
+# Product Card Skeleton
+
+The loading placeholder for the <code>ProductCard</code> used in several sections of the store.
+
+</header>
+
+## Overview
+
+The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+
+---
+
+## Usage
+
+`import ProductCardSkeleton from 'src/components/skeletons/ProductCardSkeleton'`
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story
+    name="Usage"
+    args={{
+      bordered: false,
+      sectioned: false,
+      variant: 'default',
+      displayButton: false,
+    }}
+  >
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-color"
+    value="transparent"
+    isColor
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Content
+
+<TokenTable>
+  <TokenRow token="--fs-product-card-skeleton-content-height" value="20%" />
+  <TokenRow
+    token="--fs-product-card-skeleton-content-margin-top"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>
+
+### Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-button-margin-top"
+    value="var(--fs-spacing-4)"
+  />
+</TokenTable>
+
+### Text
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-text-margin-bottom"
+    value="var(--fs-product-card-skeleton-content-margin-top)"
+  />
+</TokenTable>
+
+### Badge
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-height"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-margin-top"
+    value="var(--fs-product-card-skeleton-text-margin-top)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-max-width"
+    value="var(--fs-product-card-skeleton-content-height)"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-width-mobile"
+    value="30%"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-badge-min-width-tablet"
+    value="var(--fs-product-card-skeleton-content-height)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Sectioned
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story name="Sectioned" args={{ sectioned: true }}>
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-product-card-skeleton-sectioned-image-min-width"
+    value="13rem"
+  />
+  <TokenRow
+    token="--fs-product-card-skeleton-sectioned-image-height"
+    value="var(--fs-product-card-skeleton-image-height-desktop)"
+  />
+</TokenTable>
+
+### Bordered
+
+<Canvas className="canvas-product-card-skeleton">
+  <Story name="Bordered" args={{ bordered: true }}>
+    {TemplateProductCardSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-product-card-skeleton-bordered-mobile" value="none" />
+  <TokenRow
+    token="--fs-product-card-skeleton-bordered-desktop"
+    value="var(--fs-border-width) solid var(--fs-border-color-light)"
+  />
+</TokenTable>

package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx

@@ -0,0 +1,52 @@
+import Shimmer from '../Shimmer'
+import Skeleton from '../Skeleton'
+import styles from './product-card-skeleton.module.scss'
+
+interface ProductCardSkeletonProps {
+  /**
+   * Specifies if the component should have a preset border.
+   */
+  bordered?: boolean
+  /**
+   * Specifies if the component is displayed in a section.
+   */
+  sectioned?: boolean
+  /**
+   * Control whether the button should be displayed.
+   */
+  displayButton?: boolean
+  /**
+   * Specifies the component variant.
+   */
+  variant?: 'default' | 'wide'
+}
+
+function ProductCardSkeleton({
+  bordered,
+  sectioned,
+  displayButton,
+  variant = 'default',
+}: ProductCardSkeletonProps) {
+  return (
+    <div
+      className={styles.fsProductCardSkeleton}
+      data-fs-product-card-skeleton
+      data-fs-product-card-skeleton-variant={variant}
+      data-fs-product-card-skeleton-bordered={bordered}
+      data-fs-product-card-skeleton-sectioned={sectioned}
+    >
+      <div data-fs-product-card-skeleton-image>
+        <Skeleton variant="image" />
+      </div>
+      <div data-fs-product-card-skeleton-content>
+        <Skeleton variant="text" />
+        <Skeleton variant="text" />
+        <Skeleton variant="badge" />
+        {displayButton && <Skeleton variant="button" />}
+      </div>
+      <Shimmer />
+    </div>
+  )
+}
+
+export default ProductCardSkeleton

package/src/components/skeletons/ProductCardSkeleton/index.ts

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