fix: display schema field descriptions if set (#3620)

theopensystemslab · Sep 4, 2024 · 9ef6043 · 9ef6043
1 parent 79b6d52
commit 9ef6043
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 2 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx
@@ -39,6 +39,12 @@ describe("Basic UI", () => {
     expect(textInput).toBeInTheDocument();
     expect(textInput.type).toBe("text");
 
+    // Input field descriptions are generated from schema if they exist...
+    const textInputDescription = getByText(
+      /Please make it cute/,
+    ) as HTMLElement;
+    expect(textInputDescription).toBeInTheDocument();
+
     // Props are correctly read
     const emailInput = getByLabelText(
       /What's their email address?/,

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/ChecklistFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/ChecklistFieldInput.tsx
@@ -7,10 +7,11 @@ import ChecklistItem from "ui/shared/ChecklistItem";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const ChecklistFieldInput: React.FC<Props<ChecklistField>> = (props) => {
   const {
-    data: { title, options },
+    data: { title, description, options },
     formik,
   } = props;
   const { id, errorMessage, name, value } = getFieldProps(props);
@@ -38,6 +39,7 @@ export const ChecklistFieldInput: React.FC<Props<ChecklistField>> = (props) => {
 
   return (
     <InputLabel label={title} id={`checklist-label-${id}`}>
+      {description && <FieldInputDescription description={description} />}
       <ErrorWrapper error={errorMessage} id={id}>
         <Grid container component="fieldset">
           <legend style={visuallyHidden}>{title}</legend>

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/DateFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/DateFieldInput.tsx
@@ -6,13 +6,17 @@ import InputLabel from "ui/public/InputLabel";
 import DateInput from "ui/shared/DateInput";
 
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const DateFieldInput: React.FC<Props<DateField>> = (props) => {
   const { data, formik } = props;
   const { id, errorMessage, name, value } = getFieldProps(props);
 
   return (
     <InputLabel label={data.title} htmlFor={id}>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
       <Box sx={{ display: "flex", alignItems: "baseline" }}>
         <DateInput
           value={value?.toString()}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx
@@ -7,11 +7,12 @@ import InputLabel from "ui/public/InputLabel";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
   const {
     formik,
-    data: { title, mapOptions },
+    data: { title, description, mapOptions },
   } = props;
   const { id, errorMessage, name } = getFieldProps(props);
 
@@ -47,6 +48,7 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
 
   return (
     <InputLabel label={title} id={`map-label-${id}`} htmlFor={id}>
+      {description && <FieldInputDescription description={description} />}
       <ErrorWrapper error={errorMessage} id={id}>
         <MapContainer environment="standalone">
           {/* @ts-ignore */}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/NumberFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/NumberFieldInput.tsx
@@ -7,6 +7,7 @@ import InputRowLabel from "ui/shared/InputRowLabel";
 
 import { DESCRIPTION_TEXT, ERROR_MESSAGE } from "../../constants";
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const NumberFieldInput: React.FC<Props<NumberField>> = (props) => {
   const fieldProps = getFieldProps(props);
@@ -15,6 +16,9 @@ export const NumberFieldInput: React.FC<Props<NumberField>> = (props) => {
 
   return (
     <InputLabel label={data.title} htmlFor={id}>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
       <Box sx={{ display: "flex", alignItems: "baseline" }}>
         <Input
           {...fieldProps}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/RadioFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/RadioFieldInput.tsx
@@ -7,6 +7,7 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import BasicRadio from "../../Radio/BasicRadio";
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const RadioFieldInput: React.FC<Props<QuestionField>> = (props) => {
   const { data, formik } = props;
@@ -26,6 +27,9 @@ export const RadioFieldInput: React.FC<Props<QuestionField>> = (props) => {
       >
         {data.title}
       </FormLabel>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
       <ErrorWrapper id={`${id}-error`} error={errorMessage}>
         <RadioGroup
           aria-labelledby={`radio-buttons-group-label-${id}`}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/SelectInputField.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/SelectInputField.tsx
@@ -6,13 +6,17 @@ import InputLabel from "ui/public/InputLabel";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const SelectFieldInput: React.FC<Props<QuestionField>> = (props) => {
   const { data, formik } = props;
   const { id, errorMessage, name, value } = getFieldProps(props);
 
   return (
     <InputLabel label={data.title} id={`select-label-${id}`}>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
       <ErrorWrapper id={`${id}-error`} error={errorMessage}>
         <SelectInput
           bordered

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/TextFieldInput.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/TextFieldInput.tsx
@@ -5,6 +5,7 @@ import Input from "ui/shared/Input";
 
 import { DESCRIPTION_TEXT, ERROR_MESSAGE } from "../../constants";
 import { getFieldProps, Props } from ".";
+import { FieldInputDescription } from "./shared";
 
 export const TextFieldInput: React.FC<Props<TextField>> = (props) => {
   const fieldProps = getFieldProps(props);
@@ -13,6 +14,9 @@ export const TextFieldInput: React.FC<Props<TextField>> = (props) => {
 
   return (
     <InputLabel label={data.title} htmlFor={id}>
+      {data.description && (
+        <FieldInputDescription description={data.description} />
+      )}
       <Input
         {...fieldProps}
         onChange={formik.handleChange}

diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/shared.tsx b/editor.planx.uk/src/@planx/components/shared/Schema/InputFields/shared.tsx
@@ -0,0 +1,14 @@
+import Typography from "@mui/material/Typography";
+import React from "react";
+
+interface FieldInputDescriptionProps {
+  description: string;
+}
+
+export const FieldInputDescription: React.FC<FieldInputDescriptionProps> = ({
+  description,
+}) => (
+  <Typography variant="body2" mb={1.5}>
+    {description}
+  </Typography>
+);
diff --git a/editor.planx.uk/src/@planx/components/shared/Schema/model.ts b/editor.planx.uk/src/@planx/components/shared/Schema/model.ts
@@ -85,6 +85,7 @@ export type MapField = {
   type: "map";
   data: {
     title: string;
+    description?: string;
     fn: string;
     mapOptions?: {
       basemap?: "OSVectorTile" | "OSRaster" | "MapboxSatellite" | "OSM";