From 83c773a42793a74e2dd5c7bec28397ffe924472f Mon Sep 17 00:00:00 2001
From: Klebson Mateus <klebsonbm@gmail.com>
Date: Wed, 22 May 2024 09:25:01 -0300
Subject: [PATCH] Issue 227 (#247)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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      | 10 ++++++++--
 src/components/RadioButton/index.js   | 11 +++++++++++
 src/components/RadioButton/index.scss |  5 +++++
 src/stories/RadioButton.stories.js    |  7 +++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
index b51452e7..b4c5a5b1 100644
--- a/src/components/Checkbox/index.js
+++ b/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);
   });
 }
 
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
index c9400f68..5f1d588b 100644
--- a/src/components/RadioButton/index.js
+++ b/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');
+      }
+    },
   },
 );
diff --git a/src/components/RadioButton/index.scss b/src/components/RadioButton/index.scss
index d3405e9b..559a4399 100644
--- a/src/components/RadioButton/index.scss
+++ b/src/components/RadioButton/index.scss
@@ -17,6 +17,11 @@
 
   cursor: pointer;
 
+  &--borderless {
+    padding: 0;
+    border: 0;
+  }
+
   &:has(&__input:checked) {
     color: colors.$primary200;
 
diff --git a/src/stories/RadioButton.stories.js b/src/stories/RadioButton.stories.js
index 472bc7fb..dfd01149 100644
--- a/src/stories/RadioButton.stories.js
+++ b/src/stories/RadioButton.stories.js
@@ -32,3 +32,10 @@ export const Disabled = {
     disabled: true,
   },
 };
+
+export const Borderless = {
+  args: {
+    ...Default.args,
+    borderless: true,
+  },
+};