From 53f213bca3c9a488a8e4c5fc7c89b1f4a2c88eba Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:28:29 +0100
Subject: [PATCH] refactor: Simplify and improve description radio layout
 (#3729)

---
 .../components/Question/Public/Question.tsx   | 22 +++++------
 .../components/shared/Radio/BasicRadio.tsx    |  9 ++++-
 .../shared/Radio/DescriptionRadio.tsx         | 39 ++++++-------------
 3 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
index 514eeca133..88b1f54b5d 100644
--- a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
@@ -88,7 +88,7 @@ const QuestionComponent: React.FC<Question> = (props) => {
             >
               <Grid
                 container
-                spacing={layout === QuestionLayout.Basic ? 0 : 2}
+                spacing={layout === QuestionLayout.Images ? 2 : 0}
                 alignItems="stretch"
               >
                 {props.responses?.map((response) => {
@@ -116,16 +116,16 @@ const QuestionComponent: React.FC<Question> = (props) => {
                       );
                     case QuestionLayout.Descriptions:
                       return (
-                        <Grid
-                          item
-                          xs={12}
-                          sm={6}
-                          contentWrap={4}
-                          key={response.id}
-                          data-testid="description-radio"
-                        >
-                          <DescriptionRadio {...buttonProps} {...response} />
-                        </Grid>
+                        <FormWrapper key={`wrapper-${response.id}`}>
+                          <Grid
+                            item
+                            xs={12}
+                            key={`grid-${response.id}`}
+                            data-testid="description-radio"
+                          >
+                            <DescriptionRadio {...buttonProps} {...response} />
+                          </Grid>
+                        </FormWrapper>
                       );
                     case QuestionLayout.Images:
                       return (
diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx
index 55a9a7606b..42271ca227 100644
--- a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx
@@ -1,6 +1,7 @@
 import FormControlLabel, {
   FormControlLabelProps,
 } from "@mui/material/FormControlLabel";
+import { formControlLabelClasses } from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import React from "react";
 
@@ -23,7 +24,13 @@ const BasicRadio: React.FC<Props> = ({
     onChange={onChange}
     control={<Radio variant={variant} />}
     label={title}
-    sx={variant === "default" ? { pb: 1 } : {}}
+    sx={(theme) => ({
+      mb: variant === "default" ? 1 : 0,
+      alignItems: "flex-start",
+      [`& .${formControlLabelClasses.label}`]: {
+        paddingTop: theme.spacing(0.95),
+      },
+    })}
   />
 );
 
diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx
index 5798bd4ea0..f6ad7847bb 100644
--- a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx
@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import FormLabel from "@mui/material/FormLabel";
 import Radio, { RadioProps } from "@mui/material/Radio";
-import { useRadioGroup } from "@mui/material/RadioGroup";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
@@ -13,25 +12,10 @@ export interface Props {
   onChange: RadioProps["onChange"];
 }
 
-interface StyledFormLabelProps {
-  isSelected: boolean;
-}
-
-const StyledFormLabel = styled(FormLabel, {
-  shouldForwardProp: (prop) => prop !== "isSelected",
-})<StyledFormLabelProps>(({ theme, isSelected }) => ({
-  border: "2px solid",
-  borderColor: isSelected
-    ? theme.palette.primary.main
-    : theme.palette.border.main,
-  padding: theme.spacing(1.5),
+const StyledFormLabel = styled(FormLabel)(({ theme }) => ({
+  display: "flex",
+  marginBottom: theme.spacing(1),
   cursor: "pointer",
-  display: "block",
-  height: "100%",
-  color: theme.palette.text.primary,
-  "& > p": {
-    color: theme.palette.text.secondary,
-  },
 }));
 
 const DescriptionRadio: React.FC<Props> = ({
@@ -40,16 +24,17 @@ const DescriptionRadio: React.FC<Props> = ({
   onChange,
   id,
 }) => {
-  const radioGroupState = useRadioGroup();
-  const isSelected = radioGroupState?.value === id;
-
   return (
-    <StyledFormLabel focused={false} isSelected={isSelected}>
-      <Box sx={{ paddingBottom: 1, display: "flex", alignItems: "center" }}>
-        <Radio value={id} onChange={onChange} />
-        <Typography variant="body1">{title}</Typography>
+    <StyledFormLabel focused={false}>
+      <Radio value={id} onChange={onChange} />
+      <Box>
+        <Typography color="text.primary" variant="body1" pt={0.95}>
+          {title}
+        </Typography>
+        <Typography variant="body2" pt={0.5}>
+          {description}
+        </Typography>
       </Box>
-      <Typography variant="body2">{description}</Typography>
     </StyledFormLabel>
   );
 };