wickes-css2 2.111.0-complete-your-project.6 → 2.111.0-develop.1

package/src/js/page/utils/create-loading-button.js

@@ -1,37 +0,0 @@
-export function createLoadingButton(config = {}) {
-    const settings = {
-        text: '.loading-button__text',
-        loader: '.loading-button__loader',
-        loadingClass: 'loading-button--loading',
-        ...config,
-    };
-
-    function setLoading($button, isLoading) {
-        if (!$button.length) {
-            return;
-        }
-
-        $button.toggleClass(settings.loadingClass, isLoading);
-        $button.find(settings.text).toggleClass('d-none', isLoading);
-        $button.find(settings.loader).toggleClass('d-none', !isLoading);
-    }
-
-    function start($button) {
-        setLoading($button, true);
-    }
-
-    function stop($button) {
-        setLoading($button, false);
-    }
-
-    function isLoading($button) {
-        return $button.hasClass(settings.loadingClass);
-    }
-
-    return {
-        setLoading,
-        start,
-        stop,
-        isLoading,
-    };
-}

package/src/js/page/utils/create-toast.js

@@ -1,79 +0,0 @@
-export function createToast(config = {}) {
-    const settings = {
-        containerClass: 'toast-container',
-        toastClass: 'toast',
-        closeSelector: '.notification__close',
-        backdropClass: 'modal-backdrop--toast',
-        duration: 3000,
-        template: null,
-        getData(type, text) {
-            return {
-                text,
-                classModifier: `${settings.toastClass} notification_${type}`,
-                success: type === 'success',
-                warning: type === 'warning',
-                error: type === 'error',
-            };
-        },
-        ...config,
-    };
-
-    let closeTimer = null;
-
-    function clearCloseTimer() {
-        if (closeTimer) {
-            window.clearTimeout(closeTimer);
-            closeTimer = null;
-        }
-    }
-
-    function hide() {
-        clearCloseTimer();
-
-        $(`.${settings.containerClass}`).remove();
-        $(`.${settings.backdropClass}`).removeClass(settings.backdropClass);
-
-        if (window.Wick && Wick.Backdrop) {
-            Wick.Backdrop.hide();
-        }
-
-        $(document).off('click.toast');
-    }
-
-    function show({ type = 'success', text = '' }) {
-        if (!settings.template) {
-            return;
-        }
-
-        hide();
-
-        const toastHtml = settings.template(settings.getData(type, text));
-
-        if (window.Wick && Wick.Backdrop) {
-            Wick.Backdrop.show();
-            $('.modal-backdrop').addClass(settings.backdropClass);
-        }
-
-        $('body').append(`<div class="${settings.containerClass}">${toastHtml}</div>`);
-
-        $(`.${settings.containerClass}`)
-            .off('click.toastClose', settings.closeSelector)
-            .on('click.toastClose', settings.closeSelector, function (event) {
-                event.preventDefault();
-                hide();
-            });
-
-        $(document)
-            .off('click.toast')
-            .on('click.toast', `.${settings.backdropClass}`, function () {
-                hide();
-            });
-
-        closeTimer = window.setTimeout(hide, settings.duration);
-    }
-
-    return {
-        show,
-        hide,
-    };
-}

package/src/js/page/utils/custom-dropdown.js

@@ -1,80 +0,0 @@
-export function createDropdown(config) {
-    const settings = {
-        root: '[data-dropdown]',
-        toggle: '[data-dropdown-toggle]',
-        value: '[data-dropdown-value]',
-        option: '[data-dropdown-option]',
-        openClass: 'dropdown--open',
-        selectedClass: 'dropdown__option--selected',
-        selectedValueData: 'selected-value',
-        ariaExpandedAttr: 'aria-expanded',
-        ariaSelectedAttr: 'aria-selected',
-        namespace: 'customDropdown',
-        onSelect: function () {},
-        ...config,
-    };
-
-    function closeAll() {
-        $(settings.root).each(function () {
-            const $dropdown = $(this);
-            const $toggle = $dropdown.find(settings.toggle);
-
-            $dropdown.removeClass(settings.openClass);
-            $toggle.attr(settings.ariaExpandedAttr, 'false');
-        });
-    }
-
-    function selectOption($dropdown, $option) {
-        const $value = $dropdown.find(settings.value);
-        const $options = $dropdown.find(settings.option);
-        const selectedValue = $option.attr('data-value') || '';
-
-        $options.removeClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'false');
-        $option.addClass(settings.selectedClass).attr(settings.ariaSelectedAttr, 'true');
-
-        if ($value.length) {
-            $value.text($option.text().trim());
-        }
-
-        $dropdown.data(settings.selectedValueData, selectedValue);
-
-        settings.onSelect($dropdown, $option, selectedValue);
-    }
-
-    function bind() {
-        $(document).off(`click.${settings.namespace}`);
-        $(document).on(`click.${settings.namespace}`, function (event) {
-            const $target = $(event.target);
-            const $toggle = $target.closest(settings.toggle);
-            const $option = $target.closest(settings.option);
-            const $dropdown = $target.closest(settings.root);
-
-            if (!$dropdown.length) {
-                closeAll();
-                return;
-            }
-
-            if ($toggle.length) {
-                const isOpen = $dropdown.hasClass(settings.openClass);
-
-                closeAll();
-
-                $dropdown.toggleClass(settings.openClass, !isOpen);
-                $toggle.attr(settings.ariaExpandedAttr, String(!isOpen));
-
-                return;
-            }
-
-            if ($option.length) {
-                selectOption($dropdown, $option);
-                closeAll();
-            }
-        });
-    }
-
-    return {
-        bind,
-        closeAll,
-        selectOption,
-    };
-}

package/src/page_product-details-bloomreach.html

@@ -1,130 +0,0 @@
-{{#extend "base" pageClass="page-product-details" title="Product details page new"
-isDiscount=true
-isSQM=true
-isDescription=true
-isCashback=false
-isSize=true
-isGuide=true
-hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
-currentlyInStock=true
-pagePdp=true
-globalSearchV2="true"
-switch-vat=true
-}}
-{{#content "head" mode="append" pagePdp=true}}
-<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
-{{/content}}
-{{#content "body"}}
-<main class="pdp__main">
-  <div class="container">
-    <div class="pdp">
-      <div class="pdp__title">
-        <h1 class="pdp__heading">Bosch PSB 1800 LI-2 18V Li-Ion Cordless Combi Drill Example with long
-          title in two raws
-        </h1>
-        <div class="pdp__reviews_small">
-          <span class="product-code product-code-v2">Product code: <strong id="product-code-val">236334</strong></span>
-          <div class="product-card__reviews review-star">
-            <div class="product-rating product-rating-v2">
-              <div class="rating-bg">
-                <i class="fa fa-star" aria-hidden="true"></i>
-                <i class="fa fa-star" aria-hidden="true"></i>
-                <i class="fa fa-star" aria-hidden="true"></i>
-                <i class="fa fa-star" aria-hidden="true"></i>
-                <i class="fa fa-star" aria-hidden="true"></i>
-                <div class="rating-overlay"
-                     data-rating="{{#if review-rating}}{{review-rating}}{{else}}0{{/if}}">
-                  <i class="fa fa-star" aria-hidden="true"></i>
-                  <i class="fa fa-star" aria-hidden="true"></i>
-                  <i class="fa fa-star" aria-hidden="true"></i>
-                  <i class="fa fa-star" aria-hidden="true"></i>
-                  <i class="fa fa-star" aria-hidden="true"></i>
-                </div>
-              </div>
-            </div>
-            <span class="review-star-average review-star-average-v2">(4.6)</span>
-          </div>
-          <span class="pdp__reviews-link-wrap"><a href="#" data-link="#pdp-reviews" id="open-review">82 reviews</a></span>
-        </div>
-      </div>
-
-      <div class="pdp__gallery">
-        {{> gallery-pdp-v2 }}
-      </div>
-      <div class="pdp__aside">
-        {{> price-block-v2
-        isProductSaved=false
-        isUserLogedOut=true
-        install=true
-        sample=true
-        cc=true
-        delivery=true
-        }}
-      </div>
-      <div class="pdp__description">
-        {{> product-main-info-v2 isProductSaved=true}}
-      </div>
-      <div
-          class="pdp__widget"
-          data-complete-widget
-          data-context-key="completeYourProject2Recomendations"
-      >
-        {{> bloomreach/complete-your-project title="Complete your project"}}
-      </div>
-      {{> fulfilment-accordions }}
-    </div>
-  </div>
-  <div class="container container-info">
-    <div class="pdp">
-      <div class="pdp__info">
-        {{> pdp-info-v2 }}
-      </div>
-    </div>
-  </div>
-  {{> recently-viewed }}
-
-  {{> similar-products-v2 }}
-
-  {{> seo-widgets title="More products" }}
-  {{> seo-widgets title="Related category" }}
-</main>
-{{/content}}
-{{#content "foot" mode="append"}}
-<script type="text/html" id="mini-basket-popup">
-  {{> popover-mini-basket mod="popover-mini-basket_just-added" products=mini-basket.just-added just-added=true}}
-</script>
-<script defer src="./js/page/pdp.js"></script>
-<script defer src="./js/global-search.min.js"></script>
-{{#extend "modal" id="modal-pdp-feedback" title="Feedback Form" fullWidth=true}}
-{{#content "body"}}
-<iframe class="cboxIframe" name="cbox1538824723052"
-        src="https://docs.google.com/forms/d/1jHV5b8AazYbPmoTXJBxmyns4AcRhtKnnIC4_K_MFOPU/viewform?entry.1452922942=Wickes+Blue+Slate+Chippings+-+Major+Bag&amp;entry.1885983523=Decorative+Uk+sourced+blue+slate+chippings+are+ideal+for+gardens+and+borders.+This+beautiful+stone+changes+colour+when+wet.&amp;entry.935962220=112777&amp;entry.474385230=1000626184"></iframe>
-{{/content}}
-{{/extend}}
-{{> click-and-collect-modal}}
-{{/content}}
-{{/extend}}
-<!--<script defer src="./js/components/badge-cashback.js"></script>-->
-<script>
-  if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
-    $(document).ready(function () {
-      $('.modal').on('scroll', function () {
-        $(':focus').blur();
-      });
-    });
-  }
-
-  $(document).ready(function () {
-
-    $('#info-details').toggleClass('accordion_collapsed');
-    $('#details-content').css('display', 'block');
-
-    $('#open-review').on('click', function () {
-      $('#info-review').toggleClass('accordion_collapsed');
-      $('#review-content').css('display', 'block');
-    })
-  })
-</script>

package/src/scss/common/_loading-button.scss

@@ -1,49 +0,0 @@
-.loading-button {
-  position: relative;
-
-  &__loader {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &--loading {
-    cursor: wait !important;
-    pointer-events: none;
-    min-height: 40px;
-    background-color: $green;
-    border: 1px solid $green;
-
-    &:focus {
-      background-color: $green;
-    }
-
-    .loading-button__text {
-      visibility: hidden;
-    }
-
-    .loading-button__loader {
-      display: flex;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .loader-wrapper {
-    .loader-spinner {
-      width: 24px;
-      height: 24px;
-
-      .circular-loader {
-        stroke-width: 8px;
-
-        .loader-path {
-          stroke: $white;
-        }
-      }
-    }
-  }
-}

package/src/scss/components/bloomreach/_bloomreach.scss

@@ -1,3 +0,0 @@
-@import 'complete-your-project';
-@import 'complete-card';
-@import 'complete-card-dropdown';

package/src/scss/components/bloomreach/_complete-card-dropdown.scss

@@ -1,174 +0,0 @@
-.complete-card-dropdown {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  margin-bottom: 18px;
-  overflow: visible;
-
-  &__toggle {
-    @include font-size(14);
-    @include line-height(24);
-
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    column-gap: 12px;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    min-height: 40px;
-    padding: 7px 12px;
-    overflow: hidden;
-    border: 1px solid $gray;
-    border-radius: 4px;
-    background-color: $white;
-    font-weight: 400;
-    text-align: left;
-    cursor: pointer;
-  }
-
-  &__value {
-    display: block;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__icon {
-    position: static;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-    pointer-events: none;
-    color: $blue;
-    transition: transform 0.2s;
-  }
-
-  &__menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    z-index: $dropdown-z-index;
-    display: none;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    max-height: 220px;
-    padding-top: 4px;
-    overflow-y: auto;
-    border-radius: 3px;
-    background-color: $white;
-    box-shadow: 0 0 15px $black-transparent20;
-  }
-
-  &__option {
-    @include font-size(14);
-    @include line-height(20);
-
-    display: block;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    padding: 10px 12px;
-    border: 1px solid transparent;
-    background-color: $white;
-    color: $blue-dark;
-    text-align: left;
-    overflow: visible;
-    text-overflow: initial;
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-break: normal;
-    cursor: pointer;
-    outline: none;
-
-    &:first-of-type {
-      pointer-events: none;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $ma-white;
-      outline: none;
-    }
-
-    &--selected {
-      border-color: $black;
-    }
-  }
-
-  &__error {
-    @include font-size(12);
-    @include line-height(16);
-
-    display: none;
-    margin-top: 4px;
-    color: $red;
-    font-weight: 400;
-  }
-
-  &--open {
-    .complete-card-dropdown {
-      &__toggle {
-        border-color: $blue;
-      }
-
-      &__icon {
-        transform: rotate(180deg);
-      }
-
-      &__menu {
-        display: block;
-      }
-    }
-  }
-
-  &--error {
-    .complete-card-dropdown {
-      &__toggle {
-        border-color: $red;
-      }
-
-      &__error {
-        display: block;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .complete-card-dropdown {
-    &__error {
-      position: absolute;
-      top: 44px;
-    }
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .complete-card-dropdown {
-    &__toggle {
-      @include font-size(14);
-    }
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .complete-card-dropdown {
-    margin-bottom: 5px;
-
-    &__toggle {
-      @include font-size(12);
-
-      column-gap: 8px;
-      padding: 7px 12px;
-    }
-  }
-}