Skip to content
This repository was archived by the owner on Sep 9, 2020. It is now read-only.

Commit 4249481

Browse files
ranndevranndev
authored
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
1 parent 192b66a commit 4249481

File tree

10 files changed

+273
-9
lines changed

10 files changed

+273
-9
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
labels: bug
5+
assignees: ''
6+
---
7+
8+
**Describe the bug**
9+
A clear and concise description of what the bug is.
10+
11+
**CodePen sample or screenshots**
12+
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.
13+
14+
**Expected behavior**
15+
A clear and concise description of what you expected to happen.
16+
17+
**Additional context**
18+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/custom.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Custom issue template
3+
about: Describe this issue template's purpose here.
4+
title: ''
5+
labels: ''
6+
assignees: ''
7+
---

‎.github/ISSUE_TEMPLATE/feature_request.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
labels: ''
5+
assignees: ''
6+
---
7+
8+
**Is your feature request related to a problem? Please describe.**
9+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
10+
11+
**Describe the solution you'd like**
12+
A clear and concise description of what you want to happen.
13+
14+
**Describe alternatives you've considered**
15+
A clear and concise description of any alternative solutions or features you've considered.
16+
17+
**Additional context**
18+
Add any other context or screenshots about the feature request here.

‎.github/PULL_REQUEST_TEMPLATE.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
(Thanks for sending a pull request!)
2+
3+
## Proposed changes
4+
5+
Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
6+
7+
## Related issues
8+
9+
If it fixes a bug or resolves a feature request, be sure to link to that issue.
10+
11+
## Types of changes
12+
13+
What types of changes does your code introduce to UIGuide?
14+
_Put an `x` in the boxes that apply_
15+
16+
- [ ] Bugfix (non-breaking change which fixes an issue)
17+
- [ ] New feature (non-breaking change which adds functionality)
18+
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
19+
- [ ] Documentation Update (if none of the other choices apply)
20+
21+
## Checklist
22+
23+
_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._
24+
25+
- [ ] I have read the [CONTRIBUTING](https://github.com/ranndev/ui-guide/CONTRIBUTING.md) doc
26+
- [ ] I have added tests that prove my fix is effective or that my feature works
27+
- [ ] I have added necessary documentation (if appropriate)
28+
29+
## Further comments
30+
31+
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‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Thanks for your interest in UIGuide! You are very welcome to contribute.
66

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

9+
You can use [this CodePen](https://codepen.io/ranndev/pen/LYEPgmL) which already includes ui-guide & popper.js.
10+
911
Feature requests are welcome!
1012

1113
## Setup

‎README.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,23 @@
2828
<img src="https://raw.githubusercontent.com/ranndev/ui-guide/master/images/logo.png" width="250">
2929
</p>
3030

31+
### Examples
32+
33+
- CodePen - https://codepen.io/ranndev/pen/oNgvwQV
34+
3135
### Installation
3236

33-
| Source | Command |
34-
| :----- | :------------------------------------- |
35-
| npm | `npm install @ranndev/ui-guide --save` |
36-
| yarn | `yarn add @ranndev/ui-guide` |
37+
```bash
38+
# Using npm
39+
npm install @ranndev/ui-guide --save
40+
```
41+
42+
```bash
43+
# Using Yarn
44+
yarn add @ranndev/ui-guide
45+
```
3746

38-
_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._
47+
_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._
3948

4049
### Setup
4150

@@ -44,7 +53,7 @@ _Note: [Popper.js](https://github.com/FezVrasta/popper.js) is a peer dependency
4453
There are 2 required styles that must be included into your app.
4554

4655
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/).
47-
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/).
56+
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/).
4857

4958
#### Scripts
5059

‎cypress/integration/configure--autofocus.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import UIGuide from '../../src/ui-guide';
2+
3+
describe('configure - autofocus', () => {
4+
let uiguide: typeof UIGuide;
5+
6+
before(() => {
7+
cy.visit('/').then((contentWindow) => {
8+
uiguide = contentWindow.__LIBRARY__['ui-guide'].default;
9+
});
10+
});
11+
12+
it('should able to disable the default autofocus ability', () => {
13+
uiguide.configure({ highlightOptions: { autofocus: false } });
14+
uiguide.highlight('[data-testid="target-1"]');
15+
16+
cy.get('[uig-target]').should('not.have.focus');
17+
});
18+
});

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@ranndev/ui-guide",
3-
"version": "0.1.6",
4-
"description": "Your UI guide helper for your application",
3+
"version": "0.2.0",
4+
"description": "A programmatic way of making highlight guide",
55
"main": "./dist/js/cjs/index.js",
66
"module": "./dist/js/esm/ui-guide.js",
77
"typings": "./dist/typings/ui-guide.d.ts",

‎themes/default-dark.scss‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
@import '../src/ui-guide-variables';
2+
3+
$theme-color: rgb(77, 168, 100) !default;
4+
$popup-arrow-size: 8px;
5+
$box-gutter-size: 8px !default;
6+
$box-border-size: 3px !default;
7+
8+
[uig-highlight-box] {
9+
box-sizing: content-box !important;
10+
border: $box-border-size solid lighten($theme-color, 5%);
11+
border-radius: 0.25rem;
12+
box-shadow: 0 0 0 999rem lighten(rgba($theme-color, 0.15), 10%),
13+
0 0 0.25rem rgba($theme-color, 0.3);
14+
opacity: 0;
15+
will-change: padding, margin, opacity;
16+
17+
&[uig-show] {
18+
animation: shrink 0.3s 0.2s forwards;
19+
20+
@keyframes shrink {
21+
from {
22+
opacity: 0;
23+
padding: $box-gutter-size + 30px;
24+
margin: -$box-gutter-size - $box-border-size - 30px;
25+
}
26+
27+
to {
28+
opacity: 1;
29+
padding: $box-gutter-size;
30+
margin: -$box-gutter-size - $box-border-size;
31+
}
32+
}
33+
}
34+
}
35+
36+
[uig-popup-wrapper] {
37+
position: relative;
38+
display: flex;
39+
max-width: 450px;
40+
opacity: 0;
41+
will-change: opacity, transform;
42+
43+
[uig-popup][uig-show][x-placement='top'] & {
44+
animation: slide-top 0.2s 0.3s ease-out forwards;
45+
46+
@keyframes slide-top {
47+
from {
48+
transform: translateY(30px);
49+
opacity: 0;
50+
}
51+
52+
to {
53+
transform: translateY(0);
54+
opacity: 1;
55+
}
56+
}
57+
}
58+
59+
[uig-popup][uig-show][x-placement='right'] & {
60+
animation: slide-right 0.2s 0.3s ease-out forwards;
61+
62+
@keyframes slide-right {
63+
from {
64+
transform: translateX(-30px);
65+
opacity: 0;
66+
}
67+
68+
to {
69+
transform: translateX(0);
70+
opacity: 1;
71+
}
72+
}
73+
}
74+
75+
[uig-popup][uig-show][x-placement='bottom'] & {
76+
animation: slide-bottom 0.2s 0.3s ease-out forwards;
77+
78+
@keyframes slide-bottom {
79+
from {
80+
transform: translateY(-30px);
81+
opacity: 0;
82+
}
83+
84+
to {
85+
transform: translateY(0);
86+
opacity: 1;
87+
}
88+
}
89+
}
90+
91+
[uig-popup][uig-show][x-placement='left'] & {
92+
animation: slide-left 0.2s 0.3s ease-out forwards;
93+
94+
@keyframes slide-left {
95+
from {
96+
transform: translateX(30px);
97+
opacity: 0;
98+
}
99+
100+
to {
101+
transform: translateX(0);
102+
opacity: 1;
103+
}
104+
}
105+
}
106+
}
107+
108+
span[x-arrow] {
109+
position: absolute;
110+
z-index: 2;
111+
display: inline-block;
112+
border: $popup-arrow-size solid transparent;
113+
114+
[uig-popup][x-placement='bottom'] & {
115+
top: $box-gutter-size + $box-border-size;
116+
border-bottom-color: darken($theme-color, 5%);
117+
}
118+
119+
[uig-popup][x-placement='top'] & {
120+
bottom: $box-gutter-size + $box-border-size;
121+
border-top-color: darken($theme-color, 5%);
122+
}
123+
124+
[uig-popup][x-placement='right'] & {
125+
left: $box-gutter-size + $box-border-size;
126+
border-right-color: darken($theme-color, 5%);
127+
}
128+
129+
[uig-popup][x-placement='left'] & {
130+
right: $box-gutter-size + $box-border-size;
131+
border-left-color: darken($theme-color, 5%);
132+
}
133+
}
134+
135+
[uig-popup-card] {
136+
position: relative;
137+
z-index: 1;
138+
display: flex;
139+
flex-direction: column;
140+
padding: 0.75rem;
141+
background-color: $theme-color;
142+
color: #fff;
143+
border-radius: 0.2rem;
144+
overflow: hidden;
145+
146+
[uig-popup][x-placement='bottom'] & {
147+
margin-top: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
148+
}
149+
150+
[uig-popup][x-placement='top'] & {
151+
margin-bottom: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
152+
}
153+
154+
[uig-popup][x-placement='right'] & {
155+
margin-left: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
156+
}
157+
158+
[uig-popup][x-placement='left'] & {
159+
margin-right: ($popup-arrow-size * 2) + $box-gutter-size + $box-border-size;
160+
}
161+
}

0 commit comments

Comments
 (0)