From 9979a6066b482f871a6be450d68c1d39de41c409 Mon Sep 17 00:00:00 2001 From: Rannie Peralta Date: Sat, 30 Nov 2019 15:42:53 +0800 Subject: [PATCH 01/11] Fix type on umd gulp script --- tasks/js/umd.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6ff308ebf680d810ce5f7ee38b3e59329614a04b Mon Sep 17 00:00:00 2001 From: Rannie Peralta Date: Sat, 30 Nov 2019 15:44:58 +0800 Subject: [PATCH 02/11] 0.1.5 --- 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 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", From b5b619e87685142032eec979938971689f8709e1 Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sat, 30 Nov 2019 20:11:20 +0800 Subject: [PATCH 03/11] Update issue templates (#69) * Hotfix 0.1.5 (#63) * Fix type on umd gulp script * 0.1.5 * Update issue templates --- .github/ISSUE_TEMPLATE/bug_report.md | 38 +++++++++++++++++++++++ .github/ISSUE_TEMPLATE/custom.md | 10 ++++++ .github/ISSUE_TEMPLATE/feature_request.md | 20 ++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/custom.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..5b0a804 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,38 @@ +--- +name: Bug report +about: Create a report to help us improve +title: "[BUG]" +labels: bug +assignees: '' + +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + - OS: [e.g. iOS] + - Browser [e.g. chrome, safari] + - Version [e.g. 22] + +**Smartphone (please complete the following information):** + - Device: [e.g. iPhone6] + - OS: [e.g. iOS8.1] + - Browser [e.g. stock browser, safari] + - Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md new file mode 100644 index 0000000..48d5f81 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -0,0 +1,10 @@ +--- +name: Custom issue template +about: Describe this issue template's purpose here. +title: '' +labels: '' +assignees: '' + +--- + + diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..e0c0168 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,20 @@ +--- +name: Feature request +about: Suggest an idea for this project +title: "[FEATURE]" +labels: '' +assignees: '' + +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. From a24870efb0505c92bc57cc4edd12d1fce4b8c255 Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sat, 30 Nov 2019 20:44:25 +0800 Subject: [PATCH 04/11] Add pull request template (#70) --- .github/PULL_REQUEST_TEMPLATE.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/PULL_REQUEST_TEMPLATE.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..c042827 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,31 @@ +(Thanks for sending a pull request!) + +## Proposed changes + +Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. + +## Related issues + +If it fixes a bug or resolves a feature request, be sure to link to that issue. + +## Types of changes + +What types of changes does your code introduce to UIGuide? +_Put an `x` in the boxes that apply_ + +- [ ] Bugfix (non-breaking change which fixes an issue) +- [ ] New feature (non-breaking change which adds functionality) +- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] Documentation Update (if none of the other choices apply) + +## Checklist + +_Put an `x` in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code._ + +- [ ] I have read the [CONTRIBUTING](https://github.com/ranndev/ui-guide/CONTRIBUTING.md) doc +- [ ] I have added tests that prove my fix is effective or that my feature works +- [ ] I have added necessary documentation (if appropriate) + +## Further comments + +If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... From dfc7a5d844177dc8e9176fb25804f28346fa2159 Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sat, 30 Nov 2019 22:53:06 +0800 Subject: [PATCH 05/11] Add test for configuring/disabling default autofocus ability (#75) --- cypress/integration/configure--autofocus.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 cypress/integration/configure--autofocus.ts diff --git a/cypress/integration/configure--autofocus.ts b/cypress/integration/configure--autofocus.ts new file mode 100644 index 0000000..2e6bb50 --- /dev/null +++ b/cypress/integration/configure--autofocus.ts @@ -0,0 +1,18 @@ +import UIGuide from '../../src/ui-guide'; + +describe('configure - autofocus', () => { + let uiguide: typeof UIGuide; + + before(() => { + cy.visit('/').then((contentWindow) => { + uiguide = contentWindow.__LIBRARY__['ui-guide'].default; + }); + }); + + it('should able to disable the default autofocus ability', () => { + uiguide.configure({ highlightOptions: { autofocus: false } }); + uiguide.highlight('[data-testid="target-1"]'); + + cy.get('[uig-target]').should('not.have.focus'); + }); +}); From 01e8ca6200156e9c2f71ff537301edce828aa443 Mon Sep 17 00:00:00 2001 From: Rannie Peralta Date: Sat, 30 Nov 2019 23:04:03 +0800 Subject: [PATCH 06/11] Update package description --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a978c71..908cfcd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ranndev/ui-guide", "version": "0.1.5", - "description": "Your UI guide helper for your application", + "description": "A programmatic way of making highlight guide", "main": "./dist/js/cjs/index.js", "module": "./dist/js/esm/ui-guide.js", "typings": "./dist/typings/ui-guide.d.ts", From bc6596e62f39cf6a96fb759a52c37170384255da Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sun, 1 Dec 2019 13:02:03 +0800 Subject: [PATCH 07/11] Hotfix 0.1.6 (#79) * Hotfix 0.1.5 (#63) * Fix type on umd gulp script * 0.1.5 * 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!
- `; +
+ +
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 908cfcd..3db8bdc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ranndev/ui-guide", - "version": "0.1.5", + "version": "0.1.6", "description": "A programmatic way of making highlight guide", "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 eee9333ca4129e66d7a204b3b2e36643f9712e5f Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sun, 1 Dec 2019 14:03:24 +0800 Subject: [PATCH 08/11] Add the codepen example link from readme (#80) --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5f15a69..a11b42b 100644 --- a/README.md +++ b/README.md @@ -44,12 +44,16 @@ _Note: [Popper.js](https://github.com/FezVrasta/popper.js) is a peer dependency There are 2 required styles that must be included into your app. 1. Base style - Includes the base styles for UIGuide elements. This is located from `/dist/css/ui-guide(.min).css` or `/dist/scss/ui-guide.scss` if you're using [Scss](https://sass-lang.com/). -2. Theme style - Includes the styles that gives color and animation to UIGuide element. This is located from `/dist/css/themes/*` or `/dist/scss/themes/*` if you're using [Scss](https://sass-lang.com/). +2. Theme style - Includes the styles that gives color and animation to UIGuide elements. This is located from `/dist/css/themes/*` or `/dist/scss/themes/*` if you're using [Scss](https://sass-lang.com/). #### Scripts If you're going to import the package using `