diff --git a/config/theme.yml b/config/theme.yml index 17e7e1521..f0933e116 100644 --- a/config/theme.yml +++ b/config/theme.yml @@ -1,6 +1,6 @@ name: hummingbird display_name: Hummingbird -version: 0.1.3 +version: 0.1.5 author: name: "PrestaShop Team" email: "pub@prestashop.com" diff --git a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl index d2a9b854b..e29235d7d 100644 --- a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl +++ b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription-column.tpl @@ -5,7 +5,7 @@
-

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

+

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

diff --git a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl index 11561f371..2f23b2f29 100644 --- a/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl +++ b/modules/ps_emailsubscription/views/templates/hook/ps_emailsubscription.tpl @@ -9,7 +9,7 @@
-

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

+

{l s='Get our latest news and special sales' d='Shop.Theme.Global'}

@@ -21,7 +21,7 @@ class="form-control" value="{$value}" placeholder="{l s='Your email address' d='Shop.Forms.Labels'}" - aria-labelledby="block-newsletter-label" + aria-labelledby="block-newsletter-label-{$hookName}" required > diff --git a/package.json b/package.json index 1fcbec492..f24c22c6d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "prestashop-hummingbird-dev-tools", - "version": "1.0.0", + "version": "0.1.5", "description": "Tools to help while developing the Hummingbird theme", "engines": { "node": ">= 14" diff --git a/src/js/modules/facetedsearch/index.ts b/src/js/modules/facetedsearch/index.ts index ef5388c5a..058f4ccd3 100644 --- a/src/js/modules/facetedsearch/index.ts +++ b/src/js/modules/facetedsearch/index.ts @@ -11,38 +11,60 @@ import filterHandler from './filter-handler'; const initSliders = () => { const {Theme} = window; + // Get all slider configurations found in the DOM document.querySelectorAll(Theme.selectors.facetedsearch.filterSlider).forEach((filter: HTMLElement) => { const container = filter.querySelector(Theme.selectors.facetedsearch.rangeContainer); + + // Init basic slider data + let unitPosition = 'suffix'; + let unitSymbol = container.dataset.sliderUnit; + let decimalCount = 2; + let decimalSeparator = '.'; + let thousandsSeparator = ''; + + // Specify further if there are more options, currently used for price slider, + // which is the only one providing price specifications. const options = JSON.parse(container.dataset.sliderSpecifications); - const signPosition = options.positivePattern.indexOf('¤') === 0 ? 'prefix' : 'suffix'; - // const sliderType = container.dataset.sliderSpecifications ? 'price' : 'weight'; - const sliderDirection = container.dataset.sliderDirection === '1' ? 'rtl' : 'ltr'; + + if (options !== null) { + // Sign position + if (options.positivePattern !== undefined && options.positivePattern.indexOf('¤') === 0) { + unitPosition = 'prefix'; + } + + // Unit + if (options.currencySymbol !== undefined) { + unitSymbol = options.currencySymbol; + } + + // Separators + if (options.numberSymbols !== undefined) { + decimalSeparator = options.numberSymbols[0]; + thousandsSeparator = options.numberSymbols[1]; + } + + // Decimals + if (options.minFractionDigits !== undefined) { + decimalCount = options.minFractionDigits; + } + } + + // Minimum and maximum values const min = parseInt(container.dataset.sliderMin, 10); const max = parseInt(container.dataset.sliderMax, 10); + + // const sliderType = container.dataset.sliderSpecifications ? 'price' : 'weight'; + const sliderDirection = container.dataset.sliderDirection === '1' ? 'rtl' : 'ltr'; + // let format; let initiatedSlider: API; - // Not used for the moment - /* if (sliderType === 'price') { - format = wNumb({ - mark: ',', - thousand: ' ', - decimals: 0, - [signPosition]: - signPosition === 'prefix' ? options.currencySymbol : ` ${options.currencySymbol}`, - }); - } else if (sliderType === 'weight') { - format = wNumb({ - mark: ',', - thousand: ' ', - decimals: 0, - }); - } */ - + // Initialize tooltip format const tooltipsFormat = wNumb({ - decimals: 2, - [signPosition]: - signPosition === 'prefix' ? options.currencySymbol : ` ${options.currencySymbol}`, + mark: decimalSeparator, + thousand: thousandsSeparator, + decimals: decimalCount, + [unitPosition]: unitPosition === 'prefix' ? unitSymbol : ` ${unitSymbol}`, }); const sliderValues = JSON.parse(container.dataset.sliderValues); diff --git a/src/js/pages/checkout.ts b/src/js/pages/checkout.ts index 57918f547..a2e23358f 100644 --- a/src/js/pages/checkout.ts +++ b/src/js/pages/checkout.ts @@ -17,6 +17,7 @@ const initCheckout = () => { const termsModalElement = document.querySelector(CheckoutMap.checkoutModal); // Only UI things, the real toggle is handled by Bootstrap Tabs + // A thing we handle manually is the .active class on the toggling buttons const toggleStep = (content: HTMLElement, step?: HTMLElement) => { const currentContent = document.querySelector(CheckoutMap.steps.current); currentContent?.classList.remove('step--current', 'js-current-step'); @@ -51,18 +52,26 @@ const initCheckout = () => { }); }); + // Initial step settings steps.forEach((step, index) => { + // Get step content const stepContent = document.querySelector( CheckoutMap.steps.specificStepContent(step.dataset.step), ); + // Get step selector button (toggler) + const stepButton = step.querySelector('button'); + if (stepContent) { + // If step is finished, we mark it green if (stepContent.classList.contains('step--complete')) { step.classList.add('checkout__steps--success'); } + // Current step will get an active property if (stepContent.classList.contains('step--current')) { step.classList.add('checkout__steps--current'); + stepButton?.classList.add('active'); const responsiveStep = document.querySelector( CheckoutMap.steps.specificStep(step.dataset.step), ); @@ -74,14 +83,15 @@ const initCheckout = () => { if (setProgress) { setProgress(index + 1); } + } else { + stepButton?.classList.remove('active'); } + // If the step can be navigated if (stepContent.classList.contains('step--reachable')) { - const button = step.querySelector('button'); - - button?.classList.add('btn-link'); + stepButton?.classList.add('btn-link'); - button?.addEventListener('click', () => { + stepButton?.addEventListener('click', () => { if (setProgress) { setProgress(index + 1); } @@ -90,12 +100,10 @@ const initCheckout = () => { }); } + // If the step is not finished yet, we disable the navigator if (stepContent.classList.contains('step--unreachable')) { - const button = step.querySelector('button'); - - button?.setAttribute('disabled', 'true'); - - button?.addEventListener('click', () => { + stepButton?.setAttribute('disabled', 'true'); + stepButton?.addEventListener('click', () => { toggleStep(stepContent, step); }); } diff --git a/src/scss/core/components/_checkout-steps.scss b/src/scss/core/components/_checkout-steps.scss index b3f12acce..c0f4236a5 100644 --- a/src/scss/core/components/_checkout-steps.scss +++ b/src/scss/core/components/_checkout-steps.scss @@ -98,4 +98,13 @@ $component-name: checkout__steps; &__mobile { width: 100%; } + + /* Do not assign any styles to active tab */ + .nav-tabs .checkout__steps--success .nav-link.active { + color: var(--bs-success); + } + + .nav-tabs .checkout__steps--current .nav-link.active { + color: var(--bs-gray-900); + } } diff --git a/src/scss/core/components/_search.scss b/src/scss/core/components/_search.scss index 75d1fce5f..ba3dd52e8 100644 --- a/src/scss/core/components/_search.scss +++ b/src/scss/core/components/_search.scss @@ -62,7 +62,8 @@ $component-name: search; &-widgets { position: relative; - overflow: visible; + // stylelint-disable-next-line + overflow: visible !important; @include media-breakpoint-down(md) { max-width: inherit; diff --git a/src/scss/core/layout/_header-bottom.scss b/src/scss/core/layout/_header-bottom.scss index 79e647e4a..414cd8768 100644 --- a/src/scss/core/layout/_header-bottom.scss +++ b/src/scss/core/layout/_header-bottom.scss @@ -6,4 +6,8 @@ $component-name: header-bottom; min-height: 4rem; } } + + &__h1 { + font-size: unset; + } } diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl index 7743caf60..1bc70b868 100644 --- a/templates/_partials/header.tpl +++ b/templates/_partials/header.tpl @@ -32,7 +32,7 @@