feat: feedback editor component

editor.planx.uk/docs/adding-a-new-component.md

@@ -2,7 +2,7 @@
 
 Let's add a `SetValue` component
 
-## Core directory & files
+## Core directory typing
 
 1. `planx-core/src/types/component.ts`
 
@@ -12,9 +12,11 @@ Add type to enum in `planx-core` repository
 SetValue = 380,
 ```
 
-2. `mkdir src/@planx/components/SetValue`
+## `planx-new` component files
 
-3. `model.ts`
+1. `mkdir src/@planx/components/SetValue`
+
+2. `model.ts`
 
 ```typescript
 import { BaseNodeData, parseBaseNodeData } from "../shared";
@@ -31,7 +33,7 @@ export const parseContent = (
 });
 ```
 
-4. `Editor.tsx`
+3. `Editor.tsx`
 
 ```typescript
 type Props = EditorProps<TYPES.SetValue, SetValue>;
@@ -135,23 +137,9 @@ case TYPES.SetValue:
 
 2. `src/@planx/components/shared/Preview/SummaryList`
 
-If/how should this component appear on the Review page?
+If/how should this component appear in a Review component:
 
 ```typescript
 [TYPES.SetValue]: undefined,
 ```
 
-3. `src/@planx/components/Send/bops/index`
-
-If/how should this component be formatted in Send data formats such as BOPS?
-
-```typescript
-function isTypeForBopsPayload(type?: TYPES) {
-  switch (type) {
-    // ...
-    case TYPES.SetValue:
-      return false;
-    // ...
-  }
-}
-```

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#54be9e0",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b4ca5a9",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.test.tsx

@@ -0,0 +1,18 @@
+import { screen } from "@testing-library/react";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { setup } from "testUtils";
+
+import { FeedbackEditor } from "./Editor";
+
+describe("When the Feedback editor modal is rendered", () => {
+  it("does not throw an error", () => {
+    setup(
+      <DndProvider backend={HTML5Backend}>
+        <FeedbackEditor id="test-feedback-editor" />
+      </DndProvider>,
+    );
+    expect(screen.getByText("Feedback")).toBeInTheDocument();
+  });
+});

editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx

@@ -0,0 +1,119 @@
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { EditorProps, ICONS } from "@planx/components/ui";
+import { useFormik } from "formik";
+import React from "react";
+import InputGroup from "ui/editor/InputGroup";
+import InputLabel from "ui/editor/InputLabel";
+import { ModalFooter } from "ui/editor/ModalFooter";
+import ModalSection from "ui/editor/ModalSection";
+import ModalSectionContent from "ui/editor/ModalSectionContent";
+import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import Input from "ui/shared/Input/Input";
+import InputRow from "ui/shared/InputRow";
+
+import {
+  descriptionPlaceholder,
+  disclaimerPlaceholder,
+  freeformQuestionPlaceholder,
+  ratingQuestionPlaceholder,
+  titlePlaceholder,
+} from "../components/placeholders";
+import { Feedback, parseFeedback } from "../model";
+
+type FeedbackEditorProps = EditorProps<TYPES.Feedback, Feedback>;
+
+export const FeedbackEditor = (props: FeedbackEditorProps) => {
+  const formik = useFormik<Feedback>({
+    initialValues: parseFeedback(props.node?.data),
+    onSubmit: (newValues) => {
+      if (props.handleSubmit) {
+        props.handleSubmit({
+          type: TYPES.Feedback,
+          data: newValues,
+        });
+      }
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      <ModalSection>
+        <ModalSectionContent title="Feedback" Icon={ICONS[TYPES.Feedback]}>
+          <InputGroup flowSpacing>
+            <InputRow>
+              <InputLabel label="Title">
+                <Input
+                  format="large"
+                  placeholder={titlePlaceholder}
+                  name="title"
+                  value={formik.values.title || titlePlaceholder}
+                  onChange={formik.handleChange}
+                />
+              </InputLabel>
+            </InputRow>
+            <InputRow>
+              <InputLabel label="Description" htmlFor="description">
+                <RichTextInput
+                  name="description"
+                  value={formik.values.description || descriptionPlaceholder}
+                  placeholder="Description"
+                  onChange={formik.handleChange}
+                />
+              </InputLabel>
+            </InputRow>
+
+            <InputRow>
+              <InputLabel label="Rating question" htmlFor="ratingQuestion">
+                <RichTextInput
+                  placeholder={ratingQuestionPlaceholder}
+                  name="ratingQuestion"
+                  value={formik.values.ratingQuestion}
+                  onChange={formik.handleChange}
+                />
+              </InputLabel>
+            </InputRow>
+            <InputRow>
+              <InputLabel label="Freeform question" htmlFor="freeformQuestion">
+                <RichTextInput
+                  placeholder={freeformQuestionPlaceholder}
+                  name="freeformQuestion"
+                  value={formik.values.freeformQuestion}
+                  onChange={formik.handleChange}
+                />
+              </InputLabel>
+            </InputRow>
+            <InputRow>
+              <InputLabel label="Disclaimer text" htmlFor="disclaimer">
+                <RichTextInput
+                  name="disclaimer"
+                  value={formik.values.disclaimer || disclaimerPlaceholder}
+                  placeholder={disclaimerPlaceholder}
+                  onChange={formik.handleChange}
+                />
+              </InputLabel>
+            </InputRow>
+            <InputRow>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={formik.values.feedbackRequired}
+                    onChange={() =>
+                      formik.setFieldValue(
+                        "feedbackRequired",
+                        !formik.values.feedbackRequired,
+                      )
+                    }
+                  />
+                }
+                label="Feedback required"
+              />
+            </InputRow>
+          </InputGroup>
+        </ModalSectionContent>
+      </ModalSection>
+      <ModalFooter formik={formik} />
+    </form>
+  );
+};

editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import { FeedbackEditor } from "./Editor";
+const meta = {
+  title: "Editor Components/Feedback",
+  component: FeedbackEditor,
+} satisfies Meta<typeof FeedbackEditor>;
+type Story = StoryObj<typeof meta>;
+export default meta;
+export const Basic = {
+  render: () => <FeedbackEditor />,
+} satisfies Story;

editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx → editor.planx.uk/src/@planx/components/Feedback/Public/Feedback.stories.tsx

@@ -14,6 +14,6 @@ export default meta;
 export const Basic = {
   args: {
     title: "Tell us what you think",
-    privacyPolicyLink: "https://www.planx.uk/",
+    feedbackRequired: false,
   },
 } satisfies Story;