wickes-css2 2.93.0 → 2.94.0-develop.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.93.0",
+  "version": "2.94.0-develop.1",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/account-families/actions-bar.hbs

@@ -17,6 +17,9 @@
         {{#if close-modal}}
           data-dismiss="modal"
         {{/if}}
+        {{#if data-action}}
+          data-action="{{data-action}}"
+        {{/if}}
       >
         {{title}}
       </button>

package/src/components/aside-nav2.hbs

@@ -1,4 +1,4 @@
-<div class="aside-nav2__wrapper" {{#if active-index}}data-active-index="{{active-index}}"{{/if}}>
+<div class="aside-nav2__wrapper {{mod}}" {{#if active-index}}data-active-index="{{active-index}}"{{/if}}>
   <div class="aside-nav2">
     <div class="aside-holder">
         {{#each aside-list2}}

package/src/components/banner-news.hbs

@@ -0,0 +1,8 @@
+<div class="banner-news">
+  <div class="banner-news__content">
+    <span class="description">{{{description}}}</span>
+  </div>
+  <div class="banner-news__image">
+    <i class="{{classImg}}"></i>
+  </div>
+</div>

package/src/components/date-selection.hbs

@@ -1,76 +1,63 @@
-<div class="date-selection">
+<div class="date-selection {{#if hidden}}date-selection-hidden{{/if}}">
     <div class="date-selection__inner">
         <div class="delivery-date">
             <div class="calendar">
-                {{> delivery-selection mobile=true}}
-                <div class="calendar__month">March / April 2018</div>
+                <div class="calendar__head {{#if wisdom}}calendar__head-wisdom{{/if}}">
+                    <div class="calendar__month">Apr</div>
+                    {{#if wisdom}}
+                        {{#if latest}}
+                            <div class="calendar__switch calendar__switch-latest">
+                                Later Dates <i class="calendar__switch-icon far fa-chevron-right"></i>
+                            </div>
+                        {{/if}}
+                        {{#if earlier}}
+                            <div class="calendar__switch calendar__switch-earlier">
+                                <i class="calendar__switch-icon far fa-chevron-left"></i> Earlier Dates
+                            </div>
+                        {{/if}}
+                    {{/if}}
+                </div>
                 <div class="calendar__grid">
-                    <div class="calendar__row calendar__row_names">
-                        <span class="calendar__cell calendar__cell_head">Tue</span>
-                        <span class="calendar__cell calendar__cell_head">Wed</span>
-                        <span class="calendar__cell calendar__cell_head">Thu</span>
-                        <span class="calendar__cell calendar__cell_head">Fri</span>
-                        <span class="calendar__cell calendar__cell_head">Sat</span>
-                        <span class="calendar__cell calendar__cell_head">Sun</span>
-                        <span class="calendar__cell calendar__cell_head">Mon</span>
-                    </div>
-                    <div class="calendar__row">
-                        <div class="calendar__row_days">
-                            <span class="calendar__cell calendar__cell_cnt calendar__cell_inactive">13</span>
-                            <span class="calendar__cell calendar__cell_cnt">14</span>
-                            <span class="calendar__cell calendar__cell_cnt">15</span>
-                            <span class="calendar__cell calendar__cell_cnt">16</span>
-                            <span class="calendar__cell calendar__cell_cnt calendar__cell_inactive">17</span>
-                            <span class="calendar__cell calendar__cell_cnt">18</span>
-                            <span class="calendar__cell calendar__cell_cnt">19</span>
-                        </div>
-                        {{> calendar-time-table}}
-                    </div>
-                    <div class="calendar__row">
+                  <div class="calendar__row calendar__row_names">
+                    {{#each day_calendar}}
+                      <span class="calendar__cell calendar__cell_head">{{this}}</span>
+                    {{/each}}
+                  </div>
+                  {{#each calendar}}
+                    {{#if (eq (mod @index 7) 0)}}
+                      <div class="calendar__row">
                         <div class="calendar__row_days">
-                            <span class="calendar__cell calendar__cell_cnt">20</span>
-                            <span class="calendar__cell calendar__cell_cnt">21</span>
-                            <span class="calendar__cell calendar__cell_cnt">22</span>
-                            <span class="calendar__cell calendar__cell_cnt">23</span>
-                            <span class="calendar__cell calendar__cell_cnt calendar__cell_inactive">24</span>
-                            <span class="calendar__cell calendar__cell_cnt">25</span>
-                            <span class="calendar__cell calendar__cell_cnt">26</span>
+                    {{/if}}
+                          <span class="calendar__cell calendar__cell_cnt{{#if isInactive}} calendar__cell_inactive{{/if}}">{{day}}</span>
+                    {{#if (eq (mod_inc @index 7) 0)}}
                         </div>
-                        {{> calendar-time-table}}
-                    </div>
+                      </div>
+                    {{/if}}
+                  {{/each}}
+                  {{#unless wisdom}}
                     <div class="calendar__row">
                         <div class="calendar__row_days">
-                            <span class="calendar__cell calendar__cell_cnt">27</span>
-                            <span class="calendar__cell calendar__cell_cnt">28</span>
-                            <span class="calendar__cell calendar__cell_cnt">29</span>
-                            <span class="calendar__cell calendar__cell_cnt">30</span>
-                            <span class="calendar__cell calendar__cell_cnt calendar__cell_inactive">31</span>
-                            <span class="calendar__cell calendar__cell_cnt">1</span>
-                            <span class="calendar__cell calendar__cell_cnt">2</span>
+                          {{#each extraDays}}
+                            <span class="calendar__cell calendar__cell_cnt">{{ day }}</span>
+                          {{/each}}
                         </div>
-                        {{> calendar-time-table}}
-                    </div>
-                    <div class="calendar__row">
-                        <div class="calendar__row_days">
-                            <span class="calendar__cell calendar__cell_cnt">3</span>
-                            <span class="calendar__cell calendar__cell_cnt">4</span>
-                            <span class="calendar__cell calendar__cell_cnt">5</span>
-                            <span class="calendar__cell calendar__cell_cnt">6</span>
-                            <span class="calendar__cell calendar__cell_cnt calendar__cell_inactive">7</span>
-                            <span class="calendar__cell calendar__cell_cnt">8</span>
-                            <span class="calendar__cell calendar__cell_cnt">9</span>
-                        </div>
-                        {{> calendar-time-table}}
                     </div>
+                  {{/unless}}
                 </div>
+                {{#if calendar-message}}
+                    <div class="calendar__message">
+                        <span>Our delivery slots are currently available up to 7 days in advance.</span>
+                        <span>We release additional delivery slots daily.</span>
+                    </div>
+                {{/if}}
             </div>
         </div>
         <div class="delivery-time">
-            <div class="delivery-time__no-selection">
-                Please select a delivery date to choose appropriate delivery time
-            </div>
-            {{> delivery-types}}
-            {{> delivery-selection}}
+            {{> delivery-types
+                title=titleDelivery
+                subtitle=subtitleDelivery
+                classImg=imgDelivery
+            }}
         </div>
     </div>
 </div>

package/src/components/delivery-types.hbs

@@ -1,41 +1,21 @@
 <div class="delivery-types">
-    <div class="delivery-types__accordion">
-        <i class="fas fa-angle-up"></i>
-    </div>
-    <div class="delivery-types__inner" data-simplebar="init">
-        <div class="delivery-types__date">
-            Wed 04 Mar 2020
-        </div>
-        <div class="delivery-type">
-            <div class="delivery-types__name">
-                Standard delivery
-                {{> info-icon title="Standard delivery" data-placement="top" }}
-            </div>
-            <div class="delivery-types__error">
-                Please select an appropriate delivery time.
-            </div>
-            <ul class="delivery-types__slots">
-                <li class="delivery-types__slot">
-                    {{> radiobutton label="8:00am - 12:00pm" name="radio-slot" id="radio-standard"}}
-                    <span class="delivery-types__cost">£7.95</span>
-                </li>
-                <li class="delivery-types__slot">
-                    {{> radiobutton label="8:00am - 6:00pm" name="radio-slot" id="radio-standard"}}
-                    <span class="delivery-types__cost">Free</span>
-                </li>
-                <li class="delivery-types__slot">
-                    {{> radiobutton label="8:00am - 12:00pm" name="radio-slot" id="radio-standard"}}
-                    <span class="delivery-types__cost">£7.95</span>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <button class="btn btn-secondary btn_full delivery-types__confirm">
-        <span class="btn__text">Confirm</span>
+  <div class="delivery-types__inner delivery-container">
+    <button class="btn btn_full delivery-btn">
+      {{#if title}}
+        <span class="delivery-btn__content">
+              <span class="title">{{title}}</span>
+              <span class="subtitle">{{subtitle}}</span>
+            </span>
+        {{#if classImg}}
+          <span class="delivery-btn__image">
+            <i class="{{classImg}}"></i>
+          </span>
+        {{/if}}
+      {{else}}
+        <span class="delivery-btn__content">
+          <span class="title">7am - 7pm - Free</span>
+        </span>
+      {{/if}}
     </button>
-    <div class="delivery-time__show-calendar">
-        <a href="#" class="delivery-time__show-calendar-link">
-            Change the date and time
-        </a>
-    </div>
+  </div>
 </div>

package/src/components/my-account/active-orders/consignment-info.hbs

@@ -0,0 +1,11 @@
+<div class="consignment-info">
+  <p class="consignment-info__text">
+    Your order will be arriving in {{totalConsignments}} consignment(s),<br class="d-sm-none"> &nbsp;please find the details below
+    {{> info-icon
+      modification="icon-info"
+      title=orderTooltipText
+      data-placement="top"
+      data-container=".active-orders__item"
+    }}
+  </p>
+</div>

package/src/components/my-account/active-orders/header.hbs

@@ -0,0 +1,4 @@
+<div class="active-orders__header">
+  <h3 class="active-orders__title">{{title}}</h3>
+  <a class="btn btn_full btn-primary btn--all-orders d-none d-sm-block" rel="stylesheet" href="#">{{linkText}}</a>
+</div>

package/src/components/my-account/active-orders/list-orders.hbs

@@ -0,0 +1,9 @@
+<div class="active-orders">
+  {{> my-account/active-orders/header}}
+
+  {{#each orders}}
+    {{> my-account/active-orders/order switch-vat=../switch-vat}}
+  {{/each}}
+
+  <a class="btn btn_full btn-primary btn--all-orders d-sm-none" rel="stylesheet" href="#">{{linkText}}</a>
+</div>

package/src/components/my-account/active-orders/order-details.hbs

@@ -0,0 +1,18 @@
+<section class="order-details">
+  <div class="order-details__summary">
+    {{#if switch-vat}}
+      <div class="including-vat">
+        <span class="order-details__price">£{{totalPrice}}</span>
+        <div class="price-vat order-details__vat">Inc.VAT</div>
+      </div>
+      <div class="excluding-vat d-none">
+        <span class="order-details__price">£{{totalPrice}}</span>
+        <div class="price-vat order-details__vat">Exc.VAT</div>
+      </div>
+    {{else}}
+      <span class="order-details__price">£{{totalPrice}}</span>
+    {{/if}}
+    <span class="order-details__count">{{totalItemCount}} item(s)</span>
+  </div>
+  <time class="order-details__date" datetime="{{orderDate}}">{{orderDate}}</time>
+</section>

package/src/components/my-account/active-orders/order-header.hbs

@@ -0,0 +1,7 @@
+<header class="order-header">
+  <h3 class="order-header__title">Order {{orderId}}</h3>
+  <div class="order-header__status">
+    <i class="{{orderStatus.statusIcon}} icon"></i>
+    <span>{{orderStatus.statusTitle}}</span>
+  </div>
+</header>

package/src/components/my-account/active-orders/order.hbs

@@ -0,0 +1,20 @@
+<article class="active-orders__item">
+  {{> my-account/active-orders/order-header}}
+
+  {{> my-account/active-orders/order-details switch-vat=switch-vat}}
+
+  {{> my-account/active-orders/consignment-info}}
+
+  <section class="shipment-details">
+    {{#each shipmentDetails}}
+      {{> my-account/active-orders/shipment-detail}}
+    {{/each}}
+  </section>
+
+  <div class="view-more">
+    <a class="link" href="/">
+      <span>View More</span>
+      <i class="fas fa-arrow-right icon"></i>
+    </a>
+  </div>
+</article>

package/src/components/my-account/active-orders/shipment-detail.hbs

@@ -0,0 +1,13 @@
+<div class="shipment">
+  <span class="shipment__icon">
+    <i class="{{shipmentIcon}} icon"></i>
+  </span>
+  <div class="shipment__content">
+    <h5 class="shipment__title">{{shipmentTitle}}</h5>
+    <span class="shipment__info">{{shipmentInfo}}</span>
+    <span class="shipment__count">{{itemsCount}} item(s)</span>
+    {{#if trackingLink}}
+      <a href="{{trackingLink}}" target="_blank" class="track-link">Track</a>
+    {{/if}}
+  </div>
+</div>

package/src/components/my-account/barcode.hbs

@@ -0,0 +1,17 @@
+<div class="barcode">
+  <div class="barcode__discount">
+    <img src="{{discountSrc}}" />
+  </div>
+  <div class="barcode__content">
+    {{#if customIcon}}
+      {{{customIcon}}}
+    {{else}}
+      <i class="fas fa-user-hard-hat"></i>
+    {{/if}}
+    <p>{{my_account.user.title}} {{my_account.user.name}} {{my_account.user.surname}}</p>
+  </div>
+  <div class="barcode__image">
+    {{{ my_account.icons.barcode }}}
+  </div>
+  <p class="barcode__code">{{{ my_account.barcode }}}</p>
+</div>

package/src/components/my-account/clipboard-code-card.hbs

@@ -0,0 +1,16 @@
+<div class="clipboard-code {{mod}}">
+  {{#if customIcon}}
+    {{{customIcon}}}
+  {{else}}
+    <i class="{{icon}} icon"></i>
+  {{/if}}
+  <div class="clipboard-code__content">
+    <p class="title">{{title}}</p>
+    <div class="clipboard-code__cta">
+      <span class="subtitle">{{code}}</span>
+      <button class="btn btn--icon btn--{{mod}}">
+        <i class="fas fa-copy icon-copy"></i>
+      </button>
+    </div>
+  </div>
+</div>

package/src/components/my-account/contact-us.hbs

@@ -0,0 +1,23 @@
+<div class="contacts">
+  {{#each contacts}}
+    <div class="contacts__item">
+      <div class="contacts__header">
+        <span class="contacts__icon">
+          <i class="{{this.icon}} icon"></i>
+        </span>
+        <h3 class="contacts__title">{{this.title}}</h3>
+      </div>
+      <p class="contacts__description">{{this.description}}</p>
+      {{#if this.links}}
+        <ul class="contacts__links">
+          {{#each this.links}}
+            <li>
+              <a class="link" href="{{this.url}}">{{this.title}}</a>
+            </li>
+          {{/each}}
+        </ul>
+      {{/if}}
+      <a class="btn btn-primary" href="{{this.link.url}}">{{this.link.title}}</a>
+    </div>
+  {{/each}}
+</div>

package/src/components/my-account/discount.hbs

@@ -0,0 +1,11 @@
+<div class="discount">
+  <div class="discount__content">
+    <i class="icon fas fa-barcode-alt"></i>
+
+    <div class="discount__code">
+      <p class="title">{{title}}</p>
+      <span class="subtitle">{{code}}</span>
+    </div>
+  </div>
+  {{> my-account/barcode }}
+</div>

package/src/components/my-account/greetings.hbs

@@ -0,0 +1,7 @@
+<div class="greetings">
+  <div>
+    <h2 class="title">Hi {{name}}!</h2>
+    <p class="subtitle">{{subtitle}}</p>
+  </div>
+  {{> my-account/user-account-actions mod="d-none d-sm-flex" }}
+</div>

package/src/components/my-account/leave-modal.hbs

@@ -0,0 +1,13 @@
+{{#extend "modal" classMod="details-modal" title=title showCloseBtn=true backdrop=true}}
+  {{#content "header"}}
+    <i class="{{headerIcon}} info-icon"></i>
+  {{/content}}
+  {{#content "sections"}}
+    {{#extend "modal-body-section"}}
+      {{#content "body"}}
+        <p class="description">{{{description}}}</p>
+        {{> account-families/actions-bar actions}}
+      {{/content}}
+    {{/extend}}
+  {{/content}}
+{{/extend}}

package/src/components/my-account/menu-items.hbs

@@ -0,0 +1,25 @@
+<nav class="menu">
+  <ul class="menu__list">
+    {{#each (skipFirst items)}}
+      <li class="menu__item">
+        <a class="menu__link" href="#">
+          <div class="menu__header">
+            <span class="menu__icon">
+              <i class="{{this.icon}} icon" aria-hidden="true"></i>
+            </span>
+            <h3 class="menu__title">
+              {{this.title}}
+              {{#if this.total}}
+                <span class="menu__total">{{this.total}}</span>
+              {{/if}}
+            </h3>
+            <span class="menu__icon menu__icon--arrow">
+              <i class="far fa-angle-right icon icon-arrow"></i>
+            </span>
+          </div>
+          <p class="menu__description">{{this.description}}</p>
+        </a>
+      </li>
+    {{/each}}
+  </ul>
+</nav>

package/src/components/my-account/mobile-nav.hbs

@@ -0,0 +1,46 @@
+<div class="account-nav {{mod}}" {{#if (eq @index ../active-index)}}data-active-index="{{active-index}}"{{/if}}>
+  <div class="account-nav__toggle accordion accordion_collapsed">
+    <div class="accordion__header" role="link" aria-expanded="false">
+      <span class="account-nav__icon">
+        {{#each menu}}
+          {{#if (eq @index ../active-index)}}
+            {{#if customIcon}}
+              {{{icon}}}
+            {{else}}
+              <i class="{{icon}} icon"></i>
+            {{/if}}
+          {{/if}}
+        {{/each}}
+      </span>
+      <span class="accordion__header-text">{{page-name}}</span>
+      <span class="icon accordion__header-icon">
+        <i class="fas fa-angle-up"></i>
+      </span>
+    </div>
+    <div class="accordion__content" aria-describedby="dropdown" style="display: none;">
+      <div class="accordion__holder" id="dropdown">
+        <div class="account-nav__holder">
+          <ul class="account-nav__list">
+            {{#each menu}}
+              <li class="account-nav__item">
+                <a class="account-nav__link" data-index="{{@index}}" href="{{link}}">
+                  <span class="account-nav__icon">
+                    {{#if customIcon}}
+                      {{{icon}}}
+                    {{else}}
+                      <i class="{{icon}} icon"></i>
+                    {{/if}}
+                  </span>
+                  {{title}}
+                  {{#if total}}
+                    <span class="rewards">{{total}}</span>
+                  {{/if}}
+                </a>
+              </li>
+            {{/each}}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/my-account/personal-details-form.hbs

@@ -0,0 +1,24 @@
+<form action="#" class="user-form d-none">
+  <label class="form-row__label form-row__label_required user-form__required-field" for="#">Required Field</label>
+  {{#each fields}}
+    {{> form-row
+      type=this.type
+      dropdown=this.dropdown
+      id=this.id
+      label=this.label
+      value=this.value
+      placeholder=this.placeholder
+      required=this.required
+      row-mod=this.rowMod
+      options=this.options
+      selectedIndex=this.selectedIndex
+    }}
+  {{/each}}
+  <div class="user-form__ctas">
+    {{#each buttons}}
+      <button class="{{this.class}}" type="{{this.type}}" data-action="{{this.dataAction}}">
+        <span class="btn__text">{{this.text}}</span>
+      </button>
+    {{/each}}
+  </div>
+</form>

package/src/components/my-account/personal-details.hbs

@@ -0,0 +1,14 @@
+<div class="user-information">
+  <ul class="user-information__list">
+    {{#each details}}
+      <li class="user-information__item">
+        <label class="user-information__label" for="#">{{@key}}</label>
+        <p class="user-information__value">{{this}}</p>
+      </li>
+    {{/each}}
+  </ul>
+  <button class="btn btn-primary btn_full btn__edit">
+    <i class="fas fa-pen icon"></i>
+    Edit Personal Details
+  </button>
+</div>

package/src/components/my-account/user-account-actions.hbs

@@ -0,0 +1,18 @@
+<ul class="account-actions__list {{mod}}">
+  <li class="account-actions__item">
+    <a class="account-actions__link" href="#">
+      <span class="icon">
+        <i class="fas fa-key"></i>
+      </span>
+      Change Password
+    </a>
+  </li>
+  <li class="account-actions__item">
+    <a class="account-actions__link" href="#">
+      <span class="icon">
+        <i class="fas fa-sign-out"></i>
+      </span>
+      Log out
+    </a>
+  </li>
+</ul>

package/src/components/user-information-field.hbs

@@ -0,0 +1,4 @@
+<li class="user-information__item">
+  <label class="user-information__label">{{label}}</label>
+  <p class="user-information__value">{{value}}</p>
+</li>

package/src/components.html

@@ -191,6 +191,7 @@
         <div class="content">
           {{#with page_order-details.lines.[0]}}
             {{>order-line}}
+
           {{/with}}
         </div>
       </div>