Issue 95 #113
Issue 95 #113
Conversation
|
Manin vc fez mais doque a task, um pedaço doque vc fez era a task da página em si que já foi feita por outra pessoa então pra darmos seguimento preciso que vc apague o que ta fora do escopo da task. No caso isso aqui precisa ser removido O escopo da task é apenas o botão de filtro |
|
Se fosse o contrário eu chorava pq esse botão me deu trabalho ;-; |
| import { Component } from 'pet-dex-utilities'; | ||
| import './index.scss'; | ||
|
|
||
| const events = ['selectNewOptions']; |
There was a problem hiding this comment.
Por que não apenas um evento de change ou select?
| const events = ['selectNewOptions']; | ||
|
|
||
| const html = ` | ||
| <div class="filter__drop-down" data-select="drop-down"> |
There was a problem hiding this comment.
BEM não está sendo seguido corretamente
Olha na parte de blocks
| function addOption(htmlElement, option) { | ||
| const $title = document.createElement('h2'); | ||
| $title.innerHTML = option.title; | ||
| $title.classList.add('filter__drop-down__title'); | ||
| htmlElement.appendChild($title); | ||
|
|
||
| const $hr = document.createElement('hr'); | ||
| $hr.classList.add('filter__drop-down__hr'); | ||
| htmlElement.appendChild($hr); | ||
|
|
||
| const $options = document.createElement('div'); | ||
| $options.classList.add('filter__drop-down__options'); | ||
| htmlElement.appendChild($options); | ||
|
|
||
| option.values.forEach((value) => { | ||
| const $element = document.createElement('div'); | ||
| const $elementValue = document.createElement('input'); | ||
| const $elementLabel = document.createElement('label'); | ||
| $elementValue.type = option.type; | ||
| $elementValue.value = value; | ||
| $elementValue.name = option.title; | ||
| $elementLabel.innerHTML = value; | ||
| $element.classList.add('filter__drop-down__options__element'); | ||
| $elementValue.classList.add('filter__drop-down__options__value'); | ||
| $elementLabel.classList.add('filter__drop-down__options__label'); | ||
| $elementLabel.htmlFor = value; | ||
| $elementValue.id = value; | ||
| $element.appendChild($elementValue); | ||
| $element.appendChild($elementLabel); | ||
| $options.appendChild($element); | ||
| }); | ||
| } |
There was a problem hiding this comment.
Pelo amor de Deus joga isso para um componente.
|
|
||
| function addOption(htmlElement, option) { | ||
| const $title = document.createElement('h2'); | ||
| $title.innerHTML = option.title; |
There was a problem hiding this comment.
Evite o innerHTML o máximo que conseguir. Nesse caso aqui não parece ser necessário
| $title.innerHTML = option.title; | |
| $title.innerText = option.title; |
| $elementValue.type = option.type; | ||
| $elementValue.value = value; | ||
| $elementValue.name = option.title; | ||
| $elementLabel.innerHTML = value; |
There was a problem hiding this comment.
Evite o innerHTML o máximo que conseguir. Nesse caso aqui não parece ser necessário
| $elementLabel.innerHTML = value; | |
| $elementLabel.innerText = value; |
| border: 1px solid colors.$neutral100; | ||
|
|
||
| background: none; | ||
| border-radius: 8px; |
There was a problem hiding this comment.
Verique a necessidade do PX, provável que deva mudar para REM
| width: 20px; | ||
| height: 20px; |
There was a problem hiding this comment.
Verique a necessidade do PX, provável que deva mudar para REM
| color: colors.$secondary800; | ||
|
|
||
| background-color: colors.$white; | ||
| border-radius: 100px; |
There was a problem hiding this comment.
Verique a necessidade do PX, provável que deva mudar para REM
| &--selected { | ||
| color: colors.$white; | ||
|
|
||
| border: 1px solid colors.$secondary800; |
There was a problem hiding this comment.
Verique a necessidade do PX, provável que deva mudar para REM
| it('is a Function', () => { | ||
| expect(Filter).toBeInstanceOf(Function); | ||
| }); |
There was a problem hiding this comment.
Esse teste é necessário?
Closes #95 #38
Feature
Creates filter component and update colors file
Visual evidences 🖼️
Checklist
Additional info
Need help to improve testing