Issue 263 - Atualizar componente TextInput (#266)

* feat: add functionality to show/hide TextInput field * refactor: include type password to TextInput * fix: rename getType to setType and correct method call parameter * fix: prevent icon from being overlaid and correct use of BEM classes * refactor: delete eslint comment * refactor: update TextInput storybook * refactor: configure stylelint for scss formatting * refactor: emit event when type changes * fix: resolve text overlay issue * fix: update event name to imperative form --------- Co-authored-by: jessicasantosb <[email protected]>
devhatt · Jun 24, 2024 · 18e6b81 · 18e6b81
1 parent 6e2835c
commit 18e6b81
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 52 deletions.
diff --git a/src/components/LoginForm/images/eye-slash.svg b/src/components/LoginForm/images/eye-slash.svg
diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js
@@ -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';
 
@@ -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({

diff --git a/src/components/TextInput/img/eye-icon-disable.svg b/src/components/TextInput/img/eye-icon-disable.svg
diff --git a/src/components/TextInput/img/eye-icon.svg b/src/components/TextInput/img/eye-icon.svg
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
@@ -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 = [
@@ -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({
@@ -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;
   });
 }
 
@@ -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;
   },
@@ -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);
+  },
 });
diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss
@@ -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;
 
@@ -21,8 +55,6 @@
     filter: opacity(0.85);
     border-radius: 14px;
 
-    transition: border-color 0.3s ease-in-out;
-
     &::placeholder {
       font-weight: fonts.$regular;
     }
@@ -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;
@@ -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 {
@@ -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;
+  }
 }
diff --git a/src/stories/TextInput.stories.js b/src/stories/TextInput.stories.js
@@ -15,6 +15,7 @@ export default {
     assetUrl: {},
     assetPosition: {},
     variation: {},
+    type: { control: 'text', default: '' },
   },
 };
 
@@ -23,3 +24,9 @@ export const Default = {
     placeholder: '[email protected]',
   },
 };
+
+export const Password = {
+  args: {
+    type: 'password',
+  },
+};