Cornerstone update 6.1.3

CHANGELOG.md

@@ -6,6 +6,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 
+## 6.1.3 (11-10-2021)
+- Cannot see currency dropdown in storefront. [#2141](https://github.com/bigcommerce/cornerstone/pull/2141)
+
+## 6.1.2 (11-05-2021)
+- Hide prices for aria-label and data-product-price attributes if set to "Hidden for guests". Hide currency selection for non-logged in users. [#2131](https://github.com/bigcommerce/cornerstone/pull/2131)
+- Added basic validation for Account Signup Date Field when it's empty [#2126](https://github.com/bigcommerce/cornerstone/pull/2126)
+- Fixed Quick View modal "X" button focus bubble being slightly off center [#2130](https://github.com/bigcommerce/cornerstone/pull/2130)
+- Apply dependency updates (jest & lighthouse). [#2132](https://github.com/bigcommerce/cornerstone/pull/2132)
+- Update lang file for FR locale. [#2139](https://github.com/bigcommerce/cornerstone/pull/2139)
+- Update store logo to use `srcset`. [#2136](https://github.com/bigcommerce/cornerstone/pull/2136)
+
+## 6.1.1 (10-01-2021)
+- Fix product images on PDP has clipped outline. [#2124](https://github.com/bigcommerce/cornerstone/pull/2124)
+- Changed debounce wait time for search to 1200 ms from 200 ms. [#2115](https://github.com/bigcommerce/cornerstone/pull/2115)
+- additional checkout buttons don't work on applying 100% discount coupon. [#2109](https://github.com/bigcommerce/cornerstone/pull/2109)
+- Fix sliding carousel with products cause footer headers flickering. [#2119](https://github.com/bigcommerce/cornerstone/pull/2119)
+
+## 6.1.0 (09-03-2021)
+- Fixed images placeholder on hero carousel shifted on mobile when slide has content. [#2112](https://github.com/bigcommerce/cornerstone/pull/2112)
+- Google AMP feature request - Add in release date info for preorder products. [#2107](https://github.com/bigcommerce/cornerstone/pull/2107)
+- Translation for states select field on account signup page. [#2105](https://github.com/bigcommerce/cornerstone/pull/2105)
+- Added description field below payment provider name on "My Account" -> "Payment Methods" page. [#2111](https://github.com/bigcommerce/cornerstone/pull/2111)
+
 ## 6.0.0 (08-06-2021)
 - Translation mechanism for config.json has been updated. [#2089](https://github.com/bigcommerce/cornerstone/pull/2089)
 - As a shopper I want to see gift wrapping price in product list the cart. [#2093](https://github.com/bigcommerce/cornerstone/pull/2093)

assets/js/theme/cart.js

@@ -15,6 +15,7 @@ export default class Cart extends PageManager {
         this.$cartContent = $('[data-cart-content]');
         this.$cartMessages = $('[data-cart-status]');
         this.$cartTotals = $('[data-cart-totals]');
+        this.$cartAdditionalCheckoutBtns = $('[data-cart-additional-checkout-buttons]');
         this.$overlay = $('[data-cart] .loadingOverlay')
             .hide(); // TODO: temporary until roper pulls in his cart components
         this.$activeCartItemId = null;
@@ -223,6 +224,7 @@ export default class Cart extends PageManager {
                 totals: 'cart/totals',
                 pageTitle: 'cart/page-title',
                 statusMessages: 'cart/status-messages',
+                additionalCheckoutButtons: 'cart/additional-checkout-buttons',
             },
         };
 
@@ -237,6 +239,7 @@ export default class Cart extends PageManager {
             this.$cartContent.html(response.content);
             this.$cartTotals.html(response.totals);
             this.$cartMessages.html(response.statusMessages);
+            this.$cartAdditionalCheckoutBtns.html(response.additionalCheckoutButtons);
 
             $cartPageTitle.replaceWith(response.pageTitle);
             this.bindEvents();

assets/js/theme/common/form-validation.js

@@ -6,7 +6,7 @@ import { createTranslationDictionary } from './utils/translations-utils';
  * @param validation
  * @returns {{selector: string, triggeredBy: string, validate: Function, errorMessage: string}}
  */
-function buildDateValidation($formField, validation) {
+function buildDateValidation($formField, validation, requiredMessage) {
     // No date range restriction, skip
     if (validation.min_date && validation.max_date) {
         const invalidMessage = `Your chosen date must fall between ${validation.min_date} and ${validation.max_date}.`;
@@ -30,6 +30,23 @@ function buildDateValidation($formField, validation) {
             errorMessage: invalidMessage,
         };
     }
+    // Required Empty Date field
+    if (validation.required && (!validation.min_date || !validation.max_date)) {
+        const formElementId = $formField.attr('id');
+
+        return {
+            selector: `#${formElementId} select[data-label="year"]`,
+            triggeredBy: `#${formElementId} select:not([data-label="year"])`,
+            validate: (cb, val) => {
+                const day = $formField.find('select[data-label="day"]').val();
+                const month = $formField.find('select[data-label="month"]').val();
+                const year = val;
+
+                cb(day && month && year);
+            },
+            errorMessage: requiredMessage,
+        };
+    }
 }
 
 /**
@@ -97,7 +114,7 @@ function buildValidation($validateableElement, errorMessage) {
     const formFieldSelector = `#${$validateableElement.attr('id')}`;
 
     if (validation.type === 'datechooser') {
-        const dateValidation = buildDateValidation($validateableElement, validation);
+        const dateValidation = buildDateValidation($validateableElement, validation, errorMessage);
 
         if (dateValidation) {
             fieldValidations.push(dateValidation);

assets/js/theme/common/product-by-category.js

@@ -41,6 +41,7 @@ export default function loadProductByCategory(productBlockCols, productBlockLimi
                                     mobileFirst: true,
                                     slidesToShow: 2,
                                     slidesToScroll: 1,
+                                    slide: '[data-product-slide]',
                                     nextArrow: "<button class='js-product-next-arrow slick-next slick-arrow'></button>",
                                     prevArrow: "<button class='js-product-prev-arrow slick-prev slick-arrow'></button>",
                                     responsive: [{

assets/js/theme/common/state-country.js

@@ -90,7 +90,7 @@ function addOptions(statesArray, $selectElement, options) {
             if (options.useIdForStates) {
                 container.push(`<option value="${stateObj.id}">${stateObj.name}</option>`);
             } else {
-                container.push(`<option value="${stateObj.name}">${stateObj.name}</option>`);
+                container.push(`<option value="${stateObj.name}">${stateObj.label ? stateObj.label : stateObj.name}</option>`);
             }
         });
 

assets/js/theme/global/quick-search.js

@@ -32,7 +32,8 @@ export default function () {
         }
     };
 
-    // stagger searching for 200ms after last input
+    // stagger searching for 1200ms after last input
+    const debounceWaitTime = 1200;
     const doSearch = _.debounce((searchQuery) => {
         utils.api.search.search(searchQuery, { template: 'search/quick-results' }, (err, response) => {
             if (err) {
@@ -62,7 +63,7 @@ export default function () {
                 }, 100);
             }
         });
-    }, 200);
+    }, debounceWaitTime);
 
     utils.hooks.on('search-quick', (event, currentTarget) => {
         const searchQuery = $(currentTarget).val();

assets/js/theme/product.js

@@ -7,7 +7,7 @@ import collapsibleFactory from './common/collapsible';
 import ProductDetails from './common/product-details';
 import videoGallery from './product/video-gallery';
 import { classifyForm } from './common/utils/form-utils';
-import modalFactory, { ModalEvents } from './global/modal';
+import modalFactory from './global/modal';
 
 export default class Product extends PageManager {
     constructor(context) {
@@ -44,8 +44,6 @@ export default class Product extends PageManager {
 
         const review = new Review({ $reviewForm });
 
-        $(document).on(ModalEvents.opened, '#modal-review-form', () => this.reviewModal.setupFocusTrap());
-
         $('body').on('click', '[data-reveal-id="modal-review-form"]', () => {
             validator = review.registerValidation(this.context);
             this.ariaDescribeReviewInputs($reviewForm);

assets/scss/components/citadel/cards/_cards.scss

@@ -42,6 +42,24 @@
     }
 }
 
+.card-figure {
+    margin-top: $card-figure-marginTop;
+    overflow: hidden;
+    padding: 3px;
+    position: relative;
+
+    &:hover {
+        .card-figcaption {
+            opacity: 1;
+        }
+    }
+
+    &__link {
+        display: block;
+        position: relative;
+    }
+}
+
 .card-figure {
     margin-top: $card-figure-marginTop;
     overflow: hidden;

assets/scss/components/foundation/modal/_modal.scss

@@ -62,7 +62,14 @@
         color: stencilColor("icon-color-hover");
     }
 
-    @include addFocusTooltip;
+    &::before {
+        right: 50%;
+        transform: translateX(50%);
+    }
+
+    &::after {
+        right: calc(50% - remCalc(10px));
+    }
 }
 
 .modal-body {

assets/scss/components/stencil/cart/_cart.scss

@@ -275,6 +275,10 @@ $card-preview-zoom-bottom-offset:       6rem;
         display: inline-block;
     }
 
+    &__label {
+        display: inline-block;
+    }
+
     + .definitionList {
         margin-top: spacing("quarter");
     }

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

@@ -42,15 +42,6 @@
         }
     }
 
-    // for IE
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        opacity: 0;
-
-        &.slick-initialized {
-            opacity: 1;
-        }
-    }
-
     &:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide {
         display: none;
     }
@@ -222,6 +213,36 @@
             background-size: contain;
         }
     }
+
+    .slick-slide {
+        &.is-square-image-type {
+            .heroCarousel-image-wrapper {
+                height: 100vw;
+            }
+        }
+
+        &.is-vertical-image-type {
+            .heroCarousel-image-wrapper {
+                height: 110vw;
+            }
+        }
+
+        &.is-square-image-type,
+        &.is-vertical-image-type {
+            .heroCarousel-image-wrapper {
+                @include breakpoint("small") {
+                    height: 56.25vw;
+                }
+            }
+        }
+
+        &.is-image-error {
+            .heroCarousel-image-wrapper {
+                background: url("../img/hero-carousel-image-load-error.svg") center center no-repeat;
+                background-size: contain;    
+            }
+        }
+    }
 }
 
 .heroCarousel-slide {
@@ -358,42 +379,3 @@
 .heroCarousel-action {
     margin: spacing("single") 0 0;
 }
-
-.heroCarousel-play-pause-button {
-    position: absolute;
-    left: 15px;
-    bottom: spacing("third");
-    height: 32px;
-    min-width: 60px;
-    max-width: 60px;
-    font-size: 14px;
-    line-height: 1.25;
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: $slick-play-pause-button-color;
-    transition: color 100ms ease-out;
-    z-index: zIndex("lowest");
-    border: 1px solid $slick-play-pause-button-borderColor;
-    @include carouselOpaqueBackgrounds($slick-play-pause-button-bgColor);
-
-    @media (min-width: 375px) {
-        min-width: 80px;
-        max-width: 90px;
-    }
-
-    @include breakpoint("small") {
-        max-width: 150px;
-        font-size: 18px;
-    }
-
-    @include breakpoint("medium") {
-        left: 25px;
-        bottom: spacing("single");
-    }
-
-    &:hover {
-        color: $slick-play-pause-button-color-hover;
-    }
-}

assets/scss/components/stencil/navPages/_navPages.scss

@@ -227,6 +227,24 @@
         }
     }
 
+    &.is-open,
+    .collapsible-icon-wrapper.is-open {
+        svg {
+            fill: $navPage-subMenu-item--is-highlighted-color;
+            stroke: $navPage-subMenu-item--is-highlighted-color;
+        }
+    }
+
+    &:hover,
+    &.activePage {
+        color: $navPage-subMenu-item--is-highlighted-color;
+
+        svg {
+            fill: $navPage-subMenu-item--is-highlighted-color;
+            stroke: $navPage-subMenu-item--is-highlighted-color;
+        }
+    }
+
     // turn a highlight into a button
     &.highlightPage {
         background-color: black;

assets/scss/components/stencil/productView/_productView.scss

@@ -55,7 +55,7 @@
         @include lazy-loaded-img;
         /* Object-fit polyfill */
         font-family: "object-fit: contain;";
-        max-height: 100%;
+        height: 100%;
         object-fit: contain;
         width: 100%;
     }
@@ -102,8 +102,7 @@
 
 .productView-thumbnail {
     @include grid-column(3);
-    padding-left: spacing("quarter");
-    padding-right: spacing("quarter");
+    padding: spacing("quarter");
     text-align: center;
 
     @include breakpoint("large") {
@@ -114,7 +113,7 @@
 .productView-thumbnail-link {
     border: container("border");
     box-sizing: content-box;
-    display: inline-flex;
+    display: flex;
     height: 67px;
     justify-content: center;
     max-width: 75px;
@@ -271,6 +270,10 @@
         color: stencilColor("color-textSecondary--hover");
     }
 
+    &:hover {
+        color: stencilColor("color-textSecondary--hover");
+    }
+
     &--new {
         padding: 0;
     }
@@ -434,6 +437,10 @@
                 width: auto;
             }
 
+            @include breakpoint("medium") {
+                width: auto;
+            }
+
             @include breakpoint("large") {
                 margin-right: spacing("half");
             }
@@ -450,6 +457,10 @@
         .button--primary {
             margin-right: spacing("half");
         }
+
+        .button--primary {
+            margin-right: spacing("half");
+        }
     }
 }