Feat: Uses ProductCard component from FSUI

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Uses `ProductCard` component from FSUI instead of `Card` ([#34](https://github.com/vtex-sites/gatsby.store/pull/34))
 - General code improvements at `ImageGallerySelector` ([#40](https://github.com/vtex-sites/gatsby.store/pull/40))
 - Adjust `Alert` component for `CMS` ([#29](https://github.com/vtex-sites/gatsby.store/pull/29))
 - Accessibility tests to output what were the actual violations, not just how many ([#23](https://github.com/vtex-sites/gatsby.store/pull/23)).
@@ -115,7 +116,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Replaces `onDismissTransition` callback by a Provider that handles opening/closing of modal/slide over's behavior ([#426](https://github.com/vtex-sites/base.store/pull/426))
 - `OutOfStock` integrated with regionalization ([#441](https://github.com/vtex-sites/base.store/pull/441))
-- Move ProductShelf and ProductTiles to the client side ([#431](https://github.com/vtex-sites/base.store/pull/431))
+- Move `ProductShelf` and `ProductTiles` to the client side ([#431](https://github.com/vtex-sites/base.store/pull/431))
 - Drop gatsby-plugin-image in favor of custom/simpler component ([#401](https://github.com/vtex-sites/base.store/pull/401))
 - Replace `stylelint-config-rational-order` with `stylelint-config-recess-order` ([#415](https://github.com/vtex-sites/base.store/pull/415))
 - Simplify filters component by using `useReducer` instead of multiple `useState` ([#422](https://github.com/vtex-sites/base.store/pull/422))
@@ -153,7 +154,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Move inline styles to external stylesheet to improve TBT ([#408](https://github.com/vtex-sites/base.store/pull/408))
-- Changed ProductGallery and EmptyGallery styles to make the search results page ([#387](https://github.com/vtex-sites/base.store/pull/387))
+- Changed `ProductGallery` and `EmptyGallery` styles to make the search results page ([#387](https://github.com/vtex-sites/base.store/pull/387))
 - Moved all icons to use Icon component ([#386](https://github.com/vtex-sites/base.store/pull/386))
 - Moved common/IconsSVG to ui/Icons ([#386](https://github.com/vtex-sites/base.store/pull/386))
 - Moved EmptyState from common to ui folder ([#386](https://github.com/vtex-sites/base.store/pull/386))

cypress/integration/analytics.test.js

@@ -153,7 +153,7 @@ describe('select_item event', () => {
 
     let skuId
 
-    cy.getById('store-card').first().click()
+    cy.getById('store-product-card').first().click()
     cy.getById('buy-button')
       .then(($btn) => {
         skuId = $btn.attr('data-sku')

cypress/integration/plp.test.js

@@ -115,7 +115,7 @@ describe('Infinite Scroll pagination', () => {
     cy.waitForHydration()
 
     cy.getById('product-gallery').within(() => {
-      cy.getById('store-card')
+      cy.getById('store-product-card')
         .should('exist')
         .should('have.length.gt', 0)
         .then(($links) => {
@@ -125,7 +125,7 @@ describe('Infinite Scroll pagination', () => {
             .should('exist')
             .click()
             .then(() => {
-              cy.getById('store-card')
+              cy.getById('store-product-card')
                 .should('have.length.gte', before)
                 .then(($products) => {
                   const after = $products.length
@@ -141,7 +141,7 @@ describe('Infinite Scroll pagination', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
-    cy.get('[data-testid=product-gallery] [data-testid=store-card]')
+    cy.get('[data-testid=product-gallery] [data-testid=store-product-card]')
       .should('exist')
       .should('have.length.gt', 0)
       .then(($links) => {
@@ -152,12 +152,12 @@ describe('Infinite Scroll pagination', () => {
           .should('exist')
           .click()
           // Go up the page
-          .get('[data-testid=product-gallery] [data-testid=store-card]')
+          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
           .first()
           .scrollIntoView({ duration: 1000 })
 
           // Go down the page
-          .get('[data-testid=product-gallery] [data-testid=store-card]')
+          .get('[data-testid=product-gallery] [data-testid=store-product-card]')
           .last()
           .scrollIntoView({ duration: 1000 })
           .then(() => {
@@ -167,7 +167,9 @@ describe('Infinite Scroll pagination', () => {
             // The skuId of the last product on the page
             let skuIdBeforeNavigate
 
-            cy.get('[data-testid=product-gallery] [data-testid=store-card]')
+            cy.get(
+              '[data-testid=product-gallery] [data-testid=store-product-card]'
+            )
               // Number of products after showMore is clicked should be higher
               .should('have.length.gte', before)
               .last()
@@ -183,7 +185,9 @@ describe('Infinite Scroll pagination', () => {
               })
               .then(() => {
                 cy.go('back')
-                  .get('[data-testid=product-gallery] [data-testid=store-card]')
+                  .get(
+                    '[data-testid=product-gallery] [data-testid=store-product-card]'
+                  )
                   .last()
                   .then(($card) => {
                     const skuIdAfterNavigate = $card.attr(
@@ -212,7 +216,7 @@ describe('Infinite Scroll pagination', () => {
       .location('search')
       .should('match', /page=0$/)
 
-      .get('[data-testid=product-gallery] [data-testid=store-card]')
+      .get('[data-testid=product-gallery] [data-testid=store-product-card]')
       .last()
       .scrollIntoView({ duration: 1000 })
       .location('search')

src/components/product/ProductCard/ProductCard.tsx

@@ -1,8 +1,8 @@
 import {
-  Card as UICard,
-  CardActions as UICardActions,
-  CardContent as UICardContent,
-  CardImage as UICardImage,
+  ProductCard as UIProductCard,
+  ProductCardActions as UIProductCardActions,
+  ProductCardContent as UIProductCardContent,
+  ProductCardImage as UIProductCardImage,
 } from '@faststore/ui'
 import { graphql, Link } from 'gatsby'
 import { memo } from 'react'
@@ -48,15 +48,15 @@ function ProductCard({
   const outOfStock = availability !== 'https://schema.org/InStock'
 
   return (
-    <UICard
+    <UIProductCard
       data-fs-product-card
       data-fs-product-card-variant={variant}
       data-fs-product-card-bordered={bordered}
-      data-fs-product-card-actionabled={!!ButtonBuy}
+      data-fs-product-card-actionable={!!ButtonBuy}
       data-fs-product-card-sku={sku}
       {...otherProps}
     >
-      <UICardImage>
+      <UIProductCardImage>
         <Image
           src={img.url}
           alt={img.alternateName}
@@ -65,9 +65,9 @@ function ProductCard({
           sizes="(max-width: 768px) 25vw, 30vw"
           loading="lazy"
         />
-      </UICardImage>
+      </UIProductCardImage>
 
-      <UICardContent data-fs-product-card-content>
+      <UIProductCardContent data-fs-product-card-content>
         <div data-fs-product-card-heading>
           <h3 data-fs-product-card-title>
             <Link {...linkProps} title={name}>
@@ -102,12 +102,12 @@ function ProductCard({
           <DiscountBadge listPrice={listPrice} spotPrice={spotPrice} />
         )}
         {!!ButtonBuy && (
-          <UICardActions data-fs-product-card-actions>
+          <UIProductCardActions data-fs-product-card-actions>
             {ButtonBuy}
-          </UICardActions>
+          </UIProductCardActions>
         )}
-      </UICardContent>
-    </UICard>
+      </UIProductCardContent>
+    </UIProductCard>
   )
 }
 

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

@@ -74,7 +74,7 @@
     }
   }
 
-  [data-card-image] {
+  [data-product-card-image] {
     position: relative;
     display: flex;
     justify-content: center;
@@ -172,13 +172,13 @@
   @include media(">=tablet") {
     grid-template-rows: 5fr 2fr;
 
-    &[data-fs-product-card-actionabled="true"] {
+    &[data-fs-product-card-actionable="true"] {
       grid-template-rows: 10fr 7fr;
     }
   }
 
   @include media(">=notebook") {
-    &[data-fs-product-card-actionabled="true"] {
+    &[data-fs-product-card-actionable="true"] {
       grid-template-rows: 6fr 3fr;
     }
 
@@ -194,7 +194,7 @@
     }
   }
 
-  [data-card-image] {
+  [data-product-card-image] {
     border-radius: var(--fs-product-card-border-radius) var(--fs-product-card-border-radius) 0 0;
   }
 
@@ -214,7 +214,7 @@
   gap: var(--fs-product-card-gap);
   min-width: calc(var(--fs-product-card-min-width) * 1.5);
 
-  [data-card-image] { grid-row: span 2; }
+  [data-product-card-image] { grid-row: span 2; }
 
   [data-fs-product-card-content] {
     display: grid;