Feature/wms 15 (#21)

* completed the toggle component
* Delete: breadcrumbs changes
* Updated: file location and naming
* Fix naming and props errors

Co-authored-by: TalhaAbbas55 <talhaabbas556989@.com>
Co-authored-by: bluestreamlds <85561356+bluestreamlds@users.noreply.github.com>
Co-authored-by: Llewellyn Dsouza <lledsouza2209@gmail.com>

src/components/Checkbox/index.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import MDCheckbox from '@mui/material/Checkbox';
+export default function Checkbox(props) {
+  return <MDCheckbox {...props} />;
+}

src/components/RadioButton/index.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import PropTypes from 'prop-types';
+
+export default function RadioButtonGroup({ options, groupLabel }) {
+  return (
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">{groupLabel}</FormLabel>
+      <RadioGroup defaultValue={options[0]} name="radio-buttons-group">
+        {options.map((option) => (
+          <FormControlLabel value={option} key={option} control={<Radio />} label={option} />
+        ))}
+      </RadioGroup>
+    </FormControl>
+  );
+}
+
+RadioButtonGroup.propTypes = {
+  options: PropTypes.array,
+  groupLabel: PropTypes.string
+};

src/components/Switch/index.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import FormGroup from '@mui/material/FormGroup';
+import SwitchButton from '@mui/material/Switch';
+
+const IOSSwitch = styled((props) => (
+  <SwitchButton disableRipple focusVisibleClassName=".Mui-focusVisible" {...props} />
+))(({ theme }) => ({
+  width: 47,
+  height: 26,
+  padding: 0,
+  '& .MuiSwitch-switchBase': {
+    padding: 0,
+    margin: 2,
+    transitionDuration: '300ms',
+    '&.Mui-checked': {
+      transform: 'translateX(20px)',
+      color: '#fff',
+      '& + .MuiSwitch-track': {
+        backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466 !important',
+        opacity: 1,
+        border: 0
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: 0.5
+      }
+    },
+    '&.Mui-focusVisible .MuiSwitch-thumb': {
+      color: '#33cf4d',
+      border: '6px solid #fff'
+    },
+    '&.Mui-disabled .MuiSwitch-thumb': {
+      color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600]
+    },
+    '&.Mui-disabled + .MuiSwitch-track': {
+      opacity: theme.palette.mode === 'light' ? 0.7 : 0.3
+    }
+  },
+  '& .MuiSwitch-thumb': {
+    boxSizing: 'border-box',
+    width: 22,
+    height: 22,
+    border: 'none'
+  },
+  '& .MuiSwitch-track': {
+    borderRadius: 26 / 2,
+    backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500
+    }),
+    height: 26,
+    width: 80
+  }
+}));
+
+export default function Switch({ checked }) {
+  return (
+    <FormGroup>
+      <FormControlLabel control={<IOSSwitch defaultChecked={checked} sx={{ m: 1 }} />} label="" />
+    </FormGroup>
+  );
+}
+
+Switch.propTypes = {
+  checked: PropTypes.bool
+};