wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4

package/build/js/search-filter.min.js

@@ -0,0 +1 @@
+!function o(i,n,s){function l(t,e){if(!n[t]){if(!i[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(c)return c(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=n[t]={exports:{}},i[t][0].call(r.exports,function(e){return l(i[t][1][e]||e)},r,r.exports,o,i,n,s)}return n[t].exports}for(var c="function"==typeof require&&require,e=0;e<s.length;e++)l(s[e]);return l}({1:[function(e,t,r){"use strict";var o,i,n;o=$(".filter-results_mobile"),$("#open-overlay").click(function(e){e.preventDefault(),$("body").addClass("is-filters-visible"),o.toggleClass("show")}),$("#close-overlay, .filter-results__btn-close").click(function(e){e.preventDefault(),o.hasClass("show")&&($("body").removeClass("is-filters-visible"),o.removeClass("show"))}),$('.filter-results_desktop .filter__item input[type="checkbox"]').click(function(){$(this).closest("form").submit()}),i=".close",n='.filter-results_desktop .filter__item input[type="checkbox"]',$(".filter-modal-cta").on("click",function(e){e.preventDefault()}),$(document).on("click",i,function(e){e.preventDefault()}),$(document).on("click",n,function(){$(this).closest("form").submit()})},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.2",
+  "version": "2.105.0-develop.4",
   "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",
@@ -123,7 +125,7 @@
     "branches": [
       "alt-master",
       {
-        "name": "develop",
+        "name": "custom-tag/0.5.0-icons",
         "prerelease": "${name.replace(/^custom-tag\\//g, '')}"
       }
     ],

package/src/components/accordion.hbs

@@ -1,7 +1,7 @@
-<div class="accordion {{mod}} {{collapsed}}">
+<div class="accordion {{mod}} {{collapsed}}" {{#if facetStep}}data-facet-step="{{facetStep}}"{{/if}}>
   <h5 class="accordion__header">
     {{#unless hide-chevron}}
-    <span class="icon accordion__header-icon">
+      <span class="icon accordion__header-icon">
       <i class="fas fa-angle-up"></i>
     </span>
     {{/unless}}

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/kitchen/dropdown.hbs

@@ -1,13 +1,16 @@
 <div class="sort-dd" role="menu" aria-label="Sort options" hidden>
-  <button class="sort-opt" type="button" data-value="relevance">
+  <button class="sort-opt" type="button" data-value="relevance"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Relevance</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceLow">
+  <button class="sort-opt" type="button" data-value="priceLow"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (lowest first)</span>
   </button>
-  <button class="sort-opt" type="button" data-value="priceHigh">
+  <button class="sort-opt" type="button" data-value="priceHigh"
+          {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>
     <i class="fa fa-check sort-opt__check" aria-hidden="true"></i>
     <span>Price (highest first)</span>
   </button>

package/src/components/kitchen/filter-modal-content-kitchen.hbs

@@ -0,0 +1,10 @@
+{{#with kitchen-plp}}
+  {{> kitchen/chips mod="mobile"}}
+  {{#each filters}}
+    {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
+      {{#content "content"}}
+        {{> kitchen/filter-option }}
+      {{/content}}
+    {{/extend}}
+  {{/each}}
+{{/with}}

package/src/components/kitchen/filter-modal.hbs

@@ -1,29 +1,26 @@
 {{#extend "modal" id="filterModal" classMod="filter-modal modal-scroll-observer" title="" showCloseBtn=true centered=true backdrop=true fullWidth=true}}
   {{#content "header"}}
     <h4 class="filter-modal__title">
-      Filter kitchens
+      {{ modalTitle }}
     </h4>
   {{/content}}
   {{#content "body"}}
     <div class="filter-modal__content">
-    {{#with kitchen-plp}}
-      {{> kitchen/chips mod="mobile"}}
-      {{#each filters}}
-        {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
-          {{#content "content"}}
-            {{> kitchen/filter-option }}
-          {{/content}}
-        {{/extend}}
-      {{/each}}
-    {{/with}}
+      {{#if isKitchenMode}}
+        {{> kitchen/filter-modal-content-kitchen }}
+      {{else}}
+        {{> search-filter-modal-content }}
+      {{/if}}
     </div>
   {{/content}}
 
   {{#content "footer"}}
     <div class="modal-box__inner-row justify-content-center modal-box__footer-row">
       <div class="modal-box__inner-columns">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Clear all</button>
-        <button type="button" class="btn btn-primary" data-dismiss="modal">View results</button>
+        <button type="button" class="btn btn-secondary" data-dismiss="modal"
+                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}} >Clear all</button>
+        <button type="button" class="btn btn-primary" data-dismiss="modal"
+                {{#unless isKitchenMode}}data-is-plp-srp="true"{{/unless}}>View results</button>
       </div>
     </div>
   {{/content}}

package/src/components/kitchen/plp-filters.hbs

@@ -3,13 +3,15 @@
     <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
       {{> kitchen/mobile-nav-item
               icon="fas fa-filter"
-              title="Filter"
+              title="Filter by"
               modalId="filterModal"
       }}
       {{> kitchen/mobile-nav-item
               icon="fas fa-sort-alt"
               title="Sort by"
+              info="Relevance"
               dropdown=true
+              isKitchenMode=true
       }}
     </div>
     <div class="container">

package/src/components/kitchen/sort-by.hbs

@@ -2,7 +2,7 @@
   <label class="sort__label">Sort by</label>
 
   <button class="sort-button" type="button" aria-haspopup="menu" aria-expanded="false">
-    <span class="js-sort-info"></span>
+    <span class="js-sort-info">Relevance</span>
     <i class="sort__chevron fa fa-chevron-down" aria-hidden="true"></i>
   </button>
 

package/src/components/search-filter-modal-content.hbs

@@ -0,0 +1,102 @@
+<form class="filter-results filter-results_mobile">
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Color Family" mod="filter" facetStep="5" }}
+      {{#content "content"}}
+        {{#each filters.colors}}
+          <div class="filter__item">
+            <label for="m-{{id}}" class="chb chb-color">
+              <input type="checkbox" value="{{label}}" id="m-{{id}}" name="{{id}}-filter">
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by category" mod="filter category-filter" fixed-height=""}}
+        {{#content "content"}}
+            {{>category-tree filters}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by pack quantity" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by type" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+            {{#each filters.type-list}}
+                <div class="filter__item">
+                    <label for="m-{{id}}" class="chb chb-{{classForGtm}}">
+                        <input type="checkbox" value="{{value}}" id="m-{{id}}"
+                               name="m-{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                        <ins><i class="fas fa-check"></i></ins>
+                        <span>{{label}}</span>
+                        <span class="filter-quantity">({{quantity}})</span>
+                    </label>
+                </div>
+            {{/each}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Customer Rating" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+            {{#each filters.rated}}
+            <div class="filter__item">
+                {{#ifvalue quantity value='0'}}
+                {{else}}
+                <label class="chb chb-{{classForGtm}}">
+                    <input type="checkbox" value="{{value}}" id="{{id}}" name="{{id}}" {{#if checked}}checked{{/if}} {{#if
+                        disabled}}disabled{{/if}}>
+                    <ins><i class="fas fa-check"></i></ins>
+                    <div class="filter__reviews">
+                        <div class="product-rating">
+                            <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 rating}}{{rating}}{{else}}0{{/if}}">
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="star-overlay">
+                                        <i class="fa fa-star" aria-hidden="true"></i>
+                                    </span>
+                                </div>
+                            </div>
+                            ({{quantity}})
+                        </div>
+                    </div>
+                </label>
+                {{/ifvalue}}
+            </div>
+            {{/each}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb shape" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by number of gangs" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by wattage" mod="filter" facetStep="5"}}
+        {{#content "content"}}
+        {{/content}}
+    {{/extend}}
+
+
+</form>

package/src/components/search-filter.hbs

@@ -1,134 +1,143 @@
 <form class="filter-results filter-results_desktop">
   <div class="filter-results__heading">
-    <span class="heading-4">Filter results</span>
-    <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
+    <div class="flex">
+      <span class="heading-4">{{#unless filterTitle}}Filter by{{/unless}}{{filterTitle}}</span>
+      <button type="reset" class="filter-results__clear" value="Clear all">Clear all</button>
+    </div>
+    {{#unless filterTitle}}
+      <div class="sort-products-list__total">
+        <span class="product-count">{{plp_load-more.pagination.totalNumberOfResults}}</span> <span>results</span>
+      </div>
+    {{/unless}}
   </div>
-  {{#extend "accordion" header="Color Family" mod="filter"}}
-    {{#content "content"}}
-      {{#each filters.colors}}
-        <div class="filter__item">
-          <label for="{{id}}" class="chb chb-color">
-            <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
-            <ins><i class="fas fa-check"></i></ins>
-            <span>{{label}}</span>
-          </label>
-        </div>
-      {{/each}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
-    {{#content "content"}}
-      {{>category-tree filters}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by pack quantity" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type" mod="filter"}}
-    {{#content "content"}}
-      {{#each filters.type-list}}
-        <div class="filter__item">
-          <label for="{{id}}" class="chb chb-{{classForGtm}}">
-            <input type="checkbox" value="{{value}}" id="{{id}}"
-                    name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-            <ins><i class="fas fa-check"></i></ins>
-            <span>{{label}}</span>
-            <span class="filter-quantity">({{quantity}})</span>
-          </label>
-        </div>
-      {{/each}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type 2" mod="filter"}}
+  <div class="accordions">
+    {{#extend "accordion" header="Color Family" mod="filter" facetStep="5"}}
       {{#content "content"}}
-          {{#each filters.type-list2}}
-              <div class="filter__item">
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <span>{{label}}</span>
-                      <span class="filter-quantity">({{quantity}})</span>
-                  </label>
-              </div>
-          {{/each}}
+        {{#each filters.colors}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-color">
+              <input type="checkbox" value="{{label}}" id="{{id}}" name="{{id}}-filter">
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+            </label>
+          </div>
+        {{/each}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by type 3" mod="filter"}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by category" mod="filter category-filter" fixed-height=""}}
       {{#content "content"}}
-          {{#each filters.type-list3}}
-              <div class="filter__item">
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <span>{{label}}</span>
-                      <span class="filter-quantity">({{quantity}})</span>
-                  </label>
-              </div>
-          {{/each}}
+        {{>category-tree filters}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Customer Rating" mod="filter"}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by pack quantity" mod="filter" facetStep="5"}}
       {{#content "content"}}
-          {{#each filters.rated}}
-              <div class="filter__item">
-                {{#ifvalue quantity value='0'}}
-                {{else}}
-                  <label for="{{id}}" class="chb chb-{{classForGtm}}">
-                      <input type="checkbox" value="{{value}}" id="{{id}}"
-                             name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                      <ins><i class="fas fa-check"></i></ins>
-                      <div class="filter__reviews">
-                        <div class="product-rating">
-                          <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 rating}}{{rating}}{{else}}0{{/if}}">
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type 2" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list2}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by type 3" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.type-list3}}
+          <div class="filter__item">
+            <label for="{{id}}" class="chb chb-{{classForGtm}}">
+              <input type="checkbox" value="{{value}}" id="{{id}}"
+                     name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+              <ins><i class="fas fa-check"></i></ins>
+              <span>{{label}}</span>
+              <span class="filter-quantity">({{quantity}})</span>
+            </label>
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Customer Rating" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+        {{#each filters.rated}}
+          <div class="filter__item">
+            {{#ifvalue quantity value='0'}}
+            {{else}}
+              <label for="{{id}}" class="chb chb-{{classForGtm}}">
+                <input type="checkbox" value="{{value}}" id="{{id}}"
+                       name="{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
+                <ins><i class="fas fa-check"></i></ins>
+                <div class="filter__reviews">
+                  <div class="product-rating">
+                    <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 rating}}{{rating}}{{else}}0{{/if}}">
                               <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                              <span class="star-overlay">
+                        <span class="star-overlay">
                                 <i class="fa fa-star" aria-hidden="true"></i>
                               </span>
-                            </div>
-                          </div>
-                          ({{quantity}})
-                        </div>
                       </div>
-                  </label>
-                {{/ifvalue}}
-              </div>
-          {{/each}}
+                    </div>
+                    ({{quantity}})
+                  </div>
+                </div>
+              </label>
+            {{/ifvalue}}
+          </div>
+        {{/each}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by bulb shape" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by number of gangs" mod="filter" facetStep="5"}}
+      {{#content "content"}}
       {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by bulb shape" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by number of gangs" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by bulb fitting" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
-  {{#extend "accordion" header="Shop by wattage" mod="filter"}}
-    {{#content "content"}}
-    {{/content}}
-  {{/extend}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+    {{#extend "accordion" header="Shop by wattage" mod="filter" facetStep="5"}}
+      {{#content "content"}}
+      {{/content}}
+    {{/extend}}
+  </div>
 </form>

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>