From 6cac0af38f40a9f78530ba983f3465722a46c182 Mon Sep 17 00:00:00 2001
From: Rory Doak <138574807+RODO94@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:31:20 +0100
Subject: [PATCH] feat: List Component Storybook (#3509)

---
 .../src/@planx/components/List/Editor.tsx     |  2 +-
 .../components/List/Public/List.stories.tsx   | 50 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 editor.planx.uk/src/@planx/components/List/Public/List.stories.tsx

diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
index bad6870d6f..2a43ebb628 100644
--- a/editor.planx.uk/src/@planx/components/List/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -60,7 +60,7 @@ export const SCHEMAS = [
   { name: "Protected spaces (GLA)", schema: ProtectedSpaceGLA },
   { name: "Open spaces (GLA)", schema: OpenSpaceGLA },
   { name: "Proposed advertisements", schema: ProposedAdvertisements },
-];
+] as const;
 
 function ListComponent(props: Props) {
   const formik = useFormik({
diff --git a/editor.planx.uk/src/@planx/components/List/Public/List.stories.tsx b/editor.planx.uk/src/@planx/components/List/Public/List.stories.tsx
new file mode 100644
index 0000000000..8095cb37fa
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Public/List.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import Wrapper from "../../fixtures/Wrapper";
+import { SCHEMAS } from "../Editor";
+import Editor from "../Editor";
+import ListComponent from "../Public";
+import Public from "./";
+
+const meta = {
+  title: "PlanX Components/List",
+  component: ListComponent,
+} satisfies Meta<typeof ListComponent>;
+
+type SchemaItem = (typeof SCHEMAS)[number];
+type SchemaNames = SchemaItem["name"];
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const schemaFinder = (name: SchemaNames) => {
+  const schemaObj = SCHEMAS.find((schema) => schema.name === name)?.schema;
+  return schemaObj || SCHEMAS[0].schema;
+};
+
+export const Basic: Story = {
+  args: {
+    title:
+      "Describe any residential units that are being removed or lost as part of the development",
+    description: "Add one or many units below",
+    schemaName: "Residential units (GLA) - Removed",
+    fn: "MockFn",
+    schema: schemaFinder("Residential units (GLA) - Removed"),
+  },
+};
+
+export const SingularItem: Story = {
+  args: {
+    title: "Describe the advertisements you want to add",
+    description: "Complete the questions below",
+    schemaName: "Proposed advertisements",
+    fn: "MockFn",
+    schema: schemaFinder("Proposed advertisements"),
+  },
+};
+
+export const WithEditor = () => {
+  return <Wrapper Editor={Editor} Public={Public} />;
+};