wickes-css2 2.105.0-develop.8 → 2.105.0-develop.9

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/build/js/share-project-list.min.js

@@ -0,0 +1 @@
+!function t(r,i,c){function l(n,e){if(!i[n]){if(!r[n]){var o="function"==typeof require&&require;if(!e&&o)return o(n,!0);if(a)return a(n,!0);throw(e=new Error("Cannot find module '"+n+"'")).code="MODULE_NOT_FOUND",e}o=i[n]={exports:{}},r[n][0].call(o.exports,function(e){return l(r[n][1][e]||e)},o,o.exports,t,r,i,c)}return i[n].exports}for(var a="function"==typeof require&&require,e=0;e<c.length;e++)l(c[e]);return l}({1:[function(e,n,o){"use strict";var t,r,i,c,l=e("./utils/copy-to-clipboard");function a(){var e,n;t.length&&(e=t.get(0),t.removeAttr("disabled"),e.focus(),n=(e.value||"").length,"function"==typeof e.setSelectionRange?e.setSelectionRange(0,n):"function"==typeof e.select&&e.select())}t=$("#share-list-modal #shopping-list-link"),r=$("#copy-link"),i=r.find("a"),c="copy-link_hovered",i.on("click",function(e){e.preventDefault()}),r.on("click",function(e){e.preventDefault(),a();e=(t.val()||"").trim();e&&(0,l.copyToClipboard)(e,r[0],{noUpperCase:!0}).then(function(){i.addClass(c)}).catch(function(e){console.error(e)})}),t.on("click",function(e){e.preventDefault(),a(),i.removeClass(c)})},{"./utils/copy-to-clipboard":2}],2:[function(e,n,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.copyToClipboard=function(e,n){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},e=function(e,n){e=null==e?"":e+"";return(n.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()})).split(" ").filter(function(e){return""!==e}).join(" ").trim()}(e,o);if(!e)return Promise.reject(new Error("Empty text"));if(null!=(o=window.webkit)&&null!=(o=o.messageHandlers)&&o.copy)try{return window.webkit.messageHandlers.copy.postMessage(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=window.Android)&&o.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(e),Promise.resolve(!0)}catch(e){console.error(e)}if(null!=(o=navigator.clipboard)&&o.writeText)return navigator.clipboard.writeText(e).then(function(){return!0});return function(a,u){return new Promise(function(e,n){try{var o,t=$(u).parent(),r=$("<textarea>").val(a).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),i=(t.append(r),r.get(0)),c=(i.focus(),(i.value||"").length),l=("function"==typeof i.setSelectionRange?i.setSelectionRange(0,c):r.select(),document.execCommand("copy"));r.remove(),window.getSelection&&(o=window.getSelection())&&o.removeAllRanges&&o.removeAllRanges(),l?e(!0):n(new Error("execCommand failed"))}catch(e){n(e)}})}(e,n)}},{}]},{},[1]);

package/build/js/tradePro-rewards.min.js

@@ -1 +1 @@
-!function o(n,a,i){function d(t,e){if(!a[t]){if(!n[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=a[t]={exports:{}},n[t][0].call(r.exports,function(e){return d(n[t][1][e]||e)},r,r.exports,o,n,a,i)}return a[t].exports}for(var c="function"==typeof require&&require,e=0;e<i.length;e++)d(i[e]);return d}({1:[function(e,t,r){"use strict";var o=e("./utils/copy-to-clipboard"),n=window.Wick||{};n.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",copyToClipboardInit:function(){n.SnackBar.init(),$(n.TradeProRewards.el.buttonSelector).on("click",function(e){e.preventDefault(),e.stopPropagation();var t=$(this).parent().find("input"),r=t.val().trim();return t.removeAttr("disabled").attr("readonly","readonly"),(0,o.copyToClipboard)(r,e.currentTarget,{noUpperCase:!0}),t.attr("disabled","disabled").removeAttr("readonly"),window.getSelection().removeAllRanges(),n.SnackBar.show({text:n.TradeProRewards.message,type:n.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),!1})},init:function(){n.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){n.TradeProRewards.el.$tradeProRewards.length&&n.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(e,t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(e,t){var r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},o=$("<textarea>").css({position:"absolute",top:0,left:0,opacity:0});$(t).parent().append(o),t=r.noUpperCase?e:e.replace(/(^\w|\s\w)/g,function(e){return e.toUpperCase()});r=t.split(" ").filter(function(e){return""!==e}).join(" ");o.val(r),navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)?function(e){var e=e.get(0),t=e.contentEditable,r=e.readOnly,o=document.createRange(),n=window.getSelection();e.contentEditable=!0,e.readOnly=!1,o.selectNodeContents(e),n.removeAllRanges(),n.addRange(o),e.setSelectionRange(0,999999),e.contentEditable=t,e.readOnly=r}(o):navigator.userAgent.match(/ipad|ipod|iphone/i)?(o.select(),o[0].setSelectionRange(0,999999)):o.select();document.execCommand("copy"),o.remove()}},{}]},{},[1]);
+!function n(o,i,a){function c(e,t){if(!i[e]){if(!o[e]){var r="function"==typeof require&&require;if(!t&&r)return r(e,!0);if(u)return u(e,!0);throw(t=new Error("Cannot find module '"+e+"'")).code="MODULE_NOT_FOUND",t}r=i[e]={exports:{}},o[e][0].call(r.exports,function(t){return c(o[e][1][t]||t)},r,r.exports,n,o,i,a)}return i[e].exports}for(var u="function"==typeof require&&require,t=0;t<a.length;t++)c(a[t]);return c}({1:[function(t,e,r){"use strict";function L(t){return(L="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var u=t("./utils/copy-to-clipboard");function S(){S=function(){return a};var a={},t=Object.prototype,u=t.hasOwnProperty,l=Object.defineProperty||function(t,e,r){t[e]=r.value},e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",r=e.asyncIterator||"@@asyncIterator",o=e.toStringTag||"@@toStringTag";function i(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{i({},"")}catch(t){i=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o,i,a,c,e=e&&e.prototype instanceof p?e:p,e=Object.create(e.prototype),n=new x(n||[]);return l(e,"_invoke",{value:(o=t,i=r,a=n,c="suspendedStart",function(t,e){if("executing"===c)throw new Error("Generator is already running");if("completed"===c){if("throw"===t)throw e;return{value:void 0,done:!0}}for(a.method=t,a.arg=e;;){var r=a.delegate;if(r){r=function t(e,r){var n=r.method,o=e.iterator[n];if(void 0===o)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=void 0,t(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=new TypeError("The iterator does not provide a '"+n+"' method")),f;n=s(o,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,f;o=n.arg;return o?o.done?(r[e.resultName]=o.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=void 0),r.delegate=null,f):o:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,f)}(r,a);if(r){if(r===f)continue;return r}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if("suspendedStart"===c)throw c="completed",a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);c="executing";r=s(o,i,a);if("normal"===r.type){if(c=a.done?"completed":"suspendedYield",r.arg===f)continue;return{value:r.arg,done:a.done}}"throw"===r.type&&(c="completed",a.method="throw",a.arg=r.arg)}})}),e}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}a.wrap=c;var f={};function p(){}function d(){}function h(){}var e={},y=(i(e,n,function(){return this}),Object.getPrototypeOf),y=y&&y(y(E([]))),v=(y&&y!==t&&u.call(y,n)&&(e=y),h.prototype=p.prototype=Object.create(e));function g(t){["next","throw","return"].forEach(function(e){i(t,e,function(t){return this._invoke(e,t)})})}function w(a,c){var e;l(this,"_invoke",{value:function(r,n){function t(){return new c(function(t,e){!function e(t,r,n,o){var i,t=s(a[t],a,r);if("throw"!==t.type)return(r=(i=t.arg).value)&&"object"==L(r)&&u.call(r,"__await")?c.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):c.resolve(r).then(function(t){i.value=t,n(i)},function(t){return e("throw",t,n,o)});o(t.arg)}(r,n,t,e)})}return e=e?e.then(t,t):t()}})}function m(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function b(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function x(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(m,this),this.reset(!0)}function E(e){if(e||""===e){var r,t=e[n];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length))return r=-1,(t=function t(){for(;++r<e.length;)if(u.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t}).next=t}throw new TypeError(L(e)+" is not iterable")}return l(v,"constructor",{value:d.prototype=h,configurable:!0}),l(h,"constructor",{value:d,configurable:!0}),d.displayName=i(h,o,"GeneratorFunction"),a.isGeneratorFunction=function(t){t="function"==typeof t&&t.constructor;return!!t&&(t===d||"GeneratorFunction"===(t.displayName||t.name))},a.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,i(t,o,"GeneratorFunction")),t.prototype=Object.create(v),t},a.awrap=function(t){return{__await:t}},g(w.prototype),i(w.prototype,r,function(){return this}),a.AsyncIterator=w,a.async=function(t,e,r,n,o){void 0===o&&(o=Promise);var i=new w(c(t,e,r,n),o);return a.isGeneratorFunction(e)?i:i.next().then(function(t){return t.done?t.value:i.next()})},g(v),i(v,o,"Generator"),i(v,n,function(){return this}),i(v,"toString",function(){return"[object Generator]"}),a.keys=function(t){var e,r=Object(t),n=[];for(e in r)n.push(e);return n.reverse(),function t(){for(;n.length;){var e=n.pop();if(e in r)return t.value=e,t.done=!1,t}return t.done=!0,t}},a.values=E,x.prototype={constructor:x,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(b),!t)for(var e in this)"t"===e.charAt(0)&&u.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function t(t,e){return i.type="throw",i.arg=r,n.next=t,e&&(n.method="next",n.arg=void 0),!!e}for(var e=this.tryEntries.length-1;0<=e;--e){var o=this.tryEntries[e],i=o.completion;if("root"===o.tryLoc)return t("end");if(o.tryLoc<=this.prev){var a=u.call(o,"catchLoc"),c=u.call(o,"finallyLoc");if(a&&c){if(this.prev<o.catchLoc)return t(o.catchLoc,!0);if(this.prev<o.finallyLoc)return t(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return t(o.catchLoc,!0)}else{if(!c)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return t(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&u.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}var i=(o=o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc?null:o)?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,f):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),f},finish:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),b(r),f}},catch:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r,n,o=this.tryEntries[e];if(o.tryLoc===t)return"throw"===(r=o.completion).type&&(n=r.arg,b(o)),n}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:E(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),f}},a}function l(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}var s=window.Wick||{};s.TradeProRewards={el:{$tradeProRewards:$(".page_tradePro-rewards"),buttonSelector:".copy-tradePro-barcode"},message:"Code copied to clipboard",errorMessage:"Unable to copy. Please copy manually",copyToClipboardInit:function(){s.SnackBar.init(),$(document).on("click",s.TradeProRewards.el.buttonSelector,function(){c=S().mark(function t(e){var r,n,o,i,a;return S().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:if(e.preventDefault(),e.stopPropagation(),o=$(this),(o=o.parent().find("input")).length){t.next=6;break}return t.abrupt("return",!1);case 6:if(i=(o.val()||"").trim()){t.next=9;break}return t.abrupt("return",!1);case 9:return o.removeAttr("disabled").attr("readonly","readonly"),t.prev=10,t.next=13,(0,u.copyToClipboard)(i,e.currentTarget,{noUpperCase:!0});case 13:s.SnackBar.show({text:s.TradeProRewards.message,type:s.SnackBar.types.SUCCESS,withCloseButton:!1,autoClose:!0,delayBeforeClose:3e3}),t.next=20;break;case 16:t.prev=16,t.t0=t.catch(10);try{(a=o.get(0)).focus(),a.select(),a.setSelectionRange(0,999999)}catch(t){console.error(t)}s.SnackBar.show({text:s.TradeProRewards.errorMessage,type:s.SnackBar.types.ERROR,withCloseButton:!1,autoClose:!0,delayBeforeClose:4e3});case 20:return o.attr("disabled","disabled").removeAttr("readonly"),null!=(r=window.getSelection())&&null!=(n=r.removeAllRanges)&&n.call(r),t.abrupt("return",!1);case 23:case"end":return t.stop()}},t,this,[[10,16]])});var c,e=function(){var t=this,a=arguments;return new Promise(function(e,r){var n=c.apply(t,a);function o(t){l(n,e,r,o,i,"next",t)}function i(t){l(n,e,r,o,i,"throw",t)}o(void 0)})};return function(t){return e.apply(this,arguments)}}())},init:function(){s.TradeProRewards.copyToClipboardInit()}},$(document).ready(function(){s.TradeProRewards.el.$tradeProRewards.length&&s.TradeProRewards.init()})},{"./utils/copy-to-clipboard":2}],2:[function(t,e,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.copyToClipboard=function(t,e){var r=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},t=function(t,e){t=null==t?"":t+"";return(e.noUpperCase?t:t.replace(/(^\w|\s\w)/g,function(t){return t.toUpperCase()})).split(" ").filter(function(t){return""!==t}).join(" ").trim()}(t,r);if(!t)return Promise.reject(new Error("Empty text"));if(null!=(r=window.webkit)&&null!=(r=r.messageHandlers)&&r.copy)try{return window.webkit.messageHandlers.copy.postMessage(t),Promise.resolve(!0)}catch(t){console.error(t)}if(null!=(r=window.Android)&&r.copyToClipboard&&"function"==typeof window.Android.copyToClipboard)try{return window.Android.copyToClipboard(t),Promise.resolve(!0)}catch(t){console.error(t)}if(null!=(r=navigator.clipboard)&&r.writeText)return navigator.clipboard.writeText(t).then(function(){return!0});return function(u,l){return new Promise(function(t,e){try{var r,n=$(l).parent(),o=$("<textarea>").val(u).attr("readonly","readonly").css({position:"fixed",top:0,left:"-9999px",opacity:0,width:"1px",height:"1px",padding:0,border:0,margin:0}),i=(n.append(o),o.get(0)),a=(i.focus(),(i.value||"").length),c=("function"==typeof i.setSelectionRange?i.setSelectionRange(0,a):o.select(),document.execCommand("copy"));o.remove(),window.getSelection&&(r=window.getSelection())&&r.removeAllRanges&&r.removeAllRanges(),c?t(!0):e(new Error("execCommand failed"))}catch(t){e(t)}})}(t,e)}},{}]},{},[1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.105.0-develop.8",
+  "version": "2.105.0-develop.9",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "src/scss/**/*.{scss,css}": [
       "sass-lint-auto-fix",
       "prettier --write",
-      "sass-lint -c .sasslintrc"
+      "sass-lint -c .sasslintrc --"
     ]
   },
   "keywords": [

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/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/data/data_plp_load-more.json

@@ -381,7 +381,7 @@
       "currentPage": 0,
       "sort": null,
       "numberOfPages": 3,
-      "totalNumberOfResults": 65,
+      "totalNumberOfResults": 1818,
       "startPageItem": 1,
       "endPageItem": 0,
       "offset": 0,

package/src/elements/btn.hbs

@@ -0,0 +1,7 @@
+<button
+    class="{{class}}"
+    data-action="{{action}}"
+    {{#if ariaControls}}aria-controls="{{ariaControls}}"{{/if}}
+>
+  {{text}}
+</button>