Issue 227 (#247)

* fix: ajuste na função setcheck do component checkbox

* fix: atualiza lista de eventos do checkbox

* feat: adiciona radiobutton sem borda

* fix: ajusta tamanho do radiobutton sem borda

src/components/Checkbox/index.js

@@ -1,7 +1,13 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
 
-const events = ['change', 'text:change', 'disable', 'value:change'];
+const events = [
+  'change',
+  'value:change',
+  'text:change',
+  'name:change',
+  'disable',
+];
 
 const html = `
     <label class="checkbox-container">
@@ -28,7 +34,7 @@ export default function Checkbox({
   const $checkbox = this.selected.get('checkbox');
 
   $checkbox.addEventListener('change', (e) => {
-    this.setChecked(e.target.checked);
+    this.setCheck(e.target.checked);
   });
 }
 

src/components/RadioButton/index.js

@@ -22,6 +22,7 @@ export default function RadioButton({
   value = '',
   name = '',
   disabled = false,
+  borderless = false,
 } = {}) {
   Component.call(this, { html, events });
 
@@ -30,6 +31,7 @@ export default function RadioButton({
   this.setValue(value);
   this.setName(name);
   this.setDisabled(disabled);
+  this.setBorderless(borderless);
   const $radioButton = this.selected.get('radio-button');
 
   $radioButton.addEventListener('change', (e) => {
@@ -85,5 +87,14 @@ RadioButton.prototype = Object.assign(
       $radioButton.name = name;
       this.emit('name:change', name);
     },
+
+    setBorderless(borderless = false) {
+      const $radioContainer = this.selected.get('radio-container');
+      if (borderless) {
+        $radioContainer.classList.add('radio-container--borderless');
+      } else {
+        $radioContainer.classList.remove('radio-container--borderless');
+      }
+    },
   },
 );

src/components/RadioButton/index.scss

@@ -17,6 +17,11 @@
 
   cursor: pointer;
 
+  &--borderless {
+    padding: 0;
+    border: 0;
+  }
+
   &:has(&__input:checked) {
     color: colors.$primary200;
 

src/stories/RadioButton.stories.js

@@ -32,3 +32,10 @@ export const Disabled = {
     disabled: true,
   },
 };
+
+export const Borderless = {
+  args: {
+    ...Default.args,
+    borderless: true,
+  },
+};