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

package/src/components/sections/Newsletter/Newsletter.stories.mdx

@@ -1,139 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import { TokenTable, TokenRow } from 'src/../.storybook/components'
-
-import { UIProvider } from '@faststore/ui'
-
-import Newsletter from '.'
-
-<Meta title="Organisms/Newsletter" component={Newsletter} />
-
-export const Template = (args) => (
-  <UIProvider>
-    <Newsletter {...args} />
-  </UIProvider>
-)
-
-<header>
-
-# Newsletter
-
-The Newsletter component is a section with at least one input text with an action which its value could be submitted.
-
-</header>
-
----
-
-## Usage
-
-`import Newsletter from 'src/components/sections/Newsletter'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      title: 'Get News and Special Offers!',
-      description:
-        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-newsletter-padding"
-    value="var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1)"
-  />
-  <TokenRow
-    token="--fs-newsletter-bkg"
-    value="var(--fs-color-primary-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-newsletter-text-color"
-    value="var(--fs-color-text-inverse)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Title
-
-<TokenTable>
-  <TokenRow
-    token="--fs-newsletter-title-size"
-    value="var(--fs-text-size-title-section)"
-  />
-  <TokenRow
-    token="--fs-newsletter-title-weight"
-    value="var(--fs-text-weight-bold)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Lite
-
-<Canvas>
-  <Story
-    name="Lite"
-    args={{
-      title: 'Get News and Special Offers!',
-      description:
-        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
-      lite: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Card
-
-<Canvas>
-  <Story
-    name="Card"
-    args={{
-      title: 'Get News and Special Offers!',
-      description:
-        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
-      card: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-newsletter-card-width" value="23.438rem" />
-  <TokenRow token="--fs-newsletter-card-width-notebook" value="33.125rem" />
-  <TokenRow
-    token="--fs-newsletter-card-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>
-
-### Card & Lite
-
-<Canvas>
-  <Story
-    name="Card-Lite"
-    args={{
-      title: 'Get News and Special Offers!',
-      description:
-        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
-      card: true,
-      lite: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/sections/Newsletter/newsletter.module.scss

@@ -1,135 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-newsletter {
-  // --------------------------------------------------------
-  // Design Tokens for Newsletter
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-newsletter-padding                           : var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1);
-  --fs-newsletter-bkg                               : var(--fs-color-primary-bkg);
-  --fs-newsletter-text-color                        : var(--fs-color-text-inverse);
-
-  // Title
-  --fs-newsletter-title-size                        : var(--fs-text-size-title-section);
-  --fs-newsletter-title-weight                      : var(--fs-text-weight-bold);
-
-  // Card
-  --fs-newsletter-card-border-radius                : var(--fs-border-radius);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding: var(--fs-newsletter-padding);
-  color: var(--fs-newsletter-text-color);
-  background-color: var(--fs-newsletter-bkg);
-
-  [data-fs-newsletter-form] {
-    @include media(">=notebook") {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      column-gap: var(--fs-spacing-8);
-      padding-top: var(--fs-spacing-6);
-      padding-bottom: var(--fs-spacing-6);
-
-      [data-fs-newsletter-header] {
-        align-content: flex-start;
-      }
-    }
-
-    [data-fs-newsletter-controls] {
-      @include media(">=notebook") {
-        grid-template-columns: repeat(3, 1fr);
-        margin-top: 0;
-
-        [data-fs-input-field] {
-          grid-column: 1 / span 3;
-        }
-
-        [data-fs-button-inverse] {
-          grid-column: 3;
-        }
-
-        [data-fs-newsletter-addendum] {
-          grid-column: 1 / span 3;
-        }
-      }
-    }
-  }
-
-  [data-fs-newsletter-header] {
-    display: grid;
-    row-gap: var(--fs-spacing-2);
-    line-height: 1.5;
-    text-align: center;
-
-    @include media(">=notebook") {
-      text-align: left;
-    }
-  }
-
-  [data-fs-newsletter-header] h3 {
-    display: grid;
-    grid-template-columns: var(--fs-spacing-5) auto;
-    column-gap: var(--fs-spacing-1);
-    align-items: center;
-    justify-content: center;
-    font-size: var(--fs-newsletter-title-size);
-    font-weight: var(--fs-newsletter-title-weight);
-    color: var(--fs-newsletter-text-color);
-
-    @include media(">=notebook") {
-      justify-content: left;
-    }
-  }
-
-  [data-fs-newsletter-controls] {
-    display: grid;
-    row-gap: var(--fs-spacing-3);
-    margin-top: var(--fs-spacing-4);
-
-    [data-fs-button-inverse] {
-      margin-top: var(--fs-spacing-3);
-    }
-  }
-
-  [data-fs-newsletter-addendum] {
-    text-align: center;
-
-    @include media(">=notebook") {
-      text-align: left;
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-newsletter="card"] {
-    text-align: center;
-    border-radius: var(--fs-newsletter-card-border-radius);
-
-    [data-fs-newsletter-header] {
-      text-align: center;
-    }
-
-    @include media(">=notebook") {
-      [data-fs-newsletter-form] {
-        display: block;
-      }
-
-      [data-fs-newsletter-controls] {
-        margin-top: var(--fs-spacing-4);
-      }
-    }
-
-    [data-fs-newsletter-header] h3 {
-      justify-content: center;
-    }
-  }
-}

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