feat: radio groups and new format

devhatt · May 21, 2024 · f417032 · f417032
1 parent 56887f7
commit f417032
Showing 1 changed file with 46 additions and 31 deletions.
diff --git a/src/home/components/PetVetPage/index.js b/src/home/components/PetVetPage/index.js
@@ -1,5 +1,4 @@
 import { Component } from 'pet-dex-utilities';
-// import TextInput from '../../../components/TextInput';
 import Button from '../../../components/Button';
 import Radio from '../../../components/RadioButton';
 import Vaccine from '../../../components/Vaccine';
@@ -11,34 +10,34 @@ import './index.scss';
 
 const html = `
   <div data-select="container" class="petvet-page">
-    <div class="petvet-page__header">
-        <p class="petvet-page__header--text">Conte-nos um pouco mais do seu animal</p>
-        <p class="petvet-page__header--subtext">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!</p>
-    </div>
-    <div class="petvet-page__card-group" data-select="card-group">
-        <div class="petvet-page__card">
-          <div class="petvet-page__card-header">
-              <div>
-                <a href="#"><img class="petvet-page__img" src="${estetoscopio}" alt="estetoscopio"></a>
-              </div>
-              <div class="petvet-page__card-content">
-                <p>O seu pet amigo foi castrado?</p>
-                <div data-select="registered"></div>
+      <div class="petvet-page__header">
+          <p class="petvet-page__header--text">Conte-nos um pouco mais do seu animal</p>
+          <p class="petvet-page__header--subtext">Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!</p>
+      </div>
+      <div class="petvet-page__card-group" data-select="card-group">
+          <div class="petvet-page__card">
+              <div class="petvet-page__card-header">
+                  <div>
+                      <a href="#"><img class="petvet-page__img" src="${estetoscopio}" alt="estetoscopio" /></a>
+                  </div>
+                  <div class="petvet-page__card-content">
+                      <p>O seu pet amigo foi castrado?</p>
+                      <div data-select="registered-radio"></div>
+                  </div>
               </div>
           </div>
-        </div>
-        <div class="petvet-page__card">
-          <div class="petvet-page__card-header">
-              <div class="petvet-page__icon-text">
-                <a href="#"><img class="petvet-page__img" src="${cuidadosEspeciais}" alt="cuidados especiais"></a>
-              </div>
-              <div class="petvet-page__card-content">
-                <p>Cuidados especiais</p>
-                <div data-select="special-care"></div>
+          <div class="petvet-page__card" data-select="special-care">
+              <div class="petvet-page__card-header">
+                  <div class="petvet-page__icon-text">
+                      <a href="#"><img class="petvet-page__img" src="${cuidadosEspeciais}" alt="cuidados especiais" /></a>
+                  </div>
+                  <div class="petvet-page__card-content">
+                      <p>Cuidados especiais</p>
+                      <div data-select="special-care-radio"></div>
+                  </div>
               </div>
           </div>
-        </div>
-    </div>
+      </div>
   </div>
 `;
 
@@ -54,8 +53,8 @@ export default function PetVetPage() {
   Component.call(this, { html, events });
 
   const $container = this.selected.get('container');
-  const $specialCare = this.selected.get('special-care');
-  const $registered = this.selected.get('registered');
+  const $specialCareRadio = this.selected.get('special-care-radio');
+  const $registeredRadio = this.selected.get('registered-radio');
   const $cardGroup = this.selected.get('card-group');
 
   const form = {
@@ -65,12 +64,28 @@ export default function PetVetPage() {
   };
 
   const specialCare = [
-    createAndMount({ name: 'specialCare', text: 'Yes', mountTo: $specialCare }),
-    createAndMount({ name: 'specialCare', text: 'No', mountTo: $specialCare }),
+    createAndMount({
+      name: 'specialCare',
+      text: 'Não',
+      mountTo: $specialCareRadio,
+    }),
+    createAndMount({
+      name: 'specialCare',
+      text: 'Sim',
+      mountTo: $specialCareRadio,
+    }),
   ];
   const registered = [
-    createAndMount({ name: 'registered', text: 'Yes', mountTo: $registered }),
-    createAndMount({ name: 'registered', text: 'No', mountTo: $registered }),
+    createAndMount({
+      name: 'registered',
+      text: 'Não',
+      mountTo: $registeredRadio,
+    }),
+    createAndMount({
+      name: 'registered',
+      text: 'Sim',
+      mountTo: $registeredRadio,
+    }),
   ];
 
   registered.forEach((radio) => {