Feat: Adds tokens to ProductGrid

.storybook/components/BestPractices.tsx

@@ -7,7 +7,12 @@ type BestPracticesProps = {
 }
 
 const BestPractices = ({ children }: PropsWithChildren<BestPracticesProps>) => {
-  return <section className="sbdocs sbdocs-best-practices">{children}</section>
+  return (
+    <>
+      <h2 className="sbdocs sbdocs-h2">Best Practices</h2>
+      <section className="sbdocs sbdocs-best-practices">{children}</section>
+    </>
+  )
 }
 
 export default BestPractices

.storybook/components/BestPracticesRule.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react'
 
 type BestPracticesRuleProps = {
-  recommendedUsage: ReactNode
-  discouragedUsage: ReactNode
-  recommendedDescription: string
-  discouragedDescription: string
+  recommendedUsage?: ReactNode
+  discouragedUsage?: ReactNode
+  recommendedDescription: string | ReactNode
+  discouragedDescription: string | ReactNode
 }
 
 const BestPracticesRule = ({
@@ -16,7 +16,7 @@ const BestPracticesRule = ({
   return (
     <section className="sbdocs-best-practices-rule">
       <article>
-        <div>{recommendedUsage}</div>
+        {recommendedUsage && <div>{recommendedUsage}</div>}
         <article className="sbdocs-best-practices-text">
           <h3 className="sbdocs sbdocs-h3">
             <span role="img" aria-label="Check Mark">
@@ -28,7 +28,7 @@ const BestPracticesRule = ({
         </article>
       </article>
       <article>
-        <div>{discouragedUsage}</div>
+        {discouragedUsage && <div>{discouragedUsage}</div>}
         <article className="sbdocs-best-practices-text">
           <h3 className="sbdocs sbdocs-h3">
             <span aria-label="Cross Mark">&#10060;</span> Don't

.storybook/mocks/productGridItems.js

@@ -0,0 +1,334 @@
+export const productGridItems = [
+  {
+    node: {
+      id: '71976307',
+      slug: 'sleek-granite-computer-71976307',
+      sku: '71976307',
+      brand: {
+        brandName: 'iRobot',
+        name: 'iRobot',
+      },
+      name: 'indigo',
+      gtin: '6128632395521',
+      isVariantOf: {
+        productGroupID: '67864306',
+        name: 'Sleek Granite Computer',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/155594/sed.jpg?v=637752875201000000',
+          alternateName: 'reprehenderit',
+        },
+      ],
+      offers: {
+        lowPrice: 408.71,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 408.71,
+            listPrice: 577.61,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '36611699',
+      slug: 'ergonomic-fresh-computer-36611699',
+      sku: '36611699',
+      brand: {
+        brandName: 'adidas',
+        name: 'adidas',
+      },
+      name: 'purple',
+      gtin: '5054932586657',
+      isVariantOf: {
+        productGroupID: '68344729',
+        name: 'Ergonomic Fresh Computer',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/161681/similique.jpg?v=637752930786500000',
+          alternateName: 'suscipit',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/161678/et.jpg?v=637752930773370000',
+          alternateName: 'quia',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/161679/ipsum.jpg?v=637752930778700000',
+          alternateName: 'in',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/161680/sequi.jpg?v=637752930782730000',
+          alternateName: 'ad',
+        },
+      ],
+      offers: {
+        lowPrice: 617.53,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 617.53,
+            listPrice: 859.85,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '78095639',
+      slug: 'generic-steel-computer-78095639',
+      sku: '78095639',
+      brand: {
+        brandName: 'adidas',
+        name: 'adidas',
+      },
+      name: 'pink',
+      gtin: '5164179323676',
+      isVariantOf: {
+        productGroupID: '7526630',
+        name: 'Generic Steel Computer',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/162122/dolor.jpg?v=637752934689100000',
+          alternateName: 'optio',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/162121/ea.jpg?v=637752934685970000',
+          alternateName: 'qui',
+        },
+      ],
+      offers: {
+        lowPrice: 383.91,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 383.91,
+            listPrice: 562.62,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '39542524',
+      slug: 'tasty-concrete-computer-39542524',
+      sku: '39542524',
+      brand: {
+        brandName: 'iRobot',
+        name: 'iRobot',
+      },
+      name: 'pink',
+      gtin: '0001078884042',
+      isVariantOf: {
+        productGroupID: '99483893',
+        name: 'Tasty Concrete Computer',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/165082/sed.jpg?v=637752996157770000',
+          alternateName: 'accusamus',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/165079/quis.jpg?v=637752996135400000',
+          alternateName: 'dolorem',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/165080/tempora.jpg?v=637752996141030000',
+          alternateName: 'enim',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/165081/est.jpg?v=637752996144600000',
+          alternateName: 'ea',
+        },
+      ],
+      offers: {
+        lowPrice: 656.5,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 656.5,
+            listPrice: 892.43,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '68237302',
+      slug: 'refined-metal-computer-68237302',
+      sku: '68237302',
+      brand: {
+        brandName: 'Acer',
+        name: 'Acer',
+      },
+      name: 'sky blue',
+      gtin: '8985861454535',
+      isVariantOf: {
+        productGroupID: '70710833',
+        name: 'Refined Metal Computer',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/170491/vero.jpg?v=637753049086730000',
+          alternateName: 'labore',
+        },
+      ],
+      offers: {
+        lowPrice: 253.07,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 253.07,
+            listPrice: 388.35,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '44903104',
+      slug: 'handmade-granite-computer-unbranded-44903104',
+      sku: '44903104',
+      brand: {
+        brandName: 'adidas',
+        name: 'adidas',
+      },
+      name: 'red',
+      gtin: '8169125134781',
+      isVariantOf: {
+        productGroupID: '48182547',
+        name: 'Handmade Granite Computer Unbranded',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/184304/a.jpg?v=637755547736000000',
+          alternateName: 'impedit',
+        },
+      ],
+      offers: {
+        lowPrice: 362.36,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 362.36,
+            listPrice: 537.5,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '96175310',
+      slug: 'small-cotton-cheese-3325400227651-96175310',
+      sku: '96175310',
+      brand: {
+        brandName: 'Acer',
+        name: 'Acer',
+      },
+      name: 'olive',
+      gtin: '8277738323492',
+      isVariantOf: {
+        productGroupID: '8172115',
+        name: 'Small Cotton Cheese',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/178292/ea.jpg?v=637755492251130000',
+          alternateName: 'debitis',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/178290/voluptatum.jpg?v=637755492245200000',
+          alternateName: 'et',
+        },
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/178291/non.jpg?v=637755492248300000',
+          alternateName: 'itaque',
+        },
+      ],
+      offers: {
+        lowPrice: 247.01,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 247.01,
+            listPrice: 339.21,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    node: {
+      id: '12405783',
+      slug: 'tasty-frozen-tuna-handmade-12405783',
+      sku: '12405783',
+      brand: {
+        brandName: 'adidas',
+        name: 'adidas',
+      },
+      name: 'fuchsia',
+      gtin: '6486061707855',
+      isVariantOf: {
+        productGroupID: '31264637',
+        name: 'Tasty Frozen Tuna Handmade',
+      },
+      image: [
+        {
+          url: 'https://storeframework.vtexassets.com/arquivos/ids/190604/vel.jpg?v=637755602570270000',
+          alternateName: 'ipsam',
+        },
+      ],
+      offers: {
+        lowPrice: 1.37,
+        offers: [
+          {
+            availability: 'https://schema.org/InStock',
+            price: 1.37,
+            listPrice: 2.01,
+            quantity: 10000,
+            seller: {
+              identifier: '1',
+            },
+          },
+        ],
+      },
+    },
+  },
+]

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 `ProductGrid` ([#127](https://github.com/vtex-sites/gatsby.store/pull/127))
 - Applies new local tokens to `Tiles` ([#120](https://github.com/vtex-sites/gatsby.store/pull/120))
 - Applies new local tokens to `Accordion` ([#126](https://github.com/vtex-sites/gatsby.store/pull/126))
 - Applies new local tokens to `ImageGallery` ([#125](https://github.com/vtex-sites/gatsby.store/pull/125))

src/components/product/ProductCard/product-card.module.scss

@@ -8,7 +8,7 @@
   // Default properties
   --fs-product-card-padding                  : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2) var(--fs-spacing-1);
   --fs-product-card-gap                      : var(--fs-grid-gap-2);
-  --fs-product-card-min-width                : 14rem;
+  --fs-product-card-min-width                : 10rem;
 
   --fs-product-card-shadow                   : var(--fs-shadow);
   --fs-product-card-shadow-hover             : var(--fs-shadow-hover);