feat: Editor design settings

editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx

@@ -1,23 +1,119 @@
-import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
+import { useFormik } from "formik";
 import React from "react";
-import { FeaturePlaceholder } from "ui/FeaturePlaceholder";
+import ColorPicker from "ui/ColorPicker";
+import EditorRow from "ui/EditorRow";
+import InputCaption from "ui/InputCaption";
+import InputGroup from "ui/InputGroup";
+import InputLegend from "ui/InputLegend";
+import InputRow from "ui/InputRow";
+import InputRowItem from "ui/InputRowItem";
+import InputRowLabel from "ui/InputRowLabel";
+import PublicFileUploadButton from "ui/PublicFileUploadButton";
 
 const DesignSettings: React.FC = () => {
+  const formik = useFormik<{ bgColor: string }>({
+    initialValues: {
+      bgColor: "#000",
+    },
+    onSubmit: () => {},
+    validate: () => {},
+  });
+
   return (
-    <>
-      <Box>
+    <form onSubmit={formik.handleSubmit}>
+      <EditorRow>
         <Typography variant="h2" component="h3" gutterBottom>
           Design
         </Typography>
         <Typography variant="body1">
           How your service appears to public users
         </Typography>
-        <Box py={5}>
-          <FeaturePlaceholder title="Feature in development" />
-        </Box>
-      </Box>
-    </>
+      </EditorRow>
+      <EditorRow>
+        <InputGroup flowSpacing>
+          <InputLegend>Theme colour</InputLegend>
+          <InputCaption>
+            Set the theme colour. The theme colour should be a dark colour that
+            contrasts with white ("#ffffff").
+          </InputCaption>
+          <Link variant="body2" href="https://www.planx.uk">
+            See our guide for setting theme colours
+          </Link>
+          <InputRow>
+            <InputRowItem>
+              <ColorPicker
+                color={formik.values.bgColor}
+                onChange={(color) => formik.setFieldValue("bgColor", color)}
+                label="Theme colour"
+              />
+            </InputRowItem>
+          </InputRow>
+        </InputGroup>
+      </EditorRow>
+
+      <EditorRow>
+        <InputGroup flowSpacing>
+          <InputLegend>Logo</InputLegend>
+          <InputCaption>
+            Set the logo to be used in the header of the service.
+          </InputCaption>
+          <Link variant="body2" href="https://www.planx.uk">
+            See our guide for logos
+          </Link>
+          <InputRow>
+            <InputRowLabel>Logo:</InputRowLabel>
+            <InputRowItem width={50}>
+              <PublicFileUploadButton />
+            </InputRowItem>
+            <Typography
+              color="text.secondary"
+              variant="body2"
+              pl={2}
+              alignSelf="center"
+            >
+              .png or .svg
+            </Typography>
+          </InputRow>
+        </InputGroup>
+      </EditorRow>
+
+      <EditorRow>
+        <InputGroup flowSpacing>
+          <InputLegend>Favicon</InputLegend>
+          <InputCaption>
+            Set the favicon to be used in the browser tab. The favicon should be
+            32x32px and in .ico or .png format.
+          </InputCaption>
+          <Link variant="body2" href="https://www.planx.uk">
+            See our guide for favicons
+          </Link>
+          <InputRow>
+            <InputRowLabel>Favicon:</InputRowLabel>
+            <InputRowItem width={50}>
+              <PublicFileUploadButton />
+            </InputRowItem>
+            <Typography
+              color="text.secondary"
+              variant="body2"
+              pl={2}
+              alignSelf="center"
+            >
+              .ico or .png
+            </Typography>
+          </InputRow>
+        </InputGroup>
+      </EditorRow>
+
+      <EditorRow>
+        <Button type="submit" variant="contained" color="primary">
+          Update design settings
+        </Button>
+      </EditorRow>
+    </form>
   );
 };
+
 export default DesignSettings;

editor.planx.uk/src/ui/ColorPicker.tsx

@@ -24,23 +24,21 @@ const Root = styled(Box, {
   display: "flex",
   alignItems: "center",
   ...(inline && {
-    height: 50,
     padding: theme.spacing(2, 0),
     "& .popover": {
       top: "calc(100% - 4px)",
     },
   }),
 }));
 
-const Swatch = styled(Box)(() => ({
+const Swatch = styled(Box)(({ theme }) => ({
   background: "#fff",
   display: "inline-block",
   cursor: "pointer",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: 18,
-  height: 18,
+  marginRight: theme.spacing(1),
+  width: 24,
+  height: 24,
+  border: `2px solid ${theme.palette.border.input}`,
 }));
 
 const Cover = styled(ButtonBase)(() => ({
@@ -64,11 +62,12 @@ const StyledButtonBase = styled(ButtonBase, {
   fontFamily: "inherit",
   fontSize: 15,
   position: "relative",
-  display: "block",
+  display: "flex",
+  alignItems: "center",
   textAlign: "left",
-  paddingLeft: theme.spacing(4),
-  paddingRight: theme.spacing(2),
+  padding: theme.spacing(1, 2),
   whiteSpace: "nowrap",
+  backgroundColor: theme.palette.common.white,
   ...(show && {
     color: theme.palette.primary.dark,
     "& .swatch": {
@@ -94,7 +93,7 @@ export default function ColorPicker(props: Props): FCReturn {
 
   return (
     <Root inline={props.inline}>
-      <Typography mr={2} variant="body2">
+      <Typography mr={2} variant="body2" component="label">
         {props.label || "Background colour"}:{" "}
       </Typography>
       <StyledButtonBase show={show} onClick={handleClick} disableRipple>

editor.planx.uk/src/ui/EditorRow.tsx

@@ -0,0 +1,24 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
+import React, { ReactNode } from "react";
+
+const Root = styled(Box)(({ theme }) => ({
+  display: "block",
+  width: "100%",
+  padding: theme.spacing(3, 0),
+  "&:first-of-type": {
+    paddingTop: 0,
+  },
+  "& + &": {
+    borderTop: "1px solid",
+    borderColor: theme.palette.border.main,
+  },
+  "& > * + *": {
+    ...contentFlowSpacing(theme),
+  },
+}));
+
+export default function InputRow({ children }: { children: ReactNode }) {
+  return <Root>{children}</Root>;
+}

editor.planx.uk/src/ui/InputCaption.tsx

@@ -0,0 +1,17 @@
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { ReactNode } from "react";
+
+const Caption = styled(Typography)(({ theme }) => ({
+  width: "100%",
+  textAlign: "left",
+  color: theme.palette.text.secondary,
+})) as typeof Typography;
+
+export default function InputCaption({ children }: { children: ReactNode }) {
+  return (
+    <Caption variant="body2" component="caption">
+      {children}
+    </Caption>
+  );
+}

editor.planx.uk/src/ui/InputGroup.tsx

@@ -3,6 +3,7 @@ import DragHandle from "@mui/icons-material/DragHandle";
 import Box, { BoxProps } from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
+import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
 import React, { PropsWithChildren, useRef } from "react";
 import { useDrag, useDrop } from "react-dnd";
 
@@ -13,12 +14,19 @@ interface Props {
   deleteInputGroup?: any;
   deletable?: boolean;
   draggable?: boolean;
+  flowSpacing?: boolean;
   id?: string;
   index?: number;
   handleMove?: (dragIndex: number, hoverIndex: number) => void;
 }
 
-const Root = styled("fieldset")(({ theme }) => ({
+interface RootProps extends BoxProps {
+  flowSpacing?: boolean;
+}
+
+const Root = styled("fieldset", {
+  shouldForwardProp: (prop) => prop !== "flowSpacing",
+})<RootProps>(({ flowSpacing, theme }) => ({
   border: 0,
   margin: 0,
   padding: 0,
@@ -28,6 +36,11 @@ const Root = styled("fieldset")(({ theme }) => ({
   "& .inputGroup + .inputGroup": {
     marginTop: 0,
   },
+  ...(flowSpacing && {
+    "& > div > * + *": {
+      ...contentFlowSpacing(theme),
+    },
+  }),
 }));
 
 const Label = styled("legend")(({ theme }) => ({
@@ -107,6 +120,7 @@ export default function InputGroup({
   id,
   index = 0,
   handleMove,
+  flowSpacing,
 }: Props): FCReturn {
   const [deleteHover, setDeleteHover] = React.useState(false);
 
@@ -169,7 +183,7 @@ export default function InputGroup({
   if (draggable) drag(drop(ref));
 
   return (
-    <Root ref={ref} className="inputGroup">
+    <Root ref={ref} className="inputGroup" flowSpacing={flowSpacing}>
       {label && <Label>{label}</Label>}
       <Content
         deletable={deletable}

editor.planx.uk/src/ui/InputLegend.tsx

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React, { ReactNode } from "react";
+
+const Legend = styled(Typography)(() => ({
+  display: "block",
+  width: "100%",
+})) as typeof Typography;
+
+export default function InputLegend({ children }: { children: ReactNode }) {
+  return (
+    <Legend variant="h3" component="legend">
+      {children}
+    </Legend>
+  );
+}

editor.planx.uk/src/ui/InputRowLabel.tsx

@@ -1,17 +1,21 @@
-import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
 import React, { ReactNode } from "react";
 
-const Root = styled(Box)(({ theme }) => ({
+const Label = styled(Typography)(({ theme }) => ({
   flexShrink: 1,
   flexGrow: 0,
   paddingRight: theme.spacing(2),
   alignSelf: "center",
   "&:not(:first-child)": {
     paddingLeft: theme.spacing(2),
   },
-}));
+})) as typeof Typography;
 
 export default function InputRowLabel({ children }: { children: ReactNode }) {
-  return <Root>{children}</Root>;
+  return (
+    <Label variant="body2" component="label">
+      {children}
+    </Label>
+  );
 }