fix: modified rgb style color to original fonts (devhatt#190)

* fix: modified rgb style color to original fonts

* feat: image and name getValue emission

* fix: changes required

* feat: storybook created

* fix: x

* style: modified rgb style to color fonts and spacing adjustment

* fix: removed margin from top of page

* fix: inputText classList removed

src/components/Button/index.js

@@ -54,12 +54,12 @@ Button.prototype = Object.assign(Button.prototype, Component.prototype, {
   },
 
   disable() {
-    this.selected.get('button').disabled = true;
+    this.selected.get('button').setAttribute('disabled', true);
     this.emit('disable');
   },
 
   enable() {
-    this.selected.get('button').disabled = false;
+    this.selected.get('button').removeAttribute('disabled');
     this.emit('enable');
   },
 
@@ -69,7 +69,7 @@ Button.prototype = Object.assign(Button.prototype, Component.prototype, {
   },
 
   isDisabled() {
-    return this.selected.get('button').disabled;
+    return this.selected.get('button').hasAttribute('disabled');
   },
 
   click() {

src/components/TextInput/index.js

@@ -39,8 +39,9 @@ export default function TextInput({
     input.classList.remove('input-error');
   });
 
-  input.addEventListener('input', () => {
-    this.emit('value:change', input.value);
+  input.addEventListener('input', (e) => {
+    const { value } = e.target;
+    this.setValue(value);
   });
 }
 
@@ -77,6 +78,13 @@ TextInput.prototype = Object.assign(TextInput.prototype, Component.prototype, {
     this.selected.get('input-text').disabled = false;
     this.emit('enabled');
   },
+  setValue(value) {
+    this.selected.get('input-text').value = value;
+    this.emit('value:change', value);
+  },
+  getValue() {
+    return this.selected.get('input-text').value;
+  },
   toggle() {
     if (this.selected.get('input-text').disabled) {
       this.enable();

src/components/TextInput/index.scss

@@ -8,18 +8,20 @@
     width: 100%;
     height: 100%;
 
-    color: colors.$gray600;
+    font-size: fonts.$xs;
 
-    font-size: fonts.$sm;
-    font-weight: fonts.$bold;
-
-    box-sizing: border-box;
+    padding: 1.5rem;
+    border: colors.$gray250;
+    border-color: colors.$gray150;
 
     box-sizing: border-box;
 
     background-repeat: no-repeat;
     background-size: auto 60%;
     filter: opacity(0.85);
+    border-radius: 14px;
+
+    transition: border-color 0.3s ease-in-out;
 
     &::placeholder {
       font-weight: fonts.$regular;

src/components/UploadImage/index.js

@@ -4,6 +4,8 @@ import placeholderImage from './img/placeholder.svg';
 import plusIcon from './img/plus-icon.svg';
 import photoIcon from './img/photo-icon.svg';
 
+const events = ['value:change'];
+
 const html = `
   <div class="container-upload-image">
     <div class="container-upload-image__animation">
@@ -24,31 +26,31 @@ const html = `
 `;
 
 export default function UploadImage() {
-  Component.call(this, { html });
+  Component.call(this, { html, events });
 
   const previewImage = this.selected.get('image-preview');
   const buttonIcon = this.selected.get('button-icon');
   const uploadInput = this.selected.get('upload-input');
 
+  this.reader = new FileReader();
+
   const readAndDisplayImage = (file) => {
-    const reader = new FileReader();
-    reader.addEventListener('load', (e) => {
+    this.reader.addEventListener('load', (e) => {
       const readerTarget = e.target;
       previewImage.src = readerTarget.result;
       previewImage.classList.remove('hidden');
       buttonIcon.src = photoIcon;
+      this.emit('value:change', readerTarget.result);
     });
 
-    reader.readAsDataURL(file);
+    this.reader.readAsDataURL(file);
   };
 
   const handleInputChange = (e) => {
     const inputTarget = e.target;
     const file = inputTarget.files[0];
 
-    if (file) {
-      readAndDisplayImage(file);
-    }
+    if (file) readAndDisplayImage(file);
   };
 
   uploadInput.addEventListener('change', handleInputChange);
@@ -57,4 +59,9 @@ export default function UploadImage() {
 UploadImage.prototype = Object.assign(
   UploadImage.prototype,
   Component.prototype,
+  {
+    getImage() {
+      return this.reader.result;
+    },
+  },
 );

src/home/components/PetRegister/index.js

@@ -0,0 +1,63 @@
+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-register'>
+    <div class='pet-register__container'>
+      <div class='pet-register__image' data-select='upload-image-container'></div>
+      <h1 class='pet-register__title'>Qual o nome do seu bichinho?</h1>
+      <div class='pet-register__input' data-select='input-container'></div>
+    </div>
+    <div class='pet-register__button' data-select='button-container'></div>
+  </div>
+`;
+
+export default function PetRegister() {
+  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.getValue();
+    const name = this.input.getValue();
+    this.emit('submit', { image, name });
+  });
+
+  this.upload.mount($uploadImage);
+  this.input.mount($inputContainer);
+  this.button.mount($buttonContainer);
+}
+
+PetRegister.prototype = Object.assign(
+  PetRegister.prototype,
+  Component.prototype,
+);

src/home/components/PetRegister/index.scss

@@ -0,0 +1,72 @@
+@use '~styles/breakpoints.scss' as breakpoints;
+@use '~styles/colors.scss' as colors;
+@use '~styles/fonts.scss' as fonts;
+
+.pet-register {
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    width: 100%;
+  }
+
+  &__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 {
+    max-width: 32.7rem;
+
+    margin: 0 auto;
+  }
+
+  &__button {
+    width: 100%;
+
+    margin-top: 16.8rem;
+    padding: 2rem;
+    box-sizing: border-box;
+
+    box-shadow: 0 -3px 8px 0 rgba(73, 77, 90, 0.12156862745098039);
+    border-radius: 1.7rem;
+  }
+}
+
+@include breakpoints.from1024 {
+  .pet-register {
+    align-items: center;
+
+    &__title {
+      font-size: fonts.$sm;
+
+      margin-top: 15rem;
+    }
+
+    &__input {
+      max-width: 40rem;
+
+      margin: 0 auto;
+    }
+
+    &__button {
+      width: 43%;
+
+      margin-top: 4rem;
+      padding: unset;
+
+      box-shadow: unset;
+    }
+  }
+}

src/stories/PetRegister.stories.js

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