From 697fcf98122086974faced80e8fe19cffab161cd Mon Sep 17 00:00:00 2001 From: Matthew Coy Date: Fri, 24 Jul 2020 10:45:45 -0700 Subject: [PATCH 001/317] Update Faceted Search files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Componentize navigation - Remove some extraneous whitespace - Remove unneeded “../“ - Remove unneeded Replace helper - Move “Remove” link outside button --- .../foundation/accordion/_accordion.scss | 30 ++++++++++----- .../faceted-search-navigation.html | 22 +++++++++++ .../facets/hierarchy-children.html | 4 +- .../faceted-search/facets/hierarchy.html | 37 +++++-------------- .../faceted-search/facets/multi.html | 35 ++++-------------- .../faceted-search/facets/range.html | 29 +++------------ .../faceted-search/facets/rating.html | 29 +++------------ .../components/faceted-search/index.html | 10 ++--- .../faceted-search/selected-facets.html | 10 ++--- .../faceted-search/show-more-facets.html | 6 +-- 10 files changed, 84 insertions(+), 128 deletions(-) create mode 100644 templates/components/faceted-search/faceted-search-navigation.html diff --git a/assets/scss/components/foundation/accordion/_accordion.scss b/assets/scss/components/foundation/accordion/_accordion.scss index 623251b39c..eaf41b3d77 100644 --- a/assets/scss/components/foundation/accordion/_accordion.scss +++ b/assets/scss/components/foundation/accordion/_accordion.scss @@ -63,9 +63,11 @@ } .accordion-navigation { + padding-right: 70px; @include breakpoint("medium") { background-position: right 0 top 50%; border: 0; + padding-right: 50px; } } @@ -139,15 +141,25 @@ position: absolute; right: $accordion-navigation-paddingHorizontal; top: $accordion-navigation-paddingVertical; +} +.accordion-nav-clear-holder { + position: relative; +} +.facetedSearch-clearLink { + position: absolute; + right: 40px; + top: 50%; + transform: translateY(-50%); + color: stencilColor("color-textSecondary"); + @include breakpoint("medium") { + right: 20px; + top: 3px; + transform: none; + } - > a { - color: stencilColor("color-textSecondary"); - vertical-align: middle; - - // scss-lint:disable NestingDepth - &:hover { - color: stencilColor("color-textSecondary--hover"); - } - // scss-lint:enable NestingDepth + // scss-lint:disable NestingDepth + &:hover { + color: stencilColor("color-textSecondary--hover"); } + // scss-lint:enable NestingDepth } diff --git a/templates/components/faceted-search/faceted-search-navigation.html b/templates/components/faceted-search/faceted-search-navigation.html new file mode 100644 index 0000000000..f737d9c1fe --- /dev/null +++ b/templates/components/faceted-search/faceted-search-navigation.html @@ -0,0 +1,22 @@ +
+
+
+ {{title}} +
+ +
+ + + + + + +
+
+ {{#if selected}} + {{lang 'search.faceted.clear'}} + {{/if}} +
diff --git a/templates/components/faceted-search/facets/hierarchy-children.html b/templates/components/faceted-search/facets/hierarchy-children.html index 9e60c0f39d..88a1bf074a 100644 --- a/templates/components/faceted-search/facets/hierarchy-children.html +++ b/templates/components/faceted-search/facets/hierarchy-children.html @@ -3,9 +3,9 @@
  • {{{sanitize title}}} {{#if ../show_product_counts}} diff --git a/templates/components/faceted-search/facets/hierarchy.html b/templates/components/faceted-search/facets/hierarchy.html index 24fb90245b..f9d0e35f30 100644 --- a/templates/components/faceted-search/facets/hierarchy.html +++ b/templates/components/faceted-search/facets/hierarchy.html @@ -1,40 +1,21 @@ {{#if items}}
    -
    -
    - {{ title }} -
    + {{> components/faceted-search/faceted-search-navigation}} -
    - {{#if selected}} - {{lang 'search.faceted.clear'}} - {{/if}} - - - - - - -
    -
    - -
    -
    {{/partial}} {{> layout/base}} diff --git a/templates/pages/errors/generic.html b/templates/pages/errors/generic.html index 84a05925ca..65f37caa27 100644 --- a/templates/pages/errors/generic.html +++ b/templates/pages/errors/generic.html @@ -1,13 +1,13 @@ {{#partial "page"}} -
    +

    {{lang 'server_error.page_heading'}}

    {{lang 'server_error.message'}}

    -
    +
    {{/partial}} {{> layout/base}} diff --git a/templates/pages/gift-certificate/balance.html b/templates/pages/gift-certificate/balance.html index ffbf701e7a..c340f431aa 100644 --- a/templates/pages/gift-certificate/balance.html +++ b/templates/pages/gift-certificate/balance.html @@ -4,7 +4,7 @@

    {{lang 'gift_certificate.heading' }}

    {{> components/gift-certificate/navigation gift_page='balance'}} -
    + -
    + {{/partial}} {{> layout/base}} diff --git a/templates/pages/gift-certificate/purchase.html b/templates/pages/gift-certificate/purchase.html index 3bb12bfb40..e210a1b214 100644 --- a/templates/pages/gift-certificate/purchase.html +++ b/templates/pages/gift-certificate/purchase.html @@ -4,7 +4,7 @@

    {{lang 'gift_certificate.heading' }}

    {{> components/gift-certificate/navigation gift_page='purchase'}} -
    + -
    + {{/partial}} {{> layout/base}} diff --git a/templates/pages/gift-certificate/redeem.html b/templates/pages/gift-certificate/redeem.html index 9f426c2bd4..9d8b7e7334 100644 --- a/templates/pages/gift-certificate/redeem.html +++ b/templates/pages/gift-certificate/redeem.html @@ -4,7 +4,7 @@

    {{lang 'gift_certificate.heading' }}

    {{> components/gift-certificate/navigation gift_page='redeem'}} -
    +
    + {{/partial}} {{> layout/base}} diff --git a/templates/pages/page.html b/templates/pages/page.html index 9e65e24aaf..0572768dda 100644 --- a/templates/pages/page.html +++ b/templates/pages/page.html @@ -2,7 +2,7 @@ {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}} -
    +
    {{#unless theme_settings.hide_page_heading }}

    {{ page.title }}

    {{/unless}} @@ -37,7 +37,7 @@
    {{title}}
    {{/each}} {{/if}} -
    + {{/partial}} diff --git a/templates/pages/search.html b/templates/pages/search.html index f4031a0d6b..2da23f14be 100644 --- a/templates/pages/search.html +++ b/templates/pages/search.html @@ -61,7 +61,7 @@ {{> components/faceted-search/index product_results}} {{/if}} -
    +
    {{#if forms.search.has_suggestions}}
    @@ -142,7 +142,7 @@
    {{lang 'forms.search.suggestions.title'}}
    {{{region name="search_below_content"}}} -
    + {{/partial}} From 861b83ab1f9939336f6574bca33b5bfac023baeb Mon Sep 17 00:00:00 2001 From: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> Date: Thu, 15 Apr 2021 16:26:31 +0300 Subject: [PATCH 274/317] feat(storefront): BCTHEME-425 Incorrect focus order for product carousels (#2034) --- CHANGELOG.md | 1 + assets/js/theme/common/carousel/constants.js | 1 + assets/js/theme/common/carousel/index.js | 51 +++++++++---------- .../carousel/utils/activatePlayPauseButton.js | 48 ++++++++--------- .../{setTabindexes.js => analizeSlides.js} | 2 +- .../common/carousel/utils/arrowAriaLabling.js | 15 ++++-- .../theme/common/carousel/utils/dotsSetup.js | 4 +- .../getActiveSlideIdxAndSlidesQuantity.js | 2 +- .../js/theme/common/carousel/utils/index.js | 4 +- .../common/carousel/utils/refreshFocus.js | 20 ++++++++ .../common/carousel/utils/tooltipSetup.js | 20 +------- assets/js/theme/global/quick-view.js | 7 ++- 12 files changed, 97 insertions(+), 78 deletions(-) create mode 100644 assets/js/theme/common/carousel/constants.js rename assets/js/theme/common/carousel/utils/{setTabindexes.js => analizeSlides.js} (76%) create mode 100644 assets/js/theme/common/carousel/utils/refreshFocus.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 05df2fdf78..d2d5715e6c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034) - Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032) - Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022) - Wish List drop down is truncated on product page. [#2001](https://github.com/bigcommerce/cornerstone/pull/2001) diff --git a/assets/js/theme/common/carousel/constants.js b/assets/js/theme/common/carousel/constants.js new file mode 100644 index 0000000000..9db53bebe6 --- /dev/null +++ b/assets/js/theme/common/carousel/constants.js @@ -0,0 +1 @@ +export const FOCUSABLE_ELEMENTS_SELECTOR = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]'; diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js index 1cdc858699..a687f11035 100644 --- a/assets/js/theme/common/carousel/index.js +++ b/assets/js/theme/common/carousel/index.js @@ -2,62 +2,61 @@ import 'slick-carousel'; import { activatePlayPauseButton, + analizeSlides, arrowAriaLabling, dotsSetup, getActiveSlideIdxAndSlidesQuantity, handleImageAspectRatio, handleImageLoad, - setTabindexes, - tooltipSetup, + refreshFocus, updateTextWithLiveData, } from './utils'; -/** - * returns activeSlideIdx and slidesQuantity - * based on provided carousel settings - * @param {Object} $slickSettings - * @returns {Object} - */ -const extractSlidesDetails = ({ - slideCount, $slides, options: { slidesToShow, slidesToScroll }, -}) => getActiveSlideIdxAndSlidesQuantity( - slideCount, - slidesToShow, - slidesToScroll, - $slides, -); +export const setCarouselState = ({ delegateTarget }, carouselObj) => { + const carouselObjCurrent = carouselObj || delegateTarget.slick; + const { $slider } = carouselObjCurrent; + + $slider.data('state', getActiveSlideIdxAndSlidesQuantity(carouselObjCurrent)); +}; export const onUserCarouselChange = ({ data }, context, $slider) => { const $activeSlider = $slider || data; - const $parentContainer = $activeSlider.hasClass('productView-thumbnails') ? $('.productView-images') : $activeSlider; - const { activeSlideIdx, slidesQuantity } = extractSlidesDetails($activeSlider[0].slick); + const $parentContainer = $activeSlider.hasClass('productView-thumbnails') ? $activeSlider.parent('.productView-images') : $activeSlider; + const { activeSlideIdx, slidesQuantity } = $activeSlider.data('state'); const $carouselContentElement = $('[data-carousel-content-change-message]', $parentContainer); const carouselContentAnnounceMessage = updateTextWithLiveData(context.carouselContentAnnounceMessage, (activeSlideIdx + 1), slidesQuantity); $carouselContentElement.text(carouselContentAnnounceMessage); }; -export const onSlickCarouselChange = (e, carousel, context) => { +export const onSlickCarouselChange = (e, carouselObj, context) => { const { $dots, $slider, $prevArrow, $nextArrow, - } = carousel; + options: { infinite }, + } = carouselObj; - const { activeSlideIdx, slidesQuantity } = extractSlidesDetails(carousel); + const { activeSlideIdx, slidesQuantity } = $slider.data('state') || getActiveSlideIdxAndSlidesQuantity(carouselObj); dotsSetup($dots, activeSlideIdx, slidesQuantity, context); - arrowAriaLabling($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, context.carouselArrowAndDotAriaLabel); - setTabindexes($slider.find('.slick-slide')); - tooltipSetup($prevArrow, $nextArrow, $dots); - activatePlayPauseButton(carousel, slidesQuantity, context); + arrowAriaLabling($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, infinite, context.carouselArrowAndDotAriaLabel); + analizeSlides($slider.find('.slick-slide')); + refreshFocus($prevArrow, $nextArrow, $dots, $slider, activeSlideIdx, slidesQuantity, infinite); + + $slider.data('state', null); }; export default function (context) { $('[data-slick]').each((idx, carousel) => { // getting element using find to pass jest test const $carousel = $(document).find(carousel); + + $carousel.on('init breakpoint swipe', setCarouselState); + $carousel.on('click', '.slick-arrow, .slick-dots', setCarouselState); + + $carousel.on('init breakpoint', (e, carouselObj) => activatePlayPauseButton(e, carouselObj, context)); $carousel.on('init afterChange', (e, carouselObj) => onSlickCarouselChange(e, carouselObj, context)); $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, e => onUserCarouselChange(e, context)); $carousel.on('swipe', (e, carouselObj) => onUserCarouselChange(e, context, carouselObj.$slider)); @@ -65,7 +64,7 @@ export default function (context) { if ($carousel.hasClass('heroCarousel')) { $carousel.on('init afterChange', handleImageLoad); $carousel.on('swipe', handleImageAspectRatio); - $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, handleImageAspectRatio); + $carousel.on('click', '.slick-arrow, .slick-dots', handleImageAspectRatio); // Alternative image styling for IE, which doesn't support objectfit if (typeof document.documentElement.style.objectFit === 'undefined') { diff --git a/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js b/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js index 7405369771..71f4d8be5e 100644 --- a/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js +++ b/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js @@ -2,18 +2,7 @@ import { throttle } from 'lodash'; const PLAY_ACTION = 'slickPlay'; const PAUSE_ACTION = 'slickPause'; -const IS_ACTIVATED_DATA_ATTR = 'is-activated'; - -export default (carousel, slidesQuantity, context) => { - const { $slider, $dots, speed } = carousel; - const $playPauseButton = $slider.find('[data-play-pause-button]'); - - if ($playPauseButton.length === 0) return; - - $playPauseButton.css('display', slidesQuantity < 2 ? 'none' : 'block'); - - if ($playPauseButton.data(IS_ACTIVATED_DATA_ATTR)) return; - +const updateButtonLabels = (context) => { const { carouselPlayPauseButtonPlay, carouselPlayPauseButtonPause, @@ -21,30 +10,43 @@ export default (carousel, slidesQuantity, context) => { carouselPlayPauseButtonAriaPause, } = context; - const updateLabels = action => { - $playPauseButton + return ($button, action) => { + $button .text(action === PLAY_ACTION ? carouselPlayPauseButtonPause : carouselPlayPauseButtonPlay) .attr('aria-label', action === PLAY_ACTION ? carouselPlayPauseButtonAriaPause : carouselPlayPauseButtonAriaPlay); }; +}; +let updateButtonLabelsWithContext; - const onPlayPauseClick = () => { - const action = carousel.paused ? PLAY_ACTION : PAUSE_ACTION; +export default (e, carouselObj, context) => { + const { $slider, $dots, options: { speed } } = carouselObj; + const $playPauseButton = $slider.find('[data-play-pause-button]'); - $slider.slick(action); - updateLabels(action); - }; + if ($playPauseButton.length === 0) return; // for correct carousel controls focus order if ($dots) { $playPauseButton.insertBefore($dots); } else $slider.append($playPauseButton); - $playPauseButton.on('click', throttle(onPlayPauseClick, speed, { trailing: false })); - $playPauseButton.data(IS_ACTIVATED_DATA_ATTR, true); + const { slidesQuantity } = $slider.data('state'); + $playPauseButton.css('display', slidesQuantity > 1 ? 'block' : 'none'); - if (carousel.breakpoints.length) { - $slider.on('breakpoint', () => updateLabels(PLAY_ACTION)); + if (e.type === 'init') updateButtonLabelsWithContext = updateButtonLabels(context); + + if (e.type === 'breakpoint') { + updateButtonLabelsWithContext($playPauseButton, PLAY_ACTION); + return; } + + const onPlayPauseClick = () => { + const action = carouselObj.paused ? PLAY_ACTION : PAUSE_ACTION; + + $slider.slick(action); + updateButtonLabelsWithContext($playPauseButton, action); + }; + + $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/analizeSlides.js similarity index 76% rename from assets/js/theme/common/carousel/utils/setTabindexes.js rename to assets/js/theme/common/carousel/utils/analizeSlides.js index 892b2ca0c4..7b1d38c57d 100644 --- a/assets/js/theme/common/carousel/utils/setTabindexes.js +++ b/assets/js/theme/common/carousel/utils/analizeSlides.js @@ -1,4 +1,4 @@ -const FOCUSABLE_ELEMENTS_SELECTOR = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]'; +import { FOCUSABLE_ELEMENTS_SELECTOR } from '../constants'; export default ($slides) => { $slides.each((idx, slide) => { diff --git a/assets/js/theme/common/carousel/utils/arrowAriaLabling.js b/assets/js/theme/common/carousel/utils/arrowAriaLabling.js index 1751262d1d..dc96c2b77a 100644 --- a/assets/js/theme/common/carousel/utils/arrowAriaLabling.js +++ b/assets/js/theme/common/carousel/utils/arrowAriaLabling.js @@ -1,6 +1,7 @@ import updateTextWithLiveData from './updateTextWithLiveData'; +import tooltipSetup from './tooltipSetup'; -export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, ariaLabel) => { +export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, isInfinite, ariaLabel) => { if (slidesQuantity < 2 || !$prevArrow || !$nextArrow) return; const activeSlideNumber = activeSlideIdx + 1; @@ -8,10 +9,18 @@ export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, ariaLabe const prevSlideNumber = activeSlideIdx === 0 ? slidesQuantity : activeSlideNumber - 1; const arrowLeftText = updateTextWithLiveData(ariaLabel, prevSlideNumber, slidesQuantity); - $prevArrow.attr('aria-label', arrowLeftText); + $prevArrow.attr({ + 'aria-label': arrowLeftText, + tabindex: !isInfinite && activeSlideIdx === 0 ? -1 : 0, + }); + tooltipSetup($prevArrow); const nextSlideNumber = activeSlideIdx === slidesQuantity - 1 ? 1 : activeSlideNumber + 1; const arrowRightText = updateTextWithLiveData(ariaLabel, nextSlideNumber, slidesQuantity); - $nextArrow.attr('aria-label', arrowRightText); + $nextArrow.attr({ + 'aria-label': arrowRightText, + tabindex: !isInfinite && activeSlideIdx === slidesQuantity - 1 ? -1 : 0, + }); + tooltipSetup($nextArrow); }; diff --git a/assets/js/theme/common/carousel/utils/dotsSetup.js b/assets/js/theme/common/carousel/utils/dotsSetup.js index 9db5927d7d..109f1847e5 100644 --- a/assets/js/theme/common/carousel/utils/dotsSetup.js +++ b/assets/js/theme/common/carousel/utils/dotsSetup.js @@ -1,4 +1,5 @@ import updateTextWithLiveData from './updateTextWithLiveData'; +import tooltipSetup from './tooltipSetup'; export default ($dots, activeSlideIdx, slidesQuantity, { carouselArrowAndDotAriaLabel, carouselActiveDotAriaLabel }) => { if (!$dots) return; @@ -14,7 +15,8 @@ export default ($dots, activeSlideIdx, slidesQuantity, { carouselArrowAndDotAria const dotLabelText = updateTextWithLiveData(carouselArrowAndDotAriaLabel, idx + 1, slidesQuantity); const dotSlideStatusText = idx === activeSlideIdx ? `, ${carouselActiveDotAriaLabel}` : ''; const dotAriaLabel = `${dotLabelText}${dotSlideStatusText}`; + const $dotButton = $(dot).find('[data-carousel-dot]'); - $(dot).find('[data-carousel-dot]').attr('aria-label', dotAriaLabel); + tooltipSetup($dotButton.attr('aria-label', dotAriaLabel)); }); }; diff --git a/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js b/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js index 352a82dc80..83f1cccef2 100644 --- a/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js +++ b/assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js @@ -1,4 +1,4 @@ -export default (slideCount, slidesToShow, slidesToScroll, $slides) => { +export default ({ slideCount, $slides, options: { slidesToShow, slidesToScroll } }) => { const lastVisibleIdx = $slides.get().reduce((acc, curr, idx) => { if ($(curr).hasClass('slick-active')) return idx; return acc; diff --git a/assets/js/theme/common/carousel/utils/index.js b/assets/js/theme/common/carousel/utils/index.js index 3e7e2dd0a0..f6ad26c659 100644 --- a/assets/js/theme/common/carousel/utils/index.js +++ b/assets/js/theme/common/carousel/utils/index.js @@ -1,9 +1,9 @@ export { default as activatePlayPauseButton } from './activatePlayPauseButton'; +export { default as analizeSlides } from './analizeSlides'; export { default as arrowAriaLabling } from './arrowAriaLabling'; export { default as dotsSetup } from './dotsSetup'; export { default as getActiveSlideIdxAndSlidesQuantity } from './getActiveSlideIdxAndSlidesQuantity'; export { default as handleImageAspectRatio } from './handleImageAspectRatio'; export { default as handleImageLoad } from './handleImageLoad'; -export { default as setTabindexes } from './setTabindexes'; -export { default as tooltipSetup } from './tooltipSetup'; +export { default as refreshFocus } from './refreshFocus'; export { default as updateTextWithLiveData } from './updateTextWithLiveData'; diff --git a/assets/js/theme/common/carousel/utils/refreshFocus.js b/assets/js/theme/common/carousel/utils/refreshFocus.js new file mode 100644 index 0000000000..dad85f3d56 --- /dev/null +++ b/assets/js/theme/common/carousel/utils/refreshFocus.js @@ -0,0 +1,20 @@ +import { FOCUSABLE_ELEMENTS_SELECTOR } from '../constants'; + +export default ($prevArrow, $nextArrow, $dots, $slider, activeSlideIdx, slidesQuantity, isInfinite) => { + if (isInfinite || !$prevArrow || !$nextArrow) return; + + if (activeSlideIdx === 0 && $prevArrow.is(':focus')) { + $nextArrow.focus(); + } else if (activeSlideIdx === slidesQuantity - 1 && $nextArrow.is(':focus')) { + if ($dots) { + $dots.children().first().find('[data-carousel-dot]').focus(); + return; + } + + const $firstActiveSlide = $slider.find('.slick-active').first(); + + if ($firstActiveSlide.is(FOCUSABLE_ELEMENTS_SELECTOR)) { + $firstActiveSlide.focus(); + } else $firstActiveSlide.find(FOCUSABLE_ELEMENTS_SELECTOR).first().focus(); + } +}; diff --git a/assets/js/theme/common/carousel/utils/tooltipSetup.js b/assets/js/theme/common/carousel/utils/tooltipSetup.js index da4af37856..c2a6003ba0 100644 --- a/assets/js/theme/common/carousel/utils/tooltipSetup.js +++ b/assets/js/theme/common/carousel/utils/tooltipSetup.js @@ -2,7 +2,7 @@ const TOOLTIP_DATA_SELECTOR = 'data-carousel-tooltip'; const TOOLTIP_CLASS = 'carousel-tooltip'; const TOOLTIP_NODE = ``; -const setupTooltipAriaLabel = ($node) => { +export default ($node) => { const $existedTooltip = $node.find(`[${TOOLTIP_DATA_SELECTOR}]`); if ($existedTooltip.length) { $existedTooltip.attr('aria-label', $node.attr('aria-label')); @@ -11,21 +11,3 @@ const setupTooltipAriaLabel = ($node) => { $node.append($tooltip); } }; - -const setupArrowTooltips = (...arrowNodes) => { - arrowNodes.forEach($arrow => setupTooltipAriaLabel($arrow)); -}; - -const setupDotTooltips = ($dots) => { - $dots.children().each((idx, dot) => setupTooltipAriaLabel($('[data-carousel-dot]', dot))); -}; - -export default ($prevArrow, $nextArrow, $dots) => { - if ($prevArrow && $nextArrow) { - setupArrowTooltips($prevArrow, $nextArrow); - } - - if ($dots) { - setupDotTooltips($dots); - } -}; diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js index 85b13bcdd7..907282f1c8 100644 --- a/assets/js/theme/global/quick-view.js +++ b/assets/js/theme/global/quick-view.js @@ -4,7 +4,7 @@ import utils from '@bigcommerce/stencil-utils'; import ProductDetails from '../common/product-details'; import { defaultModal } from './modal'; import 'slick-carousel'; -import { onSlickCarouselChange, onUserCarouselChange } from '../common/carousel'; +import { setCarouselState, onSlickCarouselChange, onUserCarouselChange } from '../common/carousel'; export default function (context) { const modal = defaultModal(); @@ -24,7 +24,10 @@ export default function (context) { const $carousel = modal.$content.find('[data-slick]'); if ($carousel.length) { - $carousel.on('init afterChange', (e, carousel) => onSlickCarouselChange(e, carousel, context)); + $carousel.on('init breakpoint swipe', setCarouselState); + $carousel.on('click', '.slick-arrow, .slick-dots', setCarouselState); + + $carousel.on('init afterChange', (e, carouselObj) => onSlickCarouselChange(e, carouselObj, context)); $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, e => onUserCarouselChange(e, context)); $carousel.on('swipe', (e, carouselObj) => onUserCarouselChange(e, context, carouselObj.$slider)); From 2e7effa8dbe6ccb03b97d2358f62fbd6ff988984 Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Thu, 15 Apr 2021 18:47:08 +0300 Subject: [PATCH 275/317] Releasing 5.4.0-rc.1 --- config.json | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/config.json b/config.json index f2da105b85..01ca6bead3 100644 --- a/config.json +++ b/config.json @@ -1,6 +1,6 @@ { "name": "Cornerstone", - "version": "5.3.0", + "version": "5.4.0-rc.1", "template_engine": "handlebars_v4", "meta": { "price": 0, diff --git a/package-lock.json b/package-lock.json index 065e83913b..3bf241d070 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bigcommerce-cornerstone", - "version": "5.2.0", + "version": "5.4.0-rc.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index be74cbe6a5..5127adcde7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bigcommerce-cornerstone", "description": "The BigCommerce reference theme for the Stencil platform", - "version": "5.3.0", + "version": "5.4.0-rc.1", "private": true, "author": "BigCommerce", "license": "MIT", From f35f23555bf728e117436c779e9d346c783783c6 Mon Sep 17 00:00:00 2001 From: Nathan Booker Date: Wed, 21 Apr 2021 11:07:09 -0500 Subject: [PATCH 276/317] fix(storefront): DEV-426 Fix GitHub workflows for default storefront --- .github/workflow-examples/automatic_deployment_production.yml | 4 +++- .github/workflow-examples/poll_for_changed_configuration.yml | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflow-examples/automatic_deployment_production.yml b/.github/workflow-examples/automatic_deployment_production.yml index 3565324e91..5f3c18e73d 100644 --- a/.github/workflow-examples/automatic_deployment_production.yml +++ b/.github/workflow-examples/automatic_deployment_production.yml @@ -39,6 +39,8 @@ jobs: # # You must configure store credentials as secrets on your GitHub repo for automatic deployment via GitHub Actions +# This defaults to pushing the theme to channel ID 1, which is the default storefront. If you wish to push to an +# Alternate storefront, use a different channel ID # - name: Connect to store @@ -48,4 +50,4 @@ jobs: run: stencil init -u $URL -t $TOKEN -p 3000 - name: Push theme live, automatically deleting oldest theme if necessary - run: stencil push -a -d + run: stencil push -a -d -c 1 diff --git a/.github/workflow-examples/poll_for_changed_configuration.yml b/.github/workflow-examples/poll_for_changed_configuration.yml index 3bba3e3fe6..714d9d69cc 100644 --- a/.github/workflow-examples/poll_for_changed_configuration.yml +++ b/.github/workflow-examples/poll_for_changed_configuration.yml @@ -49,8 +49,8 @@ jobs: TOKEN: ${{ secrets.STENCIL_ACCESS_TOKEN_PRODUCTION }} run: stencil init -u $URL -t $TOKEN -p 3000 - - name: Check for an updated configuration on the live store - run: stencil pull + - name: Check for an updated configuration on the live default storefront (channel ID 1) + run: stencil pull -c 1 - name: Create Pull Request id: cpr From 530ec94c79fdda8d327e856be4344a51af0597ff Mon Sep 17 00:00:00 2001 From: Yurii Zusik Date: Mon, 26 Apr 2021 11:29:01 +0300 Subject: [PATCH 277/317] Releasing 5.4.0 --- CHANGELOG.md | 2 ++ config.json | 2 +- package-lock.json | 2 +- package.json | 2 +- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2d5715e6c..1eaff10056 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,8 @@ # Changelog ## Draft + +## 5.4.0 (04-26-2021) - Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034) - Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032) - Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022) diff --git a/config.json b/config.json index 01ca6bead3..09ddc78f0e 100644 --- a/config.json +++ b/config.json @@ -1,6 +1,6 @@ { "name": "Cornerstone", - "version": "5.4.0-rc.1", + "version": "5.4.0", "template_engine": "handlebars_v4", "meta": { "price": 0, diff --git a/package-lock.json b/package-lock.json index 3bf241d070..a6346d3754 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "bigcommerce-cornerstone", - "version": "5.4.0-rc.1", + "version": "5.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5127adcde7..9a98ed8724 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "bigcommerce-cornerstone", "description": "The BigCommerce reference theme for the Stencil platform", - "version": "5.4.0-rc.1", + "version": "5.4.0", "private": true, "author": "BigCommerce", "license": "MIT", From b729eedaddc3c2b9b3083c7b9e10ab23d9bdfac1 Mon Sep 17 00:00:00 2001 From: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> Date: Thu, 29 Apr 2021 16:02:20 +0300 Subject: [PATCH 278/317] fix(storefront): BCTHEME-325 Apple pay button displaying needs to be fixed (#2043) --- CHANGELOG.md | 1 + assets/js/theme/cart.js | 8 ++++++++ assets/js/theme/common/product-details.js | 4 ++++ assets/js/theme/global/cart-preview.js | 4 ++++ .../components/stencil/applePay/_applePay.scss | 11 +---------- assets/scss/components/stencil/cart/_cart.scss | 17 +++-------------- .../stencil/previewCart/_previewCart.scss | 5 ++++- 7 files changed, 25 insertions(+), 25 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1eaff10056..6edfeabbb1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043) ## 5.4.0 (04-26-2021) - Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034) diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index 01268687e9..c13b165cae 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -10,6 +10,7 @@ import CartItemDetails from './common/cart-item-details'; export default class Cart extends PageManager { onReady() { this.$modal = null; + this.$cartPageContent = $('[data-cart]'); this.$cartContent = $('[data-cart-content]'); this.$cartMessages = $('[data-cart-status]'); this.$cartTotals = $('[data-cart-totals]'); @@ -18,9 +19,16 @@ export default class Cart extends PageManager { this.$activeCartItemId = null; this.$activeCartItemBtnAction = null; + this.setApplePaySupport(); this.bindEvents(); } + setApplePaySupport() { + if (window.ApplePaySession) { + this.$cartPageContent.addClass('apple-pay-supported'); + } + } + cartUpdate($target) { const itemId = $target.data('cartItemid'); this.$activeCartItemId = itemId; diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index b698f15d77..8a54389793 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -376,6 +376,10 @@ export default class ProductDetails extends ProductDetailsBase { if (this.previewModal) { this.previewModal.open(); + if (window.ApplePaySession) { + this.previewModal.$modal.addClass('apple-pay-supported'); + } + if ($addToCartBtn.parents('.quickView').length === 0) this.previewModal.$preModalFocusedEl = $addToCartBtn; this.updateCartContent(this.previewModal, response.data.cart_item.id, () => this.previewModal.setupFocusTrap()); } else { diff --git a/assets/js/theme/global/cart-preview.js b/assets/js/theme/global/cart-preview.js index 0fc5138c7d..b5c79f086f 100644 --- a/assets/js/theme/global/cart-preview.js +++ b/assets/js/theme/global/cart-preview.js @@ -15,6 +15,10 @@ export default function (secureBaseUrl, cartId) { const $body = $('body'); + if (window.ApplePaySession) { + $cartDropdown.addClass('apple-pay-supported'); + } + $body.on('cart-quantity-update', (event, quantity) => { $cart.attr('aria-label', (_, prevValue) => prevValue.replace(/\d+/, quantity)); diff --git a/assets/scss/components/stencil/applePay/_applePay.scss b/assets/scss/components/stencil/applePay/_applePay.scss index dbaf8a4a8c..c931dd0d63 100644 --- a/assets/scss/components/stencil/applePay/_applePay.scss +++ b/assets/scss/components/stencil/applePay/_applePay.scss @@ -25,23 +25,14 @@ } } -.cart-additionalCheckoutButtons { - .apple-pay-checkout-button { - margin-top: spacing("half"); - } -} - .apple-pay-supported { .apple-pay-checkout-button { display: block; float: right; } -} -.previewCartCheckout { - .apple-pay-checkout-button { + & .previewCartCheckout .apple-pay-checkout-button { display: inline-block; float: none; - margin-top: spacing("half"); } } diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss index a119cf829b..7bdfebd6ea 100644 --- a/assets/scss/components/stencil/cart/_cart.scss +++ b/assets/scss/components/stencil/cart/_cart.scss @@ -43,18 +43,6 @@ $card-preview-zoom-bottom-offset: 6rem; float: right; } } - - .CheckoutButton { - margin-bottom: spacing("base"); - - &:first-child { - margin-top: spacing("single"); - } - - &:last-child { - margin-bottom: spacing("single"); - } - } } // Cart layout @@ -557,7 +545,8 @@ $card-preview-zoom-bottom-offset: 6rem; .previewCart-additionalCheckoutButtons { @extend %additionalCheckoutButtons; - padding-right: 1.5rem; + padding-right: spacing('single'); + padding-bottom: spacing('single'); } // Cart Preview @@ -608,7 +597,7 @@ $card-preview-zoom-bottom-offset: 6rem; } @include lazy-loaded-padding('productthumb_size'); - + &:after { @include breakpoint("xxsmall") { padding-bottom: 75%; diff --git a/assets/scss/components/stencil/previewCart/_previewCart.scss b/assets/scss/components/stencil/previewCart/_previewCart.scss index e8967df692..52bb04ca2d 100644 --- a/assets/scss/components/stencil/previewCart/_previewCart.scss +++ b/assets/scss/components/stencil/previewCart/_previewCart.scss @@ -56,10 +56,13 @@ width: 100%; // scss-lint:disable NestingDepth - + .button, + p { margin-top: spacing("half"); } + + &:not(:last-child) { + margin-bottom: spacing("half"); + } } } From 74e7fdba5d3b0fc1eae23ed05f5ddc8ee5de5ee6 Mon Sep 17 00:00:00 2001 From: Yevhenii Buliuk <82589781+bc-yevhenii-buliuk@users.noreply.github.com> Date: Fri, 30 Apr 2021 11:16:17 +0300 Subject: [PATCH 279/317] fix(storefront): BCTHEME-457 Update focus tooltip styles contrast to achieve accessibility AA Complaince (#2047) --- CHANGELOG.md | 1 + assets/scss/common/_focus-tooltip.scss | 6 +++--- assets/scss/settings/global/color/_color.scss | 6 ++++++ config.json | 10 ++++++++-- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6edfeabbb1..9b3d153976 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047) - Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043) ## 5.4.0 (04-26-2021) diff --git a/assets/scss/common/_focus-tooltip.scss b/assets/scss/common/_focus-tooltip.scss index 9d1bd3ccbf..7a7fed7052 100644 --- a/assets/scss/common/_focus-tooltip.scss +++ b/assets/scss/common/_focus-tooltip.scss @@ -6,14 +6,14 @@ top: 50%; border-width: remCalc(10px); border-style: solid; - border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent; + border-color: transparent transparent $focusTooltip-backgroundColor transparent; } &:after { content: attr($attr); padding: remCalc(4px) remCalc(6px); - background-color: $adminBar-tooltip-bg-backgroundColor; - color: white; + background-color: $focusTooltip-backgroundColor; + color: $focusTooltip-textColor; position: absolute; font-size: 1rem; white-space: nowrap; diff --git a/assets/scss/settings/global/color/_color.scss b/assets/scss/settings/global/color/_color.scss index ae4dfaed6e..0269c3a4d9 100644 --- a/assets/scss/settings/global/color/_color.scss +++ b/assets/scss/settings/global/color/_color.scss @@ -67,3 +67,9 @@ $color-textSecondary-active: stencilColor("color-textSecondary--active"); $color-textLink: stencilColor("color-textLink"); $color-textLink-hover: stencilColor("color-textLink--hover"); $color-textLink-active: stencilColor("color-textLink--active"); + + +// Tooltips +// ----------------------------------------------------------------------------- +$focusTooltip-textColor: stencilColor("focusTooltip-textColor"); +$focusTooltip-backgroundColor: stencilColor("focusTooltip-backgroundColor"); \ No newline at end of file diff --git a/config.json b/config.json index 09ddc78f0e..3f15b56059 100644 --- a/config.json +++ b/config.json @@ -309,6 +309,8 @@ "color_badge_product_sold_out_badges": "#007dc6", "color_text_product_sold_out_badges": "#ffffff", "color_hover_product_sold_out_badges": "#000000", + "focusTooltip-textColor": "#ffffff", + "focusTooltip-backgroundColor": "#313440", "restrict_to_login": false, "swatch_option_size": "22x22", "social_icon_placement_top": false, @@ -593,7 +595,9 @@ "color_hover_product_sale_badges": "#000000", "color_badge_product_sold_out_badges": "#007dc6", "color_text_product_sold_out_badges": "#ffffff", - "color_hover_product_sold_out_badges": "#000000" + "color_hover_product_sold_out_badges": "#000000", + "focusTooltip-textColor": "#666666", + "focusTooltip-backgroundColor": "#ffffff" } }, { @@ -801,7 +805,9 @@ "color_hover_product_sale_badges": "#000000", "color_badge_product_sold_out_badges": "#007dc6", "color_text_product_sold_out_badges": "#ffffff", - "color_hover_product_sold_out_badges": "#000000" + "color_hover_product_sold_out_badges": "#000000", + "focusTooltip-textColor": "#ffffff", + "focusTooltip-backgroundColor": "#313440" } } ] From 6dcc33371efa679fa72f8dcf9d5a7d52b3b1b0df Mon Sep 17 00:00:00 2001 From: sacr3dc0w Date: Fri, 30 Apr 2021 01:17:44 -0700 Subject: [PATCH 280/317] Use https:// for schema markup (#2039) --- CHANGELOG.md | 1 + .../amp/products/product-view-details.html | 2 +- .../components/amp/products/reviews.html | 4 ++-- templates/components/common/breadcrumbs.html | 4 ++-- .../components/products/price-range.html | 20 +++++++++---------- templates/components/products/price.html | 20 +++++++++---------- .../components/products/product-view.html | 4 ++-- templates/components/products/reviews.html | 4 ++-- templates/pages/amp/product.html | 2 +- templates/pages/product.html | 2 +- 10 files changed, 32 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b3d153976..3343228adb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Use https:// for schema markup. [#2039](https://github.com/bigcommerce/cornerstone/pull/2039) - Update focus tooltip styles contrast to achieve accessibility AA Complaince. [#2047](https://github.com/bigcommerce/cornerstone/pull/2047) - Apple pay button displaying needs to be fixed. [#2043](https://github.com/bigcommerce/cornerstone/pull/2043) diff --git a/templates/components/amp/products/product-view-details.html b/templates/components/amp/products/product-view-details.html index 1a9cf6956e..3330cbb7e6 100644 --- a/templates/components/amp/products/product-view-details.html +++ b/templates/components/amp/products/product-view-details.html @@ -2,7 +2,7 @@

    {{product.title}}

    {{#if product.brand }} -

    +

    {{/if}} diff --git a/templates/components/amp/products/reviews.html b/templates/components/amp/products/reviews.html index 253e534592..a170886893 100644 --- a/templates/components/amp/products/reviews.html +++ b/templates/components/amp/products/reviews.html @@ -7,9 +7,9 @@

      {{#each reviews.list}}
    • -
      +
      - + {{> components/amp/products/ratings rating=rating}} {{ rating }} diff --git a/templates/components/common/breadcrumbs.html b/templates/components/common/breadcrumbs.html index 397117e31d..9586a1ebbe 100644 --- a/templates/components/common/breadcrumbs.html +++ b/templates/components/common/breadcrumbs.html @@ -1,8 +1,8 @@

    -
    +
    {{theme_settings.pdp-price-label}} {{price.price_range.min.with_tax.formatted}} - {{price.price_range.max.with_tax.formatted}} @@ -29,12 +29,12 @@ {{lang 'products.price_with_tax' tax_label=price.price_range.min.tax_label}} {{/and}} {{#if schema_org}} - - + + -
    +
    @@ -67,7 +67,7 @@ {{price.non_sale_price_without_tax.formatted}}
    -
    +
    {{theme_settings.pdp-price-label}} {{price.price_range.min.without_tax.formatted}} - {{price.price_range.max.without_tax.formatted}} @@ -75,12 +75,12 @@ {{lang 'products.price_without_tax' tax_label=price.price_range.min.tax_label}} {{/and}} {{#if schema_org}} - - + + -
    +
    diff --git a/templates/components/products/price.html b/templates/components/products/price.html index 9eec517a63..d0cf44b737 100644 --- a/templates/components/products/price.html +++ b/templates/components/products/price.html @@ -20,7 +20,7 @@ {{price.non_sale_price_with_tax.formatted}}
    -
    +
    {{theme_settings.pdp-price-label}} @@ -29,12 +29,12 @@ {{price.with_tax.formatted}} {{#if schema_org}} - - + + -
    +
    @@ -58,7 +58,7 @@ {{price.non_sale_price_without_tax.formatted}}
    -
    +
    {{theme_settings.pdp-price-label}} @@ -67,12 +67,12 @@ {{price.without_tax.formatted}} {{#if schema_org}} - - + + -
    +
    diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html index 3be04e722e..9ce3fe3255 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -75,7 +75,7 @@

    {{product.title}}

    {{#if product.brand}} -

    +

    {{/if}} @@ -92,7 +92,7 @@

    {{{region name="product_below_price"}}} -
    ' 0}}{{#if schema}} itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"{{/if}}{{/if}}> +
    ' 0}}{{#if schema}} itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"{{/if}}{{/if}}> {{#if settings.show_product_rating}} {{#if product.num_reviews '>' 0}} {{#if schema}} diff --git a/templates/components/products/reviews.html b/templates/components/products/reviews.html index ae2217ca27..8f8dee1a7c 100644 --- a/templates/components/products/reviews.html +++ b/templates/components/products/reviews.html @@ -17,9 +17,9 @@