@faststore/core 0.3.16 → 2.0.65-alpha.0

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

@@ -39,7 +39,7 @@ The loading placeholder for the <code>ProductCard</code> used in several section
 
 ## Overview
 
-The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-skeletons-overview--usage) feature.
+The `ProductCardSkeleton` component is part of Skeletons feature.
 
 ---
 
@@ -68,71 +68,13 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
     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)"
+    token="--fs-product-card-skeleton-gap"
+    value="var(--fs-spacing-1)"
   />
 </TokenTable>
 
@@ -150,12 +92,8 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
 
 <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)"
+    token="--fs-product-card-skeleton-sectioned-min-width"
+    value="10rem"
   />
 </TokenTable>
 
@@ -168,9 +106,8 @@ The `ProductCardSkeleton` component is part of [Skeletons](?path=/docs/features-
 </Canvas>
 
 <TokenTable>
-  <TokenRow token="--fs-product-card-skeleton-bordered-mobile" value="none" />
   <TokenRow
-    token="--fs-product-card-skeleton-bordered-desktop"
+    token="--fs-product-card-skeleton-bordered"
     value="var(--fs-border-width) solid var(--fs-border-color-light)"
   />
 </TokenTable>

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

@@ -1,5 +1,5 @@
-import Shimmer from '../Shimmer'
-import Skeleton from '../Skeleton'
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
 import styles from './product-card-skeleton.module.scss'
 
 interface ProductCardSkeletonProps {
@@ -19,12 +19,17 @@ interface ProductCardSkeletonProps {
    * Specifies the component variant.
    */
   variant?: 'default' | 'wide'
+  /**
+   * Specifies the ProductCard image's aspect ratio.
+   */
+  aspectRatio?: number
 }
 
 function ProductCardSkeleton({
   bordered,
   sectioned,
   displayButton,
+  aspectRatio = 1,
   variant = 'default',
 }: ProductCardSkeletonProps) {
   return (
@@ -35,16 +40,38 @@ function ProductCardSkeleton({
       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
+        data-fs-product-card-skeleton-image
+        style={
+          {
+            '--fs-product-card-skeleton-image-aspect-ratio': aspectRatio,
+          } as React.CSSProperties
+        }
+      >
+        <UISkeleton size={{ width: '100%', height: '100%' }} />
       </div>
       <div data-fs-product-card-skeleton-content>
-        <Skeleton variant="text" />
-        <Skeleton variant="text" />
-        <Skeleton variant="badge" />
-        {displayButton && <Skeleton variant="button" />}
+        <UISkeleton
+          data-fs-product-card-skeleton-text
+          size={{ width: '90%', height: '1.5rem' }}
+        />
+        <UISkeleton
+          data-fs-product-card-skeleton-text
+          size={{ width: '70%', height: '1.5rem' }}
+        />
+        <UISkeleton
+          data-fs-product-card-skeleton-badge
+          size={{ width: '6rem', height: '2rem' }}
+          border="pill"
+        />
+        {displayButton && (
+          <UISkeleton
+            data-fs-product-card-skeleton-button
+            size={{ width: '6rem', height: '2rem' }}
+            style={{ columnGap: '.75rem' }}
+          />
+        )}
       </div>
-      <Shimmer />
     </div>
   )
 }

package/src/components/skeletons/ProductCardSkeleton/product-card-skeleton.module.scss

@@ -7,34 +7,14 @@
 
   // Default properties
   --fs-product-card-skeleton-padding                   : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
-  --fs-product-card-skeleton-border-width              : var(--fs-border-width);
-  --fs-product-card-skeleton-border-color              : transparent;
   --fs-product-card-skeleton-border-radius             : var(--fs-border-radius);
-
-  // Content
-  --fs-product-card-skeleton-content-height            : 20%;
-  --fs-product-card-skeleton-content-margin-top        : var(--fs-spacing-2);
-
-  // Button
-  --fs-product-card-skeleton-button-margin-top         : var(--fs-spacing-4);
-
-  // Text
-  --fs-product-card-skeleton-text-margin-bottom        : var(--fs-product-card-skeleton-content-margin-top);
-
-  // Badge
-  --fs-product-card-skeleton-badge-min-height          : var(--fs-spacing-5);
-  --fs-product-card-skeleton-badge-margin-top          : var(--fs-product-card-skeleton-text-margin-top);
-  --fs-product-card-skeleton-badge-max-width           : var(--fs-product-card-skeleton-content-height);
-  --fs-product-card-skeleton-badge-min-width-mobile    : 30%;
-  --fs-product-card-skeleton-badge-min-width-tablet    : var(--fs-product-card-skeleton-content-height);
+  --fs-product-card-skeleton-gap                       : var(--fs-spacing-1);
 
   // Sectioned
-  --fs-product-card-skeleton-sectioned-image-min-width : 13rem;
-  --fs-product-card-skeleton-sectioned-image-height    : 12.188rem;
+  --fs-product-card-skeleton-sectioned-min-width       : 10rem;
 
   // Bordered
-  --fs-product-card-skeleton-bordered-mobile           : none;
-  --fs-product-card-skeleton-bordered-desktop          : var(--fs-border-width) solid var(--fs-border-color-light);
+  --fs-product-card-skeleton-bordered                  : var(--fs-border-width) solid var(--fs-border-color-light);
 
   // --------------------------------------------------------
   // Structural Styles
@@ -43,36 +23,24 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 14vw;
-  height: 100%;
+  row-gap: var(--fs-product-card-skeleton-gap);
   padding: var(--fs-product-card-skeleton-padding);
   overflow: hidden;
-  border: var(--fs-product-card-skeleton-border-width) solid var(--fs-product-card-skeleton-border-color);
   border-radius: var(--fs-product-card-skeleton-border-radius);
 
-  @include media(">=notebook") { min-width: 12rem; }
-
   [data-fs-product-card-skeleton-content] {
-    position: relative;
-    height: var(--fs-product-card-skeleton-content-height);
-    margin-top: var(--fs-product-card-skeleton-content-margin-top);
-
-    [data-fs-skeleton-variant="text"] { margin-bottom: var(--fs-product-card-skeleton-text-margin-bottom); }
-
-    [data-fs-skeleton-variant="button"] { margin-top: var(--fs-product-card-skeleton-button-margin-top); }
-
-    [data-fs-skeleton-variant="badge"] {
-      min-width: var(--fs-product-card-skeleton-badge-min-width-mobile);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-card-skeleton-gap);
+  }
 
-      @include media(">=notebook") {
-        min-height: var(--fs-product-card-skeleton-badge-min-height);
-        margin-top: var(--fs-product-card-skeleton-badge-margin-top);
-      }
+  [data-fs-product-card-skeleton-image] {
+    aspect-ratio: var(--fs-product-card-skeleton-image-aspect-ratio);
 
-      @include media(">=tablet") {
-        min-width: var(--fs-product-card-skeleton-badge-min-width-tablet);
-        max-width: var(--fs-product-card-skeleton-badge-max-width);
-      }
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
     }
   }
 
@@ -81,17 +49,10 @@
   // --------------------------------------------------------
 
   &[data-fs-product-card-skeleton-sectioned="true"] {
-    [data-fs-skeleton-variant="image"] {
-      min-width: var(--fs-product-card-skeleton-sectioned-image-min-width);
-      min-height: var(--fs-product-card-skeleton-sectioned-image-height);
-    }
+    min-width: var(--fs-product-card-skeleton-sectioned-min-width);
   }
 
   &[data-fs-product-card-skeleton-bordered="true"] {
-    border: var(--fs-product-card-skeleton-bordered-mobile);
-
-    @include media(">=notebook") {
-      border: var(--fs-product-card-skeleton-bordered-desktop);
-    }
+    border: var(--fs-product-card-skeleton-bordered);
   }
 }

package/src/components/skeletons/ProductGridSkeleton/ProductGridSkeleton.tsx

@@ -7,17 +7,19 @@ import ProductCardSkeleton from '../ProductCardSkeleton'
 
 interface ProductGridSkeletonProps {
   loading?: boolean
+  aspectRatio?: number
 }
 
 function ProductGridSkeleton({
   children,
+  aspectRatio,
   loading = true,
 }: PropsWithChildren<ProductGridSkeletonProps>) {
   return loading ? (
     <ul className={styles.fsProductGrid}>
       {Array.from({ length: ITEMS_PER_PAGE }, (_, index) => (
         <li key={String(index)}>
-          <ProductCardSkeleton bordered />
+          <ProductCardSkeleton aspectRatio={aspectRatio} bordered />
         </li>
       ))}
     </ul>

package/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx

@@ -7,10 +7,12 @@ import ProductCardSkeleton from '../ProductCardSkeleton'
 
 interface Props {
   loading?: boolean
+  aspectRatio?: number
 }
 
 function ProductShelfSkeleton({
   children,
+  aspectRatio,
   loading = true,
 }: PropsWithChildren<Props>) {
   return loading ? (
@@ -20,7 +22,7 @@ function ProductShelfSkeleton({
     >
       {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
         <li key={String(index)}>
-          <ProductCardSkeleton sectioned />
+          <ProductCardSkeleton aspectRatio={aspectRatio} sectioned />
         </li>
       ))}
     </ul>

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx

@@ -1,44 +1,46 @@
-import Skeleton from 'src/components/skeletons/Skeleton'
-import Shimmer from 'src/components/skeletons/Shimmer'
+import { Skeleton as UISkeleton } from '@faststore/ui'
 
 import styles from './product-tile-skeleton.module.scss'
 
 interface ProductTileSkeletonProps {
   index: number
-  bordered?: boolean
-  variant?: 'wide' | 'default'
+  aspectRatio?: number
 }
 
 function ProductTileSkeleton({
   index,
-  bordered,
-  variant = 'default',
+  aspectRatio = 1,
 }: ProductTileSkeletonProps) {
   return (
     <div
       data-fs-product-tile-skeleton
       className={styles.fsProductTileSkeleton}
       data-fs-product-tile-skeleton-index={index}
-      data-fs-product-tile-skeleton-variant={variant}
-      data-fs-product-tile-skeleton-bordered={bordered}
     >
       <div
         data-fs-product-tile-skeleton-image
         data-fs-product-tile-skeleton-index={index}
+        style={
+          {
+            '--fs-product-tile-skeleton-image-aspect-ratio': aspectRatio,
+          } as React.CSSProperties
+        }
       >
-        <Skeleton variant="image" />
+        <UISkeleton size={{ width: 'auto', height: '100%' }} loading={true} />
       </div>
       <div
         data-fs-product-tile-skeleton-content
         data-fs-product-tile-skeleton-index={index}
       >
-        <div
-          data-fs-product-tile-skeleton-text
-          data-fs-product-tile-skeleton-index={index}
-        >
-          <Skeleton variant="text" />
+        <div data-fs-product-tile-skeleton-heading>
+          <div
+            data-fs-product-tile-skeleton-text
+            data-fs-product-tile-skeleton-index={index}
+          >
+            <UISkeleton size={{ width: '70%', height: '1.5rem' }} />
+          </div>
           <div data-fs-product-tile-skeleton-price>
-            <Skeleton variant="text" />
+            <UISkeleton size={{ width: '60%', height: '1.5rem' }} />
           </div>
         </div>
 
@@ -46,10 +48,9 @@ function ProductTileSkeleton({
           data-fs-product-tile-skeleton-badge
           data-fs-product-tile-skeleton-index={index}
         >
-          <Skeleton variant="badge" />
+          <UISkeleton size={{ width: '6rem', height: '2rem' }} border="pill" />
         </div>
       </div>
-      <Shimmer />
     </div>
   )
 }

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/product-tile-skeleton.module.scss

@@ -5,37 +5,11 @@
   // Design Tokens for Product Tile Skeleton
   // --------------------------------------------------------
 
-  // Image
-  --fs-product-tile-skeleton-image-height-mobile                : 60%;
-  --fs-product-tile-skeleton-image-min-height-mobile            : var(--fs-product-tile-skeleton-image-height-mobile);
-  --fs-product-tile-skeleton-image-height-tablet                : 70%;
-  --fs-product-tile-skeleton-image-min-height-tablet            : var(--fs-product-tile-skeleton-image-height-tablet);
-  --fs-product-tile-skeleton-image-height-desktop               : 80%;
-  --fs-product-tile-skeleton-image-min-height-desktop           : var(--fs-product-tile-skeleton-image-height-desktop);
-  --fs-product-tile-skeleton-image-border-radius                : var(--fs-border-radius) var(--fs-border-radius) 0 0;
+  // Default properties
+  --fs-product-tile-skeleton-gap                                : var(--fs-spacing-1);
 
   // Content
-  --fs-product-tile-skeleton-content-height-mobile              : 40%;
-  --fs-product-tile-skeleton-content-height-tablet              : 30%;
-  --fs-product-tile-skeleton-content-height-desktop             : 20%;
   --fs-product-tile-skeleton-content-padding                    : var(--fs-spacing-3);
-  --fs-product-tile-skeleton-content-border-bottom-left-radius  : var(--fs-border-radius);
-  --fs-product-tile-skeleton-content-border-bottom-right-radius : var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
-
-  // Text
-  --fs-product-tile-skeleton-text-width-mobile                  : 70%;
-  --fs-product-tile-skeleton-text-width-tablet                  : 50%;
-  --fs-product-tile-skeleton-text-width-desktop                 : 60%;
-  --fs-product-tile-skeleton-text-margin-bottom                 : var(--fs-spacing-1);
-
-  // Price
-  --fs-product-tile-skeleton-price-width-mobile                 : 60%;
-  --fs-product-tile-skeleton-price-width-tablet                 : 100%;
-
-  // Badge
-  --fs-product-tile-skeleton-badge-width-mobile                 : 20%;
-  --fs-product-tile-skeleton-badge-width-tablet                 : var(--fs-product-tile-skeleton-badge-width-mobile);
-  --fs-product-tile-skeleton-badge-position-right               : var(--fs-product-tile-skeleton-text-margin-bottom);
 
   // Wide
   --fs-product-tile-skeleton-wide-padding                       : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
@@ -46,173 +20,62 @@
   // --------------------------------------------------------
 
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   padding: 0;
   overflow: hidden;
 
-  &[data-fs-product-tile-skeleton-index="1"] {
-    min-width: 9rem;
-    height: 24rem;
-
-    @include media(">=tablet") { height: 28rem; }
+  @include media(">=tablet") {
+    display: grid;
+    grid-auto-rows: 62% auto;
+    [data-fs-product-card-image] { height: 100%; }
   }
 
-  [data-fs-product-tile-skeleton-image] {
-    height: var(--fs-product-tile-skeleton-image-height-mobile);
-    min-height: var(--fs-product-tile-skeleton-image-min-height-mobile);
-    border-radius: var(--fs-product-tile-skeleton-image-border-radius);
-
-    @include media(">=tablet") {
-      height: var(--fs-product-tile-skeleton-image-height-tablet);
-      min-height: var(--fs-product-tile-skeleton-image-min-height-tablet);
-    }
-
-    @include media(">=notebook") {
-      height: var(--fs-product-tile-skeleton-image-height-desktop);
-      min-height: var(--fs-product-tile-skeleton-image-min-height-desktop);
-    }
-
-    &[data-fs-product-tile-skeleton-index="1"] {
-      height: 80%;
-
-      @include media(">=tablet") {
-        height: 70%;
-        min-height: 70%;
-      }
-
-      @include media(">=notebook") {
-        height: 80%;
-        min-height: 80%;
-      }
-    }
-
-    [data-fs-skeleton-wrapper] { height: 100%; }
-
-    [data-fs-skeleton-variant="image"] {
-      width: 100%;
-      height: 100%;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
+  @include media(">=notebook") { grid-auto-rows: 80% auto; }
 
   [data-fs-product-tile-skeleton-content] {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    height: var(--fs-product-tile-skeleton-content-height-mobile);
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
     padding: var(--fs-product-tile-skeleton-content-padding);
-    border-bottom-right-radius: var(--fs-product-tile-skeleton-content-border-bottom-right-radius);
-    border-bottom-left-radius: var(--fs-product-tile-skeleton-content-border-bottom-left-radius);
-
-    @include media(">=tablet") {
-      flex-flow: row wrap;
-      height: var(--fs-product-tile-skeleton-content-height-tablet);
-    }
+    background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
 
     @include media(">=notebook") {
-      flex-flow: row wrap;
-      height: var(--fs-product-tile-skeleton-content-height-desktop);
-    }
-
-    &[data-fs-product-tile-skeleton-index="1"] {
-      height: 20%;
-      padding: var(--fs-spacing-2) var(--fs-spacing-3);
-
-      @include media(">=tablet") {
-        flex-flow: row wrap;
-        height: 30%;
-      }
-
-      @include media(">=notebook") { height: 20%; }
+      flex-direction: row;
+      justify-content: space-between;
+      height: 100%;
     }
+  }
 
-    [data-fs-product-tile-skeleton-text] {
-      width: var(--fs-product-tile-skeleton-text-width-mobile);
-
-      @include media(">=tablet") {
-        width: var(--fs-product-tile-skeleton-text-width-tablet);
-
-        &[data-fs-product-tile-skeleton-index="2"],
-        &[data-fs-product-tile-skeleton-index="3"] { width: 100%; }
-      }
-
-      @include media(">=notebook") {
-        width: var(--fs-product-tile-skeleton-text-width-desktop);
-
-        &[data-fs-product-tile-skeleton-index="2"],
-        &[data-fs-product-tile-skeleton-index="3"] { width: 60%; }
-      }
+  [data-fs-product-tile-skeleton-heading] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
+    width: 100%;
+  }
 
-      [data-fs-skeleton-variant="text"] {
-        margin-bottom: var(--fs-product-tile-skeleton-text-margin-bottom);
-      }
+  [data-fs-product-tile-skeleton-badge] {
+    max-width: 100%;
+  }
 
-      [data-fs-product-tile-skeleton-price] {
-        width: var(--fs-product-tile-skeleton-price-width-mobile);
+  [data-fs-product-tile-skeleton-image] {
+    width: 100%;
+    aspect-ratio: var(--fs-product-tile-skeleton-image-aspect-ratio);
+    overflow: hidden;
 
-        @include media(">=tablet") { width: var(--fs-product-tile-skeleton-price-width-tablet); }
-      }
-    }
+    [data-fs-skeleton-variant="image"] { border-radius: 0; }
 
-    [data-fs-product-tile-skeleton-badge] {
-      position: absolute;
-      right: var(--fs-product-tile-skeleton-badge-position-right);
-      width: var(--fs-product-tile-skeleton-badge-width-mobile);
-
-      @include media(">=tablet") { width: var(--fs-product-tile-skeleton-badge-width-tablet); }
-
-      &[data-fs-product-tile-skeleton-index="2"],
-      &[data-fs-product-tile-skeleton-index="3"] {
-        bottom: var(--fs-spacing-2);
-        left: var(--fs-spacing-3);
-        width: 30%;
-
-        @include media(">=tablet") {
-          position: relative;
-          bottom: 0;
-          left: var(--fs-spacing-2);
-          width: 50%;
-        }
-
-        @include media(">=notebook") {
-          position: absolute;
-          right: var(--fs-spacing-1);
-          bottom: unset;
-          left: unset;
-          width: 30%;
-        }
-      }
-
-      [data-fs-skeleton-variant="badge"] {
-        width: 100%;
-        height: var(--fs-spacing-4);
-
-        @include media(">=tablet") {
-          position: absolute;
-          right: var(--fs-spacing-1);
-        }
-
-        @include media(">=notebook") {
-          position: relative;
-          right: var(--fs-spacing-0);
-        }
-      }
-    }
+    @include media(">=tablet") { height: 100%; }
   }
 
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-product-tile-skeleton-variant="wide"] {
-    [data-fs-product-tile-skeleton-content] {
-      background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
-
-      @include media(">=tablet") {
-        padding: var(--fs-product-tile-skeleton-wide-padding);
-      }
+  [data-fs-product-tile-skeleton-image],
+  [data-fs-product-tile-skeleton-badge] {
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
     }
   }
 }