feat: Add extra long text input (500 characters) (#2544)

* feat: Add extra long text input (500 characters) * fix: Match operator to rule
theopensystemslab · Dec 8, 2023 · 8c074b9 · 8c074b9
1 parent 4d9dae8
commit 8c074b9
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx b/editor.planx.uk/src/@planx/components/TextInput/Editor.tsx
@@ -71,7 +71,11 @@ const TextInputComponent: React.FC<Props> = (props) => {
                 },
                 {
                   value: "long",
-                  label: "Long",
+                  label: "Long (250 characters)",
+                },
+                {
+                  value: "extraLong",
+                  label: "Extra long (500 characters)",
                 },
                 {
                   value: "email",

diff --git a/editor.planx.uk/src/@planx/components/TextInput/Public.tsx b/editor.planx.uk/src/@planx/components/TextInput/Public.tsx
@@ -48,8 +48,8 @@ const TextInputComponent: React.FC<Props> = (props) => {
               else if (type === "phone") return "tel";
               return "text";
             })(props.type)}
-            multiline={props.type === "long"}
-            rows={props.type === "long" ? 5 : undefined}
+            multiline={props.type && ["long", "extraLong"].includes(props.type)}
+            rows={props.type && ["long", "extraLong"].includes(props.type) ? 5 : undefined}
             name="text"
             value={formik.values.text}
             bordered

diff --git a/editor.planx.uk/src/@planx/components/TextInput/TextInput.stories.tsx b/editor.planx.uk/src/@planx/components/TextInput/TextInput.stories.tsx
@@ -16,6 +16,7 @@ export default {
       options: [
         TextInputType.Short,
         TextInputType.Long,
+        TextInputType.ExtraLong,
         TextInputType.Email,
         TextInputType.Phone,
       ],
@@ -33,11 +34,19 @@ export const EmptyFormShortText: StoryObj = {
 export const EmptyFormLongText: StoryObj = {
   args: {
     title: "Describe your project",
-    description: "Be as descriptive as you can",
+    description: "Be as descriptive as you can. You have 250 characters.",
     type: TextInputType.Long,
   },
 };
 
+export const EmptyFormExtraLongText: StoryObj = {
+  args: {
+    title: "Describe your project",
+    description: "Be as descriptive as you can. You have 500 characters.",
+    type: TextInputType.ExtraLong,
+  },
+};
+
 export const EmptyFormEmail: StoryObj = {
   args: {
     title: "What is your email?",

diff --git a/editor.planx.uk/src/@planx/components/TextInput/model.ts b/editor.planx.uk/src/@planx/components/TextInput/model.ts
@@ -7,6 +7,7 @@ export type UserData = string;
 export enum TextInputType {
   Short = "short",
   Long = "long",
+  ExtraLong = "extraLong",
   Email = "email",
   Phone = "phone",
 }
@@ -30,6 +31,9 @@ export const userDataSchema = (type?: TextInputType): SchemaOf<UserData> =>
         if (type === TextInputType.Long) {
           return "Your answer must be 250 characters or fewer.";
         }
+        if (type === TextInputType.ExtraLong) {
+          return "Your answer must be 500 characters or fewer.";
+        }
         if (type === TextInputType.Email) {
           return "Enter an email address in the correct format, like name@example.com";
         }
@@ -42,10 +46,13 @@ export const userDataSchema = (type?: TextInputType): SchemaOf<UserData> =>
           return true;
         }
         if (type === TextInputType.Short) {
-          return Boolean(value && value.length < 120);
+          return Boolean(value && value.length <= 120);
         }
         if (type === TextInputType.Long) {
-          return Boolean(value && value.length < 250);
+          return Boolean(value && value.length <= 250);
+        }
+        if (type === TextInputType.ExtraLong) {
+          return Boolean(value && value.length <= 500);
         }
         if (type === TextInputType.Email) {
           return Boolean(value && emailRegex.test(value));

diff --git a/editor.planx.uk/src/ui/Radio.tsx b/editor.planx.uk/src/ui/Radio.tsx
@@ -1,3 +1,4 @@
+import Box from "@mui/material/Box";
 import React from "react";
 
 import OptionButton from "./OptionButton";
@@ -10,7 +11,7 @@ interface RadioProps<T> {
 
 export default function Radio<T>(props: RadioProps<T>) {
   return (
-    <div>
+    <Box sx={{ maxWidth: "fit-content", "& button": { width: "100% " } }}>
       {props.options.map((option, index) => (
         <OptionButton
           selected={props.value === option.value}
@@ -22,6 +23,6 @@ export default function Radio<T>(props: RadioProps<T>) {
           {option.label}
         </OptionButton>
       ))}
-    </div>
+    </Box>
   );
 }