@faststore/core 2.0.121-alpha.0 → 2.0.123-alpha.0

package/src/components/sections/ProductDetails/product-details.module.scss

@@ -1,185 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-details {
-  // --------------------------------------------------------
-  // Design Tokens for Product Details
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-details-vertical-spacing      : var(--fs-spacing-4);
-
-  --fs-product-details-section-border-radius : var(--fs-border-radius);
-  --fs-product-details-section-border-color  : var(--fs-border-color-light);
-  --fs-product-details-section-border-width  : var(--fs-border-width);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  margin-top: 0;
-
-  [data-fs-product-details-body] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-details-vertical-spacing);
-
-    @include media(">=tablet") {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      row-gap: 0;
-      column-gap: var(--fs-product-details-vertical-spacing);
-    }
-  }
-
-  [data-fs-product-details-section] {
-    height: fit-content;
-
-    [data-fs-buy-button] {
-      width: 100%;
-      margin-top: var(--fs-spacing-3);
-    }
-
-    [data-fs-price] {
-      display: block;
-
-      &[data-fs-price-variant="spot"] {
-        margin: 0;
-        font-weight: var(--fs-text-weight-black);
-      }
-    }
-
-    @include media(">=tablet") {
-      padding: var(--fs-spacing-3);
-      border: var(--fs-product-details-section-border-width) solid var(--fs-product-details-section-border-color);
-
-      &:not(:first-child) {
-        border-top: 0;
-      }
-    }
-
-    @include media(">=notebook") {
-      padding: var(--fs-product-details-vertical-spacing) var(--fs-spacing-5);
-    }
-  }
-
-  [data-fs-product-details-title],
-  [data-fs-product-details-info] {
-    @include media(">=tablet") {
-      grid-column: 8 / span 5;
-      height: 100%;
-    }
-
-    @include media(">=notebook") {
-      grid-column: 9 / span 4;
-    }
-  }
-
-  // -----------------------------
-  // Title Section
-  // -----------------------------
-
-  [data-fs-product-details-title] {
-    @include media(">=tablet") {
-      border-bottom: 0;
-      border-radius: var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius) 0 0;
-    }
-  }
-
-  // -----------------------------
-  // Info Section
-  // -----------------------------
-
-  [data-fs-product-details-info] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-details-vertical-spacing);
-
-    @include media(">=tablet") {
-      grid-row: span 5;
-      row-gap: 0;
-    }
-  }
-
-  // Settings
-
-  [data-fs-product-details-settings] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-details-vertical-spacing);
-  }
-
-  [data-fs-product-details-selectors] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-details-vertical-spacing);
-  }
-
-  [data-fs-product-details-values] {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  // Shipping
-
-  [data-fs-product-details-shipping] {
-    @include media(">=tablet") {
-      border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
-    }
-  }
-
-  // -----------------------------
-  // Gallery Section
-  // -----------------------------
-
-  [data-fs-product-details-gallery] {
-    @include media(">=tablet") {
-      grid-row: 1 / span 3;
-      grid-column: span 7;
-      max-height: 23.75rem;
-    }
-
-    @include media(">tablet", "<notebook") {
-      max-height: 35rem;
-    }
-
-    @include media(">=notebook") {
-      max-height: 33.125rem;
-    }
-
-    &[data-fs-image-gallery="without-selector"] {
-      @include media(">=notebook") {
-        grid-row-end: span 4;
-        grid-column: span 8;
-      }
-    }
-
-    &[data-fs-image-gallery="with-selector"] {
-      @include media(">=notebook") {
-        grid-row: 1 / span 4;
-        grid-column: span 8;
-      }
-    }
-  }
-
-  // -----------------------------
-  // Content Section
-  // -----------------------------
-
-  [data-fs-product-details-content] {
-    @include media(">=tablet") {
-      grid-row: span 10;
-      grid-column: span 7;
-      margin-top: var(--fs-spacing-7);
-    }
-
-    @include media(">=notebook") {
-      grid-column: span 8;
-    }
-  }
-
-  [data-fs-image-gallery="with-selector"] ~ [data-fs-product-details-content] {
-    @include media(">=notebook") {
-      grid-column: 2 / 9;
-    }
-  }
-}

package/src/components/sections/ProductGallery/product-gallery.module.scss

@@ -1,184 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-listing {
-  --product-listing-row-height: var(--fs-spacing-6);
-
-  height: 100%;
-  padding-top: 0;
-
-  [data-fs-empty-state] {
-    margin: var(--fs-spacing-3) 0;
-  }
-
-  @include media(">=notebook") {
-    padding-top: var(--fs-spacing-5);
-
-    [data-fs-empty-state] {
-      margin: 0 0 var(--fs-spacing-5);
-    }
-  }
-
-  [data-fs-product-listing-search-term] {
-    @include media(">=notebook") {
-      padding-bottom: var(--fs-spacing-6);
-    }
-
-    h1 {
-      font-size: var(--fs-text-size-4);
-
-      @include media(">=tablet") { font-size: var(--fs-text-size-5); }
-
-      span {
-        font-weight: var(--fs-text-weight-bold);
-      }
-    }
-  }
-
-  [data-fs-product-listing-content-grid] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-right: 0;
-    padding-left: 0;
-
-    @include media(">=notebook") {
-      display: grid;
-      grid-template-rows: var(--product-listing-row-height) auto;
-      grid-template-columns: repeat(12, 1fr);
-      row-gap: var(--fs-spacing-0);
-      column-gap: var(--fs-spacing-4);
-      padding-right: var(--fs-grid-padding);
-      padding-left: var(--fs-grid-padding);
-    }
-  }
-
-  [data-fs-product-listing-filters] {
-    @include media(">=notebook") {
-      position: sticky;
-      top: var(--fs-grid-gap-2);
-      grid-row: span 2;
-      grid-column: 1 / span 3;
-      align-self: start;
-    }
-  }
-
-  [data-fs-product-listing-sort] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    order: 1;
-    width: 100%;
-    min-height: rem(68px);
-    padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
-    background-color: var(--fs-color-body-bkg);
-
-    [data-fs-product-listing-sort-skeleton] {
-      min-width: rem(225px);
-      min-height: var(--fs-spacing-5);
-    }
-
-    @include media(">=notebook") {
-      grid-column: 6 / span 7;
-      justify-content: flex-end;
-      order: unset;
-      min-height: initial;
-      padding: 0;
-
-      [data-fs-button] {
-        display: none;
-      }
-
-      [data-fs-product-listing-filter-button-skeleton] {
-        display: none;
-      }
-    }
-  }
-
-  [data-fs-product-listing-results-count] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    order: 2;
-    min-height: rem(45px);
-    padding: var(--fs-spacing-2) var(--fs-spacing-3);
-    background-color: var(--fs-color-neutral-bkg);
-
-    @include media(">=notebook") {
-      grid-column: 4 /span 2;
-      justify-content: left;
-      order: unset;
-      min-height: initial;
-      padding: 0;
-      background-color: unset;
-    }
-
-    [data-fs-product-listing-results-count-skeleton] {
-      min-width: rem(130px);
-    }
-  }
-
-  [data-fs-product-listing-results] {
-    --padding: var(--fs-spacing-1);
-
-    order: 3;
-    padding: var(--padding) var(--padding) 0;
-    background-color: var(--fs-color-neutral-bkg);
-
-    @include media(">=notebook") {
-      grid-column: 4 / span 9;
-      order: unset;
-      padding: 0;
-      background-color: unset;
-    }
-
-    [data-fs-product-card] { min-width: 100%; }
-  }
-
-  [data-fs-product-listing-sponsored] {
-    padding: var(--fs-spacing-4) var(--fs-spacing-3);
-    margin: var(--fs-spacing-1) calc(-1 * var(--padding));
-    background-color: var(--fs-color-body-bkg);
-
-    @include media(">=notebook") {
-      padding: 0;
-      margin: var(--fs-spacing-6) 0;
-
-      [data-fs-tiles] {
-        row-gap: 0;
-        column-gap: var(--fs-grid-gap-2);
-      }
-    }
-
-    h3 { margin-bottom: var(--fs-spacing-1); }
-  }
-
-  [data-fs-product-listing-pagination] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: var(--fs-spacing-13);
-    padding: var(--fs-spacing-4);
-    margin-right: calc(-1 * var(--padding));
-    margin-left: calc(-1 * var(--padding));
-
-    @include media(">=notebook") {
-      padding: var(--fs-spacing-1) var(--fs-spacing-2);
-    }
-
-    [data-fs-button] {
-      width: 100%;
-
-      @include media(">=notebook") {
-        width: fit-content;
-      }
-    }
-  }
-
-  [data-fs-product-listing-pagination="top"] {
-    margin-bottom: var(--padding);
-  }
-
-  [data-fs-product-listing-pagination="bottom"] {
-    margin-top: var(--padding);
-  }
-}

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

@@ -1,12 +0,0 @@
-@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/skeletons/FilterSkeleton/FilterSkeleton.stories.mdx

@@ -1,97 +0,0 @@
-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 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/filter-skeleton.module.scss

@@ -1,51 +0,0 @@
-@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-filter-skeleton-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] {
-      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/ProductCardSkeleton/ProductCardSkeleton.stories.mdx

@@ -1,113 +0,0 @@
-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 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-radius"
-    value="var(--fs-border-radius)"
-  />
-  <TokenRow
-    token="--fs-product-card-skeleton-gap"
-    value="var(--fs-spacing-1)"
-  />
-</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-min-width"
-    value="10rem"
-  />
-</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"
-    value="var(--fs-border-width) solid var(--fs-border-color-light)"
-  />
-</TokenTable>

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

@@ -1,58 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-card-skeleton {
-  // --------------------------------------------------------
-  // Design Tokens for Product Card Skeleton
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-card-skeleton-padding                   : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
-  --fs-product-card-skeleton-border-radius             : var(--fs-border-radius);
-  --fs-product-card-skeleton-gap                       : var(--fs-spacing-1);
-
-  // Sectioned
-  --fs-product-card-skeleton-sectioned-min-width       : 10rem;
-
-  // Bordered
-  --fs-product-card-skeleton-bordered                  : var(--fs-border-width) solid var(--fs-border-color-light);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--fs-product-card-skeleton-gap);
-  padding: var(--fs-product-card-skeleton-padding);
-  overflow: hidden;
-  border-radius: var(--fs-product-card-skeleton-border-radius);
-
-  [data-fs-product-card-skeleton-content] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-card-skeleton-gap);
-  }
-
-  [data-fs-product-card-skeleton-image] {
-    aspect-ratio: var(--fs-product-card-skeleton-image-aspect-ratio);
-
-    [data-fs-skeleton-wrapper],
-    [data-fs-skeleton] {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-product-card-skeleton-sectioned="true"] {
-    min-width: var(--fs-product-card-skeleton-sectioned-min-width);
-  }
-
-  &[data-fs-product-card-skeleton-bordered="true"] {
-    border: var(--fs-product-card-skeleton-bordered);
-  }
-}