From 5f6e33c465138d8c137e5b38f169abaf9650f877 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Wed, 19 Jun 2024 13:00:44 +0100 Subject: [PATCH] chore: Replace OptionButton with Switch (#3287) --- .../@planx/components/Calculate/Editor.tsx | 30 +++++---- .../@planx/components/Checklist/Editor.tsx | 61 +++++++++++-------- .../src/@planx/components/Checklist/model.ts | 20 ++++-- .../@planx/components/DrawBoundary/Editor.tsx | 30 +++++---- .../components/FileUploadAndLabel/Editor.tsx | 27 +++++--- .../@planx/components/FindProperty/Editor.tsx | 28 +++++---- .../src/@planx/components/Notice/Editor.tsx | 30 +++++---- .../@planx/components/NumberInput/Editor.tsx | 28 +++++---- .../src/@planx/components/Pay/Editor.tsx | 48 +++++++++------ .../components/PropertyInformation/Editor.tsx | 30 +++++---- .../src/ui/editor/OptionButton.stories.tsx | 18 ------ .../src/ui/editor/OptionButton.tsx | 52 ---------------- 12 files changed, 204 insertions(+), 198 deletions(-) delete mode 100644 editor.planx.uk/src/ui/editor/OptionButton.stories.tsx delete mode 100644 editor.planx.uk/src/ui/editor/OptionButton.tsx diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx index 6ae015aaa1..cc8665849d 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx @@ -1,4 +1,6 @@ +import FormControlLabel from "@mui/material/FormControlLabel"; import { styled } from "@mui/material/styles"; +import Switch from "@mui/material/Switch"; import Typography from "@mui/material/Typography"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { @@ -12,7 +14,6 @@ import React from "react"; import InputGroup from "ui/editor/InputGroup"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; @@ -100,17 +101,22 @@ export default function Component(props: Props) { onChange={formik.handleChange} /> - { - formik.setFieldValue( - "formatOutputForAutomations", - !formik.values.formatOutputForAutomations, - ); - }} - > - Format the output to automate a future Question or Checklist only - + + + formik.setFieldValue( + "formatOutputForAutomations", + !formik.values.formatOutputForAutomations, + ) + } + /> + } + label="Format the output to automate a future Question or Checklist only" + /> + diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx index 0e4c24a94b..8c9133f0d9 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx @@ -1,7 +1,9 @@ import Delete from "@mui/icons-material/Delete"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; +import FormControlLabel from "@mui/material/FormControlLabel"; import IconButton from "@mui/material/IconButton"; +import Switch from "@mui/material/Switch"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { useFormik } from "formik"; import adjust from "ramda/src/adjust"; @@ -14,7 +16,6 @@ import InputGroup from "ui/editor/InputGroup"; import ListManager from "ui/editor/ListManager"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import SimpleMenu from "ui/editor/SimpleMenu"; import Input from "ui/shared/Input"; @@ -393,29 +394,41 @@ export const ChecklistComponent: React.FC = (props) => { onChange={formik.handleChange} /> - { - formik.setValues({ - ...formik.values, - ...toggleExpandableChecklist({ - options: formik.values.options, - groupedOptions: formik.values.groupedOptions, - }), - }); - }} - > - Expandable - - - { - formik.setFieldValue("allRequired", !formik.values.allRequired); - }} - > - All required - + + + formik.setValues({ + ...formik.values, + ...toggleExpandableChecklist({ + options: formik.values.options, + groupedOptions: formik.values.groupedOptions, + }), + }) + } + /> + } + label="Expandable" + /> + + + + formik.setFieldValue( + "allRequired", + !formik.values.allRequired, + ) + } + /> + } + label="All required" + /> + diff --git a/editor.planx.uk/src/@planx/components/Checklist/model.ts b/editor.planx.uk/src/@planx/components/Checklist/model.ts index 210fa82cee..843be32901 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/model.ts +++ b/editor.planx.uk/src/@planx/components/Checklist/model.ts @@ -23,7 +23,7 @@ interface ChecklistExpandableProps { export const toggleExpandableChecklist = ( checklist: ChecklistExpandableProps, ): ChecklistExpandableProps => { - if (checklist.options) { + if (checklist.options !== undefined && checklist.options.length > 0) { return { ...checklist, groupedOptions: [ @@ -34,13 +34,25 @@ export const toggleExpandableChecklist = ( ], options: undefined, }; - } - if (checklist.groupedOptions) { + } else if ( + checklist.groupedOptions !== undefined && + checklist.groupedOptions.length > 0 + ) { return { ...checklist, options: checklist.groupedOptions.flatMap((opt) => opt.children), groupedOptions: undefined, }; + } else { + return { + ...checklist, + options: checklist.options || [], + groupedOptions: checklist.groupedOptions || [ + { + title: "Section 1", + children: [], + }, + ], + }; } - return checklist; }; diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx index b85054d325..38492b893c 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx @@ -1,3 +1,5 @@ +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { EditorProps, @@ -10,7 +12,6 @@ import React from "react"; import InputGroup from "ui/editor/InputGroup"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; @@ -100,17 +101,22 @@ function DrawBoundaryComponent(props: Props) { onChange={formik.handleChange} /> - { - formik.setFieldValue( - "hideFileUpload", - !formik.values.hideFileUpload, - ); - }} - > - Hide file upload and allow user to continue without data - + + + formik.setFieldValue( + "hideFileUpload", + !formik.values.hideFileUpload, + ) + } + /> + } + label="Hide file upload and allow user to continue without data" + /> + - { - formik.setFieldValue("hideDropZone", !formik.values.hideDropZone); - }} - > - Hide the drop zone and show files list for information only - + + + formik.setFieldValue( + "hideDropZone", + !formik.values.hideDropZone, + ) + } + /> + } + label="Hide the drop zone and show files list for information only" + /> + diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx index f38fe8c7f8..6430de1285 100644 --- a/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx @@ -1,3 +1,5 @@ +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { EditorProps, @@ -10,7 +12,6 @@ import React from "react"; import InputGroup from "ui/editor/InputGroup"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; @@ -60,17 +61,20 @@ function FindPropertyComponent(props: Props) { - { - formik.setFieldValue( - "allowNewAddresses", - !formik.values.allowNewAddresses, - ); - }} - > - Allow users to plot new addresses without a UPRN - + + formik.setFieldValue( + "allowNewAddresses", + !formik.values.allowNewAddresses, + ) + } + /> + } + label="Allow users to plot new addresses without a UPRN" + /> {formik.values.allowNewAddresses ? ( <> diff --git a/editor.planx.uk/src/@planx/components/Notice/Editor.tsx b/editor.planx.uk/src/@planx/components/Notice/Editor.tsx index b8a8d3ee2e..233c7e6c4a 100644 --- a/editor.planx.uk/src/@planx/components/Notice/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Notice/Editor.tsx @@ -1,3 +1,5 @@ +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import type { Notice } from "@planx/components/Notice/model"; import { parseNotice } from "@planx/components/Notice/model"; @@ -7,7 +9,6 @@ import React from "react"; import ColorPicker from "ui/editor/ColorPicker"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; @@ -63,17 +64,22 @@ const NoticeEditor: React.FC = (props) => { }); }} /> - { - props.onChange({ - ...props.value, - resetButton: !props.value.resetButton, - }); - }} - > - Reset - + + + props.onChange({ + ...props.value, + resetButton: !props.value.resetButton, + }) + } + /> + } + label="Reset to start of service" + /> + - { - formik.setFieldValue( - "allowNegatives", - !formik.values.allowNegatives, - ); - }} - > - Allow negative numbers to be input - + + formik.setFieldValue( + "allowNegatives", + !formik.values.allowNegatives, + ) + } + /> + } + label="Allow negative numbers to be input" + /> diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.tsx index 423d37a44e..f85e8e96dc 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Editor.tsx @@ -1,6 +1,8 @@ import DataObjectIcon from "@mui/icons-material/DataObject"; import Box from "@mui/material/Box"; +import FormControlLabel from "@mui/material/FormControlLabel"; import Link from "@mui/material/Link"; +import Switch from "@mui/material/Switch"; import Typography from "@mui/material/Typography"; import { ComponentType as TYPES, @@ -26,7 +28,6 @@ import ListManager, { } from "ui/editor/ListManager"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import ErrorWrapper from "ui/shared/ErrorWrapper"; import Input from "ui/shared/Input"; @@ -261,16 +262,18 @@ const Component: React.FC = (props: Props) => { onChange={handleChange} /> + + setFieldValue("hidePay", !values.hidePay)} + /> + } + label="Hide the pay buttons and show fee for information only" + /> + - { - setFieldValue("hidePay", !values.hidePay); - }} - style={{ width: "100%" }} - > - Hide the pay buttons and show fee for information only - = (props: Props) => { - { - setFieldValue("allowInviteToPay", !values.allowInviteToPay); - }} - style={{ width: "100%" }} - > - Allow applicants to invite someone else to pay - + + + setFieldValue( + "allowInviteToPay", + !values.allowInviteToPay, + ) + } + /> + } + label="Allow applicants to invite someone else to pay" + /> + {values.allowInviteToPay ? ( <> diff --git a/editor.planx.uk/src/@planx/components/PropertyInformation/Editor.tsx b/editor.planx.uk/src/@planx/components/PropertyInformation/Editor.tsx index 98c5a24d45..c3faea4bbb 100644 --- a/editor.planx.uk/src/@planx/components/PropertyInformation/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/PropertyInformation/Editor.tsx @@ -1,3 +1,5 @@ +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { EditorProps, @@ -9,7 +11,6 @@ import { useFormik } from "formik"; import React from "react"; import ModalSection from "ui/editor/ModalSection"; import ModalSectionContent from "ui/editor/ModalSectionContent"; -import OptionButton from "ui/editor/OptionButton"; import RichTextInput from "ui/editor/RichTextInput"; import Input from "ui/shared/Input"; import InputRow from "ui/shared/InputRow"; @@ -55,17 +56,22 @@ function PropertyInformationComponent(props: Props) { onChange={formik.handleChange} /> - { - formik.setFieldValue( - "showPropertyTypeOverride", - !formik.values.showPropertyTypeOverride, - ); - }} - > - Show users a "change" link to override the property type - + + + formik.setFieldValue( + "showPropertyTypeOverride", + !formik.values.showPropertyTypeOverride, + ) + } + /> + } + label="Show users a 'change' link to override the property type" + /> + ; - -type Story = StoryObj; - -export default meta; - -export const Basic = { - args: { - selected: false, - backgroundColor: "#F9F8F8", - }, -} satisfies Story; diff --git a/editor.planx.uk/src/ui/editor/OptionButton.tsx b/editor.planx.uk/src/ui/editor/OptionButton.tsx deleted file mode 100644 index adb45a07e3..0000000000 --- a/editor.planx.uk/src/ui/editor/OptionButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import ButtonBase, { ButtonBaseProps } from "@mui/material/ButtonBase"; -import { styled } from "@mui/material/styles"; -import React from "react"; - -interface Props extends ButtonBaseProps { - selected?: boolean; - backgroundColor?: string; -} - -const Root = styled(ButtonBase, { - shouldForwardProp: (prop) => - !["selected", "backgroundColor"].includes(prop.toString()), -})(({ theme, selected, backgroundColor }) => ({ - height: 50, - padding: theme.spacing(0, 3, 0, 5), - marginBottom: theme.spacing(0.5), - fontSize: 15, - position: "relative", - fontFamily: "inherit", - display: "block", - width: "auto", - minWidth: 200, - textAlign: "left", - border: `1px solid ${theme.palette.border.light}`, - backgroundColor: theme.palette.common.white, - "&::before": { - content: "''", - position: "absolute", - height: 12, - width: 12, - left: 18, - top: 18, - borderRadius: "50%", - backgroundColor: theme.palette.grey[400], - ...(selected && { - color: "#fff", - backgroundColor: backgroundColor || theme.palette.success.main, - }), - }, - ...(!selected && { - "&:hover": { - backgroundColor: "rgba(0,0,0,0.1)", - }, - }), - ...(selected && { - backgroundColor: theme.palette.grey[200], - }), -})); - -export default function OptionButton(props: Props): FCReturn { - return {props.children}; -}