@faststore/core 0.3.16 → 2.0.65-alpha.0

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

@@ -1,254 +0,0 @@
-@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/regionalization/RegionalizationModal/regionalization-modal-content.module.scss

@@ -1,79 +0,0 @@
-.fs-regionalization-modal-content {
-  // --------------------------------------------------------
-  // Design Tokens for Regionalization Modal
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-regionalization-modal-padding                        : var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5);
-  --fs-regionalization-modal-background-color               : var(--fs-color-body-bkg);
-  --fs-regionalization-modal-border-radius                  : var(--fs-border-radius);
-
-  // Header
-  --fs-regionalization-modal-header-padding                 : var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4);
-
-  // Title
-  --fs-regionalization-modal-title-margin-bottom            : .625rem;
-  --fs-regionalization-modal-title-size                     : var(--fs-text-size-lead);
-  --fs-regionalization-modal-title-weight                   : var(--fs-text-weight-bold);
-  --fs-regionalization-modal-title-line-height              : 1.2;
-
-  // Description
-  --fs-regionalization-modal-description-size               : var(--fs-text-size-body);
-  --fs-regionalization-modal-description-line-height        : 1.5;
-  --fs-regionalization-modal-description-color              : var(--fs-color-text-light);
-
-  // Close Button
-  --fs-regionalization-modal-close-button-position-top      : 0;
-  --fs-regionalization-modal-close-button-position-right    : 0;
-
-  // Link
-  --fs-regionalization-modal-link-padding                   : 0;
-  --fs-regionalization-modal-link-color                     : var(--fs-color-link);
-  --fs-regionalization-modal-link-margin-right              : var(--fs-spacing-0);
-
-  position: relative;
-  background-color: var(--fs-regionalization-modal-background-color);
-  border-radius: var(--fs-regionalization-modal-border-radius);
-
-  [data-fs-regionalization-modal-header] {
-    padding: var(--fs-regionalization-modal-header-padding);
-
-    [data-fs-regionalization-modal-title] {
-      margin-bottom: var(--fs-regionalization-modal-title-margin-bottom);
-      font-size: var(--fs-regionalization-modal-title-size);
-      font-weight: var(--fs-regionalization-modal-title-weight);
-      line-height: var(--fs-regionalization-modal-title-line-height);
-    }
-
-    [data-fs-regionalization-modal-description] {
-      font-size: var(--fs-regionalization-modal-description-size);
-      line-height: var(--fs-regionalization-modal-description-line-height);
-      color: var(--fs-regionalization-modal-description-color);
-    }
-
-    [data-fs-regionalization-modal-button] {
-      position: absolute;
-      top: var(--fs-regionalization-modal-close-button-position-top);
-      right: var(--fs-regionalization-modal-close-button-position-right);
-    }
-  }
-
-  [data-fs-regionalization-modal-body] {
-    padding: var(--fs-regionalization-modal-padding);
-
-    [data-fs-regionalization-modal-input] {
-      margin-bottom: var(--fs-spacing-6);
-    }
-
-    [data-fs-regionalization-modal-link] {
-      display: flex;
-      flex-direction: row;
-      align-content: flex-start;
-      align-items: center;
-      justify-content: flex-start;
-      padding: var(--fs-regionalization-modal-link-padding);
-      margin-right: var(--fs-regionalization-modal-link-margin-right);
-      color: var(--fs-regionalization-modal-link-color);
-    }
-  }
-}

package/src/components/skeletons/Shimmer/Shimmer.tsx

@@ -1,11 +0,0 @@
-import styles from './shimmer.module.scss'
-
-function Shimmer() {
-  return (
-    <div className={styles.fsShimmer} data-fs-shimmer-wrapper>
-      <div data-fs-shimmer />
-    </div>
-  )
-}
-
-export default Shimmer

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

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

package/src/components/skeletons/Shimmer/shimmer.module.scss

@@ -1,43 +0,0 @@
-.fs-shimmer {
-  // --------------------------------------------------------
-  // Design Tokens for Shimmer
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-shimmer-wrapper-transition-timing    : 850ms;
-  --fs-shimmer-wrapper-transition-function  : linear;
-  --fs-shimmer-wrapper-transition-iteration : infinite;
-
-  // Shimmer
-  --fs-shimmer-width                        : 50%;
-  --fs-shimmer-height                       : 100%;
-  --fs-shimmer-bkg-color                    : rgb(255 255 255 / 20%);
-  --fs-shimmer-box-shadow                   : 0 0 var(--fs-spacing-5) var(--fs-spacing-5) rgb(255 255 255 / 20%);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  /*
-   * Parent must have `position: relative` and `overflow: hidden`
-   * in order to the effect to work properly.
-   */
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100%;
-  animation: loading var(--fs-shimmer-wrapper-transition-timing) var(--fs-shimmer-wrapper-transition-iteration) var(--fs-shimmer-wrapper-transition-function);
-
-  [data-fs-shimmer] {
-    width: var(--fs-shimmer-width);
-    height: var(--fs-shimmer-height);
-    background: var(--fs-shimmer-bkg-color);
-    box-shadow: var(--fs-shimmer-box-shadow);
-  }
-}
-
-@keyframes loading {
-  0% { transform: translate3d(-50vw, 0, 0); }
-  100% { transform: translate3d(0, 0, 0); }
-}

package/src/components/skeletons/Skeleton/Skeleton.tsx

@@ -1,49 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { Skeleton as UISkeleton } from '@faststore/ui'
-
-import Shimmer from '../Shimmer'
-import styles from './skeleton.module.scss'
-
-type Variant = 'text' | 'button' | 'image' | 'badge'
-
-interface SkeletonProps {
-  /**
-   * Control whether skeleton should be visible or not.
-   */
-  loading?: boolean
-  /**
-   * Control whether the shimmer effect should be displayed or not.
-   */
-  shimmer?: boolean
-  /**
-   * Specifies the skeleton element variant.
-   */
-  variant: Variant
-}
-
-function Skeleton({
-  variant,
-  children,
-  loading = true,
-  shimmer = false,
-  ...otherProps
-}: PropsWithChildren<SkeletonProps>) {
-  return loading ? (
-    <div
-      data-fs-skeleton-wrapper
-      className={styles.fsSkeleton}
-      data-fs-skeleton-shimmer={shimmer}
-    >
-      <UISkeleton
-        data-fs-skeleton
-        data-fs-skeleton-variant={variant}
-        {...otherProps}
-      />
-      {shimmer && <Shimmer />}
-    </div>
-  ) : (
-    <>{children}</>
-  )
-}
-
-export default Skeleton

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

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

package/src/components/skeletons/Skeleton/skeleton.module.scss

@@ -1,77 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-skeleton {
-  // --------------------------------------------------------
-  // Design Tokens for Skeleton
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-skeleton-bkg-color            : var(--fs-color-disabled-bkg);
-  --fs-skeleton-border-radius        : var(--fs-border-radius);
-
-  // Text
-  --fs-skeleton-text-width           : 100%;
-  --fs-skeleton-text-height          : var(--fs-spacing-4);
-
-  // Button
-  --fs-skeleton-button-width         : var(--fs-spacing-13);
-  --fs-skeleton-button-height        : var(--fs-spacing-5);
-  --fs-skeleton-button-gap           : var(--fs-spacing-2);
-  --fs-skeleton-button-border-radius : var(--fs-skeleton-border-radius);
-
-  // Image
-  --fs-skeleton-image-height-mobile  : 45vw;
-  --fs-skeleton-image-height-desktop : 12.188rem;
-  --fs-skeleton-image-border-radius  : var(--fs-skeleton-border-radius);
-
-  // Badge
-  --fs-skeleton-badge-width          : 40%;
-  --fs-skeleton-badge-height         : var(--fs-spacing-5);
-  --fs-skeleton-badge-border-radius  : var(--fs-border-radius-pill);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  &[data-fs-skeleton-shimmer="true"] {
-    position: relative;
-    overflow: hidden;
-  }
-
-  [data-fs-skeleton] {
-    overflow: hidden;
-    background: var(--fs-skeleton-bkg-color);
-    border-radius: var(--fs-skeleton-border-radius);
-
-    // --------------------------------------------------------
-    // Variants Styles
-    // --------------------------------------------------------
-
-    &[data-fs-skeleton-variant="text"] {
-      width: var(--fs-skeleton-text-width);
-      height: var(--fs-skeleton-text-height);
-    }
-
-    &[data-fs-skeleton-variant="button"] {
-      column-gap: var(--fs-skeleton-button-gap);
-      width: var(--fs-skeleton-button-width);
-      height: var(--fs-skeleton-button-height);
-      border-radius: var(--fs-skeleton-button-border-radius);
-    }
-
-    &[data-fs-skeleton-variant="image"] {
-      height: var(--fs-skeleton-image-height-mobile);
-      border-radius: var(--fs-skeleton-image-border-radius);
-
-      @include media(">=notebook") {
-        height: var(--fs-skeleton-image-height-desktop);
-      }
-    }
-
-    &[data-fs-skeleton-variant="badge"] {
-      width: var(--fs-skeleton-badge-width);
-      height: var(--fs-skeleton-badge-height);
-      border-radius: var(--fs-skeleton-badge-border-radius);
-    }
-  }
-}

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

@@ -1,177 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-import { SectionList, SectionItem } from 'src/../.storybook/components'
-
-import Skeleton from './Skeleton'
-import FilterSkeleton from './FilterSkeleton'
-import ProductCardSkeleton from './ProductCardSkeleton'
-
-import Icon from 'src/components/ui/Icon'
-
-export const TemplateSkeleton = ({ ...args }) => <Skeleton {...args} />
-
-<Meta
-  component={Skeleton}
-  title="Features/Skeletons/Overview"
-  argTypes={{
-    loading: {
-      control: 'boolean',
-      table: { type: 'boolean', summary: true },
-    },
-    shimmer: {
-      control: 'boolean',
-      table: { type: 'boolean', summary: false },
-    },
-  }}
-/>
-
-<header>
-
-# Skeletons
-
-This feature improves the store's experience and perceived performance through loading placeholders.
-
-</header>
-
-## Overview
-
-`Skeletons` are like an element's or section's wireframe. It's a placeholder
-that simulates the layout of these elements/sections while data is being loaded.
-
-Instead of showing a blank page, displaying `Skeletons` while loading content makes the user feel like the store is more responsive and faster.
-
-Also by using `Skeletons` the store will be less likely to experience [Cumulative Layout Shilf (or CLS)](https://web.dev/i18n/en/cls/).
-
----
-
-## Usage
-
-The `Skeleton` component is used as placeholder for the primitive elements (e.g. texts, buttons), being part of the related components.
-
-`import Skeleton from 'src/components/skeletons/Skeleton'`
-
-<Canvas className="canvas-skeletons">
-  <Story name="Usage" args={{ loading: true, shimmer: false, variant: 'text' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Usage" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-skeleton-bkg-color"
-    value="var(--fs-color-disabled-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-skeleton-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Text
-
-<Canvas className="canvas-skeletons">
-  <Story name="Text" args={{ loading: true, shimmer: true, variant: 'text' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-text-width" value="100%" />
-  <TokenRow token="--fs-skeleton-text-height" value="var(--fs-spacing-4)" />
-</TokenTable>
-
-### Button
-
-<Canvas className="canvas-skeletons">
-  <Story
-    name="Button"
-    args={{ loading: true, shimmer: true, variant: 'button' }}
-  >
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-button-width" value="var(--fs-spacing-13)" />
-  <TokenRow token="--fs-skeleton-button-height" value="var(--fs-spacing-5)" />
-  <TokenRow token="--fs-skeleton-button-gap" value="var(--fs-spacing-2)" />
-  <TokenRow
-    token="--fs-skeleton-button-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
-### Image
-
-<Canvas className="canvas-skeletons">
-  <Story name="Image" args={{ loading: true, shimmer: true, variant: 'image' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-image-height-mobile" value="45vw" />
-  <TokenRow token="--fs-skeleton-image-height-desktop" value="12.188rem" />
-  <TokenRow
-    token="--fs-skeleton-image-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
-### Badge
-
-<Canvas className="canvas-skeletons">
-  <Story name="Badge" args={{ loading: true, shimmer: true, variant: 'badge' }}>
-    {TemplateSkeleton.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-skeleton-badge-height-mobile" value="45%" />
-  <TokenRow
-    token="--fs-skeleton-badge-height-desktop"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-skeleton-badge-border-radius"
-    value="var(--fs-skeleton-border-radius)"
-  />
-</TokenTable>
-
----
-
-## Components
-
-<SectionList grid="grid" classes="sbdocs-skeletons">
-  <SectionItem
-    title="Filter Skeleton"
-    actionPath="../?path=/docs/features-skeletons-filterskeleton--usage"
-    description={
-      <>
-        Loading placeholder for the <code>Filter</code> used in PLP.
-      </>
-    }
-  >
-    <FilterSkeleton loading />
-  </SectionItem>
-  <SectionItem
-    title="Product Card Skeleton"
-    actionPath="../?path=/docs/features-skeletons-productcardskeleton--usage"
-    description={
-      <>
-        Loading placeholder for the <code>ProductCard</code> used in several
-        sections of the store.
-      </>
-    }
-  >
-    <ProductCardSkeleton variant="wide" displayButton />
-  </SectionItem>
-</SectionList>