feat: Wire up design settings (link colour)

theopensystemslab · Jan 17, 2024 · 82c7b70 · 82c7b70
1 parent 62ceed8
commit 82c7b70
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 14 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/TextLinkForm.tsx
@@ -1,22 +1,56 @@
 import Link from "@mui/material/Link";
+import { getContrastRatio, useTheme } from "@mui/material/styles";
+import { Team, TeamTheme } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
-import React from "react";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React, { useEffect, useState } from "react";
 import ColorPicker from "ui/editor/ColorPicker";
 import InputDescription from "ui/editor/InputDescription";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { DesignPreview, EXAMPLE_COLOUR, SettingsForm } from ".";
+import { DesignPreview, SettingsForm } from ".";
 
-export const TextLinkForm: React.FC = () => {
-  const formik = useFormik<{
-    linkColor: string;
-  }>({
-    initialValues: {
-      linkColor: EXAMPLE_COLOUR,
+type FormValues = Pick<TeamTheme, "linkColour">;
+
+export const TextLinkForm: React.FC<{ team: Team; onSuccess: () => void }> = ({
+  team,
+  onSuccess,
+}) => {
+  const theme = useTheme();
+
+  useEffect(() => {
+    setInitialValues({ linkColour: team.theme?.linkColour });
+  }, [team]);
+
+  const [initialValues, setInitialValues] = useState<FormValues>({
+    linkColour: "",
+  });
+
+  const formik = useFormik<FormValues>({
+    initialValues,
+    onSubmit: async (values, { resetForm }) => {
+      const isSuccess = await useStore.getState().updateTeamTheme(values);
+      if (isSuccess) {
+        onSuccess();
+        // Reset "dirty" status to disable Save & Reset buttons
+        resetForm({ values });
+      }
+    },
+    validateOnBlur: false,
+    validateOnChange: false,
+    enableReinitialize: true,
+    validate: ({ linkColour }) => {
+      const isContrastThresholdMet =
+        getContrastRatio("#FFF", linkColour) > theme.palette.contrastThreshold;
+
+      if (!isContrastThresholdMet) {
+        return {
+          linkColour:
+            "Colour does not meet accessibility contrast requirements (3:1)",
+        };
+      }
     },
-    onSubmit: () => {},
-    validate: () => {},
   });
 
   return (
@@ -40,16 +74,18 @@ export const TextLinkForm: React.FC = () => {
         <InputRow>
           <InputRowItem>
             <ColorPicker
-              color={formik.values.linkColor}
-              onChange={(color) => formik.setFieldValue("linkColor", color)}
+              color={formik.values.linkColour}
+              onChange={(color) => formik.setFieldValue("linkColour", color)}
               label="Text link colour"
             />
           </InputRowItem>
         </InputRow>
       }
       preview={
         <DesignPreview bgcolor="white">
-          <Link sx={{ color: EXAMPLE_COLOUR }}>Example text link</Link>
+          <Link sx={{ color: formik.values.linkColour }}>
+            Example text link
+          </Link>
         </DesignPreview>
       }
     />

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings/index.tsx
@@ -138,7 +138,7 @@ const DesignSettings: React.FC = () => {
         <>
           <ThemeAndLogoForm team={team} onSuccess={() => setOpen(true)} />
           <ButtonForm />
-          <TextLinkForm />
+          <TextLinkForm team={team} onSuccess={() => setOpen(true)} />
           <FaviconForm />
           <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
             <Alert