From 4249481337d4510dc956cf149d9329418b1149a7 Mon Sep 17 00:00:00 2001 From: Rannie Peralta <24478046+ranndev@users.noreply.github.com> Date: Sun, 1 Dec 2019 22:33:24 +0800 Subject: [PATCH] Release 0.2.0 (#84) * Fix type on umd gulp script * 0.1.5 * Update issue templates (#69) * Hotfix 0.1.5 (#63) * Fix type on umd gulp script * 0.1.5 * Update issue templates * Add pull request template (#70) * Add test for configuring/disabling default autofocus ability (#75) * Update package description * 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 * Add the codepen example link from readme (#80) * Link the created CodePen bug report boilerplate (#81) * Add default dark theme (#83) * 0.2.0 --- .github/ISSUE_TEMPLATE/bug_report.md | 18 +++ .github/ISSUE_TEMPLATE/custom.md | 7 + .github/ISSUE_TEMPLATE/feature_request.md | 18 +++ .github/PULL_REQUEST_TEMPLATE.md | 31 ++++ CONTRIBUTING.md | 2 + README.md | 21 ++- cypress/integration/configure--autofocus.ts | 18 +++ package-lock.json | 2 +- package.json | 4 +- themes/default-dark.scss | 161 ++++++++++++++++++++ 10 files changed, 273 insertions(+), 9 deletions(-) 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 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md create mode 100644 cypress/integration/configure--autofocus.ts create mode 100644 themes/default-dark.scss diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..026661d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,18 @@ +--- +name: Bug report +about: Create a report to help us improve +labels: bug +assignees: '' +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**CodePen sample or screenshots** +If applicable, add a fork of [this CodePen](https://codepen.io/ranndev/pen/LYEPgmL) that describe the found bug or add screenshots to help explain your problem. + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**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..96a4735 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/custom.md @@ -0,0 +1,7 @@ +--- +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..6ac431d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,18 @@ +--- +name: Feature request +about: Suggest an idea for this project +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. 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... diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8addc27..f494675 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,6 +6,8 @@ Thanks for your interest in UIGuide! You are very welcome to contribute. If you find a bug, please, try to isolate the specific case and provide a fiddle on CodePen or JSFiddle to make it easy to reproduce the problem and help others finding a solution. +You can use [this CodePen](https://codepen.io/ranndev/pen/LYEPgmL) which already includes ui-guide & popper.js. + Feature requests are welcome! ## Setup diff --git a/README.md b/README.md index 5f15a69..5cef6e3 100644 --- a/README.md +++ b/README.md @@ -28,14 +28,23 @@

+### Examples + +- CodePen - https://codepen.io/ranndev/pen/oNgvwQV + ### Installation -| Source | Command | -| :----- | :------------------------------------- | -| npm | `npm install @ranndev/ui-guide --save` | -| yarn | `yarn add @ranndev/ui-guide` | +```bash +# Using npm +npm install @ranndev/ui-guide --save +``` + +```bash +# Using Yarn +yarn add @ranndev/ui-guide +``` -_Note: [Popper.js](https://github.com/FezVrasta/popper.js) is a peer dependency of this package, so you must [install it](https://github.com/FezVrasta/popper.js#installation) too._ +_Note: [Popper.js](https://github.com/FezVrasta/popper.js) is a peer dependency of this package. Make sure to [install it](https://github.com/FezVrasta/popper.js#installation) too._ ### Setup @@ -44,7 +53,7 @@ _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 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'); + }); +}); 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 38013c6..5906468 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@ranndev/ui-guide", - "version": "0.1.6", - "description": "Your UI guide helper for your application", + "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", "typings": "./dist/typings/ui-guide.d.ts", diff --git a/themes/default-dark.scss b/themes/default-dark.scss new file mode 100644 index 0000000..7c1fa7f --- /dev/null +++ b/themes/default-dark.scss @@ -0,0 +1,161 @@ +@import '../src/ui-guide-variables'; + +$theme-color: rgb(77, 168, 100) !default; +$popup-arrow-size: 8px; +$box-gutter-size: 8px !default; +$box-border-size: 3px !default; + +[uig-highlight-box] { + box-sizing: content-box !important; + border: $box-border-size solid lighten($theme-color, 5%); + border-radius: 0.25rem; + box-shadow: 0 0 0 999rem lighten(rgba($theme-color, 0.15), 10%), + 0 0 0.25rem rgba($theme-color, 0.3); + opacity: 0; + will-change: padding, margin, opacity; + + &[uig-show] { + animation: shrink 0.3s 0.2s forwards; + + @keyframes shrink { + from { + opacity: 0; + padding: $box-gutter-size + 30px; + margin: -$box-gutter-size - $box-border-size - 30px; + } + + to { + opacity: 1; + padding: $box-gutter-size; + margin: -$box-gutter-size - $box-border-size; + } + } + } +} + +[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; + display: inline-block; + border: $popup-arrow-size solid transparent; + + [uig-popup][x-placement='bottom'] & { + top: $box-gutter-size + $box-border-size; + border-bottom-color: darken($theme-color, 5%); + } + + [uig-popup][x-placement='top'] & { + bottom: $box-gutter-size + $box-border-size; + border-top-color: darken($theme-color, 5%); + } + + [uig-popup][x-placement='right'] & { + left: $box-gutter-size + $box-border-size; + border-right-color: darken($theme-color, 5%); + } + + [uig-popup][x-placement='left'] & { + right: $box-gutter-size + $box-border-size; + border-left-color: darken($theme-color, 5%); + } +} + +[uig-popup-card] { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + padding: 0.75rem; + background-color: $theme-color; + color: #fff; + border-radius: 0.2rem; + overflow: hidden; + + [uig-popup][x-placement='bottom'] & { + margin-top: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size; + } + + [uig-popup][x-placement='top'] & { + margin-bottom: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size; + } + + [uig-popup][x-placement='right'] & { + margin-left: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size; + } + + [uig-popup][x-placement='left'] & { + margin-right: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size; + } +}