chore: remove html and css of more info, fail import InputText in mor…

…e-info

src/components/card-pet/index.js → src/components/more-info/index.js

@@ -1,29 +1,35 @@
 import './index.scss';
 
 import { Component } from 'pet-dex-utilities';
+import InputText from '../TextInput/index';
 
-const html = `<div class="more-info__card">
-                <div class="more-info__card-description">
-                    <img data-select="more-info__icon" src="" alt="" class="more-info__icon">
-                    <h3 data-select="more-info__title" class="more-info__card-title"></h3>
+const html = `
+          <div  class="more-info-container">
+              <div class="more-info-header">
+                <h3 class="more-info-header__title">Conte-nos um pouco mais do seu animal</h3>
+                <h4 class="more-info-header__sub-title">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!</h4>
+              </div>
+            <div class="more-info-card">
+                <div class="more-info-card__description">
+                    <img data-select="more-info__icon" src="" alt="" class="more-info-card__description__icon">
+                    <h3 data-select="more-info__title" class="more-info-card__description__title"></h3>
                 </div>
-                <div  data-select="input_checkbox" class="more-info__card-input-group">
-                    <div class="more-info__card-checkbox-group">
+                <div data-select="input_checkbox" class="more-info-card__input-group">
+                    <div class="more-info-card__input-group__checkbox-group">
                         <input data-select="checkbox__name1" type="radio" id="cuidados_False" name="">
                         <label class="label-check-radios" for="cuidados_False">
                             <span class="checkmark"></span>Não</label>
                     </div>
-                    <div class="more-info__card-checkbox-group">
+                    <div class="more-info-card__input-group__checkbox-group">
                         <input data-select="checkbox__name2" type="radio" id="cuidados_true" name="">
                         <label class="label-check-radios" for="cuidados_true">
                             <span class="checkmark"></span>Sim</label>
                     </div>
                 </div>
                 <div data-select="input_text" class="more-info__card-text-group">
-                    <input data-select="input_placeholder" class="observation" type="text"
-                        placeholder="">
                 </div>
-            </div>`;
+            </div>
+          </div>`;
 
 export default function CardPet() {
   Component.call(this, { html });
@@ -47,7 +53,14 @@ export default function CardPet() {
       if (text === '' || null || undefined) {
         this.selected.get('input_text').style.display = 'none';
       } else {
-        this.selected.get('input_placeholder').placeholder = text;
+        const inputText = new InputText({
+          placeholder: text,
+          variation: 'outlined',
+        });
+        // eslint-disable-next-line no-console
+        console.log(inputText);
+        // eslint-disable-next-line prettier/prettier
+        this.selected.get('input_text').appendChild(inputText);
       }
     },
   });

src/components/more-info/index.scss

@@ -0,0 +1,94 @@
+  .more-info-container {
+    max-width: 940px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+
+  .more-info-header{
+    padding: 20px;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    &__title{
+      font-size: 2rem;
+      color: #39434F;
+    }
+    &__sub-title {
+      color: #606873;
+    }
+  }
+
+  .more-info-card {
+    max-width: 630px;
+    min-width: 630px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 20px;
+    &__description,
+    &__input-group{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
+      max-width: 46%;
+    }
+  }
+
+  .label-check-radios{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .more-info-card__input-group__checkbox-group {
+    display: flex;
+    min-width: 60px;
+    gap: 20px;
+  }
+
+  .more-info__card-text-group {
+    width: 100%;
+
+    input {
+      width: 100%;
+      padding: 5px;
+      border: 0;
+      border-bottom: 1px solid #606873;
+
+      &::placeholder {
+        line-height: 21px;
+        font-size: 0.875rem;
+      }
+    }
+  }
+
+
+  // apenas marcação uma task para o checkbos que não é minha
+  // Esconder o input radio
+  input[type='radio'] {
+    display: none;
+  }
+
+  // Estilizar a aparência do label para se parecer com um checkbox
+  input[type='radio'] + label .checkmark {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #999;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  // Estilizar quando o input radio está selecionado
+  input[type='radio']:checked + label .checkmark {
+    background-color: #5649e4;
+    border-color: #5649e4;
+    color: #fff;
+  }
+