forked from devhatt/pet-dex-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: Progress bar Issue#22 (devhatt#53)
* Feat: Add ProgressBar component with styles * Fix: Refactor ProgressBar initialization logic * test: Create ProgressBar unit tests * Refactor: ProgressBar component * Refactor: eof * refactor: ProgressBar test typos fix * Refactor: Update ProgressBar styles to use colors from colors.scss * Update src/styles/base.scss Co-authored-by: Paulo Victor <[email protected]> * refactor: Refactor: Update colors to rgb and remove unnecessary variable re devhatt#22 * style: style: Ajustes do lint --------- Co-authored-by: Paulo Victor <[email protected]>
- Loading branch information
Showing
5 changed files
with
149 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { Component } from 'pet-dex-utilities'; | ||
import './index.scss'; | ||
|
||
const events = ['setProgress']; | ||
|
||
const html = ` | ||
<div class="progress-bar" data-select="progress-bar"> | ||
<div class="progress-bar__background"></div> | ||
<div class="progress-bar__foreground" data-select="progress-bar-foreground"></div> | ||
</div> | ||
`; | ||
|
||
function isValueValid(value, minimum, maximum) { | ||
return value >= minimum && value <= maximum; | ||
} | ||
|
||
function getRatio(value, minimum, maximum) { | ||
return (value - minimum) / (maximum - minimum); | ||
} | ||
|
||
function getWidthFormated(value, minimum, maximum) { | ||
const ratio = getRatio(value, minimum, maximum); | ||
return `${ratio * 100}%`; | ||
} | ||
|
||
export default function ProgressBar(minimum, maximum, startValue = minimum) { | ||
Component.call(this, { html, events }); | ||
this.minimum = minimum; | ||
this.maximum = maximum; | ||
this.currentProgress = isValueValid(startValue, this.minimum, this.maximum) | ||
? startValue | ||
: this.minimum; | ||
|
||
this.setProgress(this.currentProgress); | ||
this.selected.get('progress-bar').ariaValueMin = this.minimum; | ||
this.selected.get('progress-bar').ariaValueMax = this.maximum; | ||
this.selected.get('progress-bar').ariaValueNow = this.currentProgress; | ||
} | ||
|
||
ProgressBar.prototype = Object.assign( | ||
ProgressBar.prototype, | ||
Component.prototype, | ||
{ | ||
setProgress(value) { | ||
if (!isValueValid(value, this.minimum, this.maximum)) return; | ||
this.currentProgress = value; | ||
this.selected.get('progress-bar-foreground').style.width = getWidthFormated(this.currentProgress, this.minimum, this.maximum); | ||
this.selected.get('progress-bar').ariaValueNow = this.currentProgress; | ||
this.emit('setProgress', this.currentProgress); | ||
}, | ||
next() { | ||
this.setProgress(this.currentProgress + 1); | ||
}, | ||
prev() { | ||
this.setProgress(this.currentProgress - 1); | ||
}, | ||
}, | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
@use '~styles/colors.scss' as colors; | ||
|
||
.progress-bar { | ||
width: 100%; | ||
|
||
display: grid; | ||
|
||
&__background { | ||
width: 100%; | ||
height: 50%; | ||
|
||
grid-row: 1; | ||
grid-column: 1; | ||
|
||
position: relative; | ||
top: 25%; | ||
z-index: 0; | ||
|
||
background-color: colors.$grey150; | ||
border-radius: 100000px; | ||
} | ||
|
||
&__foreground { | ||
height: 6px; | ||
|
||
grid-row: 1; | ||
grid-column: 1; | ||
|
||
position: relative; | ||
z-index: 1; | ||
|
||
background-color: colors.$yellow500; | ||
border-radius: 100000px; | ||
|
||
transition: width 1s ease-in-out; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { describe, expect, it, test } from 'vitest'; | ||
import ProgressBar from './index'; | ||
|
||
describe('ProgressBar', () => { | ||
it('is a Function', () => { | ||
expect(ProgressBar).toBeInstanceOf(Function); | ||
}); | ||
|
||
it('returns an object', () => { | ||
expect(new ProgressBar()).toBeInstanceOf(Object); | ||
}); | ||
|
||
test.each([ | ||
[-1, 0], | ||
[0, 0], | ||
[1, 1], | ||
[2, 2], | ||
[3, 3], | ||
[4, 4], | ||
[5, 5], | ||
[6, 0], | ||
])('it initializes with a specific valid value set', (value, expected) => { | ||
const progressBar = new ProgressBar(0, 5, value); | ||
expect(progressBar.value).toBe(expected); | ||
}); | ||
|
||
it('increments value when next is called', () => { | ||
const progressBar = new ProgressBar(0, 5, 10); | ||
progressBar.next(); | ||
expect(progressBar.value).toBe(1); | ||
}); | ||
|
||
it('keeps the maximum value when next is called and it is already at the maximum', () => { | ||
const progressBar = new ProgressBar(0, 5, 5); | ||
progressBar.next(); | ||
expect(progressBar.value).toBe(progressBar.maximum); | ||
}); | ||
|
||
it('decrements value when previous is called', () => { | ||
const progressBar = new ProgressBar(0, 5, 5); | ||
progressBar.previous(); | ||
expect(progressBar.value).toBe(4); | ||
}); | ||
|
||
it('keeps the minimum value when previous is called and it is already at the minimum', () => { | ||
const progressBar = new ProgressBar(0, 5, 10); | ||
progressBar.previous(); | ||
expect(progressBar.value).toBe(progressBar.minimum); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,9 @@ | ||
@use 'reset-css/sass/reset.scss'; | ||
|
||
html, | ||
body { | ||
:root { | ||
font-size: 62.5%; | ||
} | ||
|
||
.root { | ||
body { | ||
font-size: 1.6rem; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,8 @@ | ||
$appColor: rgb(0, 52, 89); | ||
$appContentColor: rgb(255, 255, 255); | ||
$grey150: rgb(236, 239, 242); | ||
$gray800: rgb(57, 67, 79); | ||
$gray600: rgb(128, 139, 154); | ||
$blue500: rgb(27, 133, 243); | ||
$grey900: rgb(32, 35, 38) | ||
$yellow500: rgb(255, 197, 66); |