Merge branch 'master' into BCTHEME-1755

CHANGELOG.md

@@ -5,11 +5,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Check lang helpers usage and existence of key in translation file [#2403](https://github.com/bigcommerce/cornerstone/pull/2403)
 - Display fees on cart page [#2376](https://github.com/bigcommerce/cornerstone/pull/2376)
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
 - Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
 - Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392)
 - Videos added through the Product Editor have their thumbnails cropped compared to videos added through the page builder [#2413](https://github.com/bigcommerce/cornerstone/pull/2413)
+- Update Shop By Price Widget [#2408](https://github.com/bigcommerce/cornerstone/pull/2408)
+- 'Please Select a file' popup forces shopper to re-upload file if the option type is 'File Upload' and is set to required [#2409](https://github.com/bigcommerce/cornerstone/pull/2409)
+- Top Global Region Image Widget overlaps the mobile menu [#2402](https://github.com/bigcommerce/cornerstone/pull/2402)
+- Changed default PayPal checkout button color [#2405](https://github.com/bigcommerce/cornerstone/pull/2405)
+- Changed default PayPal checkout button size [#2406](https://github.com/bigcommerce/cornerstone/pull/2406)
+- Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
+- Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
+- Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
 
 ## 6.12.0 (07-06-2023)
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)

assets/js/theme/category.js

@@ -36,11 +36,21 @@ export default class Category extends CatalogPage {
 
         compareProducts(this.context);
 
-        if ($('#facetedSearch').length > 0) {
-            this.initFacetedSearch();
-        } else {
+        this.initFacetedSearch();
+
+        if (!$('#facetedSearch').length) {
             this.onSortBySubmit = this.onSortBySubmit.bind(this);
             hooks.on('sortBy-submitted', this.onSortBySubmit);
+
+            // Refresh range view when shop-by-price enabled
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (urlParams.has('search_query')) {
+                $('.reset-filters').show();
+            }
+
+            $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+            $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
         }
 
         $('a.reset-btn').on('click', () => this.setLiveRegionsAttributes($('span.reset-message'), 'status', 'polite'));

assets/js/theme/common/faceted-search.js

@@ -17,8 +17,8 @@ const defaultOptions = {
     priceRangeErrorSelector: '#facet-range-form .form-inlineMessage',
     priceRangeFieldsetSelector: '#facet-range-form .form-fieldset',
     priceRangeFormSelector: '#facet-range-form',
-    priceRangeMaxPriceSelector: '#facet-range-form [name=max_price]',
-    priceRangeMinPriceSelector: '#facet-range-form [name=min_price]',
+    priceRangeMaxPriceSelector: $('#facetedSearch').length ? '#facet-range-form [name=max_price]' : '#facet-range-form [name=price_max]',
+    priceRangeMinPriceSelector: $('#facetedSearch').length ? '#facet-range-form [name=min_price]' : '#facet-range-form [name=price_min]',
     showMoreToggleSelector: '#facetedSearch .accordion-content .toggleLink',
     facetedSearchFilterItems: '#facetedSearch-filterItems .form-input',
     modal: modalFactory('#modal')[0],
@@ -131,6 +131,16 @@ class FacetedSearch {
 
             // Refresh view with new content
             this.refreshView(content);
+
+            // Refresh range view when shop-by-price enabled
+            const urlParams = new URLSearchParams(window.location.search);
+
+            if (urlParams.has('search_query')) {
+                $('.reset-filters').show();
+            }
+
+            $('input[name="price_min"]').attr('value', urlParams.get('price_min'));
+            $('input[name="price_max"]').attr('value', urlParams.get('price_max'));
         });
     }
 

assets/scss/components/foundation/alerts/_alerts.scss

@@ -14,7 +14,7 @@
 }
 
 .alertBox--info {
-    background-color: stencilColor("banner--deafault-backgroundColor");
+    background-color: stencilColor("banner--default-backgroundColor");
     color: stencilColor("alert-color-alt");
 
     .alertBox-close {

assets/scss/components/stencil/facetedSearch/_facetedSearch.scss

@@ -122,3 +122,7 @@
         font-weight: bold;
     }
 }
+
+.reset-filters {
+    display: none;
+}

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

@@ -56,7 +56,6 @@
     &.is-open {
         display: block;
         padding-top: $header-height;
-        z-index: 0;
     }
 }
 

assets/scss/layouts/sidebar/_block.scss

@@ -18,4 +18,10 @@
     font-size: remCalc(15px);
     margin-top: 0;
     text-transform: inherit;
+
+    &.heading-price {
+        @media (min-width: $screen-medium) {
+            margin-top: -(remCalc(12px));
+        }
+    }
 }

config.json

@@ -149,7 +149,7 @@
     "color-greyLight": "#999999",
     "color-greyLighter": "#cccccc",
     "color-greyLightest": "#e5e5e5",
-    "banner--deafault-backgroundColor": "#707070",
+    "banner--default-backgroundColor": "#707070",
     "button--default-color": "#666666",
     "button--default-colorHover": "#333333",
     "button--default-colorActive": "#000000",
@@ -331,14 +331,14 @@
     "paymentbuttons-paypal-checkout-on-top-color": "gold",
     "paymentbuttons-paylater-checkout-on-top-color": "gold",
     "paymentbuttons-venmo-checkout-on-top-color": "blue",
-    "paymentbuttons-paypal-checkout-payment-color": "gold",
+    "paymentbuttons-paypal-checkout-payment-color": "black",
     "paymentbuttons-paylater-checkout-payment-color": "gold",
     "paymentbuttons-venmo-checkout-payment-color": "blue",
     "paymentbuttons-paypal-checkout-payment-label": "checkout",
     "paymentbuttons-paypal-checkout-on-top-payment-label": "checkout",
     "paymentbuttons-paypal-cart-page-add-cart-label": "checkout",
     "paymentbuttons-paypal-product-details-page-label": "checkout",
-    "paymentbuttons-paypal-checkout-payment-size": "medium",
+    "paymentbuttons-paypal-checkout-payment-size": "large",
     "paymentbuttons-paypal-color": "gold",
     "paymentbuttons-paypal-shape": "rect",
     "paymentbuttons-paypal-label": "checkout",
@@ -474,7 +474,7 @@
         "color-greyLight": "#757575",
         "color-greyLighter": "#666666",
         "color-greyLightest": "#444444",
-        "banner--deafault-backgroundColor": "#b7b4b4",
+        "banner--default-backgroundColor": "#b7b4b4",
         "button--default-color": "#cccccc",
         "button--default-colorHover": "#ffffff",
         "button--default-colorActive": "#ffffff",
@@ -684,7 +684,7 @@
         "color-greyLight": "#a5a5a5",
         "color-greyLighter": "#dfdfdf",
         "color-greyLightest": "#e8e8e8",
-        "banner--deafault-backgroundColor": "#7D644A",
+        "banner--default-backgroundColor": "#7D644A",
         "button--default-color": "#74685c",
         "button--default-colorHover": "#4f3f2f",
         "button--default-colorActive": "#917052",

schemaTranslations.json

@@ -1296,7 +1296,7 @@
     "pl": "Granica pola aktywna"
   },
   "i18n.HeaderAndFooter": {
-    "default": "Header & Footer",
+    "default": "Header and footer",
     "fr": "En-tête et pied de page",
     "it": "Intestazione e piè di pagina",
     "zh": "页眉和页脚",
@@ -2214,7 +2214,7 @@
     "pl": "Mała"
   },
   "i18n.HomePage": {
-    "default": "Home Page",
+    "default": "Homepage",
     "fr": "Page d'accueil",
     "it": "Homepage",
     "zh": "主页",
@@ -3546,7 +3546,7 @@
     "pl": "Standard"
   },
   "i18n.ButtonsAndIcons": {
-    "default": "Buttons & Icons",
+    "default": "Buttons and icons",
     "fr": "Boutons et icônes",
     "it": "Pulsanti e icone",
     "zh": "按钮与图标",
@@ -3924,7 +3924,7 @@
     "pl": "Pole wyboru i ikona radia"
   },
   "i18n.CheckoutPage": {
-    "default": "Checkout Page",
+    "default": "Checkout page",
     "fr": "Page de paiement",
     "it": "Pagina di checkout",
     "zh": "结账台页面",
@@ -4734,7 +4734,7 @@
     "pl": "Kolor tekstu tostów"
   },
   "i18n.PaymentButtons": {
-    "default": "Payment Buttons",
+    "default": "Payment buttons",
     "fr": "Boutons de paiement",
     "it": "Pulsanti di pagamento",
     "zh": "付款按钮",
@@ -5508,7 +5508,7 @@
     "pl": "Brak"
   },
   "i18n.PaymentBanners": {
-    "default": "Payment Banners",
+    "default": "Payment banners",
     "fr": "Bannières de paiement",
     "it": "Banner di pagamento",
     "zh": "付款横幅",

templates/components/account/edit-account.html

@@ -10,26 +10,26 @@
                     {{lang 'account.settings.first_name' }}
                     <small>{{lang 'common.required' }}</small>
                 </label>
-                <input aria-labelledby="account_firstname_id" aria-live="polite" type="text" class="form-input" name="account_firstname" id="account_firstname" value="{{forms.edit_account.first_name}}">
+                <input aria-labelledby="account_firstname_id" aria-live="polite" autocomplete="given-name" type="text" class="form-input" name="account_firstname" id="account_firstname" value="{{forms.edit_account.first_name}}">
             </div>
             <div class="form-field" id="account_lastname_id">
                 <label class="form-label" for="account_lastname">
                     {{lang 'account.settings.last_name' }}
                     <small>{{lang 'common.required' }}</small>
                 </label>
-                <input aria-labelledby="account_lastname_id" aria-live="polite" type="text" class="form-input" name="account_lastname" id="account_lastname" value="{{forms.edit_account.last_name}}">
+                <input aria-labelledby="account_lastname_id" aria-live="polite" autocomplete="family-name" type="text" class="form-input" name="account_lastname" id="account_lastname" value="{{forms.edit_account.last_name}}">
             </div>
             <div class="form-field" id="account_companyname_id">
                 <label class="form-label" for="account_companyname">
                     {{lang 'account.settings.company' }}
                 </label>
-                <input aria-labelledby="account_companyname_id" aria-live="polite" type="text" class="form-input" name="account_companyname" id="account_companyname" value="{{forms.edit_account.company_name}}">
+                <input aria-labelledby="account_companyname_id" aria-live="polite" autocomplete="organization" type="text" class="form-input" name="account_companyname" id="account_companyname" value="{{forms.edit_account.company_name}}">
             </div>
             <div class="form-field" id="account_phone_id">
                 <label class="form-label" for="account_phone">
                     {{lang 'account.settings.phone' }}
                 </label>
-                <input aria-labelledby="account_phone_id" aria-live="polite" type="text" class="form-input" name="account_phone" id="account_phone" value="{{forms.edit_account.phone}}">
+                <input aria-labelledby="account_phone_id" aria-live="polite" autocomplete="tel" type="text" class="form-input" name="account_phone" id="account_phone" value="{{forms.edit_account.phone}}">
             </div>
             {{#each forms.edit_account.fields}}
                 {{{dynamicComponent 'components/common/forms'}}}

templates/components/cart/modals/configure-product.html

@@ -1,7 +1,7 @@
 <div class="modal-header">
-    <h2 
-        class="modal-header-title" 
-        data-product-variant 
+    <h2
+        class="modal-header-title"
+        data-product-variant
         data-name="{{product_name}}"
         >
         {{lang 'cart.reconfigure_product' name=product_name}}

templates/components/cart/shipping-estimator.html

@@ -65,7 +65,7 @@
                 <label class="form-label" for="shipping-zip">{{lang 'cart.shipping_estimator.zip_postal_code'}}</label>
             </dt>
             <dd class="estimator-form-input">
-                <input class="form-input" type="text" id="shipping-zip" name="shipping-zip" value="{{selected_zip}}" placeholder="{{lang 'cart.shipping_estimator.zip_postal_code'}}">
+                <input autocomplete="postal-code" class="form-input" type="text" id="shipping-zip" name="shipping-zip" value="{{selected_zip}}" placeholder="{{lang 'cart.shipping_estimator.zip_postal_code'}}">
             </dd>
             <button class="button button--primary button--small shipping-estimate-submit">{{lang 'cart.shipping_estimator.estimate_shipping'}}</button>
         </dl>

templates/components/category/shop-by-price.html

@@ -1,33 +1,12 @@
-{{#and theme_settings.shop_by_price_visibility shop_by_price}}
+{{#and theme_settings.shop_by_price_visibility category.shop_by_price}}
     <div class="sidebarBlock">
-        <h2 class="sidebarBlock-heading" data-shop-by-price>{{lang 'category.shop_by_price'}}</h2>
-        <ul class="navList">
-            {{#each shop_by_price}}
-            <li class="navList-item">
-                <a 
-                    {{#if selected }} 
-                        class="navList-action is-active"
-                        role="status"
-                        aria-live="assertive"
-                   {{else}}
-                        class="navList-action"
-                   {{/if}}
-                   href="{{url}}"
-                >
-                   {{lang 'category.filter_price_range'}} {{low.formatted}} - {{high.formatted}}
-                </a>
-                <span class="price-filter-message aria-description--hidden">{{lang 'category.filter_select_announcement'}}</span>
-            </li>
-            {{/each}}
+        <h2 class="sidebarBlock-heading heading-price" data-shop-by-price>{{lang 'category.shop_by_price'}}</h2>
 
-            {{#any shop_by_price selected=true}}
-                <li class="navList-item">
-                    <a href="{{category_url}}" class="navList-action reset-btn">
-                        {{lang 'category.reset'}}
-                    </a>
-                    <span class="reset-message aria-description--hidden">{{lang 'category.filter_reset_announcement'}}</span>
-                </li>
-            {{/any}}
-        </ul>
+        {{> components/faceted-search/range-form shop_by_price=theme_settings.shop_by_price_visibility}}
+
+        <div class="reset-filters">
+            <a href="{{category.url}}" class="navList-action reset-btn">{{lang 'category.reset'}}</a>
+            <span class="reset-message aria-description--hidden">{{lang 'category.filter_reset_announcement'}}</span>
+        </div>
     </div>
 {{/and}}

templates/components/category/sidebar.html

@@ -15,6 +15,6 @@ <h2 class="sidebarBlock-heading">{{category.name}}</h2>
     {{#if category.faceted_search_enabled}}
         {{> components/faceted-search/index category}}
     {{else}}
-        {{> components/category/shop-by-price shop_by_price=category.shop_by_price category_url=category.url}}
+        {{> components/category/shop-by-price}}
     {{/if}}
 </nav>

templates/components/common/subscription-form.html

@@ -17,6 +17,7 @@ <h3 class="footer-info-heading">{{lang 'newsletter.subscribe'}}</h3>
                        placeholder="{{lang 'newsletter.email_placeholder'}}"
                        aria-describedby="alertBox-message-text"
                        aria-required="true"
+                       autocomplete="email"
                        required
                 >
                 <input class="button button--primary form-prefixPostfix-button--postfix"

templates/components/faceted-search/facets/range.html

@@ -2,46 +2,6 @@
     {{> components/faceted-search/faceted-search-navigation}}
 
     <div id="facetedSearch-content--{{dashcase facet}}" class="accordion-content{{#unless start_collapsed}} is-open{{/unless}}">
-        <form id="facet-range-form" class="form" method="get" data-faceted-search-range novalidate>
-            <input type="hidden" name="search_query" value="{{search_query}}">
-            {{#if this.sort}}
-                <input type="hidden" name="sort" value="{{this.sort}}">
-            {{/if}}
-            <fieldset class="form-fieldset">
-                <div class="form-minMaxRow">
-                    <div class="form-field">
-                        <input
-                            name="min_price"
-                            placeholder="{{lang 'search.faceted.range.min-placeholder'}}"
-                            min="0"
-                            class="form-input form-input--small"
-                            required
-                            type="number"
-                            value="{{min_price}}"
-                        />
-                    </div>
-
-                    <div class="form-field">
-                        <input
-                            name="max_price"
-                            placeholder="{{lang 'search.faceted.range.max-placeholder'}}"
-                            min="0"
-                            class="form-input form-input--small"
-                            required
-                            type="number"
-                            value="{{max_price}}"
-                        />
-                    </div>
-
-                    <div class="form-field">
-                        <button class="button button--small" type="submit">
-                            {{lang 'search.faceted.range.update'}}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="form-inlineMessage"></div>
-            </fieldset>
-        </form>
+        {{> components/faceted-search/range-form}}
     </div>
 </div>