From deb777b713cca921df9eec4c154031da3287c0b0 Mon Sep 17 00:00:00 2001
From: nathalia <nathaliaazmelo@gmail.com>
Date: Mon, 26 Feb 2024 21:44:29 -0300
Subject: [PATCH] Write modifiers according to BEM

---
 src/components/Toggle/index.js   | 15 +++++++++------
 src/components/Toggle/index.scss |  4 ++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Toggle/index.js b/src/components/Toggle/index.js
index 5edff453..b82ee4df 100644
--- a/src/components/Toggle/index.js
+++ b/src/components/Toggle/index.js
@@ -1,6 +1,7 @@
 import './index.scss';
 import { Component, createIDFactory } from 'pet-dex-utilities';
-const generateID = createIDFactory("toggle");
+
+const generateID = createIDFactory('toggle');
 
 const events = ['toggle'];
 
@@ -19,7 +20,7 @@ export default function Toggle(checked) {
   this.selected.get('toggle-label').setAttribute('for', id);
 
   this.toggle(checked);
-  this.selected.get('toggle-input').addEventListener('change', (e) => {
+  this.selected.get('toggle-input').addEventListener('change', () => {
     checked = !checked;
     this.toggle(checked);
   });
@@ -27,9 +28,11 @@ export default function Toggle(checked) {
 
 Toggle.prototype = Object.assign(Toggle.prototype, Component.prototype, {
   toggle(checked) {
-    if (checked) this.selected.get('toggle-label').classList.add('checked');
-    if (!checked) this.selected.get('toggle-label').classList.remove('checked');
-    
+    if (checked) {
+      this.selected.get('toggle-label').classList.add('toggle-container__label--checked');
+    } else {
+      this.selected.get('toggle-label').classList.remove('toggle-container__label--checked');
+    }
     this.emit('toggle');
-  } 
+  },
 });
diff --git a/src/components/Toggle/index.scss b/src/components/Toggle/index.scss
index 330dc24f..95c4c45c 100644
--- a/src/components/Toggle/index.scss
+++ b/src/components/Toggle/index.scss
@@ -51,11 +51,11 @@
       content: '';
     }
 
-    &.checked {
+    &--checked {
       background-color: colors.$blue500;
     }
 
-    &.checked::after {
+    &--checked::after {
       transform: translateX(100%);
     }
   }