@faststore/core 2.0.120-alpha.0 → 2.0.122-alpha.0

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);
-  }
-}

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

@@ -1,81 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-product-tile-skeleton {
-  // --------------------------------------------------------
-  // Design Tokens for Product Tile Skeleton
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-product-tile-skeleton-gap                                : var(--fs-spacing-1);
-
-  // Content
-  --fs-product-tile-skeleton-content-padding                    : var(--fs-spacing-3);
-
-  // Wide
-  --fs-product-tile-skeleton-wide-padding                       : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
-  --fs-product-tile-skeleton-wide-bkg-color                     : var(--fs-color-neutral-bkg);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  overflow: hidden;
-
-  @include media(">=tablet") {
-    display: grid;
-    grid-auto-rows: 62% auto;
-    [data-fs-product-card-image] { height: 100%; }
-  }
-
-  @include media(">=notebook") { grid-auto-rows: 80% auto; }
-
-  [data-fs-product-tile-skeleton-content] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-tile-skeleton-gap);
-    padding: var(--fs-product-tile-skeleton-content-padding);
-    background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
-
-    @include media(">=notebook") {
-      flex-direction: row;
-      justify-content: space-between;
-      height: 100%;
-    }
-  }
-
-  [data-fs-product-tile-skeleton-heading] {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--fs-product-tile-skeleton-gap);
-    width: 100%;
-  }
-
-  [data-fs-product-tile-skeleton-badge] {
-    max-width: 100%;
-  }
-
-  [data-fs-product-tile-skeleton-image] {
-    width: 100%;
-    aspect-ratio: var(--fs-product-tile-skeleton-image-aspect-ratio);
-    overflow: hidden;
-
-    [data-fs-skeleton-variant="image"] { border-radius: 0; }
-
-    @include media(">=tablet") { height: 100%; }
-  }
-
-  [data-fs-product-tile-skeleton-image],
-  [data-fs-product-tile-skeleton-badge] {
-    [data-fs-skeleton-wrapper],
-    [data-fs-skeleton] {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}

package/src/components/ui/BannerText/BannerText.stories.mdx

@@ -1,270 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-
-import BannerText from '.'
-
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-
-<Meta
-  title="Organisms/BannerText"
-  argTypes={{
-    actionPath: { table: { disable: true } },
-  }}
-  component={BannerText}
-/>
-
-export const Template = (args) => <BannerText {...args} />
-
-<header>
-
-# Banner Text
-
-Banners are used for advertising brands, products, and/or collections. They comprise a title, some description (only available for the `Secondary` variation), and a call-to-action button.
-
-</header>
-
-## Overview
-
-The `BannerText` component uses [FastStore UI Banner](https://www.faststore.dev/reference/ui/molecules/Banner) as base.
-
----
-
-## Usage
-
-`import BannerText from 'src/components/sections/BannerText'`
-
-<Canvas>
-  <Story
-    name="BannerText"
-    args={{
-      title:
-        "The sun has set on our Summer Sale! Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'accent',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="BannerText" />
-
-<TokenTable>
-  <TokenRow token="--fs-banner-padding-mobile" value="var(--fs-spacing-6) 5%" />
-  <TokenRow
-    token="--fs-banner-padding-desktop"
-    value="var(--fs-spacing-9) 15%"
-  />
-</TokenTable>
-
-## Nested Elements
-
-### Link
-
-<TokenTable>
-  <TokenRow token="--fs-banner-link-min-width" value="11.25rem" />
-  <TokenRow token="--fs-banner-link-margin-top" value="var(--fs-spacing-6)" />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow token="--fs-banner-title-size" value="var(--fs-text-size-lead)" />
-  <TokenRow
-    token="--fs-banner-title-weight"
-    value="var(--fs-text-weight-bold)"
-  />
-  <TokenRow token="--fs-banner-title-line-height" value="1.2" />
-</TokenTable>
-
----
-
-## Hierarchy
-
-### Primary
-
-<Canvas>
-  <Story
-    name="Primary"
-    args={{
-      title:
-        "The sun has set on our Summer Sale! Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-banner-primary-title-size"
-    value="var(--fs-text-size-title-page)"
-  />
-</TokenTable>
-
-### Secondary
-
-<Canvas>
-  <Story
-    name="Secondary"
-    args={{
-      variant: 'secondary',
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'main',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-banner-secondary-title-size"
-    value="var(--fs-text-size-4)"
-  />
-  <TokenRow
-    token="--fs-banner-secondary-caption-size"
-    value="var(--fs-text-size-base)"
-  />
-  <TokenRow
-    token="--fs-banner-secondary-caption-weight"
-    value="var(--fs-text-weight-regular)"
-  />
-  <TokenRow token="--fs-banner-secondary-line-height" value="1.5" />
-</TokenTable>
-
----
-
-## Variants
-
-### Main
-
-<Canvas isColumn>
-  <Story
-    name="Main"
-    args={{
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Secondary Main"
-    args={{
-      variant: 'secondary',
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-banner-main-bkg-color"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-banner-main-text-color"
-    value="var(--fs-color-primary-text)"
-    isColor
-  />
-</TokenTable>
-
-### Light
-
-<Canvas isColumn>
-  <Story
-    name="Light"
-    args={{
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'light',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Secondary Light"
-    args={{
-      variant: 'secondary',
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'light',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-banner-light-bkg-color"
-    value="var(--fs-color-secondary-bkg-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-banner-light-text-color"
-    value="var(--fs-color-text-display)"
-    isColor
-  />
-</TokenTable>
-
-### Accent
-
-<Canvas isColumn>
-  <Story
-    name="Accent"
-    args={{
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'accent',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Secondary Accent"
-    args={{
-      variant: 'secondary',
-      title: 'The sun has set on our Summer Sale!',
-      caption: "Save up to 50% off. Don't miss out!",
-      actionPath: '/',
-      actionLabel: 'Call to action',
-      colorVariant: 'accent',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-banner-accent-bkg-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-banner-accent-text-color"
-    value="var(--fs-banner-light-text-color)"
-    isColor
-  />
-</TokenTable>