[IMP] website_form: allow to add description to field

It is now possible to add a description to any field.

Part of: https://github.com/odoo/odoo/pull/47949
task-2011583

addons/website_form/static/src/snippets/s_website_form/options.js

@@ -258,6 +258,7 @@ const FieldEditor = FormEditor.extend({
         const classList = this.$target[0].classList;
         const textarea = this.$target[0].querySelector('textarea');
         const input = this.$target[0].querySelector('input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], textarea');
+        const description = this.$target[0].querySelector('.s_website_form_field_description');
         field.placeholder = input && input.placeholder;
         if (input) {
             // textarea value has no attribute,  date/datetime timestamp property is formated
@@ -267,6 +268,7 @@ const FieldEditor = FormEditor.extend({
         }
         // property value is needed for date/datetime (formated date).
         field.propertyValue = input && input.value;
+        field.description = description && description.textContent;
         field.rows = textarea && textarea.rows;
         field.required = classList.contains('s_website_form_required');
         field.modelRequired = classList.contains('s_website_form_model_required');
@@ -790,6 +792,19 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
     // Options
     //----------------------------------------------------------------------
 
+    /**
+     * Add a description to the field input
+     */
+    appendDescription: async function (previewMode, value, params) {
+        const description = this.$target[0].querySelector('.s_website_form_field_description');
+        if (description && value) {
+            description.textContent = value;
+        } else {
+            const field = this._getActiveField();
+            field.description = value;
+            await this._replaceField(field);
+        }
+    },
     /**
      * Replace the current field with the custom field selected.
      */
@@ -902,6 +917,10 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
      */
     _computeWidgetState: function (methodName, params) {
         switch (methodName) {
+            case 'appendDescription': {
+                const description = this.$target[0].querySelector('.s_website_form_field_description');
+                return description ? description.textContent : '';
+            }
             case 'customField':
                 return this._isFieldCustom() ? this._getFieldType() : '';
             case 'existingField':

addons/website_form/static/src/xml/website_form_editor.xml

@@ -42,6 +42,7 @@
                 </label>
                 <div class="col-sm">
                     <t t-raw="0"/>
+                    <t t-call="website_form.field_description"/>
                 </div>
             </div>
             <t t-else="">
@@ -49,6 +50,7 @@
                      <t t-call="website_form.label_content"/>
                 </label>
                 <t t-raw="0"/>
+                <t t-call="website_form.field_description"/>
             </t>
         </div>
     </t>
@@ -62,9 +64,11 @@
         <t t-else="">
             <span class="s_website_form_mark" t-if="field.formatInfo.optionalMark" t-esc="' ' + field.formatInfo.mark"/>
         </t>
-        <span t-if="['email_cc', 'email_to'].includes(field.name)" title="Separate email addresses with a comma.">
-            <i class="fa fa-info-circle"/>
-        </span>
+    </t>
+
+    <t t-name="website_form.field_description">
+        <t t-if="['email_cc', 'email_to'].includes(field.name) and !field.description" t-set="field.description" t-value="'Separate email addresses with a comma.'"/>
+        <small t-if="field.description" t-esc="field.description" class="s_website_form_field_description form-text text-muted"/>
     </t>
 
     <!-- Hidden Field -->

addons/website_form/views/snippets/s_website_form.xml

@@ -102,6 +102,7 @@
             <we-input string="Placeholder" class="o_we_large_input"
                 data-select-attribute="" data-attribute-name="placeholder"
                 data-apply-to="input[type='text'], input[type='email'], input[type='number'], input[type='tel'], input[type='url'], textarea"/>
+            <we-input string="Description" data-append-description=""/>
             <we-input string="Label Name" class="o_we_large_input" data-set-label-text=""/>
             <we-button-group string="Label Position">
                 <we-button title="Hide"