feat: namepet recovered from commit (#307)

* feat: namepet getted by commit

* fix: upload getImage

* fix: change component name

* fix: petname css

* fix: remove unnecessary

* fix: border

src/layouts/pages/PetName/index.js

@@ -0,0 +1,62 @@
+import { Component } from 'pet-dex-utilities';
+import TextInput from '../../../components/TextInput';
+import UploadImage from '../../../components/UploadImage';
+import Button from '../../../components/Button';
+import './index.scss';
+
+const events = ['submit'];
+
+const html = `
+  <div class='pet-name'>
+    <div class='pet-name__container'>
+      <div class='pet-name__image' data-select='upload-image-container'></div>
+      <h1 class='pet-name__title'>Qual o nome do seu bichinho?</h1>
+      <div class='pet-name__input' data-select='input-container'></div>
+    </div>
+    <div class="pet-name__footer">
+      <div class='pet-name__button' data-select='button-container'></div>
+    </div>
+  </div>
+`;
+
+export default function PetName() {
+  Component.call(this, { html, events });
+
+  const $inputContainer = this.selected.get('input-container');
+  const $uploadImage = this.selected.get('upload-image-container');
+  const $buttonContainer = this.selected.get('button-container');
+
+  this.input = new TextInput({
+    placeholder: 'Nome do Pet',
+  });
+
+  this.upload = new UploadImage();
+  this.button = new Button({
+    text: 'Continuar',
+    isFullWidth: true,
+    isDisabled: false,
+  });
+
+  const updateButtonVisibility = () => {
+    const input = this.input.getValue();
+    const image = this.upload.getImage();
+
+    this.button.setIsDisabled(!(input && image));
+  };
+  updateButtonVisibility();
+
+  this.upload.listen('value:change', updateButtonVisibility);
+  this.input.listen('value:change', updateButtonVisibility);
+
+  this.button.listen('click', () => {
+    const image = this.upload.getImage();
+    const name = this.input.getValue();
+    this.emit('submit', { image, name });
+  });
+
+  this.upload.mount($uploadImage);
+  this.input.mount($inputContainer);
+  this.button.mount($buttonContainer);
+}
+
+PetName.prototype = Object.assign(PetName.prototype, Component.prototype);

src/layouts/pages/PetName/index.scss

@@ -0,0 +1,70 @@
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.pet-name {
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    width: 100%;
+
+    margin-bottom: 2.4rem;
+  }
+
+  &__image {
+    max-width: 18.6rem;
+
+    margin: 5rem auto;
+  }
+
+  &__title {
+    font-family: fonts.$primaryFont;
+    color: colors.$gray800;
+    text-align: center;
+    font-size: fonts.$xs;
+    font-weight: fonts.$medium;
+
+    margin: 7rem auto 3rem;
+  }
+
+  &__input {
+    width: min(100%, 42rem);
+
+    margin: 0 auto;
+  }
+
+  &__footer {
+    width: 100%;
+
+    display: flex;
+
+    justify-content: center;
+
+    margin-top: auto;
+  }
+
+  &__button {
+    width: min(100%, 42rem);
+  }
+}
+
+@include breakpoints.from1024 {
+  .pet-name {
+    align-items: center;
+
+    &__container {
+      margin-bottom: 0;
+    }
+
+    &__title {
+      font-size: fonts.$sm;
+
+      margin-top: 15rem;
+    }
+
+    &__button {
+      margin-top: 4rem;
+    }
+  }
+}

src/stories/PetName.stories.js

@@ -0,0 +1,14 @@
+import PetRegister from '~layouts/pages/PetName';
+
+export default {
+  title: 'Pages/PetName',
+
+  render: (args = {}) => {
+    const $container = document.createElement('div');
+    const component = new PetRegister(args);
+    component.mount($container);
+    return $container;
+  },
+};
+
+export const Default = {};