chore: Replace OptionButton with Switch (#3287)

theopensystemslab · Jun 19, 2024 · 5f6e33c · 5f6e33c
1 parent 995dd5c
commit 5f6e33c
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 198 deletions.
diff --git 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}
             />
           </InputRow>
-          <OptionButton
-            selected={formik.values.formatOutputForAutomations}
-            onClick={() => {
-              formik.setFieldValue(
-                "formatOutputForAutomations",
-                !formik.values.formatOutputForAutomations,
-              );
-            }}
-          >
-            Format the output to automate a future Question or Checklist only
-          </OptionButton>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.formatOutputForAutomations}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "formatOutputForAutomations",
+                      !formik.values.formatOutputForAutomations,
+                    )
+                  }
+                />
+              }
+              label="Format the output to automate a future Question or Checklist only"
+            />
+          </InputRow>
         </ModalSectionContent>
         <ModalSectionContent title="Formula">
           <InputRow>

diff --git 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<ChecklistProps> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <OptionButton
-              selected={!!formik.values.groupedOptions}
-              onClick={() => {
-                formik.setValues({
-                  ...formik.values,
-                  ...toggleExpandableChecklist({
-                    options: formik.values.options,
-                    groupedOptions: formik.values.groupedOptions,
-                  }),
-                });
-              }}
-            >
-              Expandable
-            </OptionButton>
-
-            <OptionButton
-              selected={formik.values.allRequired}
-              onClick={() => {
-                formik.setFieldValue("allRequired", !formik.values.allRequired);
-              }}
-            >
-              All required
-            </OptionButton>
+            <InputRow>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={!!formik.values.groupedOptions}
+                    onChange={() =>
+                      formik.setValues({
+                        ...formik.values,
+                        ...toggleExpandableChecklist({
+                          options: formik.values.options,
+                          groupedOptions: formik.values.groupedOptions,
+                        }),
+                      })
+                    }
+                  />
+                }
+                label="Expandable"
+              />
+            </InputRow>
+            <InputRow>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={formik.values.allRequired}
+                    onChange={() =>
+                      formik.setFieldValue(
+                        "allRequired",
+                        !formik.values.allRequired,
+                      )
+                    }
+                  />
+                }
+                label="All required"
+              />
+            </InputRow>
           </InputGroup>
         </ModalSectionContent>
 

diff --git 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
@@ -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}
             />
           </InputRow>
-          <OptionButton
-            selected={formik.values.hideFileUpload}
-            onClick={() => {
-              formik.setFieldValue(
-                "hideFileUpload",
-                !formik.values.hideFileUpload,
-              );
-            }}
-          >
-            Hide file upload and allow user to continue without data
-          </OptionButton>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.hideFileUpload}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "hideFileUpload",
+                      !formik.values.hideFileUpload,
+                    )
+                  }
+                />
+              }
+              label="Hide file upload and allow user to continue without data"
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <MoreInformation

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
@@ -1,8 +1,10 @@
 import RuleIcon from "@mui/icons-material/Rule";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import MenuItem from "@mui/material/MenuItem";
 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 {
@@ -21,7 +23,6 @@ import ListManager, {
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import { ModalSubtitle } from "ui/editor/ModalSubtitle";
-import OptionButton from "ui/editor/OptionButton";
 import RichTextInput from "ui/editor/RichTextInput";
 import SelectInput from "ui/editor/SelectInput";
 import Input from "ui/shared/Input";
@@ -91,14 +92,22 @@ function FileUploadAndLabelComponent(props: Props) {
               onChange={formik.handleChange}
             />
           </InputRow>
-          <OptionButton
-            selected={formik.values.hideDropZone}
-            onClick={() => {
-              formik.setFieldValue("hideDropZone", !formik.values.hideDropZone);
-            }}
-          >
-            Hide the drop zone and show files list for information only
-          </OptionButton>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.hideDropZone}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "hideDropZone",
+                      !formik.values.hideDropZone,
+                    )
+                  }
+                />
+              }
+              label="Hide the drop zone and show files list for information only"
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <ModalSection>

diff --git 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) {
         </ModalSectionContent>
         <ModalSectionContent>
           <InputRow>
-            <OptionButton
-              selected={formik.values.allowNewAddresses}
-              onClick={() => {
-                formik.setFieldValue(
-                  "allowNewAddresses",
-                  !formik.values.allowNewAddresses,
-                );
-              }}
-            >
-              Allow users to plot new addresses without a UPRN
-            </OptionButton>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={formik.values.allowNewAddresses}
+                  onChange={() =>
+                    formik.setFieldValue(
+                      "allowNewAddresses",
+                      !formik.values.allowNewAddresses,
+                    )
+                  }
+                />
+              }
+              label="Allow users to plot new addresses without a UPRN"
+            />
           </InputRow>
           {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
@@ -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<NoticeEditorProps> = (props) => {
               });
             }}
           />
-          <OptionButton
-            selected={Boolean(props.value.resetButton)}
-            onClick={() => {
-              props.onChange({
-                ...props.value,
-                resetButton: !props.value.resetButton,
-              });
-            }}
-          >
-            Reset
-          </OptionButton>
+          <InputRow>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={Boolean(props.value.resetButton)}
+                  onChange={() =>
+                    props.onChange({
+                      ...props.value,
+                      resetButton: !props.value.resetButton,
+                    })
+                  }
+                />
+              }
+              label="Reset to start of service"
+            />
+          </InputRow>
         </ModalSectionContent>
       </ModalSection>
       <MoreInformation