From 129f1f1738c8499f2478578014dab651fd54e577 Mon Sep 17 00:00:00 2001
From: Talha Abbas <talhaabbas556989@gmail.com>
Date: Wed, 26 Jan 2022 13:55:03 +0500
Subject: [PATCH] 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    |  5 +++
 src/components/RadioButton/index.js | 25 +++++++++++
 src/components/Switch/index.js      | 69 +++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/components/Checkbox/index.js
 create mode 100644 src/components/RadioButton/index.js
 create mode 100644 src/components/Switch/index.js

diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
new file mode 100644
index 0000000..5b989eb
--- /dev/null
+++ b/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} />;
+}
diff --git a/src/components/RadioButton/index.js b/src/components/RadioButton/index.js
new file mode 100644
index 0000000..afb91b9
--- /dev/null
+++ b/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
+};
diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js
new file mode 100644
index 0000000..eee7388
--- /dev/null
+++ b/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
+};