feat(form): add help to sections

Before, it was possible to add `help` only to form fields.
But now consumers can add `help` to section headers,
and collapsible sections in forms.

Author: Kiarokh

src/components/form/examples/help-form-schema.ts

@@ -8,6 +8,11 @@ export interface HelpFormData {
         email?: string;
         source?: Source;
     };
+    additionalInfo?: {
+        phone?: string;
+        jobTitle?: string;
+        teamSize?: number;
+    };
 }
 
 export const schema: FormSchema<HelpFormData> = {
@@ -16,6 +21,11 @@ export const schema: FormSchema<HelpFormData> = {
         address: {
             type: 'object',
             title: 'Book a demo',
+            lime: {
+                help: {
+                    value: 'Fill in your details below and we will get back to you within **24 hours**.',
+                },
+            },
             properties: {
                 name: {
                     type: 'string',
@@ -92,5 +102,45 @@ export const schema: FormSchema<HelpFormData> = {
                 },
             },
         },
+        additionalInfo: {
+            type: 'object',
+            title: 'Additional Information',
+            description:
+                'Optional details that help us _tailor_ our demo to your needs',
+            properties: {
+                phone: {
+                    type: 'string',
+                    title: 'Phone Number',
+                    description: 'Your direct phone number',
+                    lime: {
+                        help: {
+                            value: 'We may call you to confirm the demo appointment.',
+                        },
+                    },
+                },
+                jobTitle: {
+                    type: 'string',
+                    title: 'Job Title',
+                    description: 'Your current role or position',
+                },
+                teamSize: {
+                    type: 'integer',
+                    title: 'Team Size',
+                    description: 'How many people are in your team?',
+                    lime: {
+                        help: {
+                            value: 'This helps us understand the scale of your organization and recommend the right plan.',
+                        },
+                    },
+                },
+            },
+            lime: {
+                collapsible: true,
+                collapsed: false,
+                help: {
+                    value: 'These optional fields allow us to **personalize** your demo experience.',
+                },
+            },
+        },
     },
 };

src/components/form/help/help.ts

@@ -4,19 +4,26 @@ import { FormSchema } from '../form.types';
 /**
  *
  * @param schema
+ * @param extraProps - additional props to pass to the limel-help element
  */
-export function getHelpComponent(schema: FormSchema) {
+export function getHelpComponent(
+    schema: FormSchema,
+    extraProps?: Record<string, unknown>
+) {
     const help = schema.lime?.help;
 
     if (!help) {
         return;
     }
 
     if (typeof help === 'string') {
-        return React.createElement('limel-help', { value: help });
+        return React.createElement('limel-help', {
+            value: help,
+            ...extraProps,
+        });
     }
 
     const helpProps = help;
 
-    return React.createElement('limel-help', helpProps);
+    return React.createElement('limel-help', { ...helpProps, ...extraProps });
 }

src/components/form/templates/object-field.ts

@@ -3,12 +3,14 @@ import {
     FormLayoutType,
     LimeLayoutOptions,
     FormLayoutOptions,
+    FormSchema,
 } from '../form.types';
 import { renderDescription, renderTitle } from './common';
 import { GridLayout } from './grid-layout';
 import { RowLayout } from './row-layout';
 import { LimeObjectFieldTemplateProps, ObjectFieldProperty } from './types';
 import { JSONSchema7 } from 'json-schema';
+import { getHelpComponent } from '../help';
 
 export const ObjectFieldTemplate = (props: LimeObjectFieldTemplateProps) => {
     const id = props.idSchema.$id;
@@ -27,14 +29,31 @@ function renderFieldWithTitle(props: LimeObjectFieldTemplateProps) {
     return React.createElement(
         React.Fragment,
         {},
-        renderTitle(props.title),
+        renderSectionHeader(props),
         renderDescription(props.description),
         renderProperties(props.properties, props.schema)
     );
 }
 
+function renderSectionHeader(props: LimeObjectFieldTemplateProps) {
+    const help = getHelpComponent(props.schema as FormSchema);
+    if (!help) {
+        return renderTitle(props.title);
+    }
+
+    return React.createElement(
+        React.Fragment,
+        {},
+        renderTitle(props.title),
+        help
+    );
+}
+
 function renderCollapsibleField(props: LimeObjectFieldTemplateProps) {
     const defaultOpen = !isCollapsed(props.schema);
+    const helpElement = getHelpComponent(props.schema as FormSchema, {
+        slot: 'header',
+    });
 
     return React.createElement(
         'limel-collapsible-section',
@@ -46,6 +65,7 @@ function renderCollapsibleField(props: LimeObjectFieldTemplateProps) {
             ),
             'is-open': defaultOpen,
         },
+        helpElement,
         renderDescription(props.description),
         renderProperties(props.properties, props.schema)
     );