feat: update more info card

src/components/more-info/index.js

@@ -0,0 +1,67 @@
+import './index.scss';
+
+import { Component } from 'pet-dex-utilities';
+import InputText from '../TextInput/index';
+
+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__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__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">
+                </div>
+            </div>
+          </div>`;
+
+export default function CardPet() {
+  Component.call(this, { html });
+
+  CardPet.prototype = Object.assign(CardPet.prototype, Component.prototype, {
+    setImage(text) {
+      this.selected.get('more-info__icon').src = text;
+    },
+    setTitle(text) {
+      this.selected.get('more-info__title').textContent = text;
+    },
+    setQuestion(text) {
+      if (text === '' || null || undefined) {
+        this.selected.get('input_checkbox').style.display = 'none';
+      } else {
+        this.selected.get('checkbox__name1').name = text;
+        this.selected.get('checkbox__name2').name = text;
+      }
+    },
+    setInputObservation(text) {
+      if (text === '' || null || undefined) {
+        this.selected.get('input_text').style.display = 'none';
+      } else {
+        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;
+  }
+

src/components/more-info/questoes.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": 1,
+    "img": "assets/stethoscope.svg",
+    "title": "O seu pet amigo foi castrado?",
+    "nameQuestion": "castrado",
+    "observation": ""
+  },
+  {
+    "id": 2,
+    "img": "assets/shield.svg",
+    "title": "Precisa de cuidados especiais?",
+    "nameQuestion": "cuidado",
+    "observation": ""
+  },
+  {
+    "id": 3,
+    "img": "assets/vaccine.svg",
+    "title": "O seu pet amigo foi castrado?",
+    "nameQuestion": "",
+    "observation": ""
+  }
+]

src/home/index.scss

@@ -1,6 +1,11 @@
 @use '../styles/base.scss';
 
+body{
+  background-color: #003459;
+}
 .home-main-container {
   display: flex;
+  justify-content: center;
   gap: 1rem;
+  margin: 100px auto;
 }

src/home/main.js

@@ -1,30 +1,44 @@
-import { extractElements } from 'pet-dex-utilities';
-import Card from '../components/Card';
 import './index.scss';
 
-function renderCards(qty, $container) {
-  for (let i = 0; i < qty; i += 1) {
-    const card = new Card();
-    card.mount($container);
-    card.setTitle(`Card ${i}`);
-    card.listen('purchase', () => {
-      console.log(`purchase de quem usa o componente, esse é o card ${i}`);
-    });
-
-    const $card = card.selected.get('card-button');
-
-    if (i === 2) {
-      card.disable();
-      $card.classList.add('card-container__button--disabled');
-    } else {
-      $card.classList.add('card-container__button--active');
-    }
-  }
+import { extractElements } from 'pet-dex-utilities';
+
+// import Card from '../components/Card';
+import CardPet from '../components/more-info';
+
+// function renderCards(qty, $container) {
+//   for (let i = 0; i < qty; i += 1) {
+//     const card = new Card();
+//     card.mount($container);
+//     card.setTitle(`Card ${i}`);
+//     card.listen('purchase', () => {
+//       console.log(`purchase de quem usa o componente, esse é o card ${i}`);
+//     });
+
+//     const $card = card.selected.get('card-button');
+
+//     if (i === 2) {
+//       card.disable();
+//       $card.classList.add('card-container__button--disabled');
+//     } else {
+//       $card.classList.add('card-container__button--active');
+//     }
+//   }
+// }
+
+function renderCardMoreInfo($container) {
+  const cardPet = new CardPet();
+  cardPet.mount($container);
+  cardPet.setImage('../assets/stethoscope.svg');
+  cardPet.setTitle('O seu pet amigo foi castrado?');
+  cardPet.setQuestion('castrado');
+  cardPet.setInputObservation('Escreva o cuidado especial');
 }
 
 document.addEventListener('DOMContentLoaded', () => {
   const selected = extractElements([document.body]);
   const $container = selected.get('container');
+  // const $container2 = selected.get('container2');
 
-  renderCards(5, $container);
+  // renderCards(5, $container);
+  renderCardMoreInfo($container);
 });