Write modifiers according to BEM

devhatt · Feb 27, 2024 · deb777b · deb777b
1 parent f903132
commit deb777b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git 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,17 +20,19 @@ 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);
   });
 }
 
 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
@@ -51,11 +51,11 @@
       content: '';
     }
 
-    &.checked {
+    &--checked {
       background-color: colors.$blue500;
     }
 
-    &.checked::after {
+    &--checked::after {
       transform: translateX(100%);
     }
   }