From baa9566983da22b0165cf99cccedb7d3eea1f792 Mon Sep 17 00:00:00 2001
From: Rannie Peralta <24478046+ranndev@users.noreply.github.com>
Date: Sat, 30 Nov 2019 15:53:09 +0800
Subject: [PATCH 1/3] Hotfix 0.1.5 (#63)

* Fix type on umd gulp script

* 0.1.5
---
 package-lock.json | 2 +-
 package.json      | 2 +-
 tasks/js/umd.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62a874d..ada2f61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@ranndev/ui-guide",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index f9259b4..a978c71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ranndev/ui-guide",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Your UI guide helper for your application",
   "main": "./dist/js/cjs/index.js",
   "module": "./dist/js/esm/ui-guide.js",
diff --git a/tasks/js/umd.js b/tasks/js/umd.js
index 7111cb5..379e7d0 100644
--- a/tasks/js/umd.js
+++ b/tasks/js/umd.js
@@ -44,7 +44,7 @@ function transpile({ minified = false } = {}) {
         format: 'umd',
         name: config.js.rollup.browserName,
         sourcemap: true,
-        globals: { 'popper.js': 'Poppoer' },
+        globals: { 'popper.js': 'Popper' },
       }),
     );
 }

From 8ece263a66ff90682999e98c6fae70c67d616353 Mon Sep 17 00:00:00 2001
From: Rannie Peralta <rannieperalta092796@gmail.com>
Date: Sun, 1 Dec 2019 12:20:33 +0800
Subject: [PATCH 2/3] Add popup animation

---
 cypress/integration/highlight--popup.ts |  7 ++-
 cypress/templates/index.scss            |  5 +-
 themes/default.scss                     | 74 ++++++++++++++++++++++++-
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/cypress/integration/highlight--popup.ts b/cypress/integration/highlight--popup.ts
index 7786e51..2ce25db 100644
--- a/cypress/integration/highlight--popup.ts
+++ b/cypress/integration/highlight--popup.ts
@@ -16,9 +16,10 @@ describe('highlight - Popup', () => {
           if (!elements.popup) return;
 
           elements.popup.innerHTML = `
-            <span x-arrow></span>
-            <div uig-popup-card>Click Me!</div>
-            `;
+            <div uig-popup-wrapper>
+              <span x-arrow></span>
+              <div uig-popup-card>Click Me!</div>
+            </div>`;
         },
       },
       popper: { placement: 'right' },
diff --git a/cypress/templates/index.scss b/cypress/templates/index.scss
index 84702c8..21a2a4a 100644
--- a/cypress/templates/index.scss
+++ b/cypress/templates/index.scss
@@ -19,7 +19,10 @@ body {
   border: 1px solid darken(aliceblue, 10%);
 }
 
-[uig-highlight-box][uig-show] {
+// Disabled highlight & popup animation for tests.
+
+[uig-highlight-box][uig-show],
+[uig-popup-wrapper] {
   animation-delay: 0s !important;
   animation-duration: 0s !important;
 }
diff --git a/themes/default.scss b/themes/default.scss
index f3966f3..97a0300 100644
--- a/themes/default.scss
+++ b/themes/default.scss
@@ -9,7 +9,7 @@ $box-border-size: 3px !default;
   box-sizing: content-box !important;
   border: $box-border-size solid darken($theme-color, 5%);
   border-radius: 0.25rem;
-  box-shadow: 0 0 0 999rem rgba($theme-color, 0.1),
+  box-shadow: 0 0 0 999rem darken(rgba($theme-color, 0.15), 10%),
     0 0 0.25rem rgba($theme-color, 0.3);
   opacity: 0;
   will-change: padding, margin, opacity;
@@ -33,6 +33,78 @@ $box-border-size: 3px !default;
   }
 }
 
+[uig-popup-wrapper] {
+  position: relative;
+  display: flex;
+  max-width: 450px;
+  opacity: 0;
+  will-change: opacity, transform;
+
+  [uig-popup][uig-show][x-placement='top'] & {
+    animation: slide-top 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-top {
+      from {
+        transform: translateY(30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='right'] & {
+    animation: slide-right 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-right {
+      from {
+        transform: translateX(-30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='bottom'] & {
+    animation: slide-bottom 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-bottom {
+      from {
+        transform: translateY(-30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  [uig-popup][uig-show][x-placement='left'] & {
+    animation: slide-left 0.2s 0.3s ease-out forwards;
+
+    @keyframes slide-left {
+      from {
+        transform: translateX(30px);
+        opacity: 0;
+      }
+
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+
 span[x-arrow] {
   position: absolute;
   z-index: 2;

From e08eb0130b5ecedc2b126e7ab00a4141c72e7247 Mon Sep 17 00:00:00 2001
From: Rannie Peralta <rannieperalta092796@gmail.com>
Date: Sun, 1 Dec 2019 12:21:20 +0800
Subject: [PATCH 3/3] 0.1.6

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ada2f61..e002334 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@ranndev/ui-guide",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index a978c71..38013c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ranndev/ui-guide",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Your UI guide helper for your application",
   "main": "./dist/js/cjs/index.js",
   "module": "./dist/js/esm/ui-guide.js",