From b02cce196fa4bb4c7183d36d15f3ccce1c75b1cc Mon Sep 17 00:00:00 2001
From: Ogun Babacan <ogun.babacan@trendyol.com>
Date: Wed, 22 Nov 2023 23:38:58 +0300
Subject: [PATCH] fix(notification): card jumps down after swipe

---
 .../notification/bl-notification.test.ts      | 33 +++++++++++++++++++
 .../notification/bl-notification.ts           |  9 ++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/notification/bl-notification.test.ts b/src/components/notification/bl-notification.test.ts
index e48a59bc..a0ae5b57 100644
--- a/src/components/notification/bl-notification.test.ts
+++ b/src/components/notification/bl-notification.test.ts
@@ -492,6 +492,14 @@ describe("bl-notification", () => {
         await el.updateComplete;
 
         expect(removeSpy).to.not.have.been.called;
+        expect(notificationEl.style.transition).to.equal("transform 0.3s ease 0s");
+        expect(notificationEl.style.transform).to.equal("translateY(0px)");
+
+        notificationEl.dispatchEvent(new TransitionEvent("transitionend"));
+
+        await el.updateComplete;
+
+        expect(notificationEl.style.transition).to.equal("");
         expect(notificationEl.style.transform).to.equal("");
       });
 
@@ -566,6 +574,31 @@ describe("bl-notification", () => {
 
         expect(removeSpy).to.not.have.been.called;
       });
+
+      it("should set travel-distance property with current touch position", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          permanent: true,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, -150, notificationEl, "touchend");
+
+        assert.equal(notificationEl.style.getPropertyValue("--travel-distance"), "-160px");
+      });
     });
 
     describe("Animation", () => {
diff --git a/src/components/notification/bl-notification.ts b/src/components/notification/bl-notification.ts
index d5cbe20c..ce950f68 100644
--- a/src/components/notification/bl-notification.ts
+++ b/src/components/notification/bl-notification.ts
@@ -163,9 +163,16 @@ export default class BlNotification extends LitElement {
     const movedY = currentY - this.touchStartY;
 
     if (movedY < SWIPE_UP_THRESHOLD) {
+      currentTarget.style.setProperty("--travel-distance", `${movedY - 10}px`);
       this.removeNotification(currentTarget.id);
     } else {
-      currentTarget.style.transform = "";
+      currentTarget.style.transition = "transform 0.3s ease";
+      currentTarget.style.transform = "translateY(0px)";
+
+      currentTarget.addEventListener("transitionend", () => {
+        currentTarget.style.transition = "";
+        currentTarget.style.transform = "";
+      });
     }
 
     this.touchStartY = 0;