Cornerstone update 6.10.0

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 
+## 6.10.0 (03-23-2023)
+- A bug with the display of the product quantity on the PDP [#2340](https://github.com/bigcommerce/cornerstone/pull/2340)
+- Extended initialization interface of the storefront-account-payments lib, added theme styles [#2335][https://github.com/bigcommerce/cornerstone/pull/2335]
+- Added showAlertModal to the storefront-account-payments app initialization [#2338][https://github.com/bigcommerce/cornerstone/pull/2338]
+
 ## 6.9.0 (03-03-2023)
 - Fix sold-out badge appearance [#2315](https://github.com/bigcommerce/cornerstone/pull/2315)
 - Remove xlink attributes on svg [#2322](https://github.com/bigcommerce/cornerstone/pull/2322)

assets/js/theme/account.js

@@ -83,7 +83,7 @@ export default class Account extends PageManager {
             this.initReorderForm($reorderForm);
         }
 
-        if ($bigCommerce && $bigCommerce.accountPayments) {
+        if ($bigCommerce && $bigCommerce.renderAccountPayments) {
             const {
                 countries,
                 paymentsUrl,
@@ -96,29 +96,70 @@ export default class Account extends PageManager {
                 currencyCode,
                 paymentMethodsUrl,
                 paymentProviderInitializationData,
+                themeSettings,
             } = this.context;
 
-            window.BigCommerce.accountPayments({
-                widgetStyles: {
-                    base: {
-                        color: '#666666',
-                        cursor: 'pointer',
-                        display: 'block',
-                        fontSize: '1rem',
-                        lineHeight: '1.5',
-                        marginBottom: '0.5rem',
+            $bigCommerce.renderAccountPayments({
+                styles: {
+                    inputBase: {
+                        color: themeSettings['input-font-color'],
+                        borderColor: themeSettings['input-border-color'],
                     },
-                    error: {
-                        color: 'red',
+                    inputValidationError: {
+                        color: themeSettings['color-error'],
+                        borderColor: themeSettings['color-error'],
                     },
-                    placeholder: {
-                        color: '#d8d8d8',
+                    inputValidationSuccess: {
+                        color: themeSettings['color-success'],
+                        borderColor: themeSettings['color-success'],
                     },
-                    validated: {
-                        color: 'green',
+                    submitButton: {
+                        color: themeSettings['button--primary-color'],
+                        backgroundColor: themeSettings['button--primary-backgroundColor'],
+                        borderColor: themeSettings['button--primary-backgroundColor'],
+                        '&:hover': {
+                            color: themeSettings['button--primary-colorHover'],
+                            backgroundColor: themeSettings['button--primary-backgroundColorHover'],
+                            borderColor: themeSettings['button--primary-backgroundColorHover'],
+                        },
+                        '&:active': {
+                            color: themeSettings['button--primary-colorActive'],
+                            backgroundColor: themeSettings['button--primary-backgroundColorActive'],
+                            borderColor: themeSettings['button--primary-backgroundColorActive'],
+                        },
+                        '&[disabled]': {
+                            backgroundColor: themeSettings['button--disabled-backgroundColor'],
+                            borderColor: themeSettings['button--disabled-borderColor'],
+                            color: themeSettings['button--disabled-color'],
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    cancelButton: {
+                        color: themeSettings['button--default-color'],
+                        backgroundColor: 'transparent',
+                        borderColor: themeSettings['button--default-borderColor'],
+                        '&:hover': {
+                            color: themeSettings['button--default-colorHover'],
+                            backgroundColor: 'transparent',
+                            borderColor: themeSettings['button--default-borderColorHover'],
+                        },
+                        '&:active': {
+                            color: themeSettings['button--default-colorActive'],
+                            backgroundColor: 'transparent',
+                            borderColor: themeSettings['button--default-borderColorActive'],
+                        },
+                    },
+                    label: {
+                        color: themeSettings['form-label-font-color'],
+                    },
+                    validationError: {
+                        color: themeSettings['color-error'],
+                    },
+                    heading: {
+                        color: themeSettings['color-textHeading'],
                     },
                 },
-                initializeData: {
+                storeContextData: {
                     countries,
                     paymentsUrl,
                     storeHash,
@@ -131,6 +172,7 @@ export default class Account extends PageManager {
                     paymentMethodsUrl,
                     paymentProviderInitializationData,
                 },
+                errorHandler: showAlertModal,
             });
         }
 

assets/scss/components/_components.scss

@@ -192,7 +192,7 @@
 @import "stencil/category/component";
 
 // Vendors
-@import "stencil/vendor/component";
+@import "stencil/vendor/featuredVendor";
 
 @import "stencil/customBlocks";
 // Contact-Us Form

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

@@ -307,6 +307,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

@@ -453,6 +453,36 @@
             }
         }
     }
+
+    .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 {

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

@@ -293,6 +293,10 @@
         color: stencilColor("color-textSecondary--hover");
     }
 
+    &:hover {
+        color: stencilColor("color-textSecondary--hover");
+    }
+
     &--new {
         padding: 0;
     }

assets/scss/layouts/products/_productSaleBadges.scss

@@ -229,6 +229,10 @@
     background: stencilColor("color_hover_product_sold_out_badges");
 }
 
+.product:hover .sold-out-flag-sash {
+    background: stencilColor("color_hover_product_sold_out_badges");
+}
+
 .product {
     overflow: hidden;
 }

config.json

@@ -1,6 +1,6 @@
 {
   "name": "Midwest Nice",
-  "version": "6.9.0",
+  "version": "6.10.0",
   "template_engine": "handlebars_v4",
   "meta": {
     "price": 0,