Cornerstone update 5.1.0 (#41)

* Update Faceted Search files - Componentize navigation - Remove some extraneous whitespace - Remove unneeded “../“ - Remove unneeded Replace helper - Move “Remove” link outside button * Add Spacing between SASS declarations * feature(storefront): BCTHEME-68 Add tooltips for carousel Previous and Next buttons * feature(storefront): BCTHEME-74 As a shopper I want to have the add to cart modal immediately have keyboard focus * handlebars and instead 2 if for carousel buttons * fix(storefront): BCTHEME-125 Cart remove 'X' should be a button * feature(storefront): BCTHEME-133 Improper footer heading hierarchy * fix(storefront): Fix main logo display on mobile with expanded menu * feature(storefront): BCTHEME-134 Incorrect focus order on PDPs * feature(storefront): BCTHEME-142 Unnecessary heading on product cards * feat(payments): PAYPAL-627 Render in the site footer verbiage about Credit Broker License * STRF-8599 Drop jquery * Releasing 4.9.0-strf-8599-rc-1.0 * Releasing 4.9.0-strf-8599-rc-1.0 * Releasing 4.9.0-strf-8599-rc-1.0 * Releasing 4.9.0-strf-8599-rc-1.0 * Revert STRF-8599 * update config.json * fix(storefront):BCTHEME-43 fix overlaping on footer columns when long texts are entered (bigcommerce#1753) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME154: fix issue with add product to cart on ie11 (bigcommerce#1762) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feature(storefront): BCTHEME-157 Improper heading hierarchy on Sitemap (bigcommerce#1774) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feature(storefront): BCTHEME-158 Improper heading hierarchy on Cart page (bigcommerce#1775) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-132 Visually hidden cart link read by screen reader (bigcommerce#1770) * fix(storefront): bctheme-150 fixed issue with store logo on mobile (bigcommerce#1767) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-128 Error messages from Write a Review form should be announced (bigcommerce#1777) * feat(storefront): BCTHEME-127 Product ratings on PDPs should have aria-hidden=true (bigcommerce#1769) * feature(storefront): BCTHEME-156 Selected state on search page not announced (bigcommerce#1788) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-139 Unnecessary heading tag in carousel (bigcommerce#1780) * fix(storefront): BCTHEME-146 Improper heading hierarchy on Add to Cart modal heading (bigcommerce#1783) * fix(storefront): BCTHEME-147 Improper heading hierarchy on Add to Cart modal recommendation (bigcommerce#1784) * fix(storefront): BCTHEME-153 Insufficient link text (bigcommerce#1786) * fix(storefront): BCTHEME-144 Button inputs with the same name attribute should be part of a group (bigcommerce#1792) * fix(storefront): BCTHEME-159 IDs used in ARIA and labels are not unique (bigcommerce#1791) * BCTHEME-160: add valid ARIA role for Related Products tab (bigcommerce#1782) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-35 Cornerstone - Cart link not visible on mobile Chrome depending on swatch image size (bigcommerce#1793) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-143 Improper heading hierarchy on PLPs (bigcommerce#1779) * fix(storefront): BCTHEME-161 ARIA attributes on Write Review modal need valid values (bigcommerce#1790) * feat(storefront): BCTHEME-122 Add labels to swatches (bigcommerce#1761) * fix(storefront): BCTHEME-67 Cart icon quantity should have appropriate link text (bigcommerce#1765) * feature(storefront): BCTHEME-130 Carousel links should have discernible text (bigcommerce#1789) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-135 Missing tooltip for close button on change modal (bigcommerce#1773) * Eslint fix * fix(storefront):fix product Images don't change on click in IE11 (bigcommerce#1748) * fix(storefront):Product Images don't change on click in IE11 * fix eslint errors Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-194 Review link in quick modal focused twice (bigcommerce#1797) * Releasing 4.10.0-rc.1 * fix(storefront): BCTHEME-211 Cross icon on close button missalignment * BCTHEME-191 Incorrect styles for focused buttons in grid card product item * BCTHEME-196 Create unified focus styling in Cornerstone * Releasing 4.10.0-rc.2 * fix(storefront): BCTHEME-230 Quick search query param needs to be fixed while navigating to search page * fix(storefront): STRF-8599 Drop Jquery: Replaced event's current target to the element passed from utils(on hook) * Releasing 4.10.0-rc.3 * fix(storefront): STRF-8607 Unified browsers list that we support * fix(storefront): BCTHEME-265 Return heading to product card * Releasing 4.10.0-rc.4 * Fixed quick search data attribute accroding to external hook api requirement * Releasing 4.10.0-rc.5 * Fixed slick issue with cloning slides * Releasing 4.10.0-rc.6 * Fix * Releasing 4.10.0-rc.7 * Refactor GitHub action for Bundle Test (bigcommerce#1852) Making a few improvements to the GitHub action which does a test bundle. * Better docs/comments * Better name * Support "master" or "main" branch as new forks will use `main` * https://www.zdnet.com/article/github-to-replace-master-with-main-starting-next-month/ * https://github.com/github/renaming * Add both a ruby gem cache as well as an npm cache to speed things up (CLI install is most of the time spent currently) * Update Test Badge in README.md * Upload bundled .zip file on PRs for easy testing * Releasing 4.10.0 * Cornerstone 4.10 changelog update * fix(storefront): BCTHEME-171 State of search link not announced (bigcommerce#1798) * fix(storefront): BCTHEME-198 Face accessibility standards with social links on PDP's page (bigcommerce#1809) * fix(storefront): BCTHEME-215 Delete item button in cart cut off from right side when in focus (bigcommerce#1823) * fix(storefront): BCTHEME-169 Subscription notification not announced (bigcommerce#1813) * feat(storefront)bctheme-203: add sufficient contrast on checkboxes within faceted search (bigcommerce#1815) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-167 Focus not visible on logo element (bigcommerce#1800) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):BCTHEME-168: addcontrast for email address input according to AA standard (bigcommerce#1804) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):BCTHEME-174 add contrast on product ratings in Quick View (bigcommerce#1799) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):bctheme-173: add color for carousel arrows AA standard (bigcommerce#1814) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)bctheme-220: add sufficient contrast to button border color (bigcommerce#1817) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-229 Product carousel with related products - arrows not working (bigcommerce#1828) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME170: fix empty cart notification (bigcommerce#1846) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(cornerstone):BCTHEME-201: add expanded/collapsed state on add-info button (bigcommerce#1844) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)bctheme-223: fix voiceover focus not sync in faceted search (bigcommerce#1826) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)BCTHEME75: add keyboard focus on write-a-review modal (bigcommerce#1835) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)bctheme-225:fix filter top outline on focus (bigcommerce#1829) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-224: change role for sort by select (bigcommerce#1837) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront):bctheme-212 fix rating icons focus border (bigcommerce#1819) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-216: fix outline styles for breadcrumbs on focus (bigcommerce#1824) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Fixed merge conflict * feat(content): MERC-7162 Add header bottom global region * Removed broken import from tools.scss file * BCTHEME-213 Add Info and Add Coupon forms on Cart Page tabbable when hidden (bigcommerce#1820) * Releasing 4.11.0-rc.1 * Update GitHub Action to use Node 12 Node 12 is now supported for Stencil CLI, so we'll use it for this action going forward. * Add examples of useful GitHub Actions for theme development * Releasing 4.11.0 * fix(payments): INT-3211 Change width size for apple pay button * Update Changelog * feat(storefront): STRF-8630 update cornerstone to be compatible with handlebars v4 * fix(storefront): BCTHEME-197 Logo focus of voice over has wrong (100% of the screen) width (bigcommerce#1831) * fix(storefront): BCTHEME-222 Rating and Other filter sections are not accessible by keyboard (bigcommerce#1838) * BCTHEME-210 Carousel hidden when one or more of its images not found (bigcommerce#1816) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-214 Wishlist first option has no bottom outline when in focus (bigcommerce#1825) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-217 Product link has incorrect voice over focus on Cart Page (bigcommerce#1830) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-172 Card content truncated on zooming browser to 400% (bigcommerce#1803) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-185 Sort By dropdowns need visual focus border (bigcommerce#1833) * BCTHEME-188 Product cards should link to products (bigcommerce#1842) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-184 Options on change modal need focus border (bigcommerce#1839) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-199 Zooming and scaling must not be disabled (bigcommerce#1843) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-202 Notification of number of products not announced (bigcommerce#1845) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-190 Content should not scroll in two directions when zoomed (bigcommerce#1853) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)BCTHEME-205: add filter reset announcement (bigcommerce#1858) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront) BCTHEME-206: add announcement fot filtered result on Shop-by-price (bigcommerce#1854) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-164: fix image in modal for IE11 (bigcommerce#1840) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-279 fix logo displaying (bigcommerce#1865) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):add to cart notification (bigcommerce#1860) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-44 Cornerstone quick view (bigcommerce#1857) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-277 Certain Special Characters not rendering under Wishlists (bigcommerce#1873) * fix(storefront): BCTHEME-219 Social icons not clickable in modal after reopening (bigcommerce#1874) * fix(storefront): BCTHEME-282 Fix aria-labels for collapsibleFactory elements (bigcommerce#1868) * BCTHEME-269 Remove layout shifts to improve CLS indicator from Lighthouse performance report (bigcommerce#1869) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-233 Cornerstone - Unable to Compare Products from Recently Viewed Items (bigcommerce#1877) * feat(storefront): BCTHEME-290 add aria labelwith price for product list item (bigcommerce#1878) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-209 Search result not notified by screen reader (bigcommerce#1867) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-289 Add aria label with price to Product Grid Item (bigcommerce#1875) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-268 Update carousel images to improve LCP indicator from Lighthouse performance report (bigcommerce#1876) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-187 improve localization and add default and fallback messages (bigcommerce#1850) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-297 Cornerstone 4.11.0 - Product Image Carousel Becomes Unresponsive on Product Page (bigcommerce#1879) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Resolved issues after merging PRs for 4.12 release * Releasing 4.12.0-rc.1 * Reduce lodash usage in compare-products.js and image-gallery.js * Releasing 4.12.0-rc.2 * Releasing 4.12.0-rc.3 * Releasing 4.12.0-rc.4 * Upload bundle analysis as part of github action * feat(search): ES-1590 display error message if search fails * feat: (STRF-8747) add new stencil config files to .gitignore * Releasing 4.12.0 * Revert "Releasing 4.12.0" * feat(storefront): BCTHEME-299 update changelog for release 4.12 * Releasing 4.12.0 * Updated CHANGELOG.md before 4.12 release * Reverting cornerstone version to 4.12-rc.4 * Releasing 4.12.0 * Reverting 4.12 changes * Releasing 4.12.0 * Reverted 4.12 release commit and updated package.json versions * Releasing 4.12.0 * Revert fix(storefront): BCTHEME-219 Social icons not clickable in modal * Don't load social icons in quick view * Bump stencil-utils * fix(storefront): BCTHEME-305 Price Lists - Price in the cart is not updated when changing currency on mobile * fix(storefront): BCTHEME-314 ccount >Payment Methods throws Server Error when using Cornerstone theme (bigcommerce#1898) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-315 Write a Review modal cause TypeError (bigcommerce#1899) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Releasing 4.12.1 * feat(payments): PAYPAL-712 Checkout page - Smart Payment Button styli… (bigcommerce#1866) feat(payments): PAYPAL-712 Checkout page - Smart Payment Button styling (Cornerstone) * feat(storefront): BCTHEME-116 move tax field after grand total when tax inclusive (bigcommerce#1903) * fix(storefront): BCTHEME-105 Cornerstone - Body text size above 14px is cut off on cart shipping dropdowns (bigcommerce#1881) * feat(storefront): BCTHEME-69 Add tooltips for carousel bullets (buttons) (bigcommerce#1889) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-319 Write a review modal extra executions (bigcommerce#1902) (bigcommerce#1902) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-232 Faceted search filters are hidden from screen readers (bigcommerce#1897) * fix(storefront): BCTHEME-292 Social icon tooltip displaying should be fixed (bigcommerce#1907) * BCTHEME-293 Product list item Quick view button is not tabbable (bigcommerce#1900) (bigcommerce#1900) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-273 fix contrast ratio for Skip to Main Content element (bigcommerce#1880) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-275 add upsell banner contrast (bigcommerce#1891) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-274 fix contranst ratio for brand name (bigcommerce#1882) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-288 Shoppers are not anchor-linked to reviews on PDPs if product description tabs are enabled (bigcommerce#1883) * fix(storefront): BCTHEME-308 HTML Entity displayed as is via system/error message on a Storefront (bigcommerce#1888) * STRF-8769 Moved zoomSize and productSize to the upper level, cause product.js is not availabe on the Quick View (bigcommerce#1884) * Bump versions of Ruby (bigcommerce#1905) To fix issue bigcommerce#1904 * Changelog update * fix(storefront): BCTHEME-104 Selecting product options doesn't update image on PDP in Internet Explorer (bigcommerce#1913) * fix(storefront): BCTHEME-11 hide product options that are out of stock on cart (bigcommerce#1911) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-301 Header content placed out of the header block on mobile (bigcommerce#1908) (bigcommerce#1908) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-85 “Sort by” dropdown selection not reflected on search results page for News and Information tab (bigcommerce#1910) (bigcommerce#1910) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-86 Cornerstone - Text hover color does not change when Dropdown menu display mode is set to Alternative (bigcommerce#1918) (bigcommerce#1918) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-321 fix social icon tooltip overlaying (bigcommerce#1914) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Resolving eslint error after merging * fix(storefront): BCTHEME-30 fix misaligned tooltip for required product option (bigcommerce#1915) Co-authored-by: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> * fix(storefront): BCTHEME-87 Product images squashed in Category view in AMP (bigcommerce#1921) (bigcommerce#1921) * fix(storefront): BCTHEME-313 Parse HTML entities in jsContext (bigcommerce#1917) * Added Changelog item for BCTHEME-313 * Releasing 5.0.0-rc.1 * feat(payments): PAYPAL-823 Add new banner on the cart page (bigcommerce#1901) * Releasing 5.0.0-rc.2 * Releasing 5.0.0 * feat(storefront): BCTHEME-304 add pagination for wishlists (bigcommerce#1906) * fix(storefront): BCTHEME-341 fix placeholder contrast ratio (bigcommerce#1933) * fix(storefront): BCTHEME-37 Cornerstone - Image Zoom Does Not Work on Internet Explorer (bigcommerce#1923) (bigcommerce#1923) * feat(storefront): BCTHEME-306 show price range on option selection (bigcommerce#1924) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-16 Cornerstone - loading of thumbnail image delayed on cart page (bigcommerce#1925 (bigcommerce#1925) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-193 fix not being able to change product qty with keyboard multiple times (bigcommerce#1927) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-345 define a main region on pages (bigcommerce#1929) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-346 add announcement for shipping estimator error messages (bigcommerce#1932) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-343 No tooltips provided for carousel buttons (bigcommerce#1934) (bigcommerce#1934) * feature(storefront): Empty cart message not read by screen reader (bigcommerce#1935) (bigcommerce#1935) * feat(storefront): BCTHEME-344 Carousel buttons do not receive focus (bigcommerce#1937) (bigcommerce#1937) * fix(storefront): BCTHEME-155 fix recaptcha announcement for hidden content (bigcommerce#1943) * fix(storefront): BCTHEME-379 fix non-text contrast on add to cart button (bigcommerce#1946) * fix(storefront): BCTHEME-369 fix announcement on adding to cart by screen reader (bigcommerce#1950) * feat(storefront): BCTHEME-373 Alt text not provided for ratings (bigcommerce#1949) * feat(storefront): BCTHEME-78 Add Play/Pause button to carousel (bigcommerce#1944) * fix(storefront): BCTHEME-366 Error message on PLPs not announced by screen reader (bigcommerce#1956) * fix(storefront): BCTHEME-361 fix subscription message announcement (bigcommerce#1952) * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - creat… (bigcommerce#1948) * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event - CR fixes Co-authored-by: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com> * BCTHEME-327: PDP - Empty "Description" is Hiding All Tabs When in Tab View (bigcommerce#1947) * feat(storefront): BCTHEME-388 Dots on carousel should have similar colours as other slider controls (bigcommerce#1958) * fix(storefront): BCTHEME-384 When default option is out of stock add to cart button does not populate for in stock options (bigcommerce#1955) * fix(storefront): BCTHEME-383 Selecting certain option types pushes window view to the bottom of the page (bigcommerce#1959) * Fixed merge conflict * STRF-8898 'Show More' gives no additional options when filter clicked (bigcommerce#1945) * Releasing 5.1.0-rc.1 * BCTHEME-387: Updates Cornerstone variants to meet the updated verticals outlined in BCTHEME-387. (bigcommerce#1962) Co-authored-by: Dante Muñoz <dante.munoz@c02v90c0htdh.lan> * Releasing 5.1.0-rc.2 * Releasing 5.1.0 --------- Co-authored-by: Matthew Coy <matt.coy@arcticleaf.io> Co-authored-by: Yurii Zusik <yurii.zusik@bigcommerce.com> Co-authored-by: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com> Co-authored-by: Andrii Fetisov <andrii.fetisov@bigcommerce.com> Co-authored-by: Jairo Panduro <jairo.panduro@bigcommerce.com> Co-authored-by: Juned Kazi <junedkazi@users.noreply.github.com> Co-authored-by: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com> Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> Co-authored-by: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> Co-authored-by: Nathan Booker <bookernath@users.noreply.github.com> Co-authored-by: Erik Christensen <erik.christensen@bigcommerce.com> Co-authored-by: Nathan Booker <nathan.booker@bigcommerce.com> Co-authored-by: Marco Loyo <marco.loyo@bigcommerce.com> Co-authored-by: Pascal Zajac <pascalzajac@hotmail.com> Co-authored-by: sacr3dc0w <mshettles@gmail.com> Co-authored-by: alex.saiannyi <alexander.saiannyi@bigcommerce.com> Co-authored-by: Kevin Wang <kwang30@gmail.com> Co-authored-by: MaxGenash <max.henash@bigcommerce.com> Co-authored-by: David Huynh <david.huynh@bigcommerce.com> Co-authored-by: Andrii Fetisov <54856617+bc-fetisov@users.noreply.github.com> Co-authored-by: jairo-bc <68893868+jairo-bc@users.noreply.github.com> Co-authored-by: Andrew A. Barber <hello@andrewbarber.me> Co-authored-by: Brian Davenport <bdav87@gmail.com> Co-authored-by: Olga Lashkul <32959076+helga1507@users.noreply.github.com> Co-authored-by: Dante Munoz <35115108+DanteMunoz@users.noreply.github.com> Co-authored-by: Dante Muñoz <dante.munoz@c02v90c0htdh.lan>
sacred-art · Sep 27, 2023 · a8ebcd0 · a8ebcd0
1 parent ae629ab
commit a8ebcd0
Show file tree

Hide file tree

Showing 56 changed files with 695 additions and 243 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,32 @@
 
 ## Draft
 
+## 5.1.0 (01-26-2021)
+- Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387
+- Fixed selecting certain option types which pushes window view to the bottom of the page. [#1959](https://github.com/bigcommerce/cornerstone/pull/1959)
+- Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)
+- Dots on carousel should have similar colours as other slider controls. [#1958](https://github.com/bigcommerce/cornerstone/pull/1958)
+- PDP - Fixed Empty "Description" Hiding All Tabs When in Tab View. [#1947](https://github.com/bigcommerce/cornerstone/pull/1947)
+- Added custom event for product price change on PDP page. [#1948](https://github.com/bigcommerce/cornerstone/pull/1948)
+- Fixed announcement of subscription message. [#1952](https://github.com/bigcommerce/cornerstone/pull/1952)
+- Error message on PLPs not announced by screen reader. [#1956](https://github.com/bigcommerce/cornerstone/pull/1956)
+- Add Play/Pause button to carousel. [#1944](https://github.com/bigcommerce/cornerstone/pull/1944)
+- Alt text not provided for ratings. [#1949](https://github.com/bigcommerce/cornerstone/pull/1949)
+- Fixed announcement for product on adding to cart. [#1950](https://github.com/bigcommerce/cornerstone/pull/1950)
+- Fixed non-text contrast on add to cart modal according to WCAG AA standard.  [#1946](https://github.com/bigcommerce/cornerstone/pull/1946)
+- Fixed announcement of reCAPTCHA hidden content by screen reader. [#1943](https://github.com/bigcommerce/cornerstone/pull/1943)
+- Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
+- Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
+- No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
+- Added announcement on shipping estimator errors. [#1932](https://github.com/bigcommerce/cornerstone/pull/1932)
+- Add main tag on pages like Homepage, Category, Product etc to define the dominant content. [#1929](https://github.com/bigcommerce/cornerstone/pull/1929)
+- Fixed unable to change product quantity several times on cart page using keyboard. [#1927](https://github.com/bigcommerce/cornerstone/pull/1927)
+- Cornerstone - loading of thumbnail image delayed on cart page . [#1925](https://github.com/bigcommerce/cornerstone/pull/1925)
+- Added narrow down pricing during option selections [#1924](https://github.com/bigcommerce/cornerstone/pull/1924)
+- Cornerstone - Image Zoom Does Not Work on Internet Explorer. [#1923](https://github.com/bigcommerce/cornerstone/pull/1923)
+- Fixed input placeholder color contrast according to AA standard. [#1933](https://github.com/bigcommerce/cornerstone/pull/1933)
+- Bump stencil utils to 6.8.0. [#1945](https://github.com/bigcommerce/cornerstone/pull/1945)
+
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
 - Product images squashed in Category view in AMP. [#1921](https://github.com/bigcommerce/cornerstone/pull/1921)
@@ -27,6 +53,7 @@
 - Added styling config for the PayPal SPB on checkout page [#1866](https://github.com/bigcommerce/cornerstone/pull/1866)
 - Moved zoomSize and productSize to the upper level, cause product.js is not availabe on the Quick View [#1884](https://github.com/bigcommerce/cornerstone/pull/1884)
 - Added new region on the cart page [#1901](https://github.com/bigcommerce/cornerstone/pull/1901)
+- Add pagination for Wishlists.[#1906](https://github.com/bigcommerce/cornerstone/pull/1906)
 
 ## 4.12.1 (11-10-2020)
 - Write a Review modal cause TypeError. [#1899](https://github.com/bigcommerce/cornerstone/pull/1899)

diff --git a/assets/js/test-unit/theme/common/payment-method.spec.js b/assets/js/test-unit/theme/common/payment-method.spec.js
@@ -127,7 +127,7 @@ describe('PaymentMethod', () => {
 
             it('should have valid input expiration date', () => {
                 const callback = jasmine.createSpy();
-                const validator = { add: ({ validate }) => validate(callback, '12/20') };
+                const validator = { add: ({ validate }) => validate(callback, '12/25') };
                 Validators.setExpirationValidation(validator, 'selector');
 
                 expect(callback).toHaveBeenCalledWith(true);

diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -11,6 +11,7 @@ export default class Auth extends PageManager {
         super(context);
         this.validationDictionary = createTranslationDictionary(context);
         this.formCreateSelector = 'form[data-create-account-form]';
+        this.recaptcha = $('.g-recaptcha iframe[src]');
     }
 
     registerLoginValidation($loginForm) {
@@ -175,6 +176,10 @@ export default class Auth extends PageManager {
      * Request is made in this function to the remote endpoint and pulls back the states for country.
      */
     onReady() {
+        if (!this.recaptcha.attr('title')) {
+            this.recaptcha.attr('title', this.context.recaptchaTitle);
+        }
+
         const $createAccountForm = classifyForm(this.formCreateSelector);
         const $loginForm = classifyForm('.login-form');
         const $forgotPasswordForm = classifyForm('.forgot-password-form');

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -15,12 +15,17 @@ export default class Cart extends PageManager {
         this.$cartTotals = $('[data-cart-totals]');
         this.$overlay = $('[data-cart] .loadingOverlay')
             .hide(); // TODO: temporary until roper pulls in his cart components
+        this.$activeCartItemId = null;
+        this.$activeCartItemBtnAction = null;
 
         this.bindEvents();
     }
 
     cartUpdate($target) {
         const itemId = $target.data('cartItemid');
+        this.$activeCartItemId = itemId;
+        this.$activeCartItemBtnAction = $target.data('action');
+
         const $el = $(`#qty-${itemId}`);
         const oldQty = parseInt($el.val(), 10);
         const maxQty = parseInt($el.data('quantityMax'), 10);
@@ -220,6 +225,10 @@ export default class Cart extends PageManager {
             const quantity = $('[data-cart-quantity]', this.$cartContent).data('cartQuantity') || 0;
 
             $('body').trigger('cart-quantity-update', quantity);
+
+            $(`[data-cart-itemid='${this.$activeCartItemId}']`, this.$cartContent)
+                .filter(`[data-action='${this.$activeCartItemBtnAction}']`)
+                .trigger('focus');
         });
     }
 

diff --git a/assets/js/theme/cart/shipping-estimator.js b/assets/js/theme/cart/shipping-estimator.js
@@ -17,12 +17,22 @@ export default class ShippingEstimator {
     }
 
     initFormValidation() {
+        const shippingEstimatorAlert = $('.shipping-quotes');
+
         this.shippingEstimator = 'form[data-shipping-estimator]';
         this.shippingValidator = nod({
             submit: `${this.shippingEstimator} .shipping-estimate-submit`,
         });
 
         $('.shipping-estimate-submit', this.$element).on('click', event => {
+            // estimator error messages are being injected in html as a result
+            // of user submit; clearing and adding role on submit provides
+            // regular announcement of these error messages
+            if (shippingEstimatorAlert.attr('role')) {
+                shippingEstimatorAlert.removeAttr('role');
+            }
+
+            shippingEstimatorAlert.attr('role', 'alert');
             // When switching between countries, the state/region is dynamic
             // Only perform a check for all fields when country has a value
             // Otherwise areAll('valid') will check country for validity

diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -35,6 +35,7 @@ export default class Category extends CatalogPage {
             });
         });
 
+        this.ariaNotifyNoProducts();
         this.initCategoryButton();
     }
 
@@ -45,6 +46,13 @@ export default class Category extends CatalogPage {
         }
     }
 
+    ariaNotifyNoProducts() {
+        const $noProductsMessage = $('[data-no-products-notification]');
+        if ($noProductsMessage.length) {
+            $noProductsMessage.focus();
+        }
+    }
+
     initFacetedSearch() {
         const {
             price_min_evaluation: onMinPriceError,

diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js
@@ -2,6 +2,7 @@ import 'slick-carousel';
 
 import {
     dotsSetup,
+    tooltipSetup,
     setTabindexes,
     arrowAriaLabling,
     heroCarouselSetup,
@@ -33,6 +34,7 @@ const onCarouselChange = (event, carousel) => {
     dotsSetup($dots, actualSlide, actualSlideCount, $slider.data('dots-labels'));
     setTabindexes($slider.find('.slick-slide'), $prevArrow, $nextArrow, actualSlide, actualSlideCount);
     arrowAriaLabling($prevArrow, $nextArrow, actualSlide, actualSlideCount);
+    tooltipSetup($prevArrow, $nextArrow, $dots);
 };
 
 export default function () {

diff --git a/assets/js/theme/common/carousel/utils/heroCarouselSetup.js b/assets/js/theme/common/carousel/utils/heroCarouselSetup.js
@@ -1,3 +1,5 @@
+import playPause from './playPause';
+
 const showCarouselIfSlidesAnalyzedSetup = ($carousel) => {
     const analyzedSlides = [];
     return ($slides) => ($slide) => {
@@ -11,6 +13,8 @@ const showCarouselIfSlidesAnalyzedSetup = ($carousel) => {
 export default ($heroCarousel) => {
     if ($heroCarousel.length === 0) return;
 
+    playPause($heroCarousel);
+
     const $slidesNodes = $heroCarousel.find('.heroCarousel-slide');
     const showCarouselIfSlidesAnalyzed = showCarouselIfSlidesAnalyzedSetup($heroCarousel)($slidesNodes);
 

diff --git a/assets/js/theme/common/carousel/utils/index.js b/assets/js/theme/common/carousel/utils/index.js
@@ -3,3 +3,4 @@ export { default as arrowAriaLabling } from './arrowAriaLabling';
 export { default as dotsSetup } from './dotsSetup';
 export { default as getRealSlidesQuantityAndCurrentSlide } from './getRealSlidesQuantityAndCurrentSlide';
 export { default as setTabindexes } from './setTabindexes';
+export { default as tooltipSetup } from './tooltipSetup';
diff --git a/assets/js/theme/common/carousel/utils/playPause.js b/assets/js/theme/common/carousel/utils/playPause.js
@@ -0,0 +1,38 @@
+import { throttle } from 'lodash';
+
+const playAction = 'slickPlay';
+const pauseAction = 'slickPause';
+
+export default ($heroCarousel) => {
+    const $playPauseButton = $('.js-hero-play-pause-button');
+
+    if ($playPauseButton.length === 0) return;
+
+    const slickSettings = $heroCarousel[0].slick;
+    if (!slickSettings) return;
+
+    const { slideCount, options: { speed } } = slickSettings;
+    if (slideCount < 2) {
+        $playPauseButton.css('display', 'none');
+        return;
+    }
+
+    const onPlayPauseClick = () => {
+        const isCarouselPlaying = $playPauseButton.data('play');
+        const action = isCarouselPlaying ? pauseAction : playAction;
+        const {
+            play,
+            ariaPlay,
+            pause,
+            ariaPause,
+        } = $playPauseButton.data('labels');
+
+        $heroCarousel.slick(action);
+        $playPauseButton
+            .data('play', !isCarouselPlaying)
+            .text(action === playAction ? pause : play)
+            .attr('aria-label', action === playAction ? ariaPause : ariaPlay);
+    };
+
+    $playPauseButton.on('click', throttle(onPlayPauseClick, speed, { trailing: false }));
+};
diff --git a/assets/js/theme/common/carousel/utils/setTabindexes.js b/assets/js/theme/common/carousel/utils/setTabindexes.js
@@ -4,7 +4,7 @@ export default ($slides, $prevArrow, $nextArrow, actualSlide, actualSlideCount)
     $slides.each((index, element) => {
         const $element = $(element);
         const tabIndex = $element.hasClass('slick-active') ? 0 : -1;
-        if (!$element.hasClass('js-product-slide')) {
+        if ($element.attr('href') !== undefined) {
             $element.attr('tabindex', tabIndex);
         }
 

diff --git a/assets/js/theme/common/carousel/utils/tooltipSetup.js b/assets/js/theme/common/carousel/utils/tooltipSetup.js
@@ -0,0 +1,30 @@
+const carouselTooltipClass = 'carousel-tooltip';
+const carouselTooltip = `<span class="${carouselTooltipClass}"></span>`;
+
+const setupTooltipAriaLabel = ($node) => {
+    const $existedTooltip = $node.find(`.${carouselTooltipClass}`);
+
+    if ($existedTooltip.length) {
+        $existedTooltip.attr('aria-label', $node.attr('aria-label'));
+    } else {
+        const $tooltip = $(carouselTooltip).attr('aria-label', $node.attr('aria-label'));
+        $node.append($tooltip);
+    }
+};
+
+const setupArrowTooltips = (...arrowNodes) => {
+    arrowNodes.forEach($arrow => setupTooltipAriaLabel($arrow));
+};
+
+const setupDotTooltips = ($dots) => {
+    $dots.children().each((idx, dot) => setupTooltipAriaLabel($(dot).find('button')));
+};
+
+export default ($prevArrow, $nextArrow, $dots) => {
+    if ($prevArrow.length && $nextArrow.length) {
+        setupArrowTooltips($prevArrow, $nextArrow);
+    }
+    if ($dots) {
+        setupDotTooltips($dots);
+    }
+};
diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
@@ -264,6 +264,12 @@ export default class ProductDetailsBase {
         } else if (typeof (data.bulk_discount_rates) !== 'undefined') {
             viewModel.$bulkPricing.html('');
         }
+
+        const addToCartWrapper = $('#add-to-cart-wrapper');
+
+        if (addToCartWrapper.is(':hidden') && data.purchasable) {
+            addToCartWrapper.show();
+        }
     }
 
     /**
@@ -274,13 +280,19 @@ export default class ProductDetailsBase {
         this.clearPricingNotFound(viewModel);
 
         if (price.with_tax) {
+            const updatedPrice = price.price_range ?
+                `${price.price_range.min.with_tax.formatted} - ${price.price_range.max.with_tax.formatted}`
+                : price.with_tax.formatted;
             viewModel.priceLabel.$span.show();
-            viewModel.$priceWithTax.html(price.with_tax.formatted);
+            viewModel.$priceWithTax.html(updatedPrice);
         }
 
         if (price.without_tax) {
+            const updatedPrice = price.price_range ?
+                `${price.price_range.min.without_tax.formatted} - ${price.price_range.max.without_tax.formatted}`
+                : price.without_tax.formatted;
             viewModel.priceLabel.$span.show();
-            viewModel.$priceWithoutTax.html(price.without_tax.formatted);
+            viewModel.$priceWithoutTax.html(updatedPrice);
         }
 
         if (price.rrp_with_tax) {

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -7,6 +7,7 @@ import modalFactory, { showAlertModal, modalTypes } from '../global/modal';
 import { isEmpty, isPlainObject } from 'lodash';
 import { normalizeFormData } from './utils/api';
 import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
+import bannerUtils from './utils/banner-utils';
 
 export default class ProductDetails extends ProductDetailsBase {
     constructor($scope, context, productAttributesData = {}) {
@@ -46,6 +47,7 @@ export default class ProductDetails extends ProductDetailsBase {
             utils.api.productAttributes.optionChange($productId, $form.serialize(), 'products/bulk-discount-rates', optionChangeCallback);
         } else {
             this.updateProductAttributes(productAttributesData);
+            bannerUtils.dispatchProductBannerEvent(productAttributesData);
         }
 
         $productOptionsElement.show();
@@ -187,6 +189,7 @@ export default class ProductDetails extends ProductDetailsBase {
             const productAttributesContent = response.content || {};
             this.updateProductAttributes(productAttributesData);
             this.updateView(productAttributesData, productAttributesContent);
+            bannerUtils.dispatchProductBannerEvent(productAttributesData);
         });
     }
 
@@ -340,6 +343,11 @@ export default class ProductDetails extends ProductDetailsBase {
                 this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
             }
         });
+
+        $addToCartBtn.next().attr({
+            role: 'status',
+            'aria-live': 'polite',
+        });
     }
 
     /**

diff --git a/assets/js/theme/common/utils/banner-utils.js b/assets/js/theme/common/utils/banner-utils.js
@@ -0,0 +1,29 @@
+import { isBrowserIE } from './ie-helpers';
+
+const bannerUtils = {
+    dispatchProductBannerEvent: (productAttributes) => {
+        if (!productAttributes.price || isBrowserIE) return;
+
+        let price = 0;
+
+        if (!productAttributes.price.price_range) {
+            if (productAttributes.price.without_tax) {
+                price = productAttributes.price.without_tax.value;
+            }
+
+            if (productAttributes.price.with_tax) {
+                price = productAttributes.price.with_tax.value;
+            }
+        }
+
+        const evt = new CustomEvent('bigcommerce.productpricechange', {
+            detail: {
+                amount: price,
+            },
+        });
+
+        window.dispatchEvent(evt);
+    },
+};
+
+export default bannerUtils;
diff --git a/assets/js/theme/common/utils/pagination-utils.js b/assets/js/theme/common/utils/pagination-utils.js
@@ -0,0 +1,24 @@
+const changeWishlistPaginationLinks = (wishlistUrl, ...paginationItems) => $.each(paginationItems, (_, $item) => {
+    const paginationLink = $item.children('.pagination-link');
+
+    if ($item.length && !paginationLink.attr('href').includes('page=')) {
+        const pageNumber = paginationLink.attr('href');
+        paginationLink.attr('href', `${wishlistUrl}page=${pageNumber}`);
+    }
+});
+
+/**
+ * helps to withdraw differences in structures around the stencil resource pagination
+ */
+export const wishlistPaginatorHelper = () => {
+    const $paginationList = $('.pagination-list');
+
+    if (!$paginationList.length) return;
+
+    const $nextItem = $('.pagination-item--next', $paginationList);
+    const $prevItem = $('.pagination-item--previous', $paginationList);
+    const currentHref = $('[data-pagination-current-page-link]').attr('href');
+    const partialPaginationUrl = currentHref.split('page=').shift();
+
+    changeWishlistPaginationLinks(partialPaginationUrl, $prevItem, $nextItem);
+};