chore: Boilerplate for new component

editor.planx.uk/package.json

@@ -12,7 +12,7 @@
     "@mui/material": "^5.15.2",
     "@mui/utils": "^5.15.2",
     "@opensystemslab/map": "^0.8.1",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#722e1c7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#46a3ee4",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

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

@@ -0,0 +1,29 @@
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { useFormik } from "formik";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+
+import { EditorProps } from "../ui";
+import { List, parseContent } from "./model";
+
+type Props = EditorProps<TYPES.List, List>;
+
+function ListComponent(props: Props) {
+  const formik = useFormik({
+    initialValues: parseContent(props.node?.data),
+    onSubmit: (newValues) => {
+      props.handleSubmit?.({
+        type: TYPES.List,
+        data: newValues,
+      });
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      <FeaturePlaceholder title="Under development" />
+    </form>
+  );
+}
+
+export default ListComponent;

editor.planx.uk/src/@planx/components/List/Public.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { axe, setup } from "testUtils";
+
+import ListComponent from "./Editor";
+
+it("should not have any accessibility violations", async () => {
+  const { container } = setup(<ListComponent />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});

editor.planx.uk/src/@planx/components/List/Public.tsx

@@ -0,0 +1,27 @@
+import { PublicProps } from "@planx/components/ui";
+import { hasFeatureFlag } from "lib/featureFlags";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+
+import Card from "../shared/Preview/Card";
+import QuestionHeader from "../shared/Preview/QuestionHeader";
+import { List } from "./model";
+
+type Props = PublicProps<List>;
+
+function ListComponent(props: Props) {
+  if (!hasFeatureFlag("LIST_COMPONENT")) return null;
+
+  return (
+    <Card handleSubmit={props.handleSubmit} isValid>
+      <QuestionHeader
+        info={props.info}
+        policyRef={props.policyRef}
+        howMeasured={props.howMeasured}
+      />
+      <FeaturePlaceholder title="Under development" />
+    </Card>
+  );
+}
+
+export default ListComponent;

editor.planx.uk/src/@planx/components/List/model.ts

@@ -0,0 +1,10 @@
+import { MoreInformation, parseMoreInformation } from "../shared";
+
+export interface List extends MoreInformation {
+  fn: string;
+}
+
+export const parseContent = (data: Record<string, any> | undefined): List => ({
+  fn: data?.fn || "",
+  ...parseMoreInformation(data),
+});

editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx

@@ -100,6 +100,7 @@ const presentationalComponents: {
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
   [TYPES.FileUploadAndLabel]: FileUploadAndLabel,
+  [TYPES.List]: undefined,
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,

editor.planx.uk/src/@planx/components/ui.tsx

@@ -12,6 +12,7 @@ import FunctionsIcon from "@mui/icons-material/Functions";
 import Home from "@mui/icons-material/Home";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import List from "@mui/icons-material/List";
+import ListAlt from "@mui/icons-material/ListAlt";
 import LocationOnOutlined from "@mui/icons-material/LocationOnOutlined";
 import Map from "@mui/icons-material/Map";
 import PaymentOutlined from "@mui/icons-material/PaymentOutlined";
@@ -72,6 +73,7 @@ export const ICONS: {
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
+  [TYPES.List]: ListAlt,
   [TYPES.Notice]: ReportProblemOutlined,
   [TYPES.NextSteps]: ArrowForwardIcon,
   [TYPES.NumberInput]: Pin,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx

@@ -64,6 +64,8 @@ const Node: React.FC<any> = (props) => {
       return <Filter {...allProps} text="(Flags Filter)" />;
     case TYPES.FindProperty:
       return <Question {...allProps} text="Find property" />;
+    case TYPES.List:
+      return <Question {...allProps} text="List" />;
     case TYPES.NextSteps:
       return <Question {...allProps} text="Next steps" />;
     case TYPES.Notice:

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -10,6 +10,7 @@ import { styled } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { parseFormValues } from "@planx/components/shared";
 import ErrorFallback from "components/ErrorFallback";
+import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useNavigation } from "react-navi";
@@ -60,6 +61,9 @@ const NodeTypeSelect: React.FC<{
         <option value={TYPES.DateInput}>Date Input</option>
         <option value={TYPES.AddressInput}>Address Input</option>
         <option value={TYPES.ContactInput}>Contact Input</option>
+        {hasFeatureFlag("LIST_COMPONENT") && (
+          <option value={TYPES.List}>List</option>
+        )}
       </optgroup>
       <optgroup label="Information">
         <option value={TYPES.TaskList}>Task List</option>

editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts

@@ -13,6 +13,7 @@ import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Editor";
 import Filter from "@planx/components/Filter/Editor";
 import FindProperty from "@planx/components/FindProperty/Editor";
 import InternalPortal from "@planx/components/InternalPortal/Editor";
+import List from "@planx/components/List/Editor";
 import NextSteps from "@planx/components/NextSteps/Editor";
 import Notice from "@planx/components/Notice/Editor";
 import NumberInput from "@planx/components/NumberInput/Editor";
@@ -51,6 +52,7 @@ const components: {
   flow: EmptyComponent,
   "internal-portal": InternalPortal,
   "file-upload-and-label": FileUploadAndLabel,
+  list: List,
   "next-steps": NextSteps,
   notice: Notice,
   "number-input": NumberInput,

editor.planx.uk/src/pages/FlowEditor/data/types.ts

@@ -18,6 +18,7 @@ export const SLUGS: {
   [TYPES.Flow]: "flow",
   [TYPES.InternalPortal]: "internal-portal",
   [TYPES.FileUploadAndLabel]: "file-upload-and-label",
+  [TYPES.List]: "list",
   [TYPES.NextSteps]: "next-steps",
   [TYPES.Notice]: "notice",
   [TYPES.NumberInput]: "number-input",

editor.planx.uk/src/pages/Preview/Node.tsx

@@ -15,6 +15,7 @@ import DrawBoundary from "@planx/components/DrawBoundary/Public";
 import FileUpload from "@planx/components/FileUpload/Public";
 import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Public";
 import FindProperty from "@planx/components/FindProperty/Public";
+import List from "@planx/components/List/Public";
 import NextSteps from "@planx/components/NextSteps/Public";
 import Notice from "@planx/components/Notice/Public";
 import NumberInput from "@planx/components/NumberInput/Public";
@@ -167,6 +168,9 @@ const Node: React.FC<any> = (props: Props) => {
     case TYPES.FindProperty:
       return <FindProperty {...allProps} />;
 
+    case TYPES.List:
+      return <List {...allProps} />;
+
     case TYPES.NextSteps:
       return <NextSteps {...allProps} />;