wickes-css2 2.113.0-develop.7 → 2.113.0-develop.9

package/src/page_product-details-tile-steps-logout.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-no-new-project-list.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps-with-klarna.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-tile-steps.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-v2.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-vat.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-wisdom-mcfc-registered.html

@@ -6,9 +6,7 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-mcfc.html

@@ -6,9 +6,7 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 }}

package/src/page_product-details-wisdom-oos-registered.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-oos.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom-registered.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-wisdom.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

package/src/page_product-details-with-favourite.html

@@ -5,9 +5,7 @@
           isCashback=false
           isSize=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           step3=true
           currentlyInStock=true
           pagePdp=true

package/src/page_product-details-with-global-search-v2.html

@@ -6,13 +6,12 @@ isCashback=false
 isSize=true
 isGuide=true
 hourly-delivery=true
-badge-text='15% off'
-badge-color='yellow'
-badge-text-color='gray'
+badges=pdp-price-badges.yellowGrayText
 currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
 switch-vat=true
+isWhyNotAdd=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/page_product-details-with-why-not-add-single.html

@@ -13,6 +13,7 @@ currentlyInStock=true
 pagePdp=true
 globalSearchV2="true"
 switch-vat=true
+isWhyNotAdd=true
 }}
 {{#content "head" mode="append" pagePdp=true}}
 <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">

package/src/page_product-details_no-previous-default.html

@@ -6,9 +6,7 @@
           isSize=true
           isGuide=true
           hourly-delivery=true
-          badge-text='15% off'
-          badge-color='yellow'
-          badge-text-color='gray'
+          badges=pdp-price-badges.yellowGrayText
           currentlyInStock=true
           pagePdp=true
 }}

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

@@ -286,6 +286,35 @@
       }
     }
   }
+
+  .rapid-info-icon {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: bottom;
+    pointer-events: auto;
+    margin-left: 4px;
+    cursor: pointer;
+    color: $white;
+    font-size: 1rem;
+
+    [data-prefix='fas'],
+    [data-prefix='far'] {
+      color: $white;
+    }
+
+    &:hover {
+      opacity: 0.8;
+
+      [data-prefix='far'] {
+        color: $white;
+      }
+    }
+  }
+
+  &__image {
+    position: absolute;
+    right: 12px;
+  }
 }
 
 .delivery-container {

package/src/scss/components/_image-accordion.scss

@@ -0,0 +1,54 @@
+.image-accordion {
+  padding-bottom: 8px;
+  border-bottom: 1px solid $gray;
+
+  &__preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    & img {
+      flex-basis: calc((100% - 40px) / 6);
+      min-width: 45px;
+    }
+  }
+
+  &__content {
+    margin-bottom: 8px;
+  }
+
+  &__header {
+    position: relative;
+    margin-bottom: 0;
+    padding-left: 32px;
+    color: $blue;
+    cursor: pointer;
+
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 18px;
+  }
+
+  &:not(.image-accordion--collapsed) {
+    .image-accordion__preview {
+      display: none;
+    }
+  }
+
+  &--collapsed {
+    & .image-accordion__header {
+      & > .image-accordion__icon {
+        & > .fa-angle-up {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+}

package/src/scss/components/_kitchen-card.scss

@@ -49,6 +49,7 @@
 
   &__title {
     margin-bottom: 0;
+    user-select: none;
   }
 
   &__parameters {

package/src/scss/components/_package-card.scss

@@ -0,0 +1,63 @@
+.package-card {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 5;
+  gap: 0;
+
+  border: 1px solid $gray;
+  border-radius: 4px;
+
+  &.has-stickers-row {
+    grid-row: span 6;
+
+    .package-card__content {
+      grid-row: span 5;
+    }
+  }
+
+  &__image {
+    width: 100%;
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-row: span 4;
+    row-gap: 12px;
+    padding: 16px;
+  }
+
+  &__title {
+    margin-bottom: 0;
+  }
+
+  &__usp {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-item {
+      display: flex;
+      align-items: baseline;
+      column-gap: 8px;
+    }
+  }
+
+  &__icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  &__price,
+  &__button {
+    align-self: end;
+  }
+
+  &__stickers {
+    min-width: 0;
+  }
+}

package/src/scss/components/_package-plp.scss

@@ -0,0 +1,88 @@
+.package-plp {
+  margin-bottom: 24px;
+
+  &__cards {
+    display: flex;
+    flex-direction: column;
+    row-gap: 16px;
+    margin-top: 16px;
+    margin-bottom: 32px;
+
+    .card-product-banner,
+    .card-sponsor-banner,
+    .card-bloomreach-media-banner {
+      flex: unset;
+      max-width: initial;
+      width: 100%;
+      margin-bottom: 0;
+      padding: 0;
+      grid-row: span 5;
+      align-self: start;
+
+      &.has-stickers-row {
+        grid-row: span 6;
+      }
+
+      &__link {
+        padding: 0;
+        display: block;
+        height: max-content;
+      }
+
+      &__picture {
+        display: block;
+      }
+
+      &__image {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    &__container {
+      display: flex;
+      column-gap: 32px;
+    }
+
+    &__search-filter {
+      min-width: 210px;
+    }
+
+    &__content {
+      flex-basis: 100%;
+    }
+
+    &__cards {
+      row-gap: 24px;
+      margin-top: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .package-plp {
+    margin-bottom: 40px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .package-plp {
+    &__cards {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 24px;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .package-plp {
+    &__cards {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}

package/src/scss/components/_postcode-checker.scss

@@ -0,0 +1,115 @@
+.postcode-checker {
+  padding: 16px;
+  background-color: $white;
+  border: 1px solid $gray;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "title"
+  "field"
+  "error"
+  "action";
+  gap: 8px 16px;
+
+  &__title {
+    grid-area: title;
+    margin-bottom: 8px;
+  }
+
+  &__field {
+    grid-area: field;
+  }
+
+  &__action {
+    grid-area: action;
+    margin-top: 8px;
+  }
+
+  &__input {
+    display: block;
+    width: 100%;
+    outline: none;
+  }
+
+  &__error {
+    grid-area: error;
+    display: none;
+    color: $red;
+    margin-bottom: 0;
+    line-height: 1rem;
+    font-size: 0.75rem;
+  }
+
+  &--error {
+    .postcode-checker__input {
+      border-color: $red;
+    }
+
+    .postcode-checker__error {
+      display: block;
+    }
+  }
+
+  &__button {
+    margin-top: 0;
+  }
+
+  &--mobile-only {
+    display: grid;
+  }
+
+  &--desktop-only {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .postcode-checker {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+    "title"
+    "field"
+    "error"
+    "action";
+
+    &__action {
+      margin-top: 8px;
+    }
+
+    &--mobile-only {
+      display: none;
+    }
+
+    &--desktop-only {
+      display: grid;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .postcode-checker {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+    "title  title"
+    "field  action"
+    "error  error";
+
+    &__action {
+      margin-top: 0;
+    }
+  }
+}

package/src/scss/components/_price-badges-critical.scss

@@ -4,6 +4,16 @@
       width: 140px;
       padding: 0;
 
+      &.pdp__badges--static .pdp__badge {
+        min-width: auto;
+        padding: 4px 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        line-height: 1.375rem;
+      }
+
       &-cashback {
         width: auto;
         padding: 0 10px;

package/src/scss/components/_price-badges.scss

@@ -4,6 +4,16 @@
       width: 140px;
       padding: 0;
 
+      &.pdp__badges--static .pdp__badge {
+        min-width: auto;
+        padding: 4px 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.875rem;
+        line-height: 1.375rem;
+      }
+
       &-cashback {
         width: auto;
         padding: 0 10px;

package/src/scss/components/_price-block-critical.scss

@@ -69,6 +69,7 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
+    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;

package/src/scss/components/_price-block.scss

@@ -114,6 +114,7 @@
   .pdp-price-sale__value .pdp-price__old-price {
     color: $warm-grey;
     font-weight: 500;
+    line-height: 1rem;
 
     s {
       text-decoration-color: $line-through;