wickes-css2 2.105.0-develop.1 → 2.105.0-develop.3

package/build/js/page/klarna-modal-scroll-disable.js

@@ -2,8 +2,8 @@ var Wick = Wick || {};
 
 Wick.KlarnaModalScrollDisable = (function () {
     const $body = $('body'),
-      klarnaPopUp = 'klarna-osm-interstitial',
-      scrollDisableClass = 'overflow-hidden';
+          klarnaPopUp = 'klarna-osm-interstitial',
+          scrollDisableClass = 'overflow-hidden';
 
     window.addEventListener(klarnaPopUp, (e) => {
         let isKlarnaPopUpActive = e.detail.action === 'show';

package/build/js/page/online-exclusive.js

@@ -301,5 +301,4 @@ Wick.onlineExclusive = (function () {
             $('html, body').animate({scrollTop: dn}, 1000);
         });
     });
-
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.1",
+  "version": "2.105.0-develop.3",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -15,8 +15,9 @@
       "prettier --write"
     ],
     "src/scss/**/*.{scss,css}": [
+      "sass-lint-auto-fix",
       "prettier --write",
-      "sass-lint-auto-fix"
+      "sass-lint -c .sasslintrc"
     ]
   },
   "keywords": [
@@ -70,6 +71,7 @@
     "prettier": "^3.7.4",
     "pug": "2.0.4",
     "sass": "^1.54.9",
+    "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
     "semantic-release": "^16.0.0-beta.9",
     "through2": "^4.0.2",

package/src/components/date-selection.hbs

@@ -28,7 +28,18 @@
                       <div class="calendar__row">
                         <div class="calendar__row_days">
                     {{/if}}
-                          <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}">{{day}}</span>
+                    <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}{{#if (eq day '1')}}{{#unless isInactive}} calendar__cell_rapid{{/unless}}{{/if}}">
+                      {{#if (eq day '1')}}
+                        {{#unless isInactive}}
+                          {{day}}
+                          <span class="label-rapid">Rapid</span>
+                        {{else}}
+                          {{day}}
+                        {{/unless}}
+                      {{else}}
+                        {{day}}
+                      {{/if}}
+                    </span>
                     {{#if (eq (mod_inc @index 7) 0)}}
                         </div>
                       </div>
@@ -53,11 +64,19 @@
             </div>
         </div>
         <div class="delivery-time">
-            {{> delivery-types
-                title=titleDelivery
-                subtitle=subtitleDelivery
-                classImg=imgDelivery
-            }}
+          <div class="delivery-time__rapid-hint">
+            <span class="icon-wrap icon-wrap--large">
+              <i class="fas fa-shipping-fast icon"></i>
+            </span>
+          <p class="description">
+            Select todays’ day on the calendar to get Wickes Rapid delivery
+          </p>
+        </div>
+          {{> delivery-types
+              title=titleDelivery
+              subtitle=subtitleDelivery
+              classImg=imgDelivery
+          }}
         </div>
     </div>
 </div>

package/src/components/generate-project-id.hbs

@@ -4,7 +4,7 @@
             <div class="row">
                 <div class="col-12 generate-project-id__col">
                     <button class="generate-project-id__btn btn btn-transparent">
-                        <span class="btn_text btn-transparent__text">Generate a project ID</span>
+                        <span class="btn_text btn-transparent__text">Generate project ID</span>
                         <i class="btn-transparent__icon far fa-download"></i>
                         <a href="#" class="copy-barcode page-footer__copy" style="display:none;">
                             <i class="far fa-copy"></i>

package/src/components/shopping-list-with-share-list-v2.hbs

@@ -2,9 +2,12 @@
   <div class="container component pt-0 globalMessages">
     <div class="row">
       <div class="col-12">
-        <div class="primary-text mb-3">{{> notifications notification-page.success-product-added-to-shop-list withCloseBtn="true"}}</div>
-        <div class="primary-text mb-3">{{> notifications notification-page.warning-product-added-to-shop-list withCloseBtn="true"}}</div>
-        <div class="primary-text">{{> notifications notification-page.error-load-pdf-to-shop-list withCloseBtn="true"}}</div>
+        <div
+            class="primary-text mb-3">{{> notifications notification-page.success-product-added-to-shop-list withCloseBtn="true"}}</div>
+        <div
+            class="primary-text mb-3">{{> notifications notification-page.warning-product-added-to-shop-list withCloseBtn="true"}}</div>
+        <div
+            class="primary-text">{{> notifications notification-page.error-load-pdf-to-shop-list withCloseBtn="true"}}</div>
       </div>
     </div>
   </div>
@@ -13,6 +16,7 @@
       <h1 class="page-header__title">Hill - 24-07-23 - Ohio White</h1>
     </div>
   </div>
+  {{> generate-project-id}}
   {{#if emptyShopList}}
     <div class="container component py-4">
       <div class="row">
@@ -35,15 +39,29 @@
         <div class="row m-0">
           <div class="actions actions--v2">
             <div class="dropdown-share-list">
-              <button class="btn btn_full btn-secondary share-call share-call__desktop" role="button" id="dropdownShareLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
-                <i class="fas fa-share-alt icon"></i>
+              <button class="btn btn_full btn-secondary share-call share-call__desktop" role="button"
+                      id="dropdownShareLinks" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                      data-display="static">
+                {{#if isAndroid}}
+                  <i class="fas fa-share-alt icon"></i>
+                {{else}}
+                  <svg class="ios-custom-share-icon" width="14" height="24" viewBox="0 0 14 16" fill="none"
+                       xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M7.70625 0.292969C7.31563 -0.0976562 6.68125 -0.0976562 6.29063 0.292969L2.29063 4.29297C1.9 4.68359 1.9 5.31797 2.29063 5.70859C2.68125 6.09922 3.31562 6.09922 3.70625 5.70859L6 3.41484V9.99922C6 10.5523 6.44688 10.9992 7 10.9992C7.55312 10.9992 8 10.5523 8 9.99922V3.41484L10.2937 5.70859C10.6844 6.09922 11.3188 6.09922 11.7094 5.70859C12.1 5.31797 12.1 4.68359 11.7094 4.29297L7.70937 0.292969H7.70625ZM2 10.9992C2 10.4461 1.55313 9.99922 1 9.99922C0.446875 9.99922 0 10.4461 0 10.9992V12.9992C0 14.6555 1.34375 15.9992 3 15.9992H11C12.6562 15.9992 14 14.6555 14 12.9992V10.9992C14 10.4461 13.5531 9.99922 13 9.99922C12.4469 9.99922 12 10.4461 12 10.9992V12.9992C12 13.5523 11.5531 13.9992 11 13.9992H3C2.44688 13.9992 2 13.5523 2 12.9992V10.9992Z"
+                        fill="#0277BD" />
+                  </svg>
+                {{/if}}
                 <span>Share</span>
               </button>
               <div class="dropdown-menu" aria-labelledby="dropdownShareLinks">
-                <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="https://www-uat1.dev.wickes.co.uk/project-list/be91b064-13ad-4e27-b51d-67e77a53f430" data-a2a-title="Please check my Wickes project list" style="line-height: 32px;">
+                <div class="a2a_kit a2a_kit_size_32 a2a_default_style"
+                     data-a2a-url="https://www-uat1.dev.wickes.co.uk/project-list/be91b064-13ad-4e27-b51d-67e77a53f430"
+                     data-a2a-title="Please check my Wickes project list" style="line-height: 32px;">
                   <ul class="socials__list">
                     <li class="socials__item">
-                      <a type="button" href="#" class="a2a_button_email" data-toggle="modal" data-target="#share-list-modal"></a>
+                      <a type="button" href="#" class="a2a_button_email" data-toggle="modal"
+                         data-target="#share-list-modal"></a>
                     </li>
                     <li class="socials__item">
                       <a class="a2a_button_facebook" target="_blank" rel="nofollow noopener" href="/#facebook"></a>
@@ -58,9 +76,9 @@
                 </div>
               </div>
             </div>
-            <button href="#" class="btn btn_full btn-secondary download-pdf">
+            <button href="#" class="btn btn_full btn-primary download-pdf">
               <i class="fas fa-file-download icon"></i>
-              <span>Download</span>
+              <span>Download pdf</span>
             </button>
           </div>
 
@@ -71,7 +89,7 @@
           <div class="content shop-list-info d-flex">
             <div class="shop-list-info_item heading-4">
               <span class="shop-list-info_count">5</span> item<span class="shop-list-info_one-item">s</span> (<span
-              class="shop-list-info_left">95</span> left)
+                class="shop-list-info_left">95</span> left)
             </div>
           </div>
         </div>

package/src/components/shopping-list.hbs

@@ -1,10 +1,10 @@
 <div class="container mb-3">
-    <a class="btn btn-secondary btn-back-to-project-list" href="/page_my-project-list-multiple.html">
-        <i class="fas fa-arrow-left"></i>
-        <span>
+  <a class="btn btn-secondary btn-back-to-project-list" href="/page_my-project-list-multiple.html">
+    <i class="fas fa-arrow-left"></i>
+    <span>
             Back to Project Lists hub
         </span>
-    </a>
+  </a> 
 </div>
 <div class="globalMessages container component pt-0 pb-0">
   <div class="row">
@@ -64,7 +64,7 @@
                 <i class="fas fa-share-alt icon"></i>
                 <span>Share</span>
               </button>
-              <button href="#" class="btn btn_full btn-secondary download-pdf {{#if hideDownload}}d-none{{/if}}">
+              <button href="#" class="btn btn_full btn-secondary download-pdf">
                 <i class="fas fa-file-download icon"></i>
                 <span>Download</span>
               </button>

package/src/js/page/klarna-modal-scroll-disable.js

@@ -2,8 +2,8 @@ var Wick = Wick || {};
 
 Wick.KlarnaModalScrollDisable = (function () {
     const $body = $('body'),
-      klarnaPopUp = 'klarna-osm-interstitial',
-      scrollDisableClass = 'overflow-hidden';
+          klarnaPopUp = 'klarna-osm-interstitial',
+          scrollDisableClass = 'overflow-hidden';
 
     window.addEventListener(klarnaPopUp, (e) => {
         let isKlarnaPopUpActive = e.detail.action === 'show';

package/src/js/page/online-exclusive.js

@@ -301,5 +301,4 @@ Wick.onlineExclusive = (function () {
             $('html, body').animate({scrollTop: dn}, 1000);
         });
     });
-
 })();

package/src/page_my-shopping-list-hide-download.html

@@ -3,7 +3,7 @@
 {{/content}}
 {{#content "body"}}
 <main>
-    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true hideDownload=true}}
+    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true}}
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}

package/src/page_project-list-with-new-share-popup-android.html

@@ -0,0 +1,14 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="page_empty-shared-shopping-list" title="Project list - Bicester Hub" hideBanner="true" shopListEmpty="true"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/bicester-project-list.css">
+{{/content}}
+{{#content "body"}}
+<main>
+  {{> shopping-list-with-share-list-v2 isUserRegister=true isAndroid=true}}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script src="./js/project-list-note.min.js"></script>
+<script async src="https://static.addtoany.com/menu/page.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_project-list-with-new-share-popup-ios.html

@@ -0,0 +1,14 @@
+{{#extend "base" hybrisClass="hybris-class" pageClass="page_empty-shared-shopping-list tp-ios" title="Project list - Bicester Hub" hideBanner="true" shopListEmpty="true"}}
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/bicester-project-list.css">
+{{/content}}
+{{#content "body"}}
+<main>
+  {{> shopping-list-with-share-list-v2 isUserRegister=true}}
+</main>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script src="./js/project-list-note.min.js"></script>
+<script async src="https://static.addtoany.com/menu/page.js"></script>
+{{/content}}
+{{/extend}}

package/src/scss/common/_common.scss

@@ -595,4 +595,9 @@ div .design-appointment {
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &--large {
+    width: 48px;
+    height: 48px;
+  }
 }

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

@@ -118,7 +118,7 @@
     .messages {
       display: flex;
       flex-direction: column;
-      border: none;
+      border: 0;
       background: none;
 
       &__text {
@@ -151,7 +151,7 @@
       justify-content: space-between;
       grid-gap: 8px;
       padding: 8px 0;
-      border: none;
+      border: 0;
 
       & + .products__item {
         border-top: 1px solid $gray-light;
@@ -184,7 +184,7 @@
           min-width: 24px;
           padding: 4px;
           background: 0 0;
-          border: none;
+          border: 0;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -290,8 +290,8 @@
         }
 
         &[disabled] {
-          border: none;
-          opacity: 0.6;
+          border: 0;
+          opacity: .6;
         }
       }
     }
@@ -299,7 +299,7 @@
     .btn--remove,
     .btn--quantity {
       &:hover {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
@@ -335,7 +335,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;
@@ -406,7 +406,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;
     }
   }
@@ -436,7 +436,7 @@
           font-weight: 700;
         }
 
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
           .icon-wrap .arrow-icon {
             transform: rotate(180deg);
           }
@@ -534,7 +534,7 @@
               transform: rotate(180deg);
             }
 
-            &[aria-expanded="true"] {
+            &[aria-expanded='true'] {
               .icon {
                 transform: rotate(0);
               }

package/src/scss/components/_date-selection-add-new-styles.scss

@@ -142,6 +142,48 @@
       font-weight: 500;
       font-size: 1rem;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &::after {
+          background: $blue;
+        }
+      }
+    }
   }
 
   &.date-selection_selected {

package/src/scss/components/_date-selection.scss

@@ -29,6 +29,36 @@
       display: none;
     }
   }
+
+  &__rapid-hint {
+    border-top: 1px dashed $blue-dark;
+    display: flex;
+    padding: 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+
+    .description {
+      @include font-size(14);
+      @include line-height(22);
+      text-align: center;
+      font-weight: 400;
+      max-width: 226px;
+      margin-bottom: 0;
+    }
+
+    .icon {
+      font-size: 2rem;
+      height: auto;
+      color: $blue-satin;
+    }
+
+    .date-selection_selected & {
+      display: none;
+    }
+  }
 }
 
 .calendar {
@@ -81,6 +111,49 @@
       background: $blue;
       color: $white;
     }
+
+    &_rapid {
+      display: inline;
+      align-items: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: relative;
+        display: block;
+        background: $ma-white;
+        border-radius: 50%;
+        width: 34px;
+        height: 34px;
+        top: -34px;
+        left: calc(50% - 34px / 2);
+        z-index: $circle-z-index;
+      }
+
+      .label-rapid {
+        @include font-size(10);
+        @include line-height(10);
+        border-radius: 30px;
+        border: 1px solid $white;
+        background: $pacific-depths;
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        font-style: normal;
+        font-weight: 700;
+        transform: translate(-50%, 0);
+        padding: 2px 4px;
+        color: $white;
+        z-index: $label-z-index;
+        pointer-events: none;
+      }
+
+      &.calendar__cell_selected {
+        &:after {
+          background: $blue;
+        }
+      }
+    }
   }
 }
 
@@ -249,6 +322,12 @@
 
   .delivery-time {
     width: 100%;
+
+    &__rapid-hint {
+      border-top: 0;
+      background: $white;
+      height: 100%;
+    }
   }
 
   .date-selection {

package/src/scss/components/_shared-shopping-list.scss

@@ -93,6 +93,28 @@
       }
     }
   }
+
+  .ios-custom-share-icon {
+    margin-right: 13px;
+
+    path {
+      transition: fill 0.2s ease;
+    }
+  }
+
+  .btn-secondary:hover,
+  .btn-secondary:active,
+  .btn-secondary:focus {
+    .ios-custom-share-icon path {
+      fill: $white !important;
+    }
+  }
+}
+
+.tp-app {
+  .btn-back-to-project-list {
+    display: none !important;
+  }
 }
 
 .copy-link_hovered {

package/src/scss/components/_shopping-list.scss

@@ -130,13 +130,11 @@
         }
       }
 
-
       & .icon-info-component {
         vertical-align: middle;
         margin-right: 5px;
       }
 
-
       &-text {
         text-transform: capitalize;
         font-size: 1rem;
@@ -158,7 +156,6 @@
           border-color: $red;
         }
       }
-
     }
 
     &__count {
@@ -205,13 +202,29 @@
     }
 
     &__error {
-      font-size: .75rem;
+      font-size: 0.75rem;
       line-height: 1rem;
       margin: 0;
       color: $red;
       visibility: hidden;
     }
   }
+
+  .ios-custom-share-icon {
+    margin-right: 13px;
+
+    path {
+      transition: fill 0.2s ease;
+    }
+  }
+
+  .btn-secondary:hover,
+  .btn-secondary:active,
+  .btn-secondary:focus {
+    .ios-custom-share-icon path {
+      fill: $white !important;
+    }
+  }
 }
 
 .shopping-list {
@@ -299,7 +312,6 @@
   }
 }
 
-
 @include media-breakpoint-down(lg) {
   .shopping-list {
     .ref {
@@ -369,7 +381,6 @@
         }
       }
     }
-
   }
 }
 
@@ -459,7 +470,7 @@
   h1 {
     text-align: center;
     margin-bottom: 0;
-    padding-bottom: .67em;
+    padding-bottom: 0.67em;
     font-size: 34px !important;
   }
 
@@ -509,4 +520,3 @@
     }
   }
 }
-

package/src/scss/helpers/_variables.scss

@@ -167,6 +167,8 @@ $btn-focus-width: 0;
 
 //// z-indexes
 $filters: 8;
+$label-z-index: 2;
+$circle-z-index: -1;
 $main-nav-overlay: 9;
 $offer-banner: 10;
 $popover: 100;

package/src/scss/kitchen-plp-main.scss

@@ -27,4 +27,3 @@
 @import 'components/kitchen/plp-filters';
 @import 'components/kitchen/filter-modal';
 @import 'components/kitchen/sort-by';
-

package/src/sitemap.html

@@ -629,10 +629,18 @@
                         </li>
                         <li>
                             <span class="page-id">6.24</span>
-                            <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
+                            <a href="page_project-list-with-new-share-popup-ios.html" target="_blank">My Project list Multiple - iOS share button</a>
                         </li>
                         <li>
                             <span class="page-id">6.25</span>
+                            <a href="page_project-list-with-new-share-popup-android.html" target="_blank">My Project list Multiple - Android share button</a>
+                        </li>
+                        <li>
+                            <span class="page-id">6.26</span>
+                            <a href="page_project-list-generate-project-list-ID.html" target="_blank">Project list - Generate Project list ID</a>
+                        </li>
+                        <li>
+                            <span class="page-id">6.27</span>
                             <a href="page_project-list-vat.html" target="_blank">Project list - Vat</a>
                         </li>
                     </ul>