diff --git a/CHANGELOG.md b/CHANGELOG.md index 38f3f391be..b5063a6f11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ # Changelog +- Product cards should link to products. [#1842](https://github.com/bigcommerce/cornerstone/pull/1842) + ## Draft - Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812) - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index e8a730b252..1b55fff238 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -1,12 +1,19 @@ import 'slick-carousel'; const integerRegExp = /[0-9]+/; +const allFocusableElementsSelector = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]'; const setSlideTabindexes = ($slides) => { $slides.each((index, element) => { const $element = $(element); const tabIndex = $element.hasClass('slick-active') ? 0 : -1; - $element.attr('tabindex', tabIndex); + if (!$element.hasClass('js-product-slide')) { + $element.attr('tabindex', tabIndex); + } + + $element.find(allFocusableElementsSelector).each((idx, child) => { + $(child).attr('tabindex', tabIndex); + }); }); }; diff --git a/assets/scss/components/citadel/cards/_cards.scss b/assets/scss/components/citadel/cards/_cards.scss index b9a48cafab..ddab0a1b15 100644 --- a/assets/scss/components/citadel/cards/_cards.scss +++ b/assets/scss/components/citadel/cards/_cards.scss @@ -28,6 +28,9 @@ .card-figure { margin-top: $card-figure-marginTop; position: relative; + padding: 3px; + overflow: hidden; + &:hover { // scss-lint:disable NestingDepth @@ -35,6 +38,11 @@ opacity: 1; } } + + &__link { + display: block; + position: relative; + } } .card-img-container { diff --git a/assets/scss/components/stencil/compare/_compare.scss b/assets/scss/components/stencil/compare/_compare.scss index 293feddaac..459f081c77 100644 --- a/assets/scss/components/stencil/compare/_compare.scss +++ b/assets/scss/components/stencil/compare/_compare.scss @@ -112,6 +112,10 @@ min-height: spacing("single") * 4; padding-top: spacing("base"); } + + .card-figure { + overflow: visible; + } } diff --git a/assets/scss/layouts/products/_productSaleBadges.scss b/assets/scss/layouts/products/_productSaleBadges.scss index 6d0cfb3a2d..6bdc6cd6c6 100644 --- a/assets/scss/layouts/products/_productSaleBadges.scss +++ b/assets/scss/layouts/products/_productSaleBadges.scss @@ -33,7 +33,8 @@ .starwrap { height: rem-calc(50px); position: absolute; - top: 10px; + top: 12px; + left: 12px; width: rem-calc(50px); } @@ -108,7 +109,7 @@ font-size: 15px; font-weight: 700; height: rem-calc(20px); - left: -35px; + left: -25px; line-height: rem-calc(16px); padding-top: spacing("eighth") / 2; position: absolute; @@ -123,15 +124,16 @@ .listItem-figure { .sale-flag-sash { - left: -25px; + top: 24px; @include breakpoint("small") { - top: 15px; + top: 19px; + left: -20px; } @include breakpoint("large") { left: -15px; - top: 25px; + top: 24px; } } diff --git a/templates/components/products/card.html b/templates/components/products/card.html index 537adc8b2a..8976621e9d 100644 --- a/templates/components/products/card.html +++ b/templates/components/products/card.html @@ -16,7 +16,7 @@ {{/if}} {{/or}} - +
{{> components/common/responsive-img image=image diff --git a/templates/pages/brands.html b/templates/pages/brands.html index 5614e9c4c4..d2ba7a9900 100644 --- a/templates/pages/brands.html +++ b/templates/pages/brands.html @@ -14,7 +14,7 @@

{{lang 'brand.label'}}

  • - +
    {{> components/common/responsive-img image=image diff --git a/templates/pages/compare.html b/templates/pages/compare.html index 0985028d66..9143a419a8 100644 --- a/templates/pages/compare.html +++ b/templates/pages/compare.html @@ -13,15 +13,17 @@

    {{lang 'compare.header' products=comparisons.length}}