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

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>

package/src/components/ui/BannerText/banner-text.module.scss

@@ -1,127 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-banner-text {
-  // --------------------------------------------------------
-  // Design Tokens for Banner Text
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-banner-padding-mobile                : var(--fs-spacing-6) 5%;
-  --fs-banner-padding-desktop               : var(--fs-spacing-9) 15%;
-
-  // Button Link
-  --fs-banner-button-link-min-width         : 11.25rem;
-  --fs-banner-button-link-margin-top        : var(--fs-spacing-6);
-
-  // Title
-  --fs-banner-title-size                    : var(--fs-text-size-lead);
-  --fs-banner-title-weight                  : var(--fs-text-weight-bold);
-  --fs-banner-title-line-height             : 1.2;
-
-  // Primary
-  --fs-banner-primary-title-size            : var(--fs-text-size-title-page);
-
-  // Secondary
-  --fs-banner-secondary-title-size          : var(--fs-text-size-4);
-  --fs-banner-secondary-caption-size        : var(--fs-text-size-base);
-  --fs-banner-secondary-caption-weight      : var(--fs-text-weight-regular);
-  --fs-banner-secondary-caption-line-height : 1.5;
-
-  // Main
-  --fs-banner-main-bkg-color                : var(--fs-color-primary-bkg);
-  --fs-banner-main-text-color               : var(--fs-color-primary-text);
-
-  // Light
-  --fs-banner-light-bkg-color               : var(--fs-color-secondary-bkg-light);
-  --fs-banner-light-text-color              : var(--fs-color-text-display);
-
-  // Accent
-  --fs-banner-accent-bkg-color              : var(--fs-color-highlighted-bkg);
-  --fs-banner-accent-text-color             : var(--fs-banner-light-text-color);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  height: 100%;
-  padding: var(--fs-banner-padding-mobile);
-  text-align: center;
-
-  @include media(">=notebook") {
-    padding: var(--fs-banner-padding-desktop);
-  }
-
-  [data-fs-banner-text-content] {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  [data-fs-banner-text-link] [data-fs-link-button] {
-    min-width: var(--fs-banner-button-link-min-width);
-    margin-top: var(--fs-banner-button-link-margin-top);
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-banner-text-variant="primary"] {
-    h2 {
-      font-size: var(--fs-banner-title-size);
-      font-weight: var(--fs-banner-title-weight);
-      line-height: var(--fs-banner-title-line-height);
-
-      @include media(">=notebook") {
-        display: block;
-        font-size: var(--fs-banner-primary-title-size);
-      }
-    }
-  }
-
-  &[data-fs-banner-text-variant="secondary"] {
-    h2 {
-      margin-bottom: var(--fs-spacing-2);
-      font-size: var(--fs-banner-title-size);
-      font-weight: var(--fs-banner-title-weight);
-      line-height: var(--fs-banner-title-line-height);
-
-      @include media(">=notebook") {
-        display: block;
-        font-size: var(--fs-banner-secondary-title-size);
-      }
-    }
-
-    p {
-      font-size: var(--fs-banner-secondary-caption-size);
-      font-weight: var(--fs-banner-secondary-caption-weight);
-      line-height: var(--fs-banner-secondary-caption-line-height);
-    }
-  }
-
-  &[data-fs-banner-text-color-variant="main"] {
-    background-color: var(--fs-banner-main-bkg-color);
-
-    [data-fs-banner-text-heading] {
-      color: var(--fs-banner-main-text-color);
-    }
-  }
-
-  &[data-fs-banner-text-color-variant="light"] {
-    background-color: var(--fs-banner-light-bkg-color);
-
-    [data-fs-banner-text-heading] {
-      color: var(--fs-banner-light-text-color);
-    }
-  }
-
-  &[data-fs-banner-text-color-variant="accent"] {
-    background-color: var(--fs-banner-accent-bkg-color);
-
-    [data-fs-banner-text-heading] {
-      color: var(--fs-banner-accent-text-color);
-    }
-  }
-}