feat: petvet page - cadastro de pet etapa 8 (#114)

* feat: desktop css and html petdex componente page

* fix: html and css finished

* fix: button and content

* fix: emit

* fix: index js

* fix: remove import petvet

* fix: fonts

* fix: send events

* fix: add semicolon

* fix: base desktop

* feat: add radios

* fix: styles of petvet

* fix: petvetpage and vacine improvments

* fix: directory name

* feat: radio groups and new format

* feat: list vaccines

* feat: component storybook

* fix: font name

* fix: stories, nomenclature and indentation

* fix: box shadow vaccine

* fix: heieght to container in storybook

* fix: page and component scroll

* fix: petvetpage footer

* fix: margin in footer

* fix: stories home behavior

* fix: better reading stories

src/components/Vaccine/index.js

@@ -20,8 +20,8 @@ const html = `
         </div>
       </div>
     </div>
-    <div class="vaccine__list-group"> 
-    <div class="vaccine__sections" data-select="group"> </div>
+    <div class="vaccine__scroll">
+      <div class="vaccine__sections" data-select="group"> </div>
     </div>
   </div>
 `;
@@ -74,6 +74,15 @@ Vaccine.prototype = Object.assign(Vaccine.prototype, Component.prototype, {
       this.setGroup(vaccine);
     });
   },
+  listVaccines() {
+    const vaccines = [];
+
+    this.groups.values().forEach((group) => {
+      const items = group.listItems();
+      vaccines.push(...items);
+    });
+    return vaccines;
+  },
   openDrawer() {
     this.emit('drawer:open');
   },

src/components/Vaccine/index.scss

@@ -13,16 +13,9 @@
   padding: 2rem;
   border: 1px solid colors.$gray150;
 
-  box-shadow: rgb(50, 50, 71);
-  border-radius: 1.8rem;
-
-  &__sections {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
+  box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04);
 
-    margin-right: 1rem;
-  }
+  border-radius: 1.8rem;
 
   &__header {
     display: flex;
@@ -84,8 +77,8 @@
     display: none;
   }
 
-  &__list-group {
-    overflow-y: auto;
+  &__sections {
+    margin-right: 2rem;
   }
 }
 
@@ -102,9 +95,17 @@
     &__add-vacine-text {
       display: block;
     }
+  }
+}
+
+@container (min-height: 790px) {
+  @include breakpoints.from667 {
+    .vaccine {
+      overflow: auto;
 
-    &__sections {
-      margin-right: 2rem;
+      &__scroll {
+        overflow: auto;
+      }
     }
   }
 }

src/components/VaccineGroup/index.js

@@ -40,5 +40,18 @@ VaccineGroup.prototype = Object.assign(
       this.items.set(item.id, vaccineItem);
       this.emit('item:change', vaccineItem);
     },
+    listItems() {
+      const items = [];
+
+      this.items.values().forEach((item) => {
+        items.push({
+          id: item.id,
+          title: item.getTitle(),
+          veterinary: item.getVeterinary(),
+          date: item.getDate(),
+        });
+      });
+      return items;
+    },
   },
 );

src/home/components/PetVetPage/index.js

@@ -0,0 +1,127 @@
+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.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 === 'Yes' ? value : !value;
+    });
+  });
+
+  specialCare.forEach((radio) => {
+    radio.listen('change', (value) => {
+      const text = radio.getText();
+      form.isSpecialCare = text === 'Yes' ? 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 = () => {
+    form.vaccines = this.vaccine.listVaccines();
+    this.emit('submit', form);
+  };
+
+  this.button.listen('click', emitForm);
+}
+
+PetVetPage.prototype = Object.assign(PetVetPage.prototype, Component.prototype);