feat: Not applicable constraints styling (#3450)

theopensystemslab · Jul 24, 2024 · 735f43a · 735f43a
1 parent 65953c6
commit 735f43a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 43 deletions.
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
@@ -2,6 +2,8 @@ import Accordion from "@mui/material/Accordion";
 import AccordionDetails from "@mui/material/AccordionDetails";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import Box, { BoxProps } from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Chip from "@mui/material/Chip";
 import Link from "@mui/material/Link";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
@@ -178,7 +180,7 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
     .join("&");
   const planningDataMapURL = `https://www.planning.data.gov.uk/map/?${encodedMatchingDatasets}#${latitude},${longitude},17.5z`;
 
-  // If a user overrides every entity in a constraint category, then that whole category becomes inapplicable and we want to gray it out
+  // If a user overrides every entity in a constraint category, then that whole category becomes inapplicable and we want to add a chip
   const allEntitiesInaccurate =
     props.data?.length !== 0 &&
     props.data?.length ===
@@ -198,14 +200,23 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
           expandIcon={<Caret />}
           sx={{ pr: 1.5, background: `rgba(255, 255, 255, 0.8)` }}
         >
-          <Typography
-            component="div"
-            variant="body2"
-            pr={1.5}
-            sx={{ color: allEntitiesInaccurate ? "GrayText" : "inherit" }}
-          >
-            {children}
-          </Typography>
+          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%", }}> 
+            <Typography
+              component="div"
+              variant="body2"
+              pr={1.5}
+            >
+              {children}
+            </Typography>
+            {allEntitiesInaccurate && (
+              <Chip
+                label={props.value ? "Marked as not applicable" : "Not applicable"}
+                variant="notApplicableTag"
+                size="small"
+                sx={{ mr: 0.75 }}
+              />
+            )}
+          </Box>
         </AccordionSummary>
         <AccordionDetails
           sx={{
@@ -232,39 +243,32 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
                       disableGutters
                       sx={{
                         display: "list-item",
-                        color: props.inaccurateConstraints?.[props.fn]?.[
-                          "entities"
-                        ]?.includes(`${record.entity}`)
-                          ? "GrayText"
-                          : "inherit",
                       }}
                     >
-                      {isSourcedFromPlanningData ? (
-                        <Typography variant="body2" component="span">
-                          <Link
-                            href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
-                            target="_blank"
-                            sx={{
-                              color: props.inaccurateConstraints?.[props.fn]?.[
-                                "entities"
-                              ]?.includes(`${record.entity}`)
-                                ? "GrayText"
-                                : "inherit",
-                            }}
-                          >
-                            {formatEntityName(record, props.metadata)}
-                          </Link>
-                        </Typography>
-                      ) : (
-                        <Typography variant="body2">{record.name}</Typography>
-                      )}
-                      {props.inaccurateConstraints?.[props.fn]?.[
-                        "entities"
-                      ]?.includes(`${record.entity}`) && (
-                        <Typography variant="body2" component="span">
-                          {` [Not applicable]`}
-                        </Typography>
-                      )}
+                      <Box sx={{ display: "flex", flexDirection: { xs: "column", md: "row" }, alignItems: { xs: "flex-start", md: "center" } }}>
+                        {isSourcedFromPlanningData ? (
+                          <Typography variant="body2" component="span">
+                            <Link
+                              href={`https://www.planning.data.gov.uk/entity/${record.entity}`}
+                              target="_blank"
+                            >
+                              {formatEntityName(record, props.metadata)}
+                            </Link>
+                          </Typography>
+                        ) : (
+                          <Typography variant="body2">{record.name}</Typography>
+                        )}
+                          {props.inaccurateConstraints?.[props.fn]?.[
+                          "entities"
+                        ]?.includes(`${record.entity}`) && (
+                          <Chip
+                            label="Marked as not applicable"
+                            variant="notApplicableTag"
+                            size="small"
+                            sx={{ ml: { md: "0.75em" } }}
+                          />
+                        )}
+                      </Box>
                     </ListItem>
                   ))}
               </List>
@@ -302,15 +306,17 @@ function ConstraintListItem({ children, ...props }: ConstraintListItemProps) {
             props.value &&
             Boolean(props.data?.length) && (
               <Typography variant="h5">
-                <Link
-                  component="button"
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  size="small"
                   onClick={(event) => {
                     event.stopPropagation();
                     setShowModal(true);
                   }}
                 >
                   I don't think this constraint applies to this property
-                </Link>
+                </Button>
               </Typography>
             )}
           <OverrideEntitiesModal

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -428,6 +428,14 @@ const getThemeOptions = ({
               color: darken(palette.info.main, 0.8),
             },
           },
+          {
+            props: { variant: "notApplicableTag" },
+            style: {
+              backgroundColor: lighten(palette.warning.light, 0.7),
+              fontWeight: FONT_WEIGHT_SEMI_BOLD,
+              color: palette.text.primary,
+            },
+          },
         ],
       },
       MuiSwitch: {

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -7,6 +7,7 @@ import { RadioProps } from "@mui/material/Radio";
 declare module "@mui/material/Chip" {
   interface ChipPropsVariantOverrides {
     uploadedFileTag: true;
+    notApplicableTag: true;
   }
 }