@faststore/core 22.42.6

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

@@ -0,0 +1,153 @@
+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-tablet" value="var(--fs-grid-gap-3)" />
+</TokenTable>
+
+---
+
+## Compound Components
+
+### Tile
+
+<TokenTable>
+  <TokenRow token="--fs-tiles-tile-min-width" value="9rem" />
+  <TokenRow token="--fs-tiles-tile-height-mobile" value="24rem" />
+  <TokenRow token="--fs-tiles-tile-height-tablet" value="28rem" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-tiles-tile-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>

package/src/components/ui/Tiles/Tiles.tsx

@@ -0,0 +1,14 @@
+import { Tiles as UITiles } from '@faststore/ui'
+
+import type { TilesProps } from '.'
+import styles from './tiles.module.scss'
+
+const Tiles = ({ children, ...otherProps }: TilesProps) => {
+  return (
+    <UITiles className={styles.fsTiles} {...otherProps}>
+      {children}
+    </UITiles>
+  )
+}
+
+export default Tiles

package/src/components/ui/Tiles/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Tiles'
+export type { TilesProps } from '@faststore/ui'
+
+export { Tile } from '@faststore/ui'
+export type { TileProps } from '@faststore/ui'

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

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

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

@@ -0,0 +1,158 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import Toast from '.'
+import Button from 'src/components/ui/Button'
+
+<Meta title="Atoms/Toast" component={Toast} />
+
+export const Template = () => {
+  const { pushToast } = useUI()
+  return (
+    <Button
+      variant="tertiary"
+      onClick={() => {
+        pushToast({
+          title: 'Your cart was updated!',
+          message: 'Some additional info here.',
+          status: 'INFO',
+          icon: 'ArrowsClockwise',
+        })
+      }}
+    >
+      Display Toast
+    </Button>
+  )
+}
+
+export const TemplateWithProvider = () => {
+  return (
+    <UIProvider>
+      <Toast />
+      <Template />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Toast
+
+Toasts are used to display notifications. They appear temporarily, and should contain a single line of text directly related to the operation performed.
+
+</header>
+
+## Usage
+
+`import Toast from 'src/components/ui/Toast'`
+
+<Canvas>
+  <Story name="default">{TemplateWithProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-toast-width"
+    value="calc(100% - (2 * var(--fs-spacing-3)))"
+  />
+  <TokenRow token="--fs-toast-min-height" value="var(--fs-spacing-9)" />
+  <TokenRow
+    token="--fs-toast-padding"
+    value="var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-1) var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-toast-margin"
+    value="var(--fs-spacing-3) var(--fs-spacing-3) 0 var(--fs-spacing-3)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-toast-top-mobile" value="3.125rem" />
+  <TokenRow token="--fs-toast-top-tablet" value="6.25rem" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-toast-border-radius"
+    value="var(--fs-border-radius-medium)"
+  />
+  <TokenRow token="--fs-toast-border-width" value="var(--fs-border-width)" />
+  <TokenRow token="--fs-toast-border-color" value="transparent" isColor />
+  <TokenDivider />
+  <TokenRow token="--fs-toast-shadow" value="var(--fs-shadow-hover)" />
+  <TokenRow
+    token="--fs-toast-bkg-color"
+    value="var(--fs-color-neutral-0)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-toast-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-toast-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-toast-transition-function"
+    value="var(--fs-transition-function)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Icon
+
+<TokenTable>
+  <TokenRow
+    token="--fs-toast-icon-container-min-width"
+    value="var(--fs-spacing-7)"
+  />
+  <TokenRow
+    token="--fs-toast-icon-container-height"
+    value="var(--fs-toast-icon-container-min-width)"
+  />
+  <TokenRow
+    token="--fs-toast-icon-container-bkg-color"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-toast-icon-container-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-toast-title-size" value="var(--fs-text-size-body)" />
+  <TokenRow
+    token="--fs-toast-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow token="--fs-toast-title-line-height" value="var(--fs-scale)" />
+  <TokenRow token="--fs-toast-title-margin-left" value="var(--fs-spacing-3)" />
+</TokenTable>
+
+### Message
+
+<TokenTable>
+  <TokenRow
+    token="--fs-toast-message-size"
+    value="var(--fs-toast-title-size)"
+  />
+  <TokenRow
+    token="--fs-toast-message-line-height"
+    value="var(--fs-toast-title-line-height)"
+  />
+  <TokenRow
+    token="--fs-toast-message-margin-left"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>

package/src/components/ui/Toast/Toast.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react'
+
+import Icon from 'src/components/ui/Icon'
+import { useUI } from 'src/sdk/ui/Provider'
+
+import styles from './toast.module.scss'
+
+function Toast() {
+  const { toasts, popToast } = useUI()
+  const toast = toasts[toasts.length - 1]
+  const timeoutRef = useRef<NodeJS.Timeout>()
+
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    if (!toast) {
+      return undefined
+    }
+
+    const timeout = setTimeout(() => setVisible(true), 10)
+
+    return () => clearTimeout(timeout)
+  }, [toast])
+
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => setVisible(false), 6e3)
+
+    return () => timeoutRef.current && clearTimeout(timeoutRef.current)
+  }, [toast])
+
+  if (toast === undefined) {
+    return null
+  }
+
+  return (
+    <div
+      role="status"
+      className={styles.fsToast}
+      data-fs-toast
+      data-fs-toast-visible={visible}
+      onTransitionEnd={() => !visible && popToast()}
+    >
+      {toast.icon && (
+        <div data-fs-toast-icon-container>
+          <Icon name={toast.icon} width={30} height={30} />
+        </div>
+      )}
+      <div data-fs-toast-content>
+        {toast.title && <p data-fs-toast-title>{toast.title}</p>}
+        <p data-fs-toast-message>{toast.message}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Toast

package/src/components/ui/Toast/index.ts

@@ -0,0 +1 @@
+export { default } from './Toast'

package/src/components/ui/Toast/toast.module.scss

@@ -0,0 +1,112 @@
+@import "src/styles/scaffold";
+
+.fs-toast {
+  // --------------------------------------------------------
+  // Design Tokens for Toast
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-toast-width                        : calc(100% - (2 * var(--fs-spacing-3)));
+  --fs-toast-min-height                   : var(--fs-spacing-9);
+  --fs-toast-padding                      : var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-1) var(--fs-spacing-1);
+  --fs-toast-margin                       : var(--fs-spacing-3) var(--fs-spacing-3) 0 var(--fs-spacing-3);
+
+  --fs-toast-top-mobile                   : 3.125rem;
+  --fs-toast-top-tablet                   : 6.25rem;
+
+  --fs-toast-border-radius                : var(--fs-border-radius-medium);
+  --fs-toast-border-width                 : var(--fs-border-width);
+  --fs-toast-border-color                 : transparent;
+
+  --fs-toast-shadow                       : var(--fs-shadow-hover);
+  --fs-toast-bkg-color                    : var(--fs-color-neutral-0);
+
+  --fs-toast-transition-property          : var(--fs-transition-property);
+  --fs-toast-transition-timing            : var(--fs-transition-timing);
+  --fs-toast-transition-function          : var(--fs-transition-function);
+
+  // Icon
+  --fs-toast-icon-container-min-width     : var(--fs-spacing-7);
+  --fs-toast-icon-container-height        : var(--fs-toast-icon-container-min-width);
+  --fs-toast-icon-container-bkg-color     : var(--fs-color-primary-bkg-light);
+  --fs-toast-icon-container-border-radius : var(--fs-border-radius);
+
+  // Title
+  --fs-toast-title-size                   : var(--fs-text-size-body);
+  --fs-toast-title-weight                 : var(--fs-text-weight-bold);
+  --fs-toast-title-line-height            : var(--fs-scale);
+  --fs-toast-title-margin-left            : var(--fs-spacing-3);
+
+  // Message
+  --fs-toast-message-size                 : var(--fs-toast-title-size);
+  --fs-toast-message-line-height          : var(--fs-toast-title-line-height);
+  --fs-toast-message-margin-left          : var(--fs-spacing-3);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: fixed;
+  top: var(--fs-toast-top-mobile);
+  z-index: 10;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  width: var(--fs-toast-width);
+  min-height: var(--fs-toast-min-height);
+  padding: var(--fs-toast-padding);
+  margin: var(--fs-toast-margin);
+  background-color: var(--fs-toast-bkg-color);
+  border-radius: var(--fs-toast-border-radius);
+  box-shadow: var(--fs-toast-shadow);
+  opacity: 0;
+  transition: var(--fs-toast-transition-property) var(--fs-toast-transition-timing) var(--fs-toast-transition-function);
+  transform: translate3d(0, 0, 0);
+
+  @include media(">=tablet") {
+    top: var(--fs-toast-top-tablet);
+    right: var(--fs-spacing-4);
+    max-width: rem(398px);
+  }
+
+  &[data-fs-toast-visible="true"] {
+    opacity: 1;
+    transform: translate3d(0, 50%, 0);
+
+    @include media(">=tablet") {
+      transform: translate3d(0, 10%, 0);
+    }
+  }
+
+  [data-fs-toast-icon-container] {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    justify-content: center;
+    min-width: var(--fs-toast-icon-container-min-width);
+    height: var(--fs-toast-icon-container-height);
+    background-color: var(--fs-toast-icon-container-bkg-color);
+    border-radius: var(--fs-toast-icon-container-border-radius);
+  }
+
+  [data-fs-toast-content] {
+    display: block;
+    overflow: hidden;
+  }
+
+  [data-fs-toast-title] {
+    margin-left: var(--fs-toast-title-margin-left);
+    overflow: hidden;
+    font-size: var(--fs-toast-title-size);
+    font-weight: var(--fs-toast-title-weight);
+    line-height: var(--fs-toast-title-line-height);
+  }
+
+  [data-fs-toast-message] {
+    margin-left: var(--fs-toast-message-margin-left);
+    overflow: hidden;
+    font-size: var(--fs-toast-message-size);
+    line-height: var(--fs-toast-message-line-height);
+  }
+}