Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 263 - Atualizar componente TextInput #266

Merged
9 changes: 0 additions & 9 deletions src/components/LoginForm/images/eye-slash.svg

This file was deleted.

3 changes: 1 addition & 2 deletions src/components/LoginForm/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Toggle from '../Toggle';
import './index.scss';

import pawIcon from './images/paw-form-icon.svg';
import eyeSlashIcon from './images/eye-slash.svg';
import googleIcon from './images/google-icon.svg';
import facebookIcon from './images/facebook-icon.svg';

Expand Down Expand Up @@ -63,8 +62,8 @@ export default function LoginForm() {
const emailInput = new TextInput({ placeholder: 'E-mail' });
const passwordInput = new TextInput({
placeholder: 'Senha',
assetUrl: eyeSlashIcon,
assetPosition: 'suffix',
type: 'password',
});
const toggle = new Toggle({ checked: false });
const submitButton = new Button({
Expand Down
1 change: 1 addition & 0 deletions src/components/TextInput/img/eye-icon-disable.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/TextInput/img/eye-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 28 additions & 10 deletions src/components/TextInput/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component } from 'pet-dex-utilities';
import eyeIconDisable from './img/eye-icon-disable.svg';
import eyeIcon from './img/eye-icon.svg';
import './index.scss';

const events = [
Expand All @@ -8,12 +10,16 @@ const events = [
'disabled',
'enabled',
'value:change',
'type:change',
];

const html = `
<div class="input-text-container" data-select="input-text-container">
<input class="input-text-container__input" type="text" data-select="input-text" placeholder="">
</div>
<div class="input-text-container" data-select="input-text-container">
<input class="input-text-container__input" data-select="input-text" type="text" placeholder="">
<button type="button" class="input-text-container__button input-text-container__button--hidden" data-select="show-text">
<img class="input-text-container__image" data-select="show-text-img" src=${eyeIconDisable} alt="Toggle">
</button>
</div>
`;

export default function TextInput({
Expand All @@ -22,26 +28,38 @@ export default function TextInput({
assetPosition,
variation = 'standard',
value = '',
type = '',
} = {}) {
Component.call(this, { html, events });
const input = this.selected.get('input-text');
const iconBtn = this.selected.get('show-text');
const iconImg = this.selected.get('show-text-img');
input.disabled = false;

this.setPlaceholder(placeholder);
input.classList.add(variation);
input.style.backgroundImage = `url(${assetUrl})`;
input.classList.add(assetPosition);
// eslint-disable-next-line no-undef
this.setValue(value);
this.setType(type);

if (type === 'password') {
iconBtn.classList.remove('input-text-container__button--hidden');
}

input.addEventListener('focus', () => {
if (input.disabled) return;
input.classList.remove('input-error');
});

input.addEventListener('input', (e) => {
const { value } = e.target;
this.setValue(value);
const newValue = e.target.value;
this.setValue(newValue);
});

iconBtn.addEventListener('click', () => {
input.type = input.type === 'password' ? 'text' : 'password';
iconImg.src = iconImg.src.includes('disable') ? eyeIcon : eyeIconDisable;
});
}

Expand Down Expand Up @@ -78,10 +96,6 @@ TextInput.prototype = Object.assign(TextInput.prototype, Component.prototype, {
this.selected.get('input-text').disabled = false;
this.emit('enabled');
},
setValue(value) {
this.selected.get('input-text').value = value;
this.emit('value:change', value);
},
getValue() {
return this.selected.get('input-text').value;
},
Expand All @@ -92,4 +106,8 @@ TextInput.prototype = Object.assign(TextInput.prototype, Component.prototype, {
this.disable();
}
},
setType(type) {
this.selected.get('input-text').type = type;
this.emit('type:change', type);
},
});
94 changes: 63 additions & 31 deletions src/components/TextInput/index.scss
jessicasantosb marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,51 @@
@use '~styles/fonts' as fonts;

.input-text-container {
position: relative;
display: flex;

border: 1px solid colors.$gray200;

border-radius: 14px;

transition: border-color 0.3s ease-in-out;

&:focus-within {
border-color: colors.$primary200;
}

&:has(> &__input.standard.input-error) {
border-color: colors.$error100;

background-color: colors.$error100;
outline-color: colors.$error100;
}

&:has(> &__input.outlined) {
border-top: 0;
border-right: 0;
border-bottom: 1px solid colors.$gray200;
border-left: 0;
}

&:has(> &__input.outlined:focus) {
border-bottom-color: colors.$primary200;
}

&:has(> &__input.outlined.input-error) {
border-bottom-color: colors.$error100;
}

&__input {
width: 100%;
height: 100%;

flex-grow: 1;

font-size: fonts.$xs;

padding: 1.5rem;
border: colors.$gray250;
border-color: colors.$gray150;

border: 0;

box-sizing: border-box;

Expand All @@ -21,8 +55,6 @@
filter: opacity(0.85);
border-radius: 14px;

transition: border-color 0.3s ease-in-out;

&::placeholder {
font-weight: fonts.$regular;
}
Expand All @@ -33,18 +65,6 @@

&.standard {
padding: 1.8rem 1.6rem;
border: 1px solid colors.$gray200;

border-radius: 14px;

transition: border-color 0.3s ease-in-out;

&.prefix,
&.suffix {
padding: 1.8rem 1.6rem;

border-radius: 14px;
}

&.prefix {
background-position: 0.8rem center;
Expand All @@ -55,38 +75,27 @@
}

&:focus {
border-color: colors.$primary200;
border: 0;

filter: opacity(1);
outline-color: colors.$primary200;

outline: none;
}

&.input-error {
border-color: colors.$error100;

background-color: colors.$error100;
filter: opacity(0.75);
outline-color: colors.$error100;
}
}

&.outlined {
padding: 0.5rem 0.35rem;

border-bottom: 1px solid colors.$gray200;
border-color: transparent;

outline: none;

transition: border-color 0.3s ease-in-out;

&:focus {
border-bottom-color: colors.$primary200;
}

&.input-error {
border-bottom-color: colors.$error100;

filter: opacity(0.65);

&::placeholder {
Expand All @@ -107,4 +116,27 @@
}
}
}

&__button {
display: flex;

align-items: center;

margin-right: 1rem;

border: 0;

background-color: transparent;
opacity: 0.3;

cursor: pointer;

&--hidden {
display: none;
}
}

&__image {
height: 20px;
}
}
7 changes: 7 additions & 0 deletions src/stories/TextInput.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default {
assetUrl: {},
assetPosition: {},
variation: {},
type: { control: 'text', default: '' },
},
};

Expand All @@ -23,3 +24,9 @@ export const Default = {
placeholder: '[email protected]',
},
};

export const Password = {
args: {
type: 'password',
},
};
Loading