Quick Add bulk (#3217)

assets/base.css

@@ -574,6 +574,7 @@ details > * {
   --duration-medium: 300ms;
   --duration-long: 500ms;
   --duration-extra-long: 600ms;
+  --duration-extra-longer: 750ms;
   --duration-extended: 3s;
   --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
   --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;

assets/component-cart-drawer.css

@@ -383,7 +383,7 @@ cart-drawer-items::-webkit-scrollbar-track-piece {
 
 .cart-drawer .quantity-popover__info.global-settings-popup {
   transform: translateY(0);
-  right: 0;
+  top: 100%;
 }
 
 .cart-drawer .cart-item__error {

assets/component-progress-bar.css

@@ -0,0 +1,33 @@
+.progress-bar-container {
+  width: 100%;
+  margin: auto;
+}
+
+.progress-bar {
+  height: 0.13rem;
+  width: 100%;
+}
+
+.progress-bar-value {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(var(--color-foreground));
+  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
+  transform-origin: 0;
+}
+
+.progress-bar .progress-bar-value {
+  display: block;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(-20%) scaleX(0);
+  }
+  40% {
+    transform: translateX(30%) scaleX(0.7);
+  }
+  100% {
+    transform: translateX(100%) scaleX(0);
+  }
+}

assets/global.js

@@ -231,16 +231,28 @@ class QuantityInput extends HTMLElement {
     event.preventDefault();
     const previousValue = this.input.value;
 
-    event.target.name === 'plus' ? this.input.stepUp() : this.input.stepDown();
+    if (event.target.name === 'plus') {
+      if ((parseInt(this.input.dataset.min) > parseInt(this.input.step)) && this.input.value == 0) {
+        this.input.value = this.input.dataset.min;
+      } else {
+        this.input.stepUp()
+      } 
+    } else {
+      this.input.stepDown();
+    }
+
     if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent);
+
+    if ((this.input.dataset.min === previousValue) &&  event.target.name === 'minus') {
+      this.input.value = parseInt(this.input.min);
+    }
   }
 
   validateQtyRules() {
     const value = parseInt(this.input.value);
     if (this.input.min) {
-      const min = parseInt(this.input.min);
       const buttonMinus = this.querySelector(".quantity__button[name='minus']");
-      buttonMinus.classList.toggle('disabled', value <= min);
+      buttonMinus.classList.toggle('disabled', parseInt(value) <= parseInt(this.input.min));
     }
     if (this.input.max) {
       const max = parseInt(this.input.max);

assets/quantity-popover.css

@@ -8,7 +8,7 @@ quantity-popover volume-pricing li:nth-child(odd) {
 }
 
 quantity-popover volume-pricing li {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
   letter-spacing: 0.06rem;
   padding: 0.6rem 0.8rem;
   display: flex;
@@ -58,9 +58,18 @@ quantity-popover quick-order-list-remove-button .button {
   padding-left: 1rem;
 }
 
+.quantity-popover__info-button--icon-only--animation svg {
+  transform: scale(1.25);
+}
+
+.quantity-popover__info-button--icon-only svg {
+  transition: transform var(--duration-default) ease;
+}
+
 @media screen and (max-width: 989px) {
   .quantity-popover__info.global-settings-popup {
     left: 0;
+    top: 100%;
   }
 
   .quantity-popover__info-button {
@@ -119,17 +128,12 @@ quantity-popover .quantity__rules span:first-of-type {
 }
 
 @media screen and (min-width: 990px) {
-  .quantity-popover-container--hover:hover {
-    background-color: rgba(var(--color-foreground), 0.03);
-    border-radius: var(--inputs-radius-outset);
-  }
-
   .quantity-popover-container--empty {
     margin-right: 2.7rem;
   }
 
   .quantity-popover__info.global-settings-popup {
-    width: 27rem;
+    width: 20rem;
   }
 
   .quantity-popover-container {
@@ -138,14 +142,11 @@ quantity-popover .quantity__rules span:first-of-type {
   }
 
   .quantity-popover__info.global-settings-popup {
-    transform: translateY(1rem);
+    transform: translateX(-100%);
+    top: 0.5rem;
   }
 }
 
-quantity-popover:has(.quantity__input:focus-visible) .quantity-popover__info {
-  display: block;
-}
-
 quantity-popover .quantity {
   background: rgb(var(--color-background));
 }
@@ -162,3 +163,4 @@ quantity-popover .quantity__button:not(:focus-visible):not(.focused),
 quantity-popover .quantity__input:not(:focus-visible):not(.focused) {
   background-color: initial;
 }
+

assets/quantity-popover.js

@@ -10,15 +10,14 @@ if (!customElements.get('quantity-popover')) {
         this.infoButtonMobile = this.querySelector('.quantity-popover__info-button--icon-with-label');
         this.popoverInfo = this.querySelector('.quantity-popover__info');
         this.closeButton = this.querySelector('.button-close');
-        this.variantInfo = this.querySelector('.quantity-popover-container');
         this.eventMouseEnterHappened = false;
 
         if (this.closeButton) {
           this.closeButton.addEventListener('click', this.closePopover.bind(this));
         }
 
-        if (this.popoverInfo && this.infoButtonDesktop && this.mql.matches) {
-          this.popoverInfo.addEventListener('mouseenter', this.closePopover.bind(this));
+        if (this.popoverInfo && this.infoButtonDesktop && this.mqlTablet.matches) {
+          this.popoverInfo.addEventListener('mouseleave', this.closePopover.bind(this));
         }
 
         if (this.infoButtonDesktop) {
@@ -28,12 +27,11 @@ if (!customElements.get('quantity-popover')) {
 
         if (this.infoButtonMobile) {
           this.infoButtonMobile.addEventListener('click', this.togglePopover.bind(this));
-          this.infoButtonMobile.addEventListener('focusout', this.closePopover.bind(this));
         }
 
         if (this.infoButtonDesktop && this.mqlTablet.matches) {
-          this.variantInfo.addEventListener('mouseenter', this.togglePopover.bind(this));
-          this.variantInfo.addEventListener('mouseleave', this.closePopover.bind(this));
+          this.infoButtonDesktop.addEventListener('mouseenter', this.togglePopover.bind(this));
+          this.infoButtonDesktop.addEventListener('mouseleave', this.closePopover.bind(this));
         }
       }
 
@@ -48,29 +46,40 @@ if (!customElements.get('quantity-popover')) {
         const button = this.infoButtonDesktop && this.mql.matches ? this.infoButtonDesktop : this.infoButtonMobile;
         const isExpanded = button.getAttribute('aria-expanded') === 'true';
 
-        button.setAttribute('aria-expanded', !isExpanded);
+        if ((this.mql.matches && !isExpanded) || event.type === 'click') {
+          button.setAttribute('aria-expanded', !isExpanded);
+
+          this.popoverInfo.toggleAttribute('hidden');
+
+          button.classList.toggle('quantity-popover__info-button--open');
 
-        this.popoverInfo.toggleAttribute('hidden');
+          this.infoButtonDesktop.classList.add('quantity-popover__info-button--icon-only--animation')
+        }
 
         const isOpen = button.getAttribute('aria-expanded') === 'true';
 
-        button.classList.toggle('quantity-popover__info-button--open');
-
         if (isOpen && event.type !== 'mouseenter') {
           button.focus();
+          button.addEventListener('keyup', (e) => {
+            if (e.key === 'Escape') {
+              this.closePopover(e)
+            }
+          })
         }
       }
 
       closePopover(event) {
         event.preventDefault();
-        const isChild = this.variantInfo.contains(event.relatedTarget);
+        const isButtonChild = this.infoButtonDesktop.contains(event.relatedTarget);
+        const isPopoverChild = this.popoverInfo.contains(event.relatedTarget)
 
         const button = this.infoButtonDesktop && this.mql.matches ? this.infoButtonDesktop : this.infoButtonMobile;
 
-        if (!event.relatedTarget || !isChild) {
+        if (!isButtonChild && !isPopoverChild) {
           button.setAttribute('aria-expanded', 'false');
           button.classList.remove('quantity-popover__info-button--open');
           this.popoverInfo.setAttribute('hidden', '');
+          this.infoButtonDesktop.classList.remove('quantity-popover__info-button--icon-only--animation')
         }
 
         this.eventMouseEnterHappened = false;