diff --git a/CHANGELOG.md b/CHANGELOG.md index d49116e9..6122e2df 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/cypress/integration/analytics.test.js b/cypress/integration/analytics.test.js index 079b7313..32b132ff 100644 --- a/cypress/integration/analytics.test.js +++ b/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') diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js index be7449c4..70e4cf3b 100644 --- a/cypress/integration/plp.test.js +++ b/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') diff --git a/src/components/product/ProductCard/ProductCard.tsx b/src/components/product/ProductCard/ProductCard.tsx index f7243f43..bc50a450 100644 --- a/src/components/product/ProductCard/ProductCard.tsx +++ b/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 ( - - + {img.alternateName} - + - +

@@ -102,12 +102,12 @@ function ProductCard({ )} {!!ButtonBuy && ( - + {ButtonBuy} - + )} - - + + ) } diff --git a/src/components/product/ProductCard/product-card.scss b/src/components/product/ProductCard/product-card.scss index a9f5cfa2..5d9f4727 100644 --- a/src/components/product/ProductCard/product-card.scss +++ b/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;