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 192b66ade5650caf023ae37f2c06ca1fe12a41d7 Mon Sep 17 00:00:00 2001
From: Rannie Peralta <24478046+ranndev@users.noreply.github.com>
Date: Sun, 1 Dec 2019 12:34:54 +0800
Subject: [PATCH 2/3] Hotfix 0.1.6 (#78)
* Add popup animation
* 0.1.6
---
cypress/integration/highlight--popup.ts | 7 ++-
cypress/templates/index.scss | 5 +-
package-lock.json | 2 +-
package.json | 2 +-
themes/default.scss | 74 ++++++++++++++++++++++++-
5 files changed, 83 insertions(+), 7 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 = `
-
- Click Me!
- `;
+ `;
},
},
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/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",
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 76589039a40ce0824f8fa93fe70cb38254672bfe Mon Sep 17 00:00:00 2001
From: Rannie Peralta
Date: Sun, 1 Dec 2019 22:23:10 +0800
Subject: [PATCH 3/3] 0.2.0
---
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 e002334..1e1abe0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@ranndev/ui-guide",
- "version": "0.1.6",
+ "version": "0.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 3db8bdc..5906468 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ranndev/ui-guide",
- "version": "0.1.6",
+ "version": "0.2.0",
"description": "A programmatic way of making highlight guide",
"main": "./dist/js/cjs/index.js",
"module": "./dist/js/esm/ui-guide.js",