fix: correct petvet

src/layouts/app/pages/PetVet/index.js

@@ -0,0 +1,135 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '../../../../components/Button';
+import Radio from '../../../../components/RadioButton';
+import Vaccine from '../../../../components/Vaccine';
+
+import estetoscopio from './images/estetoscopio.svg';
+import cuidadosEspeciais from './images/cuidadosEspeciais.svg';
+
+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="neutered-radio"></div>
+          </div>
+        </div>
+      </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 class="petvet-page__footer" data-select="footer"></div>
+  </div>
+`;
+
+const events = ['submit'];
+
+function createAndMount({ name, text, mountTo }) {
+  const radio = new Radio({ name, text });
+  radio.selected
+    .get('radio-button')
+    .setAttribute('data-testid', `${name}-${text.toLowerCase()}`);
+  radio.mount(mountTo);
+  return radio;
+}
+
+export default function PetVetPage({ vaccines = [] } = {}) {
+  Component.call(this, { html, events });
+
+  const $footer = this.selected.get('footer');
+  const $specialCareRadio = this.selected.get('special-care-radio');
+  const $neuteredRadio = this.selected.get('neutered-radio');
+  const $cardGroup = this.selected.get('card-group');
+
+  this.vaccine = new Vaccine({ vaccines });
+  this.vaccine.mount($cardGroup);
+
+  const form = {
+    isNeutered: undefined,
+    isSpecialCare: undefined,
+    specialCareText: '',
+    vaccines: undefined,
+  };
+
+  const specialCare = [
+    createAndMount({
+      name: 'specialCare',
+      text: 'Não',
+      mountTo: $specialCareRadio,
+    }),
+    createAndMount({
+      name: 'specialCare',
+      text: 'Sim',
+      mountTo: $specialCareRadio,
+    }),
+  ];
+
+  const neutered = [
+    createAndMount({
+      name: 'neutered',
+      text: 'Não',
+      mountTo: $neuteredRadio,
+    }),
+    createAndMount({
+      name: 'neutered',
+      text: 'Sim',
+      mountTo: $neuteredRadio,
+    }),
+  ];
+
+  neutered.forEach((radio) => {
+    radio.listen('change', (value) => {
+      const text = radio.getText();
+      form.isNeutered = text === 'Sim' ? value : !value;
+    });
+  });
+
+  specialCare.forEach((radio) => {
+    radio.listen('change', (value) => {
+      const text = radio.getText();
+      form.isSpecialCare = text === 'Sim' ? value : !value;
+    });
+  });
+
+  this.button = new Button({
+    text: 'Concluir',
+    isFullWidth: false,
+    isDisabled: false,
+  });
+
+  this.button.selected.get('button').classList.add('petvet-page__button');
+  this.button.mount($footer);
+
+  const emitForm = () => {
+    if (form.isSpecialCare === undefined || form.isNeutered === undefined) {
+      return;
+    }
+
+    form.vaccines = this.vaccine.listVaccines();
+    this.emit('submit', form);
+  };
+
+  this.button.listen('click', emitForm);
+}
+
+PetVetPage.prototype = Object.assign(PetVetPage.prototype, Component.prototype);

src/layouts/app/pages/PetVet/index.scss

@@ -0,0 +1,159 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+@use '~styles/breakpoints' as breakpoints;
+
+.petvet-page {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+
+  &__header {
+    text-align: center;
+
+    margin-bottom: 2.4rem;
+
+    &--text {
+      font-family: fonts.$primaryFont;
+      color: colors.$gray800;
+      font-size: 1.8rem;
+      font-weight: fonts.$semiBold;
+
+      line-height: 2.6;
+    }
+
+    &--subtext {
+      font-family: fonts.$fourthFont;
+      color: colors.$gray700;
+      font-size: fonts.$sm;
+      font-weight: fonts.$regular;
+
+      line-height: 2.2;
+    }
+  }
+
+  &__card-group {
+    display: flex;
+    flex-direction: column;
+
+    gap: 1.6rem;
+  }
+
+  &__card {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray800;
+    font-size: 1.4rem;
+    font-weight: fonts.$semiBold;
+    line-height: 2rem;
+
+    padding: 1.6rem;
+
+    box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04);
+
+    border-radius: 1.4rem;
+  }
+
+  &__card-header {
+    display: flex;
+    gap: 1rem;
+
+    align-items: center;
+  }
+
+  &__card-content {
+    width: 100%;
+
+    display: flex;
+
+    flex-direction: column;
+
+    gap: 2rem;
+  }
+
+  &__img {
+    max-width: 5.4rem;
+    max-height: 5.4rem;
+
+    display: flex;
+
+    align-items: center;
+  }
+
+  &__footer {
+    width: 100%;
+
+    display: flex;
+
+    justify-content: center;
+  }
+
+  &__button {
+    width: min(100%, 42rem);
+
+    margin-top: 2.4rem;
+    margin-bottom: 2.4rem;
+  }
+}
+
+@include breakpoints.from667 {
+  .petvet-page {
+    &__img {
+      min-width: 6rem;
+      min-height: 6rem;
+
+      display: flex;
+
+      align-items: center;
+    }
+
+    &__card {
+      padding: 2rem;
+
+      border: 1px solid colors.$gray150;
+
+      box-shadow: none;
+      border-radius: 1.8rem;
+    }
+
+    &__card-header {
+      display: flex;
+      gap: 2rem;
+
+      align-items: center;
+    }
+
+    &__card-content {
+      flex-direction: row;
+
+      align-items: center;
+
+      justify-content: space-between;
+    }
+
+    &__header {
+      &--subtext {
+        font-size: fonts.$sm;
+      }
+    }
+
+    &__card-group {
+      gap: 2.4rem;
+    }
+
+    &__button {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@container (min-height: 790px) {
+  @include breakpoints.from667 {
+    .petvet-page {
+      &__card-group {
+        overflow: auto;
+      }
+    }
+  }
+}