refactor: change px to rem in input text, edd the option to set de as…

…set as prefix or suffix fix devhatt#21
MateusHenriquegringo · Dec 29, 2023 · 7c5f8bb · 7c5f8bb
1 parent 6028608
commit 7c5f8bb
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 44 deletions.
diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
@@ -12,13 +12,23 @@ const events = [
 const html = `
     <div class="input-text-container">
       <input class="input-text-container__input" type="text" data-select="input-text" placeholder="">
-  </div>
+    </div>
 `;
 
-export default function InputText() {
+export default function InputText({
+  placeholder,
+  assetUrl,
+  assetPosition, // preffix, suffix
+  variation, // outlined, standard
+}) {
   Component.call(this, { html, events });
   this.disabled = false;
 
+  this.placeholder = placeholder;
+  this.selected.get('input-text').classList.add(variation);
+  this.selected.get('input-text').backgroundImage = assetUrl;
+  this.selected.get('input-text').classList.add(assetPosition);
+
   this.selected.get('input-text').addEventListener('focus', () => {
     if (this.disabled) return;
     this.classList.remove('input-error');
@@ -31,12 +41,11 @@ InputText.prototype = Object.assign(InputText.prototype, Component.prototype, {
     this.emit('placeholderChanged', placeholder);
   },
   setAsset(url) {
-    this.selected.get('input-text').background = `url(${url}) 
-    no-repeat 10px center`;
+    this.selected.get('input-text').backgroundImage = `url(${url})`;
     this.emit('inputAssetChanged');
   },
-  isStandart() {
-    this.selected.get('input-text').classList.add('standart');
+  isStandard() {
+    this.selected.get('input-text').classList.add('standard');
     this.selected.get('input-text').classList.remove('outlined');
   },
   isOutlined() {

diff --git a/src/components/TextInput/index.scss b/src/components/TextInput/index.scss
@@ -1,65 +1,84 @@
 .input-text-container {
   position: relative;
-}
 
-.input-text-container__input {
-  &.standart {
+  &__input {
     width: 100%;
 
     font-size: 1rem;
 
-    padding: 10px 30px 10px 40px;
-    border: 1px solid #bfbfbf;
-
-    background: url('https://www.svgrepo.com/show/532555/search.svg') no-repeat
-      10px center;
+    background-repeat: no-repeat;
     background-size: 20px;
     filter: opacity(0.85);
-    border-radius: 4px;
 
-    transition: border-color 0.3s ease-in-out;
+    &.standard {
+      padding: 0.65rem 1rem;
+      border: 1px solid #a3a3a3;
 
-    &:focus {
-      border-color: #007bff;
+      border-radius: 8px;
 
-      filter: opacity(1);
-      outline-color: #007bff;
-    }
+      transition: border-color 0.3s ease-in-out;
 
-    &.input-error {
-      border-color: #dc3545;
+      &.prefix {
+        padding: 0.8rem 0.8rem 0.8rem 2.5rem;
 
-      background-color: #ee727e75;
-      filter: opacity(0.75);
-      outline-color: #dc3545;
-    }
-  }
+        background-position: 10px center;
+      }
 
-  &.outlined {
-    width: 100%;
+      &.suffix {
+        padding: 0.8rem 2.5rem 0.8rem 0.8rem;
 
-    font-size: 1rem;
+        background-position: calc(100% - 1rem) center;
+      }
 
-    padding: 8px 5px;
-    border-bottom: 2px solid #bfbfbf;
-    border-color: transparent;
+      &:focus {
+        border-color: #007bff;
 
-    background: none;
-    outline: none;
+        filter: opacity(1);
+        outline-color: #007bff;
+      }
 
-    transition: border-color 0.3s ease-in-out;
+      &.input-error {
+        border-color: #dc3545;
 
-    &:focus {
-      border-bottom-color: #007bff;
+        background-color: #ee727e75;
+        filter: opacity(0.75);
+        outline-color: #dc3545;
+      }
     }
 
-    &.input-error {
-      border-bottom-color: #dc3545;
+    &.outlined {
+      padding: 0.5rem 0.35rem;
+      border-bottom: 2px solid #bfbfbf;
+      border-color: transparent;
+
+      outline: none;
+
+      transition: border-color 0.3s ease-in-out;
+
+      &:focus {
+        border-bottom-color: #007bff;
+      }
+
+      &.input-error {
+        border-bottom-color: #dc3545;
+
+        filter: opacity(0.65);
+
+        &::placeholder {
+          color: #dc3545;
+        }
+      }
+
+      &.suffix {
+        padding: 0.5rem 2.5rem 0.5rem 0.3rem;
+
+        background-position: calc(100% - 1rem) center;
+      }
 
-      filter: opacity(0.65);
+      &.prefix {
+        padding: 0.5rem 0.3rem 0.5rem 2.5rem;
 
-      &::placeholder {
-        color: #dc3545;
+        background-position: 10px center;
       }
     }
   }