CDE-58 Replace checkboxes in suggestion with radio button (#19)

* CDE-58 change from checkbox to radio, radio UI * CDE-54 changes made * CDE-58 unnecessary code deleted
MetaCell · Feb 19, 2024 · 4e8c053 · 4e8c053
1 parent 41529dc
commit 4e8c053
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 7 deletions.
diff --git a/lib/components/common/StyledCard.tsx b/lib/components/common/StyledCard.tsx
@@ -4,9 +4,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
-import Radio from '@mui/material/Radio';
 import {useRadioGroup} from '@mui/material/RadioGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import StyledRadio from './StyledRadio';
 import {vars} from '../../theme/variables';
 
 const {baseWhite, primary50, primary600, primary800, gray100, gray300, gray500, gray700} = vars
@@ -70,7 +70,7 @@ const StyledCard: React.FC<StyledCardProps> = ({value, isSuggested, selectedValu
                             }
                         }}
                     >
-                        <FormControlLabel value={value} control={<Radio size="small" checked={selectedValue === value}
+                        <FormControlLabel value={value} control={<StyledRadio checked={selectedValue === value}
                                                                         onChange={handleRadioChange}/>} label={value}/>
                         {isSuggested && <Typography variant="caption" sx={{color: gray500}}>
                             Suggested

diff --git a/lib/components/common/StyledRadio.tsx b/lib/components/common/StyledRadio.tsx
@@ -0,0 +1,35 @@
+import { styled } from '@mui/material/styles';
+import { Radio, RadioProps } from '@mui/material';
+import { RadioSelected } from '../../icons';
+import { vars } from '../../theme/variables';
+
+const {baseWhite, primary100, primary600, gray100, gray300} = vars;
+
+const DefaultIcon = styled('span')(() => ({
+    borderRadius: '50%',
+    width: 16,
+    height: 16,
+    backgroundColor: baseWhite,
+    border: `1px solid ${gray300}`,
+    'input:hover ~ &': {
+        backgroundColor: primary100,
+        border: `1px solid ${primary600}`
+    },
+    'input:disabled ~ &': {
+        boxShadow: 'none',
+        border: `1px solid ${gray300}`,
+        background: gray100
+    },
+}));
+
+export default function StyledRadio(props: RadioProps) {
+    return (
+        <Radio
+            disableRipple
+            color="default"
+            checkedIcon={<RadioSelected />}
+            icon={<DefaultIcon />}
+            {...props}
+        />
+    );
+}
diff --git a/lib/components/steps/Suggestions/SuggestionDetailUI.tsx b/lib/components/steps/Suggestions/SuggestionDetailUI.tsx
@@ -1,14 +1,16 @@
-import {Box, Checkbox, Typography} from '@mui/material';
-import {ArrowIcon, CheckboxDefault, CheckboxSelected, GlobeIcon} from '../../../icons';
+import {Box, Typography} from '@mui/material';
+import {ArrowIcon, GlobeIcon} from '../../../icons';
 import CdeDetails from '../../common/CdeDetails.tsx';
 import {vars} from '../../../theme/variables.ts';
 import {Entity} from "../../../models.ts";
 import {getCleanUrl} from "../../../helpers/functions.ts";
+import StyledRadio from '../../common/StyledRadio.tsx';
 
 const {
     gray900,
     gray200,
-    gray500
+    gray500,
+    gray300
 } = vars;
 
 type SuggestionDetailUIProps = {
@@ -42,8 +44,11 @@ function SuggestionDetailUI({entity}: SuggestionDetailUIProps) {
 
     return (
         <Box gap='1.5rem' display='flex' alignItems='start'>
-            <Box height='2.625rem' display='flex' alignItems='center'>
-                <Checkbox sx={{mt: '0rem'}} disableRipple icon={<CheckboxDefault/>} checkedIcon={<CheckboxSelected/>}/>
+            <Box height='2.625rem' display='flex' alignItems='center' sx={{"& .MuiRadio-root": {
+                                padding: 0,
+                                color: gray300
+                            },}}>
+                <StyledRadio/>
             </Box>
             <Box flex={1}>
                 <Box gap='1.5rem' display='flex' alignItems='center' mb='0.75rem'>

diff --git a/lib/icons/index.tsx b/lib/icons/index.tsx
@@ -213,4 +213,12 @@ export const PlusIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H10.625V16.875C10.625 17.0408 10.5592 17.1997 10.4419 17.3169C10.3247 17.4342 10.1658 17.5 10 17.5C9.83424 17.5 9.67527 17.4342 9.55806 17.3169C9.44085 17.1997 9.375 17.0408 9.375 16.875V10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H9.375V3.125C9.375 2.95924 9.44085 2.80027 9.55806 2.68306C9.67527 2.56585 9.83424 2.5 10 2.5C10.1658 2.5 10.3247 2.56585 10.4419 2.68306C10.5592 2.80027 10.625 2.95924 10.625 3.125V9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z" fill="#676C74"/>
   </svg>
+)
+
+export const RadioSelected = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="#EEF2FC"/>
+    <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#19418F"/>
+    <circle cx="8" cy="8" r="3" fill="#19418F"/>
+  </svg>
 )