Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Not applicable constraints styling #3450

Merged
merged 3 commits into from
Jul 24, 2024
Merged

feat: Not applicable constraints styling #3450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a208daf
feat: Not applicable constraints styling
ianjon3s Jul 23, 2024
3a0d3d9
feat: Updates to not applicable styling
ianjon3s Jul 24, 2024
79e3058
fix: Render labels using value prop
ianjon3s Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 49 additions & 43 deletions editor.planx.uk/src/@planx/components/PlanningConstraints/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 ===
Expand All @@ -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={{
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions editor.planx.uk/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
1 change: 1 addition & 0 deletions editor.planx.uk/src/themeOverrides.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { RadioProps } from "@mui/material/Radio";
declare module "@mui/material/Chip" {
interface ChipPropsVariantOverrides {
uploadedFileTag: true;
notApplicableTag: true;
}
}

Expand Down
Loading