feat(help): render helper component in form

Lundalogik · May 10, 2023 · f618417 · f618417
1 parent b4f97fa
commit f618417
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 14 deletions.
diff --git a/src/components/form/adapters/widget-adapter.ts b/src/components/form/adapters/widget-adapter.ts
@@ -106,6 +106,22 @@ export class LimeElementsWidgetAdapter extends React.Component {
         return value || widgetValue;
     }
 
+    private getHelperComponent() {
+        const help = this.props.widgetProps.schema?.lime?.help;
+
+        if (!help) {
+            return;
+        }
+
+        const helpProps =
+            typeof help === 'string' ? { content: help } : { ...help };
+
+        return React.createElement(LimeElementsAdapter, {
+            name: 'limel-help',
+            elementProps: helpProps,
+        });
+    }
+
     render() {
         const { name, events, extraProps } = this.props;
         const disabled = this.isDisabled();
@@ -118,20 +134,23 @@ export class LimeElementsWidgetAdapter extends React.Component {
             ...events,
         };
 
-        return React.createElement(LimeElementsAdapter, {
-            name: name,
-            elementProps: {
-                value: value,
-                label: this.getLabel(),
-                disabled: disabled,
-                readonly: readonly,
-                required: this.isRequired(),
-                invalid: this.isInvalid(),
-                'helper-text': this.getHelperText(),
-                ...extraProps,
-            },
-            events: newEvents,
-        });
+        return [
+            React.createElement(LimeElementsAdapter, {
+                name: name,
+                elementProps: {
+                    value: value,
+                    label: this.getLabel(),
+                    disabled: disabled,
+                    readonly: readonly,
+                    required: this.isRequired(),
+                    invalid: this.isInvalid(),
+                    'helper-text': this.getHelperText(),
+                    ...extraProps,
+                },
+                events: newEvents,
+            }),
+            this.getHelperComponent(),
+        ];
     }
 
     private isDisabled() {

diff --git a/src/components/form/examples/form-with-help.tsx b/src/components/form/examples/form-with-help.tsx
@@ -0,0 +1,30 @@
+import { Component, h, State } from '@stencil/core';
+import { schema } from './help-form-schema';
+
+/**
+ * Form wich use help component
+ * @link nhelp-form-schema.ts
+ */
+@Component({
+    tag: 'limel-example-form-with-help',
+    shadow: true,
+})
+export class NestedFormExample {
+    @State()
+    private formData: object = {};
+
+    public render() {
+        return [
+            <limel-form
+                onChange={this.handleFormChange}
+                value={this.formData}
+                schema={schema}
+            />,
+            <limel-example-value value={this.formData} />,
+        ];
+    }
+
+    private handleFormChange = (event) => {
+        this.formData = event.detail;
+    };
+}
diff --git a/src/components/form/examples/help-form-schema.ts b/src/components/form/examples/help-form-schema.ts
@@ -0,0 +1,40 @@
+export const schema = {
+    type: 'object',
+    properties: {
+        address: {
+            type: 'object',
+            title: 'Location',
+            description: 'Please enter your location',
+            properties: {
+                planet: {
+                    type: 'string',
+                    title: 'Planet',
+                    lime: {
+                        help: {
+                            content: 'Please specify your home location',
+                        },
+                    },
+                },
+                galaxy: {
+                    type: 'string',
+                    title: 'Galaxy',
+                    lime: {
+                        help: {
+                            content: 'Read more about Space',
+                            readMoreLink: {
+                                href: 'https://en.wikipedia.org/wiki/Galaxy',
+                                title: 'Galaxy intro',
+                                target: '_blank',
+                                text: 'here...',
+                            },
+                        },
+                    },
+                },
+                zipcode: {
+                    type: 'integer',
+                    title: 'Zip code',
+                },
+            },
+        },
+    },
+};
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
@@ -163,6 +163,14 @@
 }
 
 .form-group {
+    position: relative;
+
+    limel-help {
+        position: absolute;
+        top: calc(var(--form-row-gap, 1rem) * -0.5);
+        left: calc(var(--form-column-gap, 1rem) * -0.5);
+    }
+
     .mdc-typography--headline1,
     .mdc-typography--body1 {
         color: rgb(var(--contrast-1100));

diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
@@ -38,6 +38,7 @@ import { mapValues } from 'lodash-es';
  * @exampleComponent limel-example-custom-error-message
  * @exampleComponent limel-example-server-errors
  * @exampleComponent limel-example-form-row-layout
+ * @exampleComponent limel-example-form-with-help
  */
 @Component({
     tag: 'limel-form',

diff --git a/src/components/form/form.types.ts b/src/components/form/form.types.ts
@@ -1,3 +1,4 @@
+import { Components } from '@limetech/lime-elements';
 import { EventEmitter } from '@stencil/core';
 
 export interface ValidationStatus {
@@ -165,6 +166,8 @@ export interface LimeSchemaOptions {
      * Mark the field as disabled
      */
     disabled?: boolean;
+
+    help?: string | Components.LimelHelp;
 }
 
 /**