refactor: adjusting components to match patterns

src/components/Button/index.js

@@ -1,13 +1,14 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
 
-const events = ['click', 'text:change', 'enable', 'disable'];
+const events = ['click', 'text:change', 'enable', 'disable', 'id:changed'];
 
 const html = `
     <button data-select="button" class="button" type="button"></button>
 `;
 
 export default function Button({
+  id = '',
   text = '',
   isFullWidth = false,
   isDisabled = false,
@@ -17,6 +18,7 @@ export default function Button({
   this.setText(text);
   this.setIsFullWidth(isFullWidth);
   this.setIsDisabled(isDisabled);
+  this.setID(id);
 
   const $button = this.selected.get('button');
 
@@ -76,4 +78,13 @@ Button.prototype = Object.assign(Button.prototype, Component.prototype, {
     if (this.isDisabled()) return;
     this.emit('click');
   },
+
+  getID() {
+    return this.selected.get('button').id;
+  },
+
+  setID(id = '') {
+    this.selected.get('button').id = id;
+    this.emit('id:changed', id);
+  },
 });

src/components/Dropdown/index.js

@@ -14,6 +14,8 @@ const events = [
   'unselect',
   'value:change',
   'value:clear',
+  'id:changed',
+  'error',
 ];
 
 const html = `
@@ -33,12 +35,14 @@ const html = `
 export default function Dropdown({
   items = [],
   placeholder = 'Select an option',
+  id = '',
 } = {}) {
   Component.call(this, { html, events });
 
   this.placeholder = placeholder;
   this.items = new Map();
   this.selectedItem = null;
+  this.setID(id);
 
   this.onSelect = (item) => {
     const existsAndIsDifferent =
@@ -191,4 +195,13 @@ Dropdown.prototype = Object.assign(Dropdown.prototype, Component.prototype, {
       placeholder: this.getPlaceholder(),
     };
   },
+
+  getID() {
+    return this.selected.get('dropdown-toggle').id;
+  },
+
+  setID(id = '') {
+    this.selected.get('dropdown-toggle').id = id;
+    this.emit('id:changed', id);
+  },
 });

src/components/Dropdown/index.scss

@@ -2,13 +2,15 @@
 @use '~styles/fonts.scss' as fonts;
 
 .dropdown {
-  width: fit-content;
+  width: 100%;
+  height: 100%;
 
   font-family: fonts.$primaryFont;
-  color: colors.$gray800;
   font-size: 1.4rem;
   font-weight: fonts.$semiBold;
 
+  color: colors.$gray800;
+
   position: relative;
 
   &--open {
@@ -41,7 +43,7 @@
 
     list-style: none;
 
-    background-color: rgb(255, 255, 255);
+    background-color: colors.$white;
 
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
     border-radius: 1.4rem;
@@ -50,20 +52,19 @@
   }
 
   &__toggle {
-    width: 100%;
-
     display: flex;
     gap: 2rem;
 
     justify-content: space-between;
 
-    padding: 1rem;
+    padding: 1.8rem 1.6rem;
 
     box-sizing: border-box;
 
-    background-color: rgb(255, 255, 255);
+    background-color: colors.$white;
+
+    border: 1px solid colors.$gray200;
 
-    box-shadow: 0 0 5px 0 rgb(216, 216, 216);
     border-radius: 1.4rem;
 
     .dropdown__icon {

src/components/RegisterForm/components/Field.js

@@ -0,0 +1,70 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = [
+  'label:changed',
+  'error:message',
+  'content:changed',
+  'error:visible',
+  'error:resolved',
+];
+
+const html = `
+    <div class="field" data-select="field">
+      <label class="field__label" data-select="field-label"></label>
+      <div class="field__input" data-select="field-input"></div>
+      <span class="field__error" data-select="field-error"></span>
+    </div>
+`;
+
+export default function Field({ label = '', error = '', content } = {}) {
+  Component.call(this, { html, events });
+  this.content = null;
+  this.setLabel(label);
+  this.setError(error);
+  this.setContent(content);
+}
+
+Field.prototype = Object.assign(Field.prototype, Component.prototype, {
+  getLabel() {
+    return this.selected.get('field-label').innerText;
+  },
+
+  setLabel(label = '') {
+    this.selected.get('field-label').innerText = label;
+    this.emit('label:changed', label);
+  },
+
+  getError() {
+    return this.selected.get('field-error').innerText;
+  },
+
+  setError(error = '') {
+    this.selected.get('field-error').innerText = error;
+    this.emit('error:message', error);
+  },
+
+  showError(error) {
+    this.selected.get('field-error').classList.add('show-error');
+    this.emit('error:visible', error);
+  },
+
+  resError(error) {
+    this.selected.get('field-error').classList.remove('show-error');
+    this.emit('error:resolved', error);
+  },
+
+  getContent() {
+    return this.content;
+  },
+
+  setContent(content) {
+    if (content?.mount == null) {
+      return;
+    }
+
+    this.content = content;
+    this.content.mount(this.selected.get('field-input'));
+    this.emit('content:changed', this.content);
+  },
+});