From d9f72b99b742ef5018f2477828d6c855f82b8778 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Fri, 20 Sep 2024 14:39:24 +0100 Subject: [PATCH 01/10] feat: Add compact checkbox option (#3651) --- .../components/Sidebar/Search/index.tsx | 14 +-- editor.planx.uk/src/ui/shared/Checkbox.tsx | 92 +++++++++++++------ .../src/ui/shared/ChecklistItem.tsx | 3 + 3 files changed, 75 insertions(+), 34 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx index 1c4610b466..80735240a0 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx @@ -43,11 +43,12 @@ const Search: React.FC = () => { }); const debouncedSearch = useMemo( - () => debounce((pattern: string) => { - console.debug("Search term: ", pattern) - return search(pattern); - }, DEBOUNCE_MS), - [search] + () => + debounce((pattern: string) => { + console.debug("Search term: ", pattern); + return search(pattern); + }, DEBOUNCE_MS), + [search], ); return ( @@ -77,7 +78,8 @@ const Search: React.FC = () => { id={"search-data-field-facet"} checked inputProps={{ disabled: true }} - onChange={() => { }} + onChange={() => {}} + variant="compact" /> {formik.values.pattern && ( diff --git a/editor.planx.uk/src/ui/shared/Checkbox.tsx b/editor.planx.uk/src/ui/shared/Checkbox.tsx index 90e816b41b..0a2e1dc955 100644 --- a/editor.planx.uk/src/ui/shared/Checkbox.tsx +++ b/editor.planx.uk/src/ui/shared/Checkbox.tsx @@ -4,54 +4,79 @@ import React from "react"; import { borderedFocusStyle } from "theme"; const Root = styled(Box, { - shouldForwardProp: (prop) => !["disabled"].includes(prop.toString()), -})(({ theme, disabled }) => ({ - display: "inline-flex", - flexShrink: 0, - position: "relative", - width: 40, - height: 40, - borderColor: theme.palette.text.primary, - border: "2px solid", - backgroundColor: theme.palette.common.white, - "&:focus-within": borderedFocusStyle, - ...(disabled && { - border: `2px solid ${theme.palette.grey[400]}`, - backgroundColor: theme.palette.grey[400], + shouldForwardProp: (prop) => + !["disabled", "variant"].includes(prop.toString()), +})( + ({ theme, disabled, variant }) => ({ + display: "inline-flex", + flexShrink: 0, + position: "relative", + width: 40, + height: 40, + borderColor: theme.palette.text.primary, + border: "2px solid", + backgroundColor: theme.palette.common.white, + "&:focus-within": borderedFocusStyle, + ...(disabled && { + border: `2px solid ${theme.palette.grey[400]}`, + backgroundColor: theme.palette.grey[400], + }), + ...(variant === "compact" && { + width: 24, + height: 24, + }), }), -})); +); -const Input = styled("input")(() => ({ - opacity: 0, - width: 24, - height: 24, - cursor: "pointer", -})); +const Input = styled("input")<{ variant?: "default" | "compact" }>( + ({ variant }) => ({ + opacity: 0, + width: 24, + height: 24, + cursor: "pointer", + ...(variant === "compact" && { + width: 16, + height: 16, + }), + }), +); interface IconProps extends React.HTMLAttributes { checked: boolean; disabled?: boolean; + variant?: "default" | "compact"; } const Icon = styled("span", { shouldForwardProp: (prop) => - !["checked", "disabled"].includes(prop.toString()), -})(({ theme, checked, disabled }) => ({ + !["checked", "disabled", "variant"].includes(prop.toString()), +})(({ theme, checked, disabled, variant }) => ({ display: checked ? "block" : "none", content: "''", position: "absolute", height: 24, width: 12, - borderColor: theme.palette.text.primary, borderBottom: "5px solid", borderRight: "5px solid", left: "50%", top: "42%", transform: "translate(-50%, -50%) rotate(45deg)", cursor: "pointer", + ...(variant === "compact" && { + height: 12, + width: 7, + borderBottom: "3px solid", + borderRight: "3px solid", + top: "44%", + }), ...(disabled && { - borderBottom: `5px solid white`, - borderRight: `5px solid white`, + borderBottom: "5px solid", + borderRight: "5px solid", + borderColor: theme.palette.common.white, + ...(variant === "compact" && { + borderBottom: "3px solid", + borderRight: "3px solid", + }), }), })); @@ -60,6 +85,7 @@ export interface Props { checked: boolean; onChange?: (event?: React.MouseEvent) => void; inputProps?: React.InputHTMLAttributes; + variant?: "default" | "compact"; } export default function Checkbox({ @@ -67,6 +93,7 @@ export default function Checkbox({ checked, onChange, inputProps, + variant = "default", }: Props): FCReturn { const handleChange = (e: React.MouseEvent) => { e.preventDefault(); @@ -74,15 +101,24 @@ export default function Checkbox({ }; return ( - + + - ); } diff --git a/editor.planx.uk/src/ui/shared/ChecklistItem.tsx b/editor.planx.uk/src/ui/shared/ChecklistItem.tsx index b1cc24e8a3..606c19bee5 100644 --- a/editor.planx.uk/src/ui/shared/ChecklistItem.tsx +++ b/editor.planx.uk/src/ui/shared/ChecklistItem.tsx @@ -27,6 +27,7 @@ interface Props { checked: boolean; onChange: (event?: React.MouseEvent) => void; inputProps?: React.InputHTMLAttributes; + variant?: "default" | "compact"; } export default function ChecklistItem({ @@ -35,6 +36,7 @@ export default function ChecklistItem({ checked, id, inputProps, + variant, }: Props): FCReturn { return ( @@ -43,6 +45,7 @@ export default function ChecklistItem({ id={id} onChange={onChange} inputProps={inputProps} + variant={variant} />