diff --git a/.storybook/components/Callout.tsx b/.storybook/components/Callout.tsx new file mode 100644 index 00000000..6cce577b --- /dev/null +++ b/.storybook/components/Callout.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +const Callout = ({ children }) => { + return ( +
+ 💡 + {children} +
+ ) +} + +export default Callout diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts index e7779455..4e36a5dd 100644 --- a/.storybook/components/index.ts +++ b/.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' diff --git a/.storybook/storybook.css b/.storybook/storybook.css index ea514eb2..83e04cea 100644 --- a/.storybook/storybook.css +++ b/.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); } diff --git a/CHANGELOG.md b/CHANGELOG.md index eda3c4ae..bf0b1ed2 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/components/sections/ProductGallery/product-gallery.module.scss b/src/components/sections/ProductGallery/product-gallery.module.scss index b01f0177..352f00a9 100644 --- a/src/components/sections/ProductGallery/product-gallery.module.scss +++ b/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); } diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx index 9b19e5a5..c0b281cf 100644 --- a/src/components/sections/ProductTiles/ProductTiles.tsx +++ b/src/components/sections/ProductTiles/ProductTiles.tsx @@ -6,7 +6,7 @@ import type { ProductsQueryQueryVariables } from '@generated/graphql' import Section from '../Section' -interface TilesProps extends Partial { +interface ProductTilesProps extends Partial { 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) { diff --git a/src/components/ui/Tiles/Tile.tsx b/src/components/ui/Tiles/Tile.tsx index e27a9840..cb284a2e 100644 --- a/src/components/ui/Tiles/Tile.tsx +++ b/src/components/ui/Tiles/Tile.tsx @@ -14,7 +14,7 @@ const Tile = forwardRef(function Tile( ref ) { return ( -
  • +
  • {children}
    • ) diff --git a/src/components/ui/Tiles/Tiles.stories.mdx b/src/components/ui/Tiles/Tiles.stories.mdx new file mode 100644 index 00000000..95637f8b --- /dev/null +++ b/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 }) => ( + Unsplash Monitor +) + +export const MDXProductCard = ({ product }) => ( + +) + + + +
    + +# Tiles (WIP) + +This component works like layout boxes/cards, which can be arranged in different ways next to each other. + +
    + +## Overview + +Tiles is a list of Tile components. According to the quantity +of items to be displayed, the tiles will be arranged differently. + + + 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. + + +--- + +## Usage + +`import Tiles, { Tile } from 'src/components/ui/Tiles'` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +--- + +## Compound Components + +### Tile + + + + + + + + diff --git a/src/components/ui/Tiles/Tiles.tsx b/src/components/ui/Tiles/Tiles.tsx index 7503ef68..b3010833 100644 --- a/src/components/ui/Tiles/Tiles.tsx +++ b/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 { /** @@ -51,8 +52,10 @@ const Tiles = forwardRef(function Tiles( return (
      {children} diff --git a/src/components/ui/Tiles/index.tsx b/src/components/ui/Tiles/index.ts similarity index 100% rename from src/components/ui/Tiles/index.tsx rename to src/components/ui/Tiles/index.ts diff --git a/src/components/ui/Tiles/tiles.module.scss b/src/components/ui/Tiles/tiles.module.scss new file mode 100644 index 00000000..e21f7725 --- /dev/null +++ b/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; + } +} diff --git a/src/components/ui/Tiles/tiles.scss b/src/components/ui/Tiles/tiles.scss deleted file mode 100644 index 2d1d614b..00000000 --- a/src/components/ui/Tiles/tiles.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import "src/styles/scaffold"; - -[data-store-tiles] { - display: grid; - grid-template-rows: repeat(2, 1fr); - grid-template-columns: repeat(2, 1fr); - row-gap: var(--fs-grid-gap-2); - column-gap: var(--fs-grid-gap-2); - - @include media(">=tablet") { - grid-template-rows: repeat(1, 1fr); - grid-template-columns: repeat(4, 1fr); - column-gap: var(--fs-grid-gap-3); - } -} - -[data-tile] { - min-width: 9rem; - height: 24rem; - border-radius: var(--fs-border-radius); - - @include media(">=tablet") { height: 28rem; } -} - -[data-store-tiles="expanded-first"], [data-store-tiles="expanded-first-two"] { - grid-template-rows: auto 1fr; -} - -[data-store-tiles="expanded-first"] > [data-tile]:first-child, -[data-store-tiles="expanded-first-two"] > [data-tile]:first-child, -[data-store-tiles="expanded-first-two"] > [data-tile]:nth-child(2) { - grid-column: span 2; - min-width: 12rem; -} diff --git a/src/stories/getting-started.stories.mdx b/src/stories/getting-started.stories.mdx index 47c22ecd..e2228374 100644 --- a/src/stories/getting-started.stories.mdx +++ b/src/stories/getting-started.stories.mdx @@ -1,4 +1,5 @@ import { Description, Meta } from '@storybook/addon-docs' +import { Callout } from 'src/../.storybook/components' - 💡 - - When trying to switch between - Sandbox and Docs tabs, the Sandbox tab - might not be working properly, try to refresh the page after switching tabs. - It seems to be a - bug in the storybook - . - - + + When trying to switch between + Sandbox and Docs tabs, the Sandbox tab might + not be working properly, try to refresh the page after switching tabs. It seems + to be a + bug in the storybook + . + diff --git a/src/styles/global/components.scss b/src/styles/global/components.scss index 09e1f227..9b7b3ff5 100644 --- a/src/styles/global/components.scss +++ b/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"; diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 09e1f227..9b7b3ff5 100644 --- a/src/styles/global/storybook-components.scss +++ b/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";