feat: create pet size page (#295)

* feat: create general size page

* feat: finish PetSizePage

* chore: content paddings removed

* chore: change and remove scss unecessary

* chore: add direct listen and fix weithRange

* fix: remove width 100% button-container

* fix: import PetSizePage storybook

src/layouts/index.scss

@@ -53,9 +53,6 @@
     grid-area: content;
 
     background-color: colors.$secondary100;
-
-    padding-inline: 2rem;
-    padding-block: 3.2rem;
   }
 
   &__content-page {

src/layouts/pages/PetSize/index.js

@@ -0,0 +1,79 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '~src/components/Button';
+import UploadImage from '~src/components/UploadImage';
+import SizeSelector from '~src/components/SizeSelector';
+import './index.scss';
+
+const events = ['submit'];
+
+const html = `
+  <div class="pet-size-page">
+    <div class="pet-size-page__content" data-select="container">
+      <div class="pet-size-page__image-container" data-select="image-container"></div>
+
+      <div class="pet-size-page__description">
+        <h1 class="pet-size-page__title">Qual é o tamanho do seu animal de estimação?</h1>
+        <label class="pet-size-page__hint">Ajuste de acordo com a realidade</label>
+      </div>
+
+      <div class="pet-size-page__size-selector" data-select="size-selector"></div>  
+
+    </div>
+    <div class="pet-size-page__button-container" data-select="button-container">
+        <div class="pet-size-page__button" data-select="button"></div>
+      </div>
+  </div>;
+`;
+
+export default function PetSize() {
+  Component.call(this, { html, events });
+  this.container = this.selected.get('container');
+
+  this.imageContainer = this.selected.get('image-container');
+  this.sizeselectorContainer = this.selected.get('size-selector');
+  this.buttonComponent = this.selected.get('button');
+  this.uploadImage = new UploadImage();
+  this.sizeselector = new SizeSelector();
+  this.button = new Button({
+    text: 'Continuar',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  this.renderComponents();
+  this.getSize();
+  this.button.listen('click', () => {
+    this.emit('submit', {
+      sizeTitle: this.sizeTitle,
+      weightRange: this.weightRange,
+      sizeIndex: this.sizeIndex,
+    });
+  });
+}
+
+PetSize.prototype = Object.assign(PetSize.prototype, Component.prototype, {
+  renderComponents() {
+    this.uploadImage.mount(this.imageContainer);
+    this.sizeselector.mount(this.sizeselectorContainer);
+    this.button.mount(this.buttonComponent);
+  },
+  getSize() {
+    this.sizeTitle = this.sizeselector
+      .activeCardInit()
+      .card.querySelector('.container-size-selector__title').textContent;
+    this.weightRange = this.sizeselector
+      .activeCardInit()
+      .card.querySelector('.container-size-selector__text').textContent;
+    this.sizeIndex = this.sizeselector.activeCardInit().index;
+
+    this.sizeselector.listen('size:change', (card, index) => {
+      this.sizeTitle = card.querySelector(
+        '.container-size-selector__title',
+      ).textContent;
+      this.weightRange = card.querySelector(
+        '.container-size-selector__text',
+      ).textContent;
+      this.sizeIndex = index;
+    });
+  },
+});

src/layouts/pages/PetSize/index.scss

@@ -0,0 +1,74 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/fonts.scss' as fonts;
+
+.pet-size-page {
+  width: 100%;
+  min-height: 100%;
+
+  display: grid;
+  grid-template-rows: 1fr auto;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+
+    font-family: fonts.$primaryFont;
+  }
+
+  &__title {
+    color: colors.$gray800;
+    font-size: fonts.$xs;
+    font-weight: fonts.$medium;
+  }
+
+  &__hint {
+    color: colors.$gray800;
+    font-size: 1.1rem;
+    font-weight: fonts.$regular;
+
+    margin-top: 1.6rem;
+  }
+
+  &__size-selector {
+    min-height: 28rem;
+  }
+}
+
+.pet-size-page__button-container {
+  display: flex;
+
+  justify-content: center;
+
+  padding: 4rem 0;
+
+  box-shadow: 0 0 0.8rem 0 rgba(73, 77, 90, 0.12);
+  border-radius: 1rem 1rem 0 0;
+}
+
+.pet-size-page__button {
+  width: 100%;
+  max-width: 42rem;
+
+  padding: 0 2rem;
+}
+
+@include breakpoints.from1024 {
+  .pet-size-page {
+    &__button-container {
+      box-shadow: none;
+    }
+  }
+}

src/stories/PetSizePage.stories.js

@@ -0,0 +1,15 @@
+import PetSize from '~layouts/pages/PetSize';
+
+export default {
+  title: 'Pages/PetSizePage',
+  render: () => {
+    const petSizePage = new PetSize();
+    const $container = document.createElement('div');
+    petSizePage.mount($container);
+
+    return $container;
+  },
+  component: PetSize,
+};
+
+export const PetSizePageStory = {};