Purpose of Switch: Switches toggle the state of a single setting on or off.

Reference Video on Switch: https://www.youtube.com/watch?v=bztDMD4HSL0&t=3s

Reference Video on Pseudo ELements and Classes : https://www.youtube.com/playlist?list=PL4-IK0AVhVjPBX_HelwDlNsTiyr2YGSBw
Reference Video on the difference between Pseudo Classes and Pseudo Element : https://www.youtube.com/watch?v=RmDh3m8b9cU
Pseudo Classes for targeting states(:hover,:focus).
Pseudo ELements for selecting a part of an element (::before, ::after).

---------

Code Flow of Switch:
  Switch -> Switch.Behaviour -> Switch.Skeleton

 Switch.Consumer

 import React from 'react';
import 'Switch' from './Switch';

const SwitchComposer = ( props )=> {
  let [checked,setChecked] = useState(false);
  return (
    <div className="composer">
      <Switch label="Run All Cases" rounded="rounded" variant="primary" size="medium" rounded="rounded" checked={checked} onToggle={()=> setChecked(!checked)}/>
      </div>
  );
};

export default SwitchCOmposer;


import React from 'react';
import 'Switch' from './Switch';

export default class SwitchComposer  extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked:false
    };
    
    this.handleToggleChange =
      this.handleToggleChange.bind(this);
  }

  handleToggleChange(checkedValue)
  {
    this.setState({checked:checkedValue});
  }
  render() {
    return (
    <div className="composer">
      <Switch label="Run All Cases" rounded="rounded" variant="primary" size="medium" rounded="rounded" checked={this.state.checked} onToggle={()=> this.handleToggleChange(!this.state.checked)}/>
      </div>
    )
  }
}

export default SwitchConsumer; 
