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

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

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,7 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+---

.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.

.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...

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

README.md

@@ -28,14 +28,23 @@
   <img src="https://raw.githubusercontent.com/ranndev/ui-guide/master/images/logo.png" width="250">
 </p>
 
+### 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
 

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');
+  });
+});

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",

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