feat(with-without): continued theming

Author: glassdimly

packages/components/bolt-with-without/SimpleSwitch.scss

@@ -4,7 +4,7 @@ $simple-switch_focus-ring-size: 7px !default;
 $simple-switch_handle-color: bolt-color('teal', 'light') !default;
 $simple-switch_outline-size: 4px !default;
 // this is just a default value/fallback for older browsers
-$simple-switch_size: 155px !default;
+$simple-switch_size: 175px !default;
 // @TODO make this be the animation tokens
 $simple-switch_switch-speed: 250ms !default;
 $simple-switch_tray-color: bolt-color('white') !default;

packages/components/bolt-with-without/js/with-without.js

@@ -7,38 +7,21 @@ const SimpleSwitch = require('a-simple-switch');
  *
  * @return {void}
  */
-const setActiveRegion = (checked, shouldToggleAnimations) => {
+const setActiveRegion = (checked) => {
   const activeWoClass = 'c-pega-wwo__active-wo';
   const activeWClass = 'c-pega-wwo__active-w';
   const mainWrapper = document.querySelector('.c-pega-wwo__wrapper');
   mainWrapper.classList.add(checked ? activeWClass : activeWoClass);
   mainWrapper.classList.remove(checked ? activeWoClass : activeWClass);
 };
 
-// const toggleAnimations = (classToActivate, classToDeactivate) => {
-//   const animationClasses = ['c-pega-wwo__sm-circle'];
-//   const animationAttribute = 'data-anim-triggered';
-//   animationClasses.forEach((animationClass) => {
-//     const activateEl = document.querySelector(`.${classToActivate} .${animationClass}`);
-//     if (activateEl) {
-//       activateEl.setAttribute(animationAttribute, 'yes');
-//     }
-//     const deActivateEl = document.querySelector(`.${classToDeactivate} .${animationClass}`);
-//     if (deActivateEl) {
-//       deActivateEl.setAttribute(animationAttribute, 'yes');
-//     }
-//   });
-// };
-
-window.onload = () => {
-  setTimeout(() => {
-    const toggleInputClass = '#c-pega-wwo__toggle-input';
-    SimpleSwitch.init();
-    setActiveRegion(document.querySelector(toggleInputClass).checked);
-    document
-      .querySelector('#c-pega-wwo__toggle-input')
-      .addEventListener('change', e => {
-        setActiveRegion(e.target.checked);
-      });
-  }, 4000);
-};
+setTimeout(() => {
+  const toggleInputClass = '#c-pega-wwo__toggle-input';
+  SimpleSwitch.init();
+  setActiveRegion(document.querySelector(toggleInputClass).checked);
+  document
+    .querySelector('#c-pega-wwo__toggle-input')
+    .addEventListener('change', e => {
+      setActiveRegion(e.target.checked);
+    });
+}, 0);