wickes-css2 2.103.0-IC-977-colors-semantic.1 → 2.103.0-IC-976-pre-commit-lint.1

package/src/js/page/plp-load-more.js

@@ -43,7 +43,7 @@ Wick.PLPLoadMore = {
       .finally(() => {
         hideLoader(Wick.PLPLoadMore.el.loader);
         Wick.PLPLoadMore.el.$loadMoreBtn.blur();
-        Wick.ProductBanner.checkProductsInColumn();
+        Wick.BannerPlacementManager.checkProductsInColumn();
         $(window).trigger('productBannerPositionChanged');
         Wick.EnergyEfficiency.drawEnergyLabels();
         Wick.PLP?.bindEvents();

package/src/page_plp_v2.html

@@ -1,4 +1,4 @@
-{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Products list" globalSearchV2="true" pagePlp=true}}
+{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media" title="Products list" globalSearchV2="true" pagePlp=true}}
 {{#content "head" mode="append" pagePlp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
 {{/content}}
@@ -32,13 +32,23 @@
                         </div>
 
                         <div class="products-list products-list-v2">
-                            {{#each plp_load-more.results}}
-                            {{>card_product_v2}}
+                            {{#each search-result_v2.products}}
+                                {{>card_product_v2}}
                             {{/each}}
                             {{#if search-result_v2.product-banner}}
-                            {{#each search-result_v2.product-banner}}
-                            {{>card_product_banner_v2}}
-                            {{/each}}
+                                {{#each search-result_v2.product-banner}}
+                                    {{>card_product_banner_v2}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-banner}}
+                                {{#each search-result_v2.sponsor-banner}}
+                                    {{>card_sponsor_banner}}
+                                {{/each}}
+                            {{/if}}
+                            {{#if search-result_v2.sponsor-product}}
+                                {{#each search-result_v2.sponsor-product}}
+                                    {{>card_sponsor_product}}
+                                {{/each}}
                             {{/if}}
                         </div>
                         <div class="load-more-wrap">

package/src/page_search-results.html

@@ -42,9 +42,19 @@
         </div>
 
         <div class="products-list products-list-v2">
-          {{#each plp_energy-efficiency.products}}
-            {{> card_product_v2}}
+          {{#each search-result_v2.products}}
+            {{>card_product_v2}}
           {{/each}}
+          {{#if search-result_v2.sponsor-banner}}
+            {{#each search-result_v2.sponsor-banner}}
+              {{>card_sponsor_banner}}
+            {{/each}}
+          {{/if}}
+          {{#if search-result_v2.sponsor-product}}
+            {{#each search-result_v2.sponsor-product}}
+              {{>card_sponsor_product}}
+            {{/each}}
+          {{/if}}
         </div>
 
         <div class="sort-products-list">

package/src/scss/components/_custom-slider.scss

@@ -105,7 +105,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: none;
+      border: 0;
       background: none;
 
       &__text {
@@ -138,7 +138,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: none;
+      border: 0;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -229,7 +229,7 @@
     transition: all .3s ease;
 
     &.footer-fixed {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       position: fixed;
       width: 100%;
       left: 0;
@@ -300,7 +300,7 @@
     }
 
     .custom-slider__footer {
-      box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, .08);
+      box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, .08);
       flex-direction: column;
     }
   }
@@ -330,7 +330,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -428,7 +428,7 @@
               transform: rotate(180deg);
             }
 
-            &[aria-expanded="true"] {
+            &[aria-expanded='true'] {
               .icon {
                 transform: rotate(0);
               }

package/src/scss/components/card-product-banner.scss

@@ -4,7 +4,7 @@
   @include make-col(4);
   margin-bottom: 30px;
 
-  @include media-breakpoint-down(md) { 
+  @include media-breakpoint-down(md) {
     @include make-col(6);
   }
 
@@ -39,7 +39,7 @@
     padding: 0 15px;
 
     @include media-breakpoint-down(sm) {
-      display: inline-block; 
+      display: inline-block;
       padding: 0;
       width: 100%;
     }
@@ -49,4 +49,92 @@
     display: inline-block;
     width: 100%;
   }
-} 
+}
+
+.products-list {
+  .card-sponsor-product,
+  .card-sponsor-banner {
+    @include make-col(4);
+    margin-bottom: 0;
+  }
+
+  .card-sponsor-banner {
+    &__link {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      padding: 0 15px;
+    }
+
+    &__image {
+      display: inline-block;
+      width: 100%;
+    }
+  }
+
+  .card-sponsor-product {
+    .product-card {
+      max-width: 100%;
+    }
+  }
+
+  .product-card__sponsored {
+    @include font-size(12);
+    @include line-height(16);
+    color: $squant;
+    font-weight: 400;
+    margin-top: -3px;
+    margin-bottom: 15px;
+    padding: 2px 4px;
+
+    &:not(.product-card__sponsored--empty) {
+      width: max-content;
+      background: $gray-light;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .products-list {
+    .card-sponsor-product,
+    .card-sponsor-banner {
+      @include make-col(6);
+
+      .card {
+        max-width: 100%;
+      }
+    }
+  }
+
+  .products-list-v2 {
+    .card-sponsor-product:nth-of-type(n+3) {
+      .card {
+        &:before {
+          content: none;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .products-list {
+    .product-card__sponsored {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
+    .card-sponsor-banner {
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 20px;
+        left: 5px;
+        width: calc(100% - 10px);
+        border-bottom: 1px solid $gray;
+      }
+    }
+  }
+}

package/src/scss/helpers/_variables.scss

@@ -28,7 +28,7 @@ $gray-quill: #cececd;
 $gray-wait: #9d9d9c;
 $gray-dim: #656565;
 $gray-matt: #515151;
-$squant: #666666;
+$squant: #666;
 $error-bg: #fcf2f3;       // Error notification background colour
 $positive: #8dc63f;       // Positive colour
 $negative: #ed1c24;       // Negative colour
@@ -400,5 +400,3 @@ $christine: #ec6608;
 $monza: #e30613;
 $downriver: #0c3153;
 $rose-pink: #ff858d;
-
-@import 'colors-semantic';

package/src/scss/libs/_bootstrap-extracted.scss

@@ -31,7 +31,7 @@
     &::after {
       position: absolute;
       display: block;
-      content: "";
+      content: '';
       border-color: transparent;
       border-style: solid;
     }
@@ -68,7 +68,7 @@
     display: block;
     width: $popover-arrow-width;
     margin-left: ($popover-arrow-width / -2);
-    content: "";
+    content: '';
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
 }

package/src/scss/libs/_cat-libs.scss

@@ -1,10 +1,10 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/print";
-@import "bootstrap-extracted";
-@import 'skeleton';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/print';
+@import 'bootstrap-extracted';
+@import 'skeleton';

package/src/scss/libs/_font-awesome-icons.scss

@@ -329,6 +329,7 @@ svg:not(:root).svg-inline--fa {
     -webkit-transform: rotate(0);
     transform: rotate(0)
   }
+
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg)
@@ -340,6 +341,7 @@ svg:not(:root).svg-inline--fa {
     -webkit-transform: rotate(0);
     transform: rotate(0)
   }
+
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg)

package/src/scss/libs/_homepage-libs.scss

@@ -1,12 +1,12 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/print";
-@import "bootstrap-extracted";
-@import 'skeleton';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/print';
+@import 'bootstrap-extracted';
+@import 'skeleton';

package/src/scss/libs/_plp-libs.scss

@@ -1,14 +1,14 @@
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/print";
-@import "bootstrap-extracted";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/print';
+@import 'bootstrap-extracted';
 
 @import 'swiper';
 @import 'simplebar';

package/src/scss/libs/_skeleton.scss

@@ -1,8 +1,8 @@
-$skeleton-element-color: #eeeeee;
+$skeleton-element-color: #eee;
 $skeleton-animation-color: #f8f8f8;
 $skeleton-line-border-radius: 10px;
 
-@import "skeleton-screen-css/dist/index.css";
+@import 'skeleton-screen-css/dist/index.css';
 
 .ssc-circle,
 .ssc-hr,

package/src/scss/libs/_store-locator-libs.scss

@@ -8,4 +8,4 @@
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/transitions';
 @import 'bootstrap/scss/popover';
-@import 'skeleton';
+@import 'skeleton';

package/src/scss/libs/flatpickr.scss

@@ -59,7 +59,7 @@
   .flatpickr {
     &-input {
       padding: 0;
-      border: none;
+      border: 0;
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.5rem;
@@ -81,7 +81,7 @@
           margin-top: 4px;
           padding: 16px;
           border-radius: 3px;
-          box-shadow: 0 0 15px 0 rgba(0, 0, 0, .20);
+          box-shadow: 0 0 15px 0 rgba(0, 0, 0, .2);
         }
       }
     }
@@ -129,7 +129,7 @@
         pointer-events: none;
 
         &:hover {
-          border: none;
+          border: 0;
         }
       }
 
@@ -150,7 +150,7 @@
 
       input.cur-year {
         padding-left: 0;
-        font-size: 0.875rem;
+        font-size: .875rem;
         font-weight: 500;
         line-height: 1.375rem;
         text-align: center;

package/src/scss/pages/_checkout-confirmation-new.scss

@@ -284,13 +284,13 @@
 
   [data-is-logged-in='true'] {
     body {
-      background: #ff0000 !important;
+      background: #f00 !important;
     }
   }
 
   [data-is-logged-in='false'] {
     body {
-      background: #0000ff !important;
+      background: #00f !important;
     }
   }
 }

package/src/scss/pages/page_products-list-combined.scss

@@ -47,6 +47,17 @@ $color-bar-radius: 3px;
     }
   }
 
+  .sponsor-top-banner {
+    margin-bottom: 20px;
+    margin-top: 10px;
+
+    &__image {
+      display: block;
+      max-width: 100%;
+      margin-bottom: 20px;
+    }
+  }
+
   .color-pick {
     &__wrap {
       display: none;

package/src/scss/pages/page_products-list.scss

@@ -37,6 +37,14 @@
       }
     }
   }
+
+  .sponsor-top-banner {
+    &__image {
+      margin-bottom: 20px;
+      display: block;
+      max-width: 100%;
+    }
+  }
 }
 
 .products-list {

package/src/scss/partials/_main-nav.scss

@@ -593,7 +593,7 @@ body.mobile-nav-opened {
 
     &__section {
       position: relative;
-      background-color: #ffffff;
+      background-color: #fff;
 
       &:not(:first-child) {
         display: none;
@@ -622,7 +622,7 @@ body.mobile-nav-opened {
 
       &__label {
         padding: 22px 10px;
-        ffont-weight: 700;
+        font-weight: 700;
         color: $blue-dark;
         border-top: 1px solid $gray-light;
 

package/src/js/components/product-banner.js

@@ -1,148 +0,0 @@
-var Wick = Wick || {};
-Wick.ProductBanner = {
-  el: {
-    banners: '.card-product-banner',
-    bannerInactiveClass: 'card-product-banner--inactive',
-    productsWrap: '.products-list-v2',
-    $products: $('.product-card'),
-    attrPositionDesktop: 'data-desktop-position',
-    attrPositionMobile: 'data-mobile-position',
-    attrRequiredAmountDesktop: 'data-required-amount-desktop',
-    attrRequiredAmountMobile: 'data-required-amount-mobile',
-    hide: 'd-none'
-  },
-  currentBreakpoint: null,
-  checkProductsInColumn() {
-    Wick.ProductBanner.addInactiveClasses();
-    Wick.ProductBanner.arrangeBannersInRightOrder();
-    $(Wick.ProductBanner.el.banners).each((index, banner) => {
-      Wick.ProductBanner.hideBannerDueLimit(banner, index);
-      Wick.ProductBanner.moveBannerToSpecifiedPosition(banner);
-    });
-  },
-  moveBannerToSpecifiedPosition(banner) {
-    const $listSlots = Wick.ProductBanner.getListSlots();
-    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner) - 2;
-    const listSlotsLength = $listSlots.length;
-
-    if(Wick.ProductBanner.isBannerVisible(banner)) {
-      if (bannerPosition <= listSlotsLength) {
-        if ($listSlots[bannerPosition]) {
-          Wick.ProductBanner.showBanner(banner);
-          Wick.ProductBanner.removeInactiveClass(banner);
-          Wick.ProductBanner.moveBanner(banner, $listSlots[bannerPosition]);
-        } else {
-          Wick.ProductBanner.hideBanner(banner);
-          Wick.ProductBanner.coverEdgeCases(banner);
-        }
-      } else {
-        Wick.ProductBanner.hideBanner(banner);
-      }
-    }
-  },
-  moveBanner(banner, targetElement) {
-    $(banner).remove();
-    $(targetElement).after(banner);
-  },
-  hideBanner(banner) {
-    $(banner).addClass(Wick.ProductBanner.el.hide);
-  },
-  showBanner(banner) {
-    $(banner).removeClass(Wick.ProductBanner.el.hide);
-  },
-  isBannerVisible(banner) {
-    return !$(banner).hasClass(Wick.ProductBanner.el.hide);
-  },
-  hideBannerDueLimit(banner) {
-    const bannerMinLimit = Wick.ProductBanner.getBannerLimit(banner) - 1;
-    const $listSlots = Wick.ProductBanner.getListSlots();
-    const listProductsLength = $listSlots.length;
-    Wick.ProductBanner.showBanner(banner);
-
-    if (bannerMinLimit > listProductsLength) {
-      Wick.ProductBanner.hideBanner(banner);
-    }
-  },
-  getBannerPosition(banner) {
-    const isMobile = Wick.ProductBanner.isMobileResolution();
-    const positionAttribute = isMobile
-      ?  Wick.ProductBanner.el.attrPositionMobile
-      : Wick.ProductBanner.el.attrPositionDesktop
-
-    return banner.hasAttribute(positionAttribute)
-      ? Number(banner.getAttribute(positionAttribute))
-      : Number(Wick.ProductBanner.getListLength() + Wick.ProductBanner.getBannersAmount());
-  },
-  getBannerLimit(banner) {
-    const isMobile = Wick.ProductBanner.isMobileResolution();
-
-    const limitAttribute = isMobile
-      ? Wick.ProductBanner.el.attrRequiredAmountMobile
-      : Wick.ProductBanner.el.attrRequiredAmountDesktop;
-
-    return banner.hasAttribute(limitAttribute)
-      ? Number(banner.getAttribute(limitAttribute))
-      : 0;
-  },
-  isMobileResolution() {
-    return Wick.Responsive.getCurrentBreakpoint() !== 'up-lg';
-  },
-  getListLength() {
-    const $listItems = $(Wick.ProductBanner.el.productsWrap).find('.product-card');
-    return $listItems.length;
-  },
-  getBannersAmount() {
-    return $(Wick.ProductBanner.el.banners).length;
-  },
-  getProductsAmount() {
-    return Wick.ProductBanner.el.$products.length;
-  },
-  arrangeBannersInRightOrder() {
-    $(Wick.ProductBanner.el.banners).sort((a, b) => {
-      let bannerPositionA = Wick.ProductBanner.getBannerPosition(a);
-      let bannerPositionB = Wick.ProductBanner.getBannerPosition(b);
-
-      return bannerPositionA - bannerPositionB
-    }).appendTo(Wick.ProductBanner.el.productsWrap);
-  },
-  addInactiveClasses() {
-    $(Wick.ProductBanner.el.banners).addClass(Wick.ProductBanner.el.bannerInactiveClass);
-  },
-  removeInactiveClass(banner) {
-    $(banner).removeClass(Wick.ProductBanner.el.bannerInactiveClass)
-  },
-  insertFirstBanner(banner) {
-    const bannerPosition = Wick.ProductBanner.getBannerPosition(banner);
-
-    if (bannerPosition === 1) {
-      Wick.ProductBanner.showBanner(banner);
-      Wick.ProductBanner.removeInactiveClass(banner);
-      $(banner).remove();
-      $(Wick.ProductBanner.el.productsWrap).prepend(banner);
-    }
-  },
-  coverEdgeCases(banner) {
-    Wick.ProductBanner.insertFirstBanner(banner);
-  },
-  getListSlots() {
-    return $(Wick.ProductBanner.el.productsWrap)
-      .find('.product-card, .card-product-banner:not(.card-product-banner--inactive)');
-  },
-  init() {
-    Wick.Responsive.onResize(function () {
-      if(Wick.ProductBanner.currentBreakpoint !== Wick.Responsive.getCurrentBreakpoint()) {
-        Wick.ProductBanner.currentBreakpoint = Wick.Responsive.getCurrentBreakpoint()
-        Wick.ProductBanner.checkProductsInColumn();
-        $(window).trigger('productBannerPositionChanged');
-      }
-    });
-  }
-};
-
-$(document).ready(function () {
-  if (!Wick.ProductBanner.getBannersAmount() || !Wick.ProductBanner.getProductsAmount()) {
-    return;
-  }
-
-  Wick.ProductBanner.init();
-})