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

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

@@ -1,201 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-import Carousel from '.'
-import ProductCard from 'src/components/product/ProductCard'
-
-<Meta
-  component={Carousel}
-  title="Molecules/Carousel"
-  argTypes={{
-    itemsPerPage: {
-      control: 'number',
-      table: { type: 'number' },
-    },
-  }}
-/>
-
-export const product = {
-  id: '15503951',
-  slug: 'handmade-steel-towels-practical-15503951',
-  sku: '15503951',
-  brand: { brandName: 'Brand', name: 'Brand' },
-  name: 'red',
-  gtin: '5595633577807',
-  isVariantOf: {
-    productGroupID: '130742',
-    name: 'Handmade Steel Towels Practical',
-  },
-  image: [
-    {
-      url: 'http://storeframework.vtexassets.com/arquivos/ids/190191/numquam.jpg?v=637755599170100000',
-      alternateName: 'est',
-    },
-  ],
-  offers: {
-    lowPrice: 181.71,
-    offers: [
-      {
-        availability: 'https://schema.org/InStock',
-        price: 181.71,
-        listPrice: 208.72,
-        quantity: 1,
-        seller: { identifier: '1' },
-      },
-    ],
-  },
-}
-
-export const Template = ({ ...args }) => (
-  <Carousel {...args}>
-    {Array.from({ length: 8 }, (_, index) => (
-      <ProductCard
-        index={index}
-        key={String(index)}
-        product={{ ...product, isVariantOf: { name: `Product ${index + 1}` } }}
-      />
-    ))}
-  </Carousel>
-)
-
-<header>
-
-# Carousel
-
-The `Carousel` component is great for swiping images.
-
-</header>
-
-## Overview
-
-The `Carousel` component uses [FastStore UI Carousel](https://www.faststore.dev/reference/ui/molecules/Carousel) as base.
-
----
-
-## Usage
-
-`import Carousel from 'src/components/ui/Carousel'`
-
-<Canvas>
-  <Story name="usage" args={{ itemsPerPage: 5 }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="usage" />
-
----
-
-## Nested Elements
-
-### Track
-
-<TokenTable>
-  <TokenRow
-    token="--fs-carousel-padding-desktop"
-    value="var(--fs-spacing-0) 6.25rem"
-  />
-</TokenTable>
-
-### Item
-
-<TokenTable>
-  <TokenRow token="--fs-carousel-item-width-mobile" value="80%" />
-  <TokenRow token="--fs-carousel-item-width-desktop" value="15rem" />
-  <TokenRow
-    token="--fs-carousel-item-margin-right"
-    value="var(--fs-spacing-0)"
-  />
-</TokenTable>
-
-### Controls
-
-<TokenTable>
-  <TokenRow token="--fs-carousel-controls-width" value="3.125rem" />
-  <TokenRow
-    token="--fs-carousel-controls-height"
-    value="var(--fs-carousel-controls-width)"
-  />
-  <TokenRow
-    token="--fs-carousel-controls-position-top"
-    value="calc((100% - var(--fs-spacing-7) - var(--fs-spacing-1)) / 2)"
-  />
-  <TokenRow
-    token="--fs-carousel-controls-bkg-color"
-    value="var(--fs-color-neutral-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-carousel-controls-border-radius"
-    value="var(--fs-border-radius-circle)"
-  />
-  <TokenRow
-    token="--fs-carousel-controls-box-shadow"
-    value="var(--fs-shadow-darker)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-carousel-controls-control-left"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-carousel-controls-control-right"
-    value="var(--fs-carousel-controls-control-left)"
-  />
-</TokenTable>
-
-### Bullets
-
-<TokenTable>
-  <TokenRow
-    token="--fs-carousel-bullets-padding-top"
-    value="var(--fs-carousel-controls-control-left)"
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-carousel-bullet-width-mobile" value="100%" />
-  <TokenRow
-    token="--fs-carousel-bullet-width-desktop"
-    value="var(--fs-spacing-1)"
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-height-mobile"
-    value="var(--fs-carousel-item-margin-right)"
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-height-desktop"
-    value="var(--fs-carousel-bullet-width-desktop)"
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-margin-right"
-    value="var(--fs-carousel-item-margin-right)"
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-bkg-color"
-    value="var(--fs-color-neutral-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-bkg-color-selected"
-    value="var(--fs-color-main-4)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-carousel-bullet-border-radius"
-    value="var(--fs-carousel-controls-border-radius)"
-  />
-</TokenTable>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedDescription="Always use more than 1 item per page so then the component keeps the proposed navigation behavior for both versions (mobile and desktop)."
-    discouragedDescription="Avoid using more items per page than the total number of items."
-  />
-</BestPractices>

package/src/components/ui/Carousel/carousel.module.scss

@@ -1,147 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-carousel {
-  // --------------------------------------------------------
-  // Design Tokens for Carousel
-  // --------------------------------------------------------
-
-  // Track
-  --fs-carousel-padding-desktop           : var(--fs-spacing-0) 6.25rem;
-
-  // Item
-  --fs-carousel-item-width-mobile         : 80%;
-  --fs-carousel-item-width-desktop        : 15rem;
-  --fs-carousel-item-margin-right         : var(--fs-spacing-0);
-
-  // Controls
-  --fs-carousel-controls-width            : 3.125rem;
-  --fs-carousel-controls-height           : var(--fs-carousel-controls-width);
-  --fs-carousel-controls-position-top     : calc((100% - var(--fs-spacing-7) - var(--fs-spacing-1)) / 2);
-  --fs-carousel-controls-bkg-color        : var(--fs-color-neutral-0);
-  --fs-carousel-controls-border-radius    : var(--fs-border-radius-circle);
-  --fs-carousel-controls-box-shadow       : var(--fs-shadow-darker);
-  --fs-carousel-controls-icon-color       : var(--fs-color-neutral-7);
-
-  --fs-carousel-controls-control-left     : var(--fs-spacing-5);
-  --fs-carousel-controls-control-right    : var(--fs-carousel-controls-control-left);
-
-  // Bullets
-  --fs-carousel-bullets-padding-top       : var(--fs-carousel-controls-control-left);
-
-  --fs-carousel-bullet-width-mobile       : 100%;
-  --fs-carousel-bullet-width-desktop      : var(--fs-spacing-1);
-  --fs-carousel-bullet-height-mobile      : var(--fs-carousel-item-margin-right);
-  --fs-carousel-bullet-height-desktop     : var(--fs-carousel-bullet-width-desktop);
-  --fs-carousel-bullet-margin-right       : var(--fs-carousel-item-margin-right);
-  --fs-carousel-bullet-bkg-color          : var(--fs-color-neutral-3);
-  --fs-carousel-bullet-bkg-color-selected : var(--fs-color-main-4);
-  --fs-carousel-bullet-border-radius      : var(--fs-carousel-controls-border-radius);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  &:hover {
-    [data-fs-carousel-controls] {
-      @include media(">=tablet") {
-        display: flex;
-        width: 100%;
-
-        [data-fs-carousel-control] {
-          top: var(--fs-carousel-controls-position-top);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: var(--fs-carousel-controls-width);
-          height: var(--fs-carousel-controls-height);
-          cursor: pointer;
-          background-color: var(--fs-carousel-controls-bkg-color);
-          border-color: transparent;
-          border-radius: var(--fs-carousel-controls-border-radius);
-          box-shadow: var(--fs-carousel-controls-box-shadow);
-          transform: translateY(-50%);
-        }
-
-        [data-fs-carousel-control="left"] {
-          position: absolute;
-          left: var(--fs-carousel-controls-control-left);
-        }
-
-        [data-fs-carousel-control="right"] {
-          position: absolute;
-          right: var(--fs-carousel-controls-control-right);
-        }
-
-        [data-fs-icon] { display: flex; }
-      }
-    }
-  }
-
-  [data-fs-carousel-track] {
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    @include media(">=tablet") {
-      padding: var(--fs-carousel-padding-desktop);
-    }
-  }
-
-  [data-fs-carousel-item] {
-    width: var(--fs-carousel-item-width-mobile);
-
-    @include media(">=tablet") {
-      width: var(--fs-carousel-item-width-desktop);
-      height: 100%;
-      margin-right: var(--fs-carousel-item-margin-right);
-    }
-  }
-
-  [data-fs-icon] {
-    color: var(--fs-carousel-controls-icon-color);
-  }
-
-  [data-fs-carousel-controls] {
-    display: none;
-  }
-
-  [data-fs-carousel-bullets] {
-    width: 100%;
-    padding-top: var(--fs-carousel-bullets-padding-top);
-
-    @include media(">=tablet") {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    [data-fs-bullets] {
-      display: flex;
-      flex-flow: row nowrap;
-
-      @include media(">=tablet") {
-        column-gap: var(--fs-spacing-3);
-      }
-
-      [data-fs-bullet] {
-        width: var(--fs-carousel-bullet-width-mobile);
-        height: var(--fs-carousel-bullet-height-mobile);
-        padding: 0;
-        margin-right: var(--fs-carousel-bullet-margin-right);
-        background-color: var(--fs-carousel-bullet-bkg-color);
-        border-color: transparent;
-
-        &[aria-selected="true"] {
-          background-color: var(--fs-carousel-bullet-bkg-color-selected);
-        }
-
-        @include media(">=tablet") {
-          width: var(--fs-carousel-bullet-width-desktop);
-          height: var(--fs-carousel-bullet-height-desktop);
-          margin: 0;
-          border-radius: var(--fs-carousel-bullet-border-radius);
-        }
-      }
-    }
-  }
-}

package/src/components/ui/Logo/logo.module.scss

@@ -1,12 +0,0 @@
-.fs-logo {
-  --fs-logo-width      : 7rem;
-  --fs-logo-img        : url("~/public/brandless-neutral.png");
-
-  display: block;
-  width: var(--fs-logo-width);
-  height: 100%;
-  min-height: var(--fs-spacing-6);
-  background: var(--fs-logo-img) no-repeat;
-  background-position: center;
-  background-size: 100% auto;
-}

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

@@ -1,151 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  Callout,
-} from 'src/../.storybook/components'
-
-import { Image } from 'src/components/ui/Image'
-import ProductCard from 'src/components/product/ProductCard'
-
-import Tiles, { Tile } from '.'
-
-export const product = {
-  id: '15503951',
-  slug: 'handmade-steel-towels-practical-15503951',
-  sku: '15503951',
-  brand: { brandName: 'Brand', name: 'Brand' },
-  name: 'red',
-  gtin: '5595633577807',
-  isVariantOf: {
-    productGroupID: '130742',
-    name: 'Handmade Steel Towels Practical',
-  },
-  image: [
-    {
-      url: 'http://storeframework.vtexassets.com/arquivos/ids/190191/numquam.jpg?v=637755599170100000',
-      alternateName: 'est',
-    },
-  ],
-  offers: {
-    lowPrice: 181.71,
-    offers: [
-      {
-        availability: 'https://schema.org/InStock',
-        price: 181.71,
-        listPrice: 208.72,
-        quantity: 1,
-        seller: { identifier: '1' },
-      },
-    ],
-  },
-}
-
-export const MDXCustomImage = ({ aspectRatio = 3 / 4 }) => (
-  <Image
-    width={200}
-    height={200 / aspectRatio}
-    alt="Unsplash Monitor"
-    src="https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg"
-  />
-)
-
-export const MDXProductCard = ({ product }) => (
-  <ProductCard variant="wide" index={0} product={product} aspectRatio={4 / 3} />
-)
-
-<Meta component={Tiles} title="Molecules/Tiles" />
-
-<header>
-
-# Tiles (WIP)
-
-This component works like layout boxes/cards, which can be arranged in different ways next to each other.
-
-</header>
-
-## Overview
-
-<code>Tiles</code> is a list of <code>Tile</code> components. According to the quantity
-of items to be displayed, the tiles will be arranged differently.
-
-<Callout>
-  The minimum number of items is 2, and the maximum is 4. In the future, this
-  component will be improved to accept different possibilities, for example,
-  using only one tile occupying the entire section space.
-</Callout>
-
----
-
-## Usage
-
-`import Tiles, { Tile } from 'src/components/ui/Tiles'`
-
-<Canvas>
-  <Story name="Usage--2-Tiles">
-    <Tiles>
-      <Tile>
-        <MDXCustomImage aspectRatio={4 / 3} />
-      </Tile>
-      <Tile>
-        <MDXCustomImage aspectRatio={4 / 3} />
-      </Tile>
-    </Tiles>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Usage--3-Tiles">
-    <Tiles>
-      <Tile>
-        <MDXProductCard product={product} />
-      </Tile>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-    </Tiles>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Usage--4-Tiles">
-    <Tiles>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-      <Tile>
-        <MDXCustomImage />
-      </Tile>
-    </Tiles>
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow token="--fs-tiles-gap-mobile" value="var(--fs-grid-gap-2)" />
-  <TokenRow token="--fs-tiles-gap-notebook" value="var(--fs-grid-gap-3)" />
-</TokenTable>
-
----
-
-## Compound Components
-
-### Tile
-
-<TokenTable>
-  <TokenRow token="--fs-tiles-tile-min-width" value="9rem" />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-tiles-tile-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>

package/src/components/ui/Tiles/tiles.module.scss

@@ -1,58 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-tiles {
-  // --------------------------------------------------------
-  // Design Tokens for Tiles
-  // --------------------------------------------------------
-
-  // Default properties
-  --fs-tiles-gap-mobile         : var(--fs-grid-gap-2);
-  --fs-tiles-gap-notebook       : var(--fs-grid-gap-3);
-
-  // Tile
-  --fs-tiles-tile-min-width     : 9rem;
-  --fs-tiles-tile-border-radius : var(--fs-border-radius);
-
-  // --------------------------------------------------------
-  // Structural Styles
-  // --------------------------------------------------------
-
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  row-gap: var(--fs-tiles-gap-mobile);
-  column-gap: var(--fs-tiles-gap-mobile);
-
-  @include media(">=tablet") {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  @include media(">=notebook") { column-gap: var(--fs-tiles-gap-notebook); }
-
-  [data-fs-tile] {
-    min-width: var(--fs-tiles-tile-min-width);
-
-    > * {
-      overflow: hidden;
-      border-radius: var(--fs-tiles-tile-border-radius);
-
-      @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; }
-    }
-  }
-
-  // --------------------------------------------------------
-  // Variants Styles
-  // --------------------------------------------------------
-
-  &[data-fs-tiles-variant="expanded-first"] > [data-fs-tile]:first-child,
-  &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:first-child,
-  &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:nth-child(2) {
-    grid-column: span 2;
-    min-width: 12rem;
-  }
-}