feat: Adds new tokens to Tiles

.storybook/components/Callout.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Callout = ({ children }) => {
+  return (
+    <section className="sbdocs-callout">
+      <span aria-label="Warning">&#x1F4A1;</span>
+      <small>{children}</small>
+    </section>
+  )
+}
+
+export default Callout

.storybook/components/index.ts

@@ -3,3 +3,4 @@ export { default as TokenRow } from './TokenRow'
 export { default as BestPractices } from './BestPractices'
 export { default as BestPracticesRule } from './BestPracticesRule'
 export { default as TokenDivider } from './TokenDivider'
+export { default as Callout } from './Callout'

.storybook/storybook.css

@@ -271,6 +271,7 @@ h3.sbdocs.sbdocs-h3 {
   align-items: center;
   padding: var(--fs-spacing-2);
   margin-top: var(--fs-spacing-4);
+  line-height: 1.7;
   background-color: var(--fs-color-neutral-1);
   border-radius: var(--fs-border-radius);
 }

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `Tiles` ([#134](https://github.com/vtex-sites/nextjs.store/pull/134))
 - Applies new local tokens to `ProductGrid` ([#144](https://github.com/vtex-sites/nextjs.store/pull/144))
 - Applies new local tokens to `Accordion` ([#130](https://github.com/vtex-sites/nextjs.store/pull/130))
 - Applies new local tokens to `ImageGallery` ([#143](https://github.com/vtex-sites/nextjs.store/pull/143))

src/components/sections/ProductGallery/product-gallery.module.scss

@@ -143,7 +143,7 @@
       padding: 0;
       margin: var(--fs-spacing-6) 0;
 
-      [data-store-tiles] {
+      [data-fs-tiles] {
         row-gap: 0;
         column-gap: var(--fs-grid-gap-2);
       }

src/components/sections/ProductTiles/ProductTiles.tsx

@@ -6,7 +6,7 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql'
 
 import Section from '../Section'
 
-interface TilesProps extends Partial<ProductsQueryQueryVariables> {
+interface ProductTilesProps extends Partial<ProductsQueryQueryVariables> {
   title: string | JSX.Element
 }
 
@@ -27,7 +27,7 @@ const getRatio = (products: number, idx: number) => {
   return 3 / 4
 }
 
-const ProductTiles = ({ title, ...variables }: TilesProps) => {
+const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   const products = useProductsQuery(variables)
 
   if (products?.edges.length === 0) {

src/components/ui/Tiles/Tile.tsx

@@ -14,7 +14,7 @@ const Tile = forwardRef<HTMLLIElement, TileProps>(function Tile(
   ref
 ) {
   return (
-    <li ref={ref} data-tile data-testid={testId} {...otherProps}>
+    <li ref={ref} data-fs-tile data-testid={testId} {...otherProps}>
       {children}
     </li>
   )

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

@@ -0,0 +1,157 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  Callout,
+} from 'src/../.storybook/components'
+
+import { SessionProvider } from '@faststore/sdk'
+
+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">
+    <SessionProvider initialState={{}}>
+      <Tiles>
+        <Tile>
+          <MDXProductCard product={product} />
+        </Tile>
+        <Tile>
+          <MDXCustomImage />
+        </Tile>
+        <Tile>
+          <MDXCustomImage />
+        </Tile>
+      </Tiles>
+    </SessionProvider>
+  </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>

src/components/ui/Tiles/Tiles.tsx

@@ -2,6 +2,7 @@ import { Children, forwardRef } from 'react'
 import type { HTMLAttributes, ReactElement } from 'react'
 
 import Tile from './Tile'
+import styles from './tiles.module.scss'
 
 export interface TilesProps extends HTMLAttributes<HTMLUListElement> {
   /**
@@ -51,8 +52,10 @@ const Tiles = forwardRef<HTMLUListElement, TilesProps>(function Tiles(
   return (
     <ul
       ref={ref}
-      data-store-tiles={expandedClass}
+      data-fs-tiles
       data-testid={testId}
+      className={styles.fsTiles}
+      data-fs-tiles-variant={expandedClass}
       {...otherProps}
     >
       {children}

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

@@ -0,0 +1,57 @@
+@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;
+  }
+}

src/stories/getting-started.stories.mdx

@@ -1,4 +1,5 @@
 import { Description, Meta } from '@storybook/addon-docs'
+import { Callout } from 'src/../.storybook/components'
 
 <Meta
   title="Getting Started"
@@ -15,14 +16,11 @@ FastStore nextjs.store is an ecommerce-focused library that provides best-of-bre
 
 This product is designed and built following the **Atomic Design pattern**. Atomic Design breaks user interfaces hierarchically into smaller and simpler components. There are five distinct levels in Atomic design (atoms, molecules, organisms, templates, and pages), and that's how our components are classified.
 
-<section className="sbdocs-callout">
-  <span aria-label="Warning">&#x1F4A1;</span>
-  <small>
-    When trying to switch between
-    <code>Sandbox</code> and <code>Docs</code> tabs, the <code>Sandbox</code> tab
-    might not be working properly, try to refresh the page after switching tabs.
-    It seems to be a <a href="https://github.com/storybookjs/storybook/issues/17625">
-      bug in the storybook
-    </a>.
-  </small>
-</section>
+<Callout>
+  When trying to switch between
+  <code>Sandbox</code> and <code>Docs</code> tabs, the <code>Sandbox</code> tab might
+  not be working properly, try to refresh the page after switching tabs. It seems
+  to be a <a href="https://github.com/storybookjs/storybook/issues/17625">
+    bug in the storybook
+  </a>.
+</Callout>

src/styles/global/components.scss

@@ -36,4 +36,3 @@
 @import "src/components/ui/InputText/input-text.scss";
 @import "src/components/ui/SlideOver/slide-over.scss";
 @import "src/components/ui/SROnly/sr-only.scss";
-@import "src/components/ui/Tiles/tiles.scss";

src/styles/global/storybook-components.scss

@@ -36,4 +36,3 @@
 @import "src/components/ui/InputText/input-text.scss";
 @import "src/components/ui/SlideOver/slide-over.scss";
 @import "src/components/ui/SROnly/sr-only.scss";
-@import "src/components/ui/Tiles/tiles.scss";