Hotfix 0.1.6 (#78)

* Add popup animation

* 0.1.6

Author: ranndev

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' },

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;
 }

package-lock.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",

package.json

@@ -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;